...

View Full Version : Wah! My CSS skills are letting my layout down.



Throlkim
01-05-2008, 12:00 AM
I can't seem to get my layout to stretch properly!
http://www.subtle-edge.com <- as you can see, it's quite broken, and my footer no longer displays at all. I know how to get a table layout to stretch, but this is yet another roadblock I've met since trying to use a Div based layout.
If anyone could give me a hand, I'd be eternally grateful!
And as a note, my menu won't be staying like that, I know it's difficult to read :thumbsup:

Excavator
01-05-2008, 12:32 AM
Hello again Throlkim,
I see you have
#subtle-edge-07_ {
position:absolute;
left:0px;
top:789px;
width:180px;
height:auto;
background:#000 url('http://subtle-edge.com/images/subtle_edge_07.png') repeat top center;
}
in the hopes that will repeat-y on the left side but ... it won't. For a div to expand with content it has to have content in it. Empty divs don't do much.

For your layout to work you should probably use nested divs and no absolute positioning.

Excavator
01-05-2008, 12:42 AM
Have a look at how nested divs work...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
html, body {
background: #CCCCCC;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 1024px;
background: url(http://subtle-edge.com/images/subtle_edge_07.png) repeat-y left;
margin: 0 auto;
}
#wrap_inner {
width: 1024px;
background: url(http://subtle-edge.com/images/subtle_edge_08.png) repeat-y right;
}
#curtains-l {
float: left;
}
#curtains-r {
float: right;
}
#container {
width: 648px;
margin: 0 0 0 180px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wrap_inner">
<img src="http://subtle-edge.com/images/subtle_edge_02.png" width="180" height="706" alt="left curtains" id="curtains-l" />
<img src="http://subtle-edge.com/images/subtle_edge_04.png" alt="right curtains" width="196" height="706" id="curtains-r" />
<div id="container">
<img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
<img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
<img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
<img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
<img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
<img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
<img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
<img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
<!--end container--></div>
<!--end wrap_inner--></div>
<!--end wrap--></div>
</body>
</html>

Throlkim
01-05-2008, 07:01 PM
Thanks very much for the help, I can see how it would work, but I'm still absolutely confused. Divs are infuriating to work with. >.>
I've managed to get it sort of in the right place, but my menu has a weird gap in it now, I can't seem to get the top curtain to float over the top, and I haven't even attempted failing with the footer yet.
I hate divs :'(

Excavator
01-05-2008, 07:30 PM
Move the top curtain to the div that has the side curtains. That way the top image will push the side ones down.

A lot of times a gap like that can be fixed with display:block; I'm sure smarter people here can explain why.

You should remove all that extra CSS while your doing your re-design, sooner or later it's going to cause a conflict somewhere.

Try this:
html {
margin: 0;
padding: 0;
}

body {
background: #000000;
}

* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 1024px;
background: url(http://subtle-edge.com/images/subtle_edge_07.png) repeat-y left;
margin: 0 auto;
}
#wrap_inner {
width: 1024px;
background: url(http://subtle-edge.com/images/subtle_edge_08.png) repeat-y right;
}
#curtains-l {
float: left;
top:83px;
}
#curtains-r {
float: right;
top:83px;
}
#container {
width: 648px;
margin: 0 0 0 180px;
background:#000 url('http://subtle-edge.com/images/subtle_edge_06.png') repeat top center;
}
#logo img{
display: block;
}
#menu {

}
#top{
display: block;
}

<div id="wrap">
<div id="wrap_inner">
<img src="http://subtle-edge.com/images/subtle_edge_01.png" alt="" id="top">
<img src="http://subtle-edge.com/images/subtle_edge_02.png" alt="left curtains" id="curtains-l" height="706" width="180">
<img src="http://subtle-edge.com/images/subtle_edge_04.png" alt="right curtains" id="curtains-r" height="706" width="196">
<div id="container">

<div id="logo">
<img src="http://subtle-edge.com/images/subtle_edge_03.png" alt="">
</div>
<div id="menu">
<img src="http://subtle-edge.com/images/subtle_edge_05.png" alt="" usemap="#menu" border="0" height="131" width="648">
<map name="menu" id="menu"><area shape="rect" coords="-7,-2,161,46" href="http://www.subtle-edge.com/content/showcase" target="_self" alt="Showcase"><area shape="rect" coords="489,12,623,69" href="http://www.subtle-edge.com/content/author" target="_self" alt="Author"><area shape="rect" coords="163,24,324,74" href="http://www.subtle-edge.com/content/tutorials" target="_self" alt="Tutorials"><area shape="rect" coords="329,15,481,67" href="http://www.subtle-edge.com/content/articles" target="_self" alt="Articles">



</map>
</div>
<!--end container--></div>
<!--end wrap_inner--></div>
<!--end wrap--></div>

Throlkim
01-05-2008, 08:03 PM
Ooh, that worked great, it's starting to look more correct - thanks very much. :D
I've had a bash at the footer, but again I've managed to mess it up. I just don't understand the different positioning options for divs - they never end up where I meant to put them.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum