quick Q about tabless design

[horsecow]

Hi,

I'm converting an existing page to a tableless design with xhtml/css. If there is a top navigation bar which currently is a table row with 3 cells with a link in each one. Eg:

<tr>
<td>link....</td>
<td>link....</td>
<td>link....</td>
</tr>

The cells are all centred horizontally so the links have quite some space between each one.

In a tabless design should this simply become:

<div id="linkContainer">
<div class="link">link.....</div>
<div class="link">link.....</div>
<div class="link">link.....</div>
</div>

and then style the divs of class link to be centered horizontally? I'm not sure if this is the correct way of doing it.


Cheers.

[elduderino]

<div id="linkContainer">
<div class="link">link.....</div>
<div class="link">link.....</div>
<div class="link">link.....</div>
</div>

No. The norm whould be to use list mark-up for this. IE:

<ul id="linkcontainer">
<li>link.....</li>
<li>link.....</li>
<li>link.....</li>
</ul>

This makes more sense and cuts down on the use of those non-semantic divs.

You can then style the list using the following css:

ul#linkcontainer{...}
ul#linkcontainer li {...}
ul#linkcontainer li a {...}

to make your list appear horizontally there are a few ways. This will work:

#linkcontainer li
{
display: inline;
list-style-type: none;
}

and so would this:

#linkcontainer ul { float: left;}
 #linkcontainer ul li { float: left;}

Hope thats of some help

[Dan Schulz]

There's no need to put the element name before the ID selector.

#listContainer is just as valid as ul#listContainer

The only reason why one would include the element name is for when they are just learning CSS.

[AutisticCuckoo]

There's no need to put the element name before the ID selector.

Probably not in this case, but there can be.

#listContainer is just as valid as ul#listContainer

It's just as valid, but it has lower specificity, which can make a world of difference in some style sheets.

The only reason why one would include the element name is for when they are just learning CSS.

It can also be used to increase the specificity of a selector, or to specify separate rules for an UL – as opposed to any other element – with id="listContainer".

You are right in general, though. ID selectors are usually specific enough that you don't have to include the element type.

[horsecow]

Hi thanks for the replies. I've tried out the code above and it indeed lays out the list horizontally but just in continuous text. EG:

link....link....link....

What i want to do is have the links equally spaced from one another. An effect like putting the links in their own individual cells in a table row and then centering them within this. Then, if the table is 600pix lonk each cell is 200 and they have their own space within this....

I don't knwo if that is very clear.

I am unsure if this can be done whilst having the links in one div. I agree that it ismessy and somewhat destroys the purposes of divs (to group semantically similar content together) but i dont know if it can be done anyway else?

Thanks for the rpelies so far!

[gnarly]

Assuming you've laid out your links in list items, the way Tommy said, you can float them. Try this code:

ul#linkcontainer { width: 600px; margin: 0; padding: 0; list-style: none; overflow: hidden; }
ul#linkcontainer li { width: 180px; margin: 1px; padding: 8px; border: 1px solid black; text-align: center; }

Note that when working in "standards mode" margin, padding and border all add up to the total width of the element. The use of overflow:hidden; on the ul is to force it to enclose any floated elements within. See http://www.pmob.co.uk/temp/float-clear.htm for more.

[horsecow]

superb! when i combine elduderin's and gnarly's i get exactly the effect i wanted. Cheers guys.

I've a lot to learn about CSS. I'm actually a CS student and have a great interest in developement but tend to be programming java/php more than designing. I think CSS is really quite a complex language but both my friend (another CS student) and a family friend are always telling me CSS is really simple. I think they are either genuinely very good or (more likely) are simply using it to format the font and colour of text and nothing more.


Thanks for the help anyway. Much appreciated.

[elduderino]

Dan,

There's no need to put the element name before the ID selector.

#listContainer is just as valid as ul#listContainer

Yeah thanks for pointing that out. I put the ul list before the id to make it obvious to horsecow what was going on. He didnt seem so sure about what he was doing.

Horsecow,

I think CSS is really quite a complex language but both my friend (another CS student) and a family friend are always telling me CSS is really simple.

It can seem a little complex when you start but in fact it is very simple once you get a good grasp of it, ive learnt loads from reading and posting in these here forums

[Ed Seedhouse]

There's no need to put the element name before the ID selector.

#listContainer is just as valid as ul#listContainer

The only reason why one would include the element name is for when they are just learning CSS.

Well, if it's a multiple page site the same ID might possibly occur in a different context on a different page. You might want to give it a different style depending on it's context in a particular page.

Not likely perhaps, but possible surely.

[brandaggio]

It's just as valid, but it has lower specificity, which can make a world of difference in some style sheets.

It can also be used to increase the specificity of a selector, or to specify separate rules for an UL – as opposed to any other element – with id="listContainer".

You are right in general, though. ID selectors are usually specific enough that you don't have to include the element type.

The increased specificity is the only reason I can think of why you would have ul#..., and that is plenty of a good enough reason to use it with some regularity even after writing thousands of CSS rules. I would think a n00b would be more likely to omit the element adding specificity as they would be unaware of its role and value.

I tend to markup a page with as little ID/Classes as possible and use the hooks the tags/elements inherently provide as much as possible. This tends to help me cut down on divitis and any superfluous markup.

So I would be more likely to just style the ul without an ID and only put an idea on the UL if there are others on the page that it must be diffentiated from.