Moving from Tables to Pure CSS - Lil Help?

I'm trying to ditch my reliance upon tables for every design I do and move to pure CSS, with layers. Not a proper design at the moment, just trying things out.

Imagine a three by three table. The middle cell has all the content and the surrounding eight cells have the border images. In a table, the middle-left and middle-right cells will scale down automatically as I add content into the middle cell. With layers, each is entirely independent and has no knowledge of another. So is there a way to make the design of the middle-left and middle-right cells scale to match the center cell, which grows as I add content? Or do I have to just add my content and manually set the height of the outside cells to match when I finish?

Google for "css fluid columns" - your middle row needs to be comprised of fluid columns I suppose. To be honest I've no idea why CSS has layout mixed in with style... it's a mess.

Couldn't you enclose the middle row in a <div> block? Or am I missing the point?

They tell me this will be addressed in CSS3. Then again they said the same about CSS2.

I agree. I thought CSS was all about separating style from content. :/

There is no such things as layers. They are a term invented by Macromedia to try and make things easier to understand. IMO all it did was confuse things.

The problem with css is that it's very different to using tables. It's considerably better and well worth sticking with, but you need to learn to think in a different way.

Faux columns have already been mentioned and they're exactly how I do the columns on Binary Moon. The columns themselves should be floated to get them in the correct positions, and then a cleared footer will make the containing div (with the faux column background) cover all the content.

So a three column layout with a header and a footer would be 6 divs. A lot cleaner than a table with a million cells and half a million spacer gifs :)



It is - The page layout isn't the content. The content goes in the html, the layout goes in the css. It's not difficult :)

I just taken my site from html -> css, check my sig out to see. Granted theres sod all there!

Shagwana - Wow!! could you have maybe used a few more divs in there :)

That could be simplified so much. Granted rounded corners are more complicated than boxes but you have an awful lot of unneccessary code in there.

How about this for example - http://www.alistapart.com/articles/customcorners/ - it's not the best way, I can see a few things that could be changed but how much nicer is that code than yours? If you don't like the way they work (the markup IS rather strange) then you can find loads of other examples here - http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Sorry to rant a bit. I try to away from css zealotry, but seeing that made me want to cry :(

Actually, it was netscape when they implemented layers with NS4.

Ok, so from what I can find on Faux Columns and fluid columns, I use a background image to look like the columns and then just draw over the sections I don't want displayed. Seems simple enough, but I use percentage positioning to place my layers/div's/call them what you wills in the middle of the page. ( 18% from the left edge to be exact ) and this stops me from lining things up with the underlying background image.

EDIT: Never mind, the first tutorial I found specifically said you had to use it on the background, and not on a container DIV, but that tutorial was wrong, it works fine on a container DIV.

In releation to bandwidth: total size of nested divs < Total size of images to do the same thing.

I did kind of make that up - Macromedia were the first place I had heard them used. The fact still stands that it's not a phrase that's used anymore.

Shagwana - Oh. Does that mean you actually drew the curves with css? I guess I'll let you off then - that wouldn't be possible with a single div :)

In which case I'll pont out this link. It relies on javascript for the curves but degrades gracefully without. http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html

Here's the final page after following the tute - http://pro.html.it/esempio/nifty2/nifty10js.html - and you can see from the source it's considerably cleaner :D

the 2 non-rounded corners are driving me nuts.... Binary_moon.... why would you do that?

Erm - why would I do what? I didn't make that demo page. It's the result of a tutorial showing what could be done, not what should be done :)

Ok, I'm having some cross-browser issue, and they don't seem to be related to IE's incorrect implementation of padding and margins cuz I don't use any yet.

http://www.animebowlingbabes.com/testing/badcss/index.html

Open it in IE6 and that's exactly how it's supposed to look ( assuming it shows the same in IE6 for everyone as it does for me. ) And it looks exactly the same in DW.

Open it in Firefox and Opera and it's all kinds of messed up. Any ideas why?

try something like this:

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

<html>
<head>
<title>Untitled</title>
<style type="text/css">	<!--
	/**/
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, sans-serif;
	font-size: small;
	background: #F8F8FF;
}

#container {
	width: 750px;
	margin: 0 auto;
	border: none;
	background: #FFFFFF;
	border: 1px solid black;
}

	-->
</style>
</head>

<body>

<div id="container">

<p>This is a test, as is this</p>
<p>as is this</p>
<h3>This is a title</h3>
</div>

</body>
</html>

Hi,

I don't think my problem lies there. I replaced my container with yours and it shows up exactly the same way.

Gabriel... welcome to the messy world of layers :) Seriously, not related to your web page but in general, use tables where they are working, no need to go "all divs/spans".

