Table > Div 1

[iisman]

I am new to using divs and css for layout. I have a simple one row, 6 column table, and would like to know if I have missed a better way of coding it. Also, I have a css instruction to align the text vertically in the middle, which for some reason does not happen. Any suggestions there?

.tableq {display: table; border: 0px solid red; width: 465px; }

.rowq {display: table-row;}
.one {border: 0px; display: table-cell; width: 22px; float: left;}

.two {border: 0px; display: table-cell; width: 104px; height: 44px; float: left; background-color: #282484; vertical-align: middle; }

.three {border: 0px; display: table-cell; width: 104px; height: 44px; float: left; background-color: #282484; vertical-align: bottom; }

.four {border: 0px; display: table-cell; width: 104px; height: 44px; float: left; background-color: #282484; vertical-align: middle; }

.five {border: 0px; display: table-cell; width: 104px; height: 44px; float: left; background-color: #282484; vertical-align: middle; }

.six {border: 0px; display: table-cell; width: 22px; float: left;}

...and the xhtml:

<div class="tableq">
<div class="rowq">
<div class="one"><img src="images/linkbarleft.gif" alt="alt" /></div>	
<div class="two"><a class="helpcontentyel" href="blogsite/">Archives</a></div>	
<div class="three"><a class="helpcontentyel" href="blogsite/">Archives</a></div>	
<div class="four"><a class="helpcontentyel" href="blogsite/">Archives</a></div>	
<div class="five"><a class="helpcontentyel" href="blogsite/">Archives</a></div>	 						 						 						
<div class="six"><img src="images/linkbarright.gif" alt="alt" /></div>
</div>
</div>

Thanks in advance for any help.

 

[Tarwn]

Well, first of all there is no need to create independant CSS for each and every div that you have, since the are all very similar. This appears to basically be a nav bar with an image on each end. technically this could be implemented in several ways, but I'll start with what you have and work from there.

For starters, there is no need to create seperate classes for the two end images. They don't even need div's, really, since you could apply the style directly to the images. Additionally you don't need to define borders here unless some other piece of CSS is adding them:

.rowq img{ float: left; width: 22px; }

Now, each of your links acts exactly the same hee, so we could condense all of those down into a single class, maybe call it navlink, the HTML now looks like:

<div class="tableq">
<div class="rowq">
<img src="images/linkbarleft.gif" alt="alt" />    
<div class="navlink"><a class="helpcontentyel" href="blogsite/">Archives</a></div>    
<div class="navlink"><a class="helpcontentyel" href="blogsite/">Archives</a></div>    
<div class="navlink"><a class="helpcontentyel" href="blogsite/">Archives</a></div>    
<div class="navlink"><a class="helpcontentyel" href="blogsite/">Archives</a></div>
<img src="images/linkbarright.gif" alt="alt" />
</div>
</div>

We could then alter the CSS to only have one class for the links:

.navlink {border: 0px; display: table-cell; width: 104px; height: 44px; float: left; background-color: #282484; vertical-align: middle; }

Now to clean up the CSS a little. I don't believe the display: table, etc is supported by IE, and we don't really need it, as we can line up everything on one row fairly easily. The border is unnecessary unless it is being set elsewhere, so that can be removed as well. vertical-align does not do the same thing as valign does, it aligns text based on the space already allocated for it, so that can be removed as well. This leaves us with:

.tableq { width: 465px; }
.navlink {border: 0px; display: table-cell; width: 104px; height: 44px; float: left; background-color: #282484; vertical-align: middle; }
.rowq img{ float: left; width: 22px; }

Now, I could see you were trying to center the text vertically, so lets add in a little more CSS to add an upper margin to the anchor tags. To make this work we will also have to change the diaply type ofthe anchor tags, leaving us with something like:

.navlink a{ display: block; margin-top: 10px; }

So for the HTML we now have:

<div class="tableq">
<div class="rowq">
<img src="images/linkbarleft.gif" alt="alt" />    
<div class="navlink"><a class="helpcontentyel" href="blogsite/">Archives</a></div>    
<div class="navlink"><a class="helpcontentyel" href="blogsite/">Archives</a></div>    
<div class="navlink"><a class="helpcontentyel" href="blogsite/">Archives</a></div>    
<div class="navlink"><a class="helpcontentyel" href="blogsite/">Archives</a></div>
<img src="images/linkbarright.gif" alt="alt" />
</div>
</div>

And for the CSS we now have:

.tableq { width: 465px; }
.navlink { width: 104px; height: 44px; float: left; background-color: #282484; }
.navlink a{ display: block; margin-top: 10px; }
.rowq img{ float: left; width: 22px; }

Ths is just a start based on your own code. There are other methods for implementing something like this. One thing I would probably consider would be to add back the div's that had images in them, set a background color for those divs, and display the images using the background-image attribute. This way you get around IE's nasty little habit of showing a red X box instead of the alternate text as well as overall keepingthe layout looking good if the images get moved or something like that. These images are not really part of the content and therefore don't need to be in image tags with titles and alts, while placing them in the CSS gives you more flexibility for changing them later on.

-T

 

[iisman]

Tarwn,

Wow. Thank you so much for your thoroughness and for taking the time to explain this. It has been an immense help! You should think about doing an FAQ for those migrating from using tables for layout to using divs. There are a lot of them out there, but most are not thorough enough.

Also, kudos to you on your personal web site. I have used it in the past and it has been very helpful. Can;t wait to see the changes.

Cheers.

 

[Vragabond]

The standards driven layouts, although popularly called div layouts are not that. They use semantically correct elements. So let's talk semantics a little bit.

First, lets talk about your code. As far as standards compliant browsers are concerned, your original code was still table based. Using table tags or assigning display property to table, table-row and table-cell is the same for those browsers. It might not be the same to IE, due to its lack of proper support of that property. So what you had in the beginning was semantically incorrect table.

Now you have a list made out with divs. This looks like a navigation list of some sort, a list spread out horizontally on the page. As you've seen, I overused the word list, because you've underused an element unordered list, which is semantically the best element to use for navigations. So, I suggest you read up on Taming Lists from A list apart to see how it is done.

 

[iisman]

okay...great advice. I can see how it makes sense to go with an unordered list. I've also decided to use the background-image attribute for the two ends of the nav.

I've ended up with a totally different bunch of code, and i'm hoping that I could get one more critique on the techniques. i suspect that again, I may have used some redundant CSS, but not totally sure. I'd obviously like to keep it as trim and concise as possible.

The xhtml:

<div id="navimg"></div>
<div id="base">
<ul id="menu">
<li><a href="#nogo">Item one</a></li>
<li><a href="#nogo">Item two</a></li>
<li><a href="#nogo">Item three</a></li>
<li><a href="#nogo">Item four</a></li>
</ul>
</div>
<div id="navimgright"></div>

...and the CSS file for this:

#base {
	border: 0px solid #000;
	margin-bottom: 25px;
	width: 416px;
	padding: 0px;
	height: 44px;
	float: left;
	}
	
#navimg {
	border: 0px solid #000;
	margin: 0px;
	background-image: url('[URL unfurl="true"]http://www.robarspages.ca/photosite/images/linkbarleft.gif');[/URL]
	width: 22px;
	height: 44px;
	float: left;
	display: inline;
	padding:0px;
	}
	
#navimgright {
	border: 0px solid #000;
	margin: 0px;
	background-image: url('[URL unfurl="true"]http://www.robarspages.ca/photosite/images/linkbarright.gif');[/URL]
	width: 24px;
	height: 44px;
	float: left;
	display: inline;
	padding:0px;
	}	

#menu {
	padding:0;
	margin:0;
	color:#fff;
	}

#menu li {
	display:inline;
	}

#menu li a {
	padding:0px;
	background:#282484;
	color:#ffff99;
	float:left;
	border:0px solid #000;
	height: 44px;
	width: 104px;
	}

#menu li a:hover {
	background:#282484;
	color:#cb7901;
	}

 

