Neverside

Hey you CSS coder, LISTEN UP! [Semantics]

You have your site. It's PHP/CSS/XHTML and more-acronyms-than-I-can-fit-on-this-page?driven. It's all valid, of course, unlike your sites back in the days of "junk-coding" and "tag-soup." We're too cool and trendy for that now. Or are we? If you don't use semantic markup, your sites aren't much better than tables. Let's look at an example scenario:

Code:

<div id="wrapper">
<div id="sidebar2"></div>
<div id="sidebar3"></div>
<div id="menucurve"</div>
<span class="reallybig">My uber site!!</span>
<a href="otherstuff.html"><img src="otherstuff.gif" alt="Other Stuff!" /></a>
Hey, what's up! This is just my really cool site. <br />
<br />
That you're at!
<div id="bottommenusider"></div>
<div id="footer">
<img src="footer.gif" alt="I would like to thank all of the banans in the process." />
</div>

Lookin' good. Nice and valid. Table-less freedom. But it still sucks. Why? There is no semantic meaning whatsoever in this page. Just because the span has the class="reallybig" doesn't mean that it's important, yet it should be, since its the main header of the page. Also, the sidebar2, sidebar3 and menucurve divs are stupid and meaningless. A better idea would just be to combine them all to one image, then set it as the background of the wrapper. Using divs like that also removes the effect of our layout being completely controllable by CSS. If 4 or 5 months later you want to change your design to a "boxy look", what the **** are you going to do with #menucurve? Also, note the line breaks being molested into paragraphs. Line breaks aren't paragraph-makers. There is a <p> tag. Use it. Also take note that your menu is ****ed because the source of the image is directly in the HTML. Bye bye easy redesign. Here's what the code should look like:

Code:

<div id="wrapper">
<h1>My uber site!!</h1>
<div id="content">
<p>Hey, whats up! This is just my really cool site.</p>
<p>That you're at.</p>
</div>
<div id="footer">I would like to thank all the bananas in the process.</div>
</div>

The fine piece of code above is future-safe because it contains NO PRESENTATIONAL INFORMATION. Learn from it.

If you think you're too good for the first example, then think again. I've seen many sites on this forum that are coded very similarly to that. Go look at some CSS layout sites and try again.

That is all.

well said. it should also be noted that you should name your CSS tags with the function of what you want to achieve and not with the description of the content (e.g. #bigblueheader font:... etc. is not good if you want to change it to red later. rather name it #headeralternative or something similar which describes the function)

was that.... uh.... clear?

;-)

Chris

___________________

very well put, thanks for sharing

___________________

The capacity of human beings to bore one another seems to be vastly greater than that of any other animal. - H. L. Mencken (1880 - 1956)

Children seldom misquote you. In fact, they usually repeat word for word what you shouldn't have said.

Re: Hey you CSS coder, LISTEN UP! [Semantics]

Quote:

Originally posted by Radley
...being molested...

tee hee

___________________

400MB space | 5GB bandwidth | free domain name | PHP/MySQL | $4.95/mo

OMG WHATS THIS?!?!?!?!?

Quote:

Originally posted by Radley
If you think you're too good for the first example, then think again. I've seen many sites on this forum that are coded very similarly to that. Go look at some CSS layout sites and try again.

lol way to generalize everyone:p .

Nice post... I hope allot of people will read this, it's great;)

oh right, question... If you have a layout where you need/want to have rounded corners on a box then you usualy need images to do that. Right now I use empty divs for doing that (I know its bad but I know no other way). I hope you don't mind explaining how to do that without using extradivs all over the layout. IF it now is posible that means.

___________________

Neversidian, your staff is broken.

Last edited by Simon, June 20th, 2004 05:37 AM (Edited 1 times)

Quote:

Originally posted by Spater
oh right, question... If you have a layout where you need/want to have rounded corners on a box then you usualy need images to do that. Right now I use empty divs for doing that (I know its bad but I know no other way). I hope you don't mind explaining how to do that without using extradivs all over the layout. IF it now is posible that means.

see if this can't help you:
http://www.alistapart.com/articles/mountaintop/

Nice. Very inspiring.

___________________

-meh

Good work. I am currently coding a valid, table-less layout. Hopefully it'll come out alright.

___________________

ADSLFAJD;FLAKJDF;LJD RRRRRR AD;FJAS;DLFKAJSDF; RRRRR CHCHOW CHCHOW CHCHOW RRRRRR
- <3 sykil

nice nice...

___________________

People without self-doubt scare me.
The world is my country, science is my religion. - Christiaan Huygens
“Don’t take refuge in the false security of consensus.”

Home||Truth|Love

Quote:

Originally posted by Spater
lol way to generalize everyone:p .

Nice post... I hope allot of people will read this, it's great;)

oh right, question... If you have a layout where you need/want to have rounded corners on a box then you usualy need images to do that. Right now I use empty divs for doing that (I know its bad but I know no other way). I hope you don't mind explaining how to do that without using extradivs all over the layout. IF it now is posible that means.

CSS3 will have a border-image property. Until then we have to make compromises, such as extra wrapper divs.