CSS - Css And Tables: Aligning Two Images In A Cell

Hi,

I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding.

The css is just a simple layout:

Code:

body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}

#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}

#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}

#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}

#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}

#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}

#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}

#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}

but in the mainimage div I am inserting the following table and it is not displaying correctly in FF:

Code:

    <table width="835" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td> 
        <td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td> 
        <td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td> 
        <td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td> 
      </tr> 
      <tr> 
        <td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td> 
      </tr> 
    </table>

s anyone able to give me a pointer?

Thanks....

Ok just so you know what I am trying to do here is a link to the problem page. -Problem aligning images-

Well ok what I want is for the position of the images to be displayed in absolute positions to the page and not to the image before it. Since I am really new to CSS I can't seem to find a good way to do this (without using tables UGH!). I have read about using float and div tags but not sure how to go about it. Here is a link to my other page of pics that display as I want them only because the pics are all the same size.

-Images displayed correctly-

This is the only code I have so far for displaying the images. The first img style aligns the image to the left and the 2nd to center and the 3rd to the right.

Code:

/* Set the style for image(s) displayed */
img.left
{
	margin-left: 10em;
}

img.center
{
	margin-left: 3em;

img.right
{
	margin-left: 3em;
}

Hope that makes sense,
Gerbill

After putting a js slideshow at the top of the page I am having trouble getting anything to right of it. Every defaults to the next line.

Any tips?

Thank you!

tinassweetshop.com

Hi!

I'm trying to implement an image drop-down menu. Everything seems to be working but there is an element that is pushing my second image button down and I can't seems to figure where it's coming from. It seems to be my link that is causing it but i'm stumpped.

I've set up a test page so you can see what is happening.
the site is at test .sylvaindelisle .com

Thanks for taking the time to take a look.

I am having problems with vertical aligning both texts and images. Can someone show me a working example or tell me where I messed up the codes below?

http://efetuncel.win.aplus.net/ryt/new/

Code:

#rcontent{
	float:right;
	width:490px;
	padding:0px;
}
#rcontent .category{
	float:left;
	width:240px;
	height:120px;
	margin:30px 0px 0px 5px;
	background: url(images/bg_home_category.gif)
}
#rcontent .category img{
	float:left;
	vertical-align:middle;
}


        <div id="rcontent">
            <div class="category">
            	<img src="images/home_categories_gb.gif" alt="" />
            </div>
            <div class="category">
            </div>            
            <div class="category">
            </div>
            <div class="category">
            </div>   
	    </div>

The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables?
The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7.
Code:

#title {
	margin-left: 170px;
	background: url(./imgs/title_mdl.gif) repeat-x;
	width: auto;
	height: 40px;
}
#title span {
	font-size: large;
	text-align: center;
}
#title img {
	width: 82px;
	height: 40px;
}

Code:

<div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div>

Hello,

I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped.

I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre.

I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this:

Code:

		                    [             ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
                                    [             ]

---- variable empty space depending on browser width

I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great.


Code:

#header {
    	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}
	
#title {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 400px;
	}
	
#imgleft {
	float: left;
	text-align: right;
	width: 30%
	}
	
#imgright {
	float:right;
	text-align: left;
	width: 30%
	}

<div id="header">
			<div id="imgleft">
			<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
			<img src="l_about.gif" alt="About">
			</div>
			<div id="imgright">
			<img src="l_blog.gif" alt="Blog">
			<img src="l_contact.gif" alt="Contact">
			</div>
			<div id="title">
			<img src="title.gif" height="84" width="400" alt="Title">
			</div>
			
		</div>

http://www.kafadrian.com/juggernaut/index.html
is what i have so far
I want it to look like:
http://www.kafadrian.com/juggernaut/layout.jpg

The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them

I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images.

am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem.

I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work.

the code for the site is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">

<script type="text/javascript">
<!--

var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";

var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";

var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";

var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";

var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";

var image16 = new Image();
image16.src = "founded.jpg";

//-->
</script>
<script type="text/javascript">
<!--

function roll(img_name1, img_src1, img_name2, img_src2)
   {
   document[img_name1].src = img_src1;
   document[img_name2].src = img_src2;
   }

//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
  <tr height="34">
    <td rowspan="4">
      <img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
        <img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
      </a>
    </td>
  </tr>
    <tr>
    <td>
      <img style="display:block" src="line_right.jpg" width="240" height="4"/>
    </td>
  </tr>
  <tr>
    <td>
      <img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
    </td>
  </tr>
</table>
</body>
</html>

From what I've read its good practice to use tables when something is.. well Tabular.

In the example I've attached the rows of shoes could expand or extract, so the vines in the lower left part would move up/down accordingly.

I have a few ideas on how to integrate this, but I Just wanted to throw it out there to the community and see if anyone came up with some super slick solution.

What I'm after:
URL

My try: http://westkoast.net/cssexample/example.html

I know there is no real "right or wrong" way to do this. Any other ideas?

currently i have links defined as a certain color and changes to a certain color when i hover over them.. i have a table which has these links inside the cells and when i hover over the cell, the background of the cell changes color but the link wont change color until i hover over the link.. is there anyway so that when i hover over the cell i can make the link change color too?