[ChrisHunt]

That's a big improvement, but you can make it leaner still by not using seperate <div>s for the background images. The trick with CSS is to start with the minimum HTML elements, classes and ids, and to only add them in as you need them. You should be able to do this:

<div id="base">
<ul id="menu">
<li><a href="#nogo">Item one</a></li>
<li><a href="#nogo">Item two</a></li>
<li><a href="#nogo">Item three</a></li>
<li><a href="#nogo">Item four</a></li>
</ul>
</div>

and then put the left & right images in the <div> and the <ul> thus:

#base {
    border: 0px solid #000;
    margin-bottom: 25px;
    width: 430px;
    padding: 0 24px 0 0;
    height: 44px;
    background: url('[URL unfurl="true"]http://www.robarspages.ca/photosite/images/linkbarright.gif')[/URL] top right no-repeat;
    float: left;
    }
    
#menu {
    padding: 0 0 0 24px;
    height: 44px;
    margin:0;
    background: url('[URL unfurl="true"]http://www.robarspages.ca/photosite/images/linkbarleft.gif')[/URL] top left no-repeat;
    color:#fff;
    }

#menu li {
    display:inline;
    }

#menu li a {
    padding:0px;
    background:#282484;
    color:#ffff99;
    float:left;
    border:0px solid #000;
    height: 44px;
    width: 104px;
    }

#menu li a:hover {
    background:#282484;
    color:#cb7901;
    }

Note how I use padding to reserve enough space for the images.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Tarwn]

Chris, would it not make sense to move that padding assigment from base to menu? Perhaps make it a 24px margin in #menu so that you wouldn't have to deal with the fact that browsers handle padding differantly.

(this part not for Chris ) I try not to mess with padding on fixed width boxes just because you run into the issue that IE puts padding inside the width and everyone else adds it to the width. So rather than tryng to later compensate I prefer to mangle my design to begin with.

If I have recalled somehting incorrectly, let me know, I'm still on the first cup here so I might eb a little off this morning
As far as the site goes, I'm in the middle of heavy revisions on a gaming site, so mine will takea while to be finished. It'll get there

 

[ChrisHunt]

would it not make sense to move that padding assigment from base to menu?

I think it's easier on the brain to have the padding in the same element as you have the corresponding background image, but the end result should be the same.

IE puts padding inside the width and everyone else adds it to the width

Only if you don't declare a DOCTYPE. If you put IE in as-close-as-it-gets-to-standards-compliance mode by putting a full DOCTYPE at the top of your document, IE6 will behave itself properly regarding the box model. I don't worry about IE5.x any more.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd