Page 1 of 3
css layouts, web standards
Posted: Mon Dec 01, 2003 10:58 am
by microthick
I'm in the process of creating my first 100% css, 100% standards compliant website and, wow, every time I look at my html, I go "wow".
Sure, it's only the layout right now, but still. All divs, no tables.
Aside from a small problem that appears in ie 5.5 (typo that i'll fix when i get home), it looks good too.
(2 hours work getting the css right:
http://www.webwerks.ca/index2.htm ... its in progress.)
Code: Select all
<div id="contentwrapper">
<div id="content">
<div id="logo">
<img src="images/webwerks_blue_noblur.gif">
</div>
<div id="thingy">
test
</div>
<div id="mainwrapper">
<div id="global-navigation">
<a href="index.php" title="home">home</a>
<span class="hide"> | </span>
<a href="mission.php" title="mission">mission</a>
<span class="hide"> | </span>
<a href="services.php" title="services">services</a>
<span class="hide"> | </span>
<a href="partners.php" title="partners">partners</a>
<span class="hide"> | </span>
<a href="contact.php" title="contact">contact</a>
<span class="hide"> | </span>
</div>
<div id="mainbody">
this is where stuff goes
</div>
</div>
<div id="footer">
the footer
</div>
</div>
</div>
Ahh, pretty
(oh yeah, it scales down gracefully to *basically* plain text for netscape 4 and any browser that cant handle css well).
Posted: Mon Dec 01, 2003 11:08 am
by Saethyr
Looking great so far bro, I may hgave to look into this option, seems like it does a really nice job of alignment and readability. Also looks to be quite a bit easier to code.
Saethyr
Posted: Mon Dec 01, 2003 4:58 pm
by uberpolak
Go for it, standards-based code is easier to maintain (because there's less of it), and takes up less bandwidth (because the files are smaller). Your pages very often end up looking better, too.
Posted: Wed Dec 03, 2003 7:14 am
by maniac9
1. Very nice
2. Div + CSS = Your Friend
Posted: Wed Dec 03, 2003 9:40 am
by gavinbsocom
Why would you ever? Whats the advantages/disadvantages for using tables.
Posted: Wed Dec 03, 2003 10:55 am
by microthick
gavinbsocom wrote:Why would you ever? Whats the advantages/disadvantages for using tables.
Advantage of tables (for layout only, not for data)
- You can be very precise with how things look
- Coded properly, you can have people with ie4+ and ns4+ seeing the same, elaborate site that someone with the newest browsers see.
Disadvantages of tables (for layout only, not for data)
- Can double the size of the html file to download
- Creates accessibility problems for screen readers, text-only browsers and hand-held devices
- Nested tables can make updating websites a real nuisance because of all the clutter
- Elaborate table designs makes redesigns nearly impossible unless you start from scratch
Posted: Thu Dec 04, 2003 3:54 pm
by onefocus99
Sometimes by using tables and div and css
-it can be fast
-and more flexable
I use what seems to be the most logical and it works very well.
Posted: Fri Dec 05, 2003 9:29 am
by Draco_03
Ahhh !!!!
hehe i LOVE css
i'm rebuilding my site in php.. and it s XHTML 1.1 and CSS
but like i added a last thing.. wich really bother me.. it s a submit button with a cursor pointer on it.. BUT stupid IE doesn t accepte the pointer (wich is W3C) BUT takes hand instead.. wich is NOT W3C standart.. :/) but well it s the only error i get.. and i could fix it but ppl browsing in IE won t have a nice little hand over their submit button (the submit button have a class on it so it doesn t look like a button that much and dumb ppl won t know where to clik even if it s writtin SUBMIT HERE

Posted: Sun Dec 07, 2003 1:53 pm
by nigma
Sounds like someone is enjoying Designing with Web Standards

Posted: Sun Dec 14, 2003 10:57 am
by Fredix
I also develop only XHTML 1.1 and CSS but I still could use tables as layout means but I could imitate the whole thing with divs, too. Sometimes the first and sometimes the second is easier.
What I like the DIVs most for is the possibility to make real containers and make some that have diffrent z-indexes and let one hover over the other one when scrolling, you know...
But finally I have to say that HTML designing is a dirty job, at leats until IE is the leading browser.
I tend more to make backends in PHP - in this area YOU KNOW how your code will "behave" and you know that everyone gets the same result when using a proper PHP interpreter.....
Posted: Mon Dec 15, 2003 4:10 am
by malcolmboston
nice site microthick
good job with the CSS by the way looking very nice
CSS and XHTML are the future of web-design
Posted: Tue Dec 23, 2003 7:57 pm
by Skyzyx
Now you just need to look into the
semantics of your code. Which makes more semantic sense (which is being used as it was
intended to be used?)
Code: Select all
<span class="heading">My Cool Website</span>
Yeah, both are valid XHTML, but the second one is being used more appropriately. It makes more sense to screen readers, and people using PDA's and Cell Phones to access the internet (and yes, there are more and more every day).
You can always modify how the <h1> is presented by creating CSS rules for it. XHTML+CSS-Tables is by far the best way to design!

Posted: Tue Dec 23, 2003 8:21 pm
by Gen-ik
Sorry to burst your bubble but it's not valid XHTML yet....
This page is not Valid XHTML 1.0 Transitional!
Below are the results of attempting to parse this document with an SGML parser.
Line 15, column 76: required attribute "alt" not specified.
...es/thingy.gif" width="720" height="100" /></div>
...sorry had to check. A lot of pages on the web claim to be valid XHTML but when checked there are always unchecked errors in there.
You need to include the ALT tag on
all images.
<img src="anImage.gif" width="10" height="10" alt="" />
Also if you are using an image more than two or three times on a page then it's better to size it using CSS instead of including the WIDTH and HEIGHT tags on the actual <img>.
<img class="anImage" src="anImage.gif" alt="" />
Use this page to validate your website.....
http://www.w3schools.com/site/site_validate.asp
But yeah the actual site looks ok

Posted: Tue Dec 23, 2003 8:25 pm
by microthick
rofl, my bad.
when i originally posted that message, it was validating. i changed one image and forgot the alt so it stopped.
validates again now.
and regarding the semantics post above, mostly the page is semantically correct as well. there are a few areas that i am using <span class="blah">text</span> where i could be using <h3> for instance, but those parts of the page may not even deserve an h3 when i finish with the design.
at this moment im not worried about accessibility from pdas etc, but it should render just as i intend regardless. the site looks great with css disabled or in css-troubled browsers like NS4
Posted: Tue Dec 23, 2003 8:34 pm
by Gen-ik
Personally I don't use <h1>, <h2>, etc any more. I normaly use DIVs for any changes in text size/style. To stop the DIV automatically sizing itself to 100% you can set it's display to inline using CSS.
div.title { display:inline; font-size:12px; color:#303030 }
I find you have less control over the look/style of the font if you use <h?> tags... and 9 times out of 10 it ends up looking cr*p.
But each to their own.