gabriel, the page I posted centres on Opera, Firefox, and IE (and probably Safari as well). You could just try building your page from scratch inside that.

Fin: Believe me, I could do the design I'm wanting with tables with my eyes closed ( well nearly ) but I'm doing this because I need to learn, rather than because it's the best way right now.

Pert: You're absolutely right, I hadn't tried to center the main panel yet, so thanks for that. My main concern is the positioning of the contents of the main panel, which is all wrong. The text moves down, the shadow sections move around. And the shadow background doesn't show at all. Whereas on IE6, it all shows up exactly as it was intended to.

ok, I can get it this far, but I need to sleep now, I get up in 6 hours.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--link href="style.css" rel="stylesheet" type="text/css" /-->
<style type="text/css">	<!--
	body {
		margin: 0;
		padding: 0;
		font-family: Verdana, sans-serif;
		font-size: small;
		background: #FFFFFF;
	}

	#container {
		width: 650px;
		margin: 0 auto;
		border: none;
		background: #FFFFFF;
	}

	#menu-container{
		position:relative;
		display:block;
		min-height:200px;
	}

	#logo_t1 {
	}
	#nav {
		position:absolute;
		top:125px;
	}
	#nav ul {
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		list-style: none;
		height: 30px;
	}


	#nav li {
		float: left;
		margin: 0;
		padding: 0;
		width:130px;
		list-style: none;
		position: relative;
		display: inline;
		text-align:center;
		color: #FFFFFF;
		font-weight: bold;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;
		text-align: center;
		background-image: url("images/bluemenubg_off.gif");
	}

	#nav li:hover{
		background-image: url("images/bluemenubg_on.gif");
	}

	#logo {
		background-image: url("images/logo.gif");
		position:absolute;
		width:600px;
		height:100px;
		left:25px;
		top:25px;
		display:block;

	}

	#top_shadow{
		background: #00ff00 url("images/shadow_top.gif") repeat-x top left;
		position: absolute;
		width: 600px;
		height: 25px;
		left:25px;
		display: block;
		padding: 0;
		margin: 0;
	}

	#topleft_shadow{
		background: #00ff00 url("images/shadow_topleft.gif") repeat-x top left;
		position:absolute;
		width:25px;
		height:25px;
		display:block;
	}

	#topright_shadow{
		background: #00ff00 url("images/shadow_topright.gif") repeat-x top right;
		left:625px;
		position:absolute;
		width:25px;
		height:25px;
		display:block;
	}
	#left_shadow{
		background: url("images/bg.gif") repeat-y left;
		position:absolute;
		top:25px;
		width:25px;
		height:100px;
		display:block;
	}
	#right_shadow{
		background: url("images/bg.gif") repeat-y right;
		position:absolute;
		left:625px;
		top:25px;
		width:25px;
		height:100px;
		display:block;
	}
	

	#bottomleft_shadow{
		background: #00ff00 url("images/shadow_bottomleft.gif") repeat-x bottom left;
		position:relative;
		width:25px;
		height:25px;
		padding:0;
		margin:0;
		float:left;
		display:block;
	}
	
	#bottom_shadow{
		background: #00ff00 url("images/shadow_bottom.gif") repeat-x bottom;
		position:relative;
		width: 600px;
		height: 25px;
		padding:0;
		margin:0;
		float:left;
		display:block;
	}


	#bottomright_shadow{
		background: #00ff00 url("images/shadow_bottomright.gif") repeat-x bottom right;
		position:relative;
		width:25px;
		height:25px;
		padding:0;
		margin:0;
		float:left;
		display:block;
	}
	-->
</style>
</head>

<body>

<div id="container">
	<div id="menu-container">
	
		<div id="topleft_shadow"></div>
		<div id="top_shadow"></div>
		<div id="topright_shadow"></div>
		<div id="left_shadow"></div>
		<div id="logo"></div>
		<div id="right_shadow"></div>
		
		<div id="nav">
				<ul id="topmenu">
					<li class="topmenuitem">Home</li>
					<li class="topmenuitem">Info</li>
					<li class="topmenuitem">Download</li>
					<li class="topmenuitem">Purchase</li>
					<li class="topmenuitem">Support</li>
				</ul>
		</div>


	</div>
	<div id="maincontent">

		This is some content<br />
		<br />
		<br />
		<br />
		<br />
		gdfsgfdgf d<br />
		<br />
		<br />
		<br />
		<br />
		gfdgfdgfd<br />
		<br />
		<br />
		<br />
		gfdgfd
	</div>
		<div id="bottomleft_shadow"></div>
		<div id="bottom_shadow"></div>
		<div id="bottomright_shadow"></div>
</div>

</body>
</html>

a tip, develop in firefox, fix for IE.