Planetarion Forums

meglamaniac · 3 Jul 2004, 19:45

I'm looking for a tutorial on how to build sites using HTML (or XHTML, don't mind) and CSS using div's instead of tables.
Suffice it to say I have no clue how the whole div thing operates so any suggestions gratefully accepted.

Androme · 3 Jul 2004, 20:17

www.alistapart.com - Bookmark it - has about every handy bit of XHTML & CSS bits you will need.

Look for the box model and other articles in the sections.

wu_trax · 3 Jul 2004, 20:19

whats wrong with tables?

Androme · 3 Jul 2004, 20:35

http://www.hotdesign.com/seybold/

Anyways, if you can code in CSS and XHTML cleanly, you really help out your Dial Up users, and still people on mobile devices with slow connections, because with the CSS, they do not need to reload the css tags every time to visit a new page, because they already have the old page in their cache.

wu_trax · 3 Jul 2004, 20:54

ok, never thought about that.
all my websites suck then :/

meglamaniac · 3 Jul 2004, 23:09

My main reason for wanting to try it is that html+css+div makes much cleaner html files cos a lot of the layout, size and colour definitions are moved out of the html and over to the css file.
That way it (should) be much easier to produce pages where it's obvious what is going on.

Also if you've got css definitions for things you don't have to respecify it every time you want to add another element (such as a new item in your navigation bar for example), you just use the div class which is already define in the css so it's a lot easier to produce uniform looking pages.

Or so I'm given to understand anyway, which is why I want to try it.

wu_trax · 3 Jul 2004, 23:37

you're probably right. i just used xsl all the time in the last moth to transform xm-data into html, thats why i never thought much about how readable the resulting html-code is.
that css zen garden side is somewhat impressive

SYMM · 3 Jul 2004, 23:51

W3schools has a good guide to CSS, I found it useful when learning, and now also as a reference when I forget the name of an attribute or similar.

Androme · 4 Jul 2004, 03:09

I gave him the only link needed

meglamaniac · 4 Jul 2004, 14:39

ok now i'm stuck.
I have this: http://www.megla.net/xhtml/index.html

I want the sidebar bit to extend all the way down to the footer div, in order to stop the main body text from "cutting under" the sidebar area.
Any ideas?
Here's the code.

Code:

XHTML for the document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>simple document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div class="header">
	<p>Header</p>
</div>

<div class="bar">
	<div>
	<p>this is where the navigation bar would go</p>
	</div>
	<div>
	<p>a div a day keeps the doctor away</p>
	</div>
	<div>
	<p>well it seems to be working...</p>
	</div>

</div>


<div class="main">
	<p>
	this is a test to see if the sodding thing is going to wrap or not, and if not why not!! hey look it appears
	to be wrapping ok so at least i've finally got that sorted.	
	</p>
	<p>
	the only issue is that if i have
	lots and<br />
	lots and<br />
	lots and<br />
	lots and<br />
	lots and<br />
	lots of text like this, it pops under the navbar area.<br />
	Like this.<br />
	How do I stop it?!
	</p>
</div>

<div class="footer">
	<p>
	footer information
	</p>
</div>

</body>

</html>

Code:

CSS for the document

div.header {
	text-align: center;
	margin 0 0 0 2em;
	border-bottom: 1px dashed rgb(099,099,099);
}

div.bar {
	width: 20%;
	float: left;
	margin: 0 2em 0 0;
	border-right: 1px dashed rgb(099,099,099);
}


div.bar div {
  border-bottom: 1px dashed rgb(099,099,099);
  margin: 1em 0 0 0;
}


div.main {
	margin 0 0 2em 0
}

div.footer {
	text-align:center;
	clear: both;
}

meglamaniac · 4 Jul 2004, 17:02

fixed

wu_trax · 8 Jul 2004, 10:10

thanks for this thread and thanks for that link.
finally layer menus almost without java script \o/

Leshy · 9 Jul 2004, 18:32

As soon as MSIE starts supporting :hover on anything but link elements, JavaScript menu's can go out the window altogether \o/

JetLinus · 9 Jul 2004, 20:39

Unfortunately this isn't completely translated to English, but the CSS section seems to be done...

http://en.selfhtml.org/

SelfHTML is the best compendium I know out there. They recently asked for donations to keep the (free) server running, and raised more than 20k euros.

Sundipper · 9 Jul 2004, 22:46

"unfortunately" is ALL in English but it has 6300617 bytes ..

CSS-2004

Say Hello

sayonara · 10 Jul 2004, 01:59

Quote:

Originally Posted by wu_trax

whats wrong with tables?

Tables were always intended to be used for displaying tabulated data, and right through to the current HTML implementation they have been developed with that in mind.

Unfortunately, since early HTML did not have terribly great layout facilities, people started using tables to structure their documents. The drive now is to get people away from this habit, because it's an inefficient (and highly variable between authors) way of doing things, and causes all sorts of problems with cross-compatibility, accessibility etc.