Not overlapping.

UrbanTwitch

05-23-2008, 02:57 AM

I want the menu and body images to go side by side but they skip a space.

http://img386.imageshack.us/img386/7971/whyis8.png

CSS:

body {
background-color: #caced1;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #777;
}
#header {
background: #caced1 url(images/header.PNG);
margin: auto;
width: 801px;
height: 115px;
}
#greenmenu {
background: #caced1 url(images/greenheader2.PNG);
margin: auto;
width: 803px;
height: 30px;
position: relative;
right: -1px;
}
#leftmenu {
background: #caced1 url(images/leftmenu.PNG);
margin: auto;
width: 143px;
height: 308px;
position: relative;
left: -329px;
background-repeat: repeat-x
}
#content {
background: #caced1 url(images/content.PNG);
margin: auto;
position: relative;
right: -80px;
width: 660px;
height: 308px;
background-repeat: repeat-x
}

HTML SOURCE:

<html><title>sodaDome Template</title>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id=header></div><div id=greenmenu></div>
<div id=leftmenu>MENU

</div><div id=content>BODY

</div>

</body>
</html>

zfred09

05-23-2008, 03:22 AM

Try using floats. Float both elements left, or float one left and one right and then position accordingly. http://w3schools.com/css/pr_class_float.asp

UrbanTwitch

05-23-2008, 03:30 AM

http://img377.imageshack.us/img377/9605/fafyj9.png

#leftmenu {
background-position: center;
background: #caced1 url(images/leftmenu.PNG);
float:left;
width: 143px;
background-repeat: repeat-x
}
#content {
background-position: center;
background: #caced1 url(images/content.PNG);
width: 660px;
background-repeat: repeat-x;
float: right;
}

=\

zfred09

05-23-2008, 03:40 AM

Ok, good start, honestly. Now what you need is a wrapper div around all your content. In your CSS use something like this...
#wrapper{ width: 100px; height: 100px; } //position accordingly

Then in your HTML put all your content inside of this wrapper div, this will keep everything contained.

Otherwise the reason your boxes aren't expanding down is because of the lack of height or content inside, which is actually good if you are planning on using dynamic content because they will expand downward based on what's contained inside them.

Actually if you want to we could take this opportunity to use my website, it was built just for this back and forth conversation without a forum, I'll get on AIM and if you click the link in my sig and navigate to CSS on the left nav on there I will be able to tutor you live.