css layouts, web standards

JavaScript and client side scripting.

Moderator: General Moderators

microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

css layouts, web standards

Post 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 :P

(oh yeah, it scales down gracefully to *basically* plain text for netscape 4 and any browser that cant handle css well).
User avatar
Saethyr
Forum Contributor
Posts: 182
Joined: Thu Sep 25, 2003 9:21 am
Location: Wichita, Kansas USA
Contact:

Post 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
User avatar
uberpolak
Forum Contributor
Posts: 261
Joined: Thu Jan 02, 2003 10:37 am
Location: Next to the bar

Post 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.
maniac9
Forum Commoner
Posts: 55
Joined: Fri Aug 01, 2003 12:27 am
Location: Arkansas, USA
Contact:

Post by maniac9 »

1. Very nice
2. Div + CSS = Your Friend
gavinbsocom
Forum Commoner
Posts: 71
Joined: Tue Sep 30, 2003 9:51 pm

Post by gavinbsocom »

Why would you ever? Whats the advantages/disadvantages for using tables.
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post 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
onefocus99
Forum Newbie
Posts: 16
Joined: Tue Oct 07, 2003 11:09 pm
Location: Hamilton Ont., Montreal, Chibougamau,... PQ, Victoria BC, now Alberta Canada

Post 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.
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post 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 :P
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Sounds like someone is enjoying Designing with Web Standards ;)
User avatar
Fredix
Forum Contributor
Posts: 101
Joined: Fri Jul 18, 2003 2:16 pm
Location: Wehr (Eifel) Germany
Contact:

Post 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.....
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
Skyzyx
Forum Commoner
Posts: 42
Joined: Fri Feb 14, 2003 1:53 am
Location: San Jose, CA

Post 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>

Code: Select all

<h1>My Cool Website</h1>
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! :D
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post 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 :)
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post 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
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post 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.
Post Reply