Log in

View Full Version : css layering wrong


thebutterfly
05-07-2008, 08:31 PM
Hi there

I'm having a very hard time with a layout I'm working on. I know my code must be wrong but it all validates (both css & html) and IE shows it correctly (not that that says anything). If anyone can help I'd be VERY grateful!

Short Version:
class balls is showing behind the class right.
class left is ending aboveclass left1 not going on behind it
there is a space between class left 1 and class left2

the css:

/* SW CSS Document */

body {
margin: 0px;
padding: 0px;
background-color: #000000;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;

scrollbar-base-color: #ffffff;
scrollbar-arrow-color: #E31836;

scrollbar-shadow-color: #CDCCD7;
scrollbar-lightshadow-color: #DDDDE5;
scrollbar-darkshadow-color: #4B4C4E;

scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #E5E5ED;

}

.container{
width: 745px;
background-color: #ffffff;
}


.top{
background-image: url(images/top.jpg);
background-repeat: no-repeat;
height: 158px;
width: 745px;
}

.right{
background-image: url(images/r1.jpg);
background-repeat: repeat-y;
background-position: right;
width: 745px;
z-index: 1;
}
.left{
background-image: url(images/l1.jpg);
background-repeat: repeat-y;
background-position: left;
width: 745px;
text-align: left;
}

.left1{
background-image: url(images/2h.jpg);
background-repeat: no-repeat;
background-position: top;
float: left;
width: 317px;

}
.left2{
background-image: url(images/h1.jpg);
background-repeat: no-repeat;
background-position: 149px 112px;
width: 317px;
}

.content{
float: right;
background-image: url(images/3.jpg);
background-repeat: no-repeat;
background-position: top;
width: 428px;
text-align: left;
margin-top: 0px;
}

.content2{
margin-top: 45px;
margin-right: 45px;
margin-left: 15px;
margin-bottom: 20px;
}


.navb{
color: #4B4C4E;
font-weight: normal;
font-size: 12px;
line-height: 200%;
margin-left: 15px;
}

.navt{
color: #4B4C4E;
font-weight: bold;
font-size: 12px;
border: 1px #000000;
width: 180px;
margin-top: 20px;
margin-left: 20px;
height: 300px;
}

a.nav:link {color: #4B4C4E; text-decoration: none;}
a.nav:visited {color: #4B4C4E; text-decoration: none;}
a.nav:hover {color: #E31836; text-decoration: none;}
a.nav:active {color: #E31836; text-decoration: none;}

.balls{
background-image: url(images/r2.jpg);
background-repeat: no-repeat;
background-position: bottom right;
width: 745px;
height: 105px;
z-index: 3;
}
.b1{
background-image: url(images/b1.jpg);
background-repeat: no-repeat;
background-position: bottom left;
height: 37px;
width: 745px;
}
.b2{
background-image: url(images/b2.jpg);
background-repeat: no-repeat;
background-position: bottom right;
width: 164px;
height: 37px;
float: right;
}

the HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="sw.css">
</head>

<body>
<div align="center">
<div class="container">
<div class="top"></div>
<div class="right">
<div class="left">
<div class="balls">
<div class="content">
<div class="content2">
<p>ALL CONTENT</p>

</div></div>
<div class="left1">
<div class="left2">
<div class="navt">
products
<p class="navb"><a href="link.htm" class="nav">link</a><br>
<a href="link.htm" class="nav">link</a><br>
<a href="link.htm" class="nav">link</a><br><a href="link.htm" class="nav">link</a><br><a href="link.htm" class="nav">link</a><br></p>

</div>
</div>
</div>
</div>
</div><div style="clear:both"></div>
<div class="b1">
<div class="b2"></div>
</div>
</div>
</div>
</div>
</body>
</html>



Thank you for any help - it's driving me nutz!
Medyman
05-07-2008, 10:36 PM
Do you have a link to the page? Without seeing the image backgrounds or knowing what it's supposed to look like or having semantic class names, it's hard to know what's going on there.
thebutterfly
05-08-2008, 12:55 PM
Whoops - sorry about that!

http://clients.locallink.com/sw/www2/

Thank you for any help you can give.
You can see it "correctly" in IE.
thebutterfly
05-09-2008, 03:14 PM
Anyone know how I can fix this?

Thank you!
coothead
05-10-2008, 11:42 AM
Hi there thebutterfly,

the first thing that I noticed when viewing your page was that it was an excellent example of 'Divitis' :eek:
Check out the symptoms here...

Divitis:- what it is, and how to cure it (http://csscreator.com/?q=divitis)

I have therefore completely reworked the page as the attachment will show. ;)

coothead
thebutterfly
05-12-2008, 02:43 PM
Hi There

Ahh.. yeah still learning the art of css layout - & yeah, I tend to get super div-crazy! hehehe :) I will go through this even more, I can learn a lot! Thank you!!!!
coothead
05-12-2008, 04:13 PM
No problem, you're very welcome. :)
thebutterfly
05-12-2008, 05:24 PM
Oh no - problem. Now the overall layout does not strech to fit the content - it just goes over the lower stuff and disappers off the area. I really dont want to make a scrolling div - it really needs to stretch. Any thoughts?
coothead
05-12-2008, 08:51 PM
Hi there thebutterfly,

unfortunately, for me :eek:, you did not say that you wished to add extra content to the layout.

Still, 'it's an ill wind that blows no good'.

It means that you get your background-images refined somewhat. :)

With added content they did look a little clumsy at the edges.

coothead