CSS interface vertical tiling problem

[Mort]

I have been meaning too convert my site from tables with images into CSS as it is a fairly simple vector design.

i finally got around to it, altho i'm having a problem, as i need the site to extend vertically so pages can be displayed without an iframe or something

here is the site as it should look (Edit: link was wrong, now linked too correct site, instead of splash page), and here is the layout in CSS

<!--

#Table_01 {
	position:relative;
	left:0px;
	top:0px;
	width:738px;
	height:503px;
}

#css-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:20px;
	height:20px;

	background-color: #fca900;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-02 {
	position:absolute;
	left:20px;
	top:0px;
	width:128px;
	height:20px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-03 {
	position:absolute;
	left:148px;
	top:0px;
	width:569px;
	height:20px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-04 {
	position:absolute;
	left:717px;
	top:0px;
	width:21px;
	height:20px;

	background-color: #fca900;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}

#css-05 {
	position:absolute;
	left:0px;
	top:20px;
	width:20px;
	height:87px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-06 {
	position:absolute;
	left:20px;
	top:20px;
	width:128px;
	height:87px;

	background-color: #ffeecc;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-07 {
	position:absolute;
	left:148px;
	top:20px;
	width:569px;
	height:87px;

	background-color: #ffeecc;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-08 {
	position:absolute;
	left:717px;
	top:20px;
	width:21px;
	height:87px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}

#css-09 {
	position:absolute;
	left:0px;
	top:107px;
	width:20px;
	height:375px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-10 {
	position:absolute;
	left:20px;
	top:107px;
	width:128px;
	height:375px;

	background-color: #ffeecc;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-11 {
	position:absolute;
	left:148px;
	top:107px;
	width:569px;
	height:375px;

	background-color: #ffffff;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-12 {
	position:absolute;
	left:717px;
	top:107px;
	width:21px;
	height:375px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}

#css-13 {
	position:absolute;
	left:0px;
	top:482px;
	width:20px;
	height:21px;

	background-color: #fca900;

	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-14 {
	position:absolute;
	left:20px;
	top:482px;
	width:128px;
	height:21px;

	background-color: #ffd88c;

	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-15 {
	position:absolute;
	left:148px;
	top:482px;
	width:569px;
	height:21px;

	background-color: #ffd88c;

	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-16 {
	position:absolute;
	left:717px;
	top:482px;
	width:21px;
	height:21px;

	background-color: #fca900;

	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	border-right: solid 1px #000000;
	border-left: solid 1px #000000;
}

-->

so could anyone give me a hand as not looked at CSS much before. am guessing i'll need too change the 'absolute' positioning etc.

 

[Al Vallario]

No offence or anything, I realise CSS designs are new to you, but I think you've brutally missed the point of CSS based designs here. If I understand correctly, you're going the long way round and trying to recreate a tabular layout with CSS!

You have a lot of unnecessary code in there; I take it that was generated by a program? I recommend you check out the Layout-o-matic and have a look at the code it generates as an idea. Generally speaking you should use floated positioning over absolute.

Use background images for all non-contextual images (The mascot in the top left is a good example), and use the Phark Image Replacement technique with the banner. Also, you might want to give your elements logicial names like 'header', 'navigation' and 'footer' instead of 'css-01' etc.

 

[Mort]

no offense taken mate

am more a php person, i just do all my designs in photoshop and slice em up so i can start building the back end and dynamic stuff. but wanted to check out CSS and everyone has to be a n00b at some point

so pls explain to me the point of CSS designs. i wanted to remake the interface in CSS the way i did, because we have 5 sub sites, all different colours, so i thought it would be better to do it all in code, rather than have the different coloured images in 5 different folders for 5 different sites.

and yes i used slices and imageready to generate the code, but that was just so i could figure it out, i will reconfigure it before i do the finished version



Edit: Just noticed the 1st link in my 1st post was wrong, now linked too correct site, instead of splash page

 

[Mort]

Also, would CSS stop the stupid STUPID bugs in IE where the tables cells are bigger than they should be so they just tile an extra bit of image onto the end / side, altho in FF it works just dandy

as that really bugs me