the problem is i have some padding for the cells, so once i go inside the cell but dont hover exactly over the link, the background will change but the link won't until i hover over it

thanks

I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong.

Correct look Incorrect look

I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any.

Here is my main CSS:
Code:

	body		{ background-color: #FFFFFF; }
	a		{ text-decoration: none; font-weight: bold; }
	a:link		{ color: #003366; background-color: transparent; }
	a:visited	{ color: #003300; background-color: transparent; }
	a:active	{ color: #339933; background-color: transparent; }
	a:hover		{ text-decoration: underline; }
	table		{ border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
	td, th		{ border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
	tr.one		{ background-color: #FFFFFF; }
	tr.two		{ background-color: #DDDDDD; }
	table.squares	{ border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
	td.square	{ border: 1px solid grey; padding: 4px; }
	td.nopadding	{ padding: 0px; }
	.default	{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
	.h1		{ font-size: 200%; font-weight: bold; text-align: center;}
	.h2		{ font-size: 120%; font-weight: bold; }
	.h3		{ font-weight: bold; }
	.step		{ font-size: 150%; font-weight: bold; color: #999999; }

Here is one of the sets of squares:
Code:

<table class="squares">
    <tr>
        <td class="square" style="background-color: #CCCC66"></td>
        <td class="square" style="background-color: #CC9966"></td>
        <td class="square" style="background-color: #990000; border: black"><td>
        <td class="square" style="background-color: #669966"></td>
        <td class="square" style="background-color: #669999"></td>
    </tr>
</table>

And finally, here is one of my progress bars:
Code:

<table style="color: white; width: 100px">
    <tr>
        <td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
        <td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
    </tr>
</table>

And in case that code is not enough, here is a link to the full HTML.

According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers?

My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work?

Hi there!

This might seem really basic but I don't seem to be able to remove the default border from a cell I created.

The code looks like this:

"<p> </p>
<table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;">
<tbody>
<tr>
<td>
<div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;">
<p align="center">
<img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" />&nbsp;</p>
<p align="center">
</p>
<p> </p>
</div>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;&nbsp;</p>

How shall I do to hide the border?

Thanks in advance!

/Kristoffer

I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too.

I want a layout with two tables next to each at the top and then another below.

The two at the top are working fine, but the one below keeps jumping back up to the top.

I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution.

The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why.

Here is my code for my page and CSS.

If anyone can help I'd be most grateful.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
	document.getElementById("nav" + num).style.paddingTop = '0px'
	document.getElementById("nav" + num).style.paddingBottom = '0px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '10px';
	document.getElementById("nav" + num).style.borderBottomWidth = '10px';
	
}

function navoff(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
	document.getElementById("nav" + num).style.paddingTop = '8px'
	document.getElementById("nav" + num).style.paddingBottom = '8px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '2px';
	document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>

</head>

<body>
<div class="main">

<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>

<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

body {
	padding-right: 4%;
	padding-left: 4%;
	padding-top: 30px;
	padding-bottom: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #000000;
	background-color: #EEEEEE;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
.main {
	background:#FFFFFF;
	border: 10px solid #36393D;
	width: 89%;
	padding: 5%;
}
.nav {
	padding: 8px;
	background-color: #C3D9FF;
	vertical-align: middle;
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #36393D;
	cursor:pointer;
	border: 2px solid #36393D;
}

I have a table in which I use divs to put content, here's my simple table;

Code:

<table border='1' width='500'>
 <tr>
  <td colspan='2'><div id='navHeader'>Header</div></td>
 </tr>
 <tr>
  <td><div id='navContent'>content</div></td>
  <td class='fullheight' bgcolor='yellow'><div id='navSidebar'>nav bar</div></td>
 </tr>
</table>

and here's the CSS code

Code:

#navHeader
{
 margin: 10px;
 border: 1px solid #000000;
}

#navContent
{
 margin: 10px;
 border: 1px solid #000000;
 height: 500px;
 padding: 10px;
}

#navSidebar
{
 margin: 10px;
 border: 1px solid #000000;
 padding: 10px;
}

.fullheight
{
 height: 100%;
}

you can see the result here : http://www.net-cube.ca/fullheight/

as you can see, the 'nav bar' isn't taking 100% in height. In the CSS, I defined a 100% height rule (fullheight) and I'm calling it in it's appropriate td cell, it's parent, to make it 100% full height, I painted it yellow.

What I want, is that #id navSidebar div to take 100% of the cell height, like the 100% width.

I know I should not be using tables, but I'm starting to get used to CSS, I was doing tables layout for years ... and years, so much clear for me now, I' m making the transition.

My problem is that the 'navContent' div will be much longer in height than the navSidebar div, but I want them equals, how can I achieve that??

I could define '500px' in the navSidebar too, but I don't want to, I don't want to specify any length at all, this line will disappear when content will take place.

Thanks

How do i apply visible and formated border to a certain cells without afecting the entire column or row?

Im using the border properties like:

border-buttom-style
border-top-style
border-left-style
border-right-style
border-width
border-color

etc, etc, but when apply the style the colum or the row is affected entirely, this makes my top sliced image (header) with the separators visible. Im new to css and need some help in doing this. Thx