help with my 1st attempt at a tableless css layout

okpeery · Feb 22, 2006

I am trying to do a simple 3 colum layout with a header and a footer. The first column is largest, the second is a little smaller and the third is smaller and the nav bar. The back grounds to each column are different so i can see what is happening. I'd be happy to post to a more beginner site but you guys give such great help. I think my gif's maybe are not correct. I made them 2000px squares. The probelm is that there is no back ground color for the columns.

Here is my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Jean-Jacques Gallery</title>

<style type="text/css">
		
	body{
	margin: 0;
	padding: 0;
	font: 90% arial, helvetica, san serif;
	background: #387A9B;
	color: #333
	}

	h1
	{
	background: #D36832;
	color: #FFF;
	margin: o;
	padding: .5 em 3%;
	border-bottom: 5px solid #387A9B;
	}

	h2, h3
	{
	margin-top: 0;
	}

	#container
	{
	background: url(back01.gif) repeat-y 50% 0;
	}

	#container2
	{
	background: url(back02.gif) repeat-y 80% 0;
	}
	
	#content
	{
		width: 44%;
		float: left;
		margin: 1em 3%;
	}

	#news
	{
	width: 24%;
	float: left;
	margin: 1em 3%;
	}
	
	#nav
	{
	width: 14%;
	float: left;
	margin: 1em 0 1em 3%;
	}
	
	#nav ul
	{
	margin: 0;
	padding: 0;
	list-style-type: none;
	line-height: 150%;
	}

	#footer
	{
	clear: both;
	background: #387A9B;
	color: #fff;
	padding: 5px 3%;
	text-align: right;
	}
		
	
</style>
</head>
<body>
<h1>
Jean-Jacques Gallery
</h1>

<div id="container">
<div id="container2">
	<div id="content">
		<h2>
			Page Heading
		</h2>
		<p>
			what the heck
		</p>
		</div>
		<div id="news">
			<h3>
				News
			</h3>
			<p>
				Is that all there is she said, she was a cat by the way!
		</p>
		</div>
		<div id="nav">
			<h3>
				Sections
			</h3>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Imooi</a></li>
				<li><a href="#">Jane Tivol</a></li>
				<li><a href="#">Fireforms Stuido</a></li>
				<li><a href="#">Gibran Dosal</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</div>
		<div id="footer>
			Copyright - mother Mary!
		</div>
	</div>
</div>

	</body>
	</html>

Please be nice, I am really trying to get away from tables. I have been up for 3 days straight trying to make the layouts work.

Vragabond · Feb 22, 2006

Do you have a link to this site (or at least a website you can put it up while debuging? Since it has to do with pictures, it is easier to do it that way.

BillyRayPreachersSon · Feb 22, 2006

The probelm is that there is no back ground color for the columns.

You haven't assigned them any background colour - so why would you expect one to show?

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

ChrisHunt · Feb 23, 2006

Dan, I think the idea is the tiling background images in div#container and div#container2 provide "faux column" backgrounds for the columns.

okpeery, the first thing to check is that the image files exist and sit in the right directory (the same one as the psge, the way you've coded it). If you're hosted on unix, remember that it's case sensitive - it won't work if the files are actually called Back01.gif or BACK01.GIF.

Size-wise, the images need to be wide enough to allow for the largest possible width the columns can get to - 2000px should be plenty. They only need to be high enough to accommodate any vertically repeating pattern, so if it's a block of solid colour you could make it 1px high.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

okpeery · Feb 23, 2006

I cannot upload it live yet, maybe tomorrow. I guess my question is why use faux colomn backgrounds rather than real column backgrounds? I was following the instructions from a book for this layout. I thought while I was writing the code I could just use a background color for each container. Would that achieve the same effect? The gifs are just one color transparent squares. I also think I spotted a few code errors I'll fix and then try again.

PS The effect I wanted was a different color background in the 3 containers and the header and footer to have the same background colors.

Foamcow · Feb 23, 2006

The reason you can't just use "real" column backgrounds is because each column will only expand downwards enough to hold it's content.
If your columns have different amounts of content then they will appear untidy. Most of the time people want the background to extend all the way down to the footer - i.e. the length of the longest column.
Faux columns get around that by applying a tileable horizontal strip of background in an element containing your columns. This will by default expand to the height of your longest column, creating the illusion of a continuous background.
*phew*

The gifs are just one color transparent squares.

Then what would you expect to see?

I'm not quite understanding what layout you are trying to achieve.

May I suggest you get your 3 columns behaving as you want them to (I don't think they do at the moment) then address the background problem.

Simplify it down and set background colours to the columns themselves for now so you can see what is happening, and why faux columns can help.

Beware though, you will need to apply a little trickery to use faux columns with a variable width layout such as yours.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

okpeery · Feb 23, 2006

Thanks foamcow for your "phew" explanation. I understand now. I have updated the code a little and maybe it makes more sense now.

I have taken previous advice and made my gifs 2000px across and 1px down.

I fixed my footer tag and now it shows.

I would like to have the header and footer to have the same background color, not the one selected though, the #pictures container to hold a jpg that is 4x3 or so, the designer bios to have a short text bio of each designer, and the #nav will be the navigation. In order from bigger to smaller I'd like the backgrounds to be white, orange, and yellow.

The problem is that my background image 2 is orange and it is showing all the way across and that area is not tiled as I was hoping. Background 1 is not even showing. There is no white space either.

Maybe this is too complicated for me but I have been working so hard on it that I don't want to give up yet. I could also settle for a page with a header, two columns in the middle area, and the nav in the footer. Maybe background orange, one column white holding the pictures, one column yellow holding the bios, and some styling on the nav bar in the footer.

Would this be easier? I'm supposed to have something to show for my efforts by Sunday at 6PM. I can probably put this on a site tomorrow if that makes it much easier.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Jean-Jacques Gallery</title>

<style type="text/css">
		
	body{
	margin: 0;
	padding: 0;
	font: 90% arial, helvetica, san serif;
	background: #387A9B;
	color: #333
	}

	h1
	{
	background: #D36832;
	color: #FFF;
	margin: 0;
	padding: .5 em 3%;
	border-bottom: 5px solid #387A9B;
	}

	h2, h3
	{
	margin-top: 0;
	}

	#container
	{
	background: url(back01.gif) repeat-y 50% 0;
	}

	#container2
	{
	background: url(back02.gif) repeat-y 80% 0;
	}
	
	#pictures
	{
		width: 44%;
		float: left;
		margin: 1em 3%;
	}

	#designerbios
	{
	width: 24%;
	float: left;
	margin: 1em 3%;
	}
	
	#nav
	{
	width: 14%;
	float: left;
	margin: 1em 0 1em 3%;
	}
	
	#nav ul
	{
	margin: 0;
	padding: 0;
	list-style-type: none;
	line-height: 150%;
	}

	#footer
	{
	clear: both;
	background: #387A9B;
	color: #fff;
	padding: 5px 3%;
	text-align: right;
	}
		
	
</style>
</head>
<body>
<h1>
	Jean-Jacques Gallery
</h1>

<div id="container">
	<div id="container2">
		<div id="pictures">
			<h2>
				Beautiful Pictures	
			</h2>
		<p>
			Pictures will go in this larger box.  Pictures will go in this larger box.  Pictures will go in this larger box.  Pictures will go in this larger box.  Pictures will go in this larger box.  Pictures will go in this larger box.
		</p>
		</div>
		<div id="designerbios">
			<h3>
				Designer Bios
			</h3>
			<p>
			Text about the artists and designers will go in this medium sized box.  Text about the artists and designers will go in this medium sized box.  Text about the artists and designers will go in this medium sized box.  Text about the artists and designers will go in this medium sized box.	
		</p>
		</div>
		<div id="nav">
			<h3>
				Sections
			</h3>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Imooi</a></li>
				<li><a href="#">Tivol Studios</a></li>
				<li><a href="#">Fireforms Studios</a></li>
				<li><a href="#">Gibran Dosal</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Wish List</a></li>
			</ul>
		</div>
		<div id="footer">
			Copyright - none, no one wants to steal my work anyway!
		</div>
	</div>
</div>

	</body>
	</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

help with my 1st attempt at a tableless css layout

okpeery

Instructor

Vragabond

Programmer

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

okpeery

Instructor

Foamcow

Programmer

okpeery

Instructor

Similar threads

Part and Inventory Search

Sponsor