...

View Full Version : Both the Body and the Menu won't expand together



7Gte
06-08-2007, 06:48 AM
Hey, I'm trying to creating this website right now, and I'm having problems trying to make the main content area and the menu act as one unit.

Using CSS, the entire webpage is put in a "container"

And the menu and main content area is put in this "content container"

What I want to do is have the menu and the main content area be put together side by side, and have it so, when either one of them expands, it would push down the "footer" which is rested below it.

For some reason, when I try to put the Menu next to the Main Content, the menu wants to stay under the Main Content, not on the right side like I intended.

My solution was to put the menu above the Main content in the XHTML file, and float the menu right.

Now that float is giving me some new problems, every time the menu expands, it expands PAST the footer, it doesn’t push the footer down.

Also, when I expand the Main Content, it pushes the footer down and the menu stays the same.

I'll provide the CSS and XHTML code, and I'll provide some screenshots to help illustrate my point.

this is the XHTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>The Webpage</title>
<style type="text/css" title="currentstyle" media="screen">
@import "001.css";
</style>
</head>

<body>

<div id="container">

<div id="header">
</div><!--header-->

<div id="contentcontainer">

<div id="topdivider">
</div><!--topdivider-->
<div id="rightdivider">
</div><!--topdivider-->




<div id="menu">

<ul>
<li><img src="res/img/menu/link.png" width="81" height="19" /></li>
<li><img src="res/img/menu/link.png" width="94" height="23" />
<img src="res/img/menu/link.png" width="98" height="27" /></li>
<li><img src="res/img/menu/link.png" width="79" height="24" />
<img src="res/img/menu/link.png" width="80" height="27" /></li>
<li><img src="res/img/menu/link.png" width="71" height="23" />
<img src="res/img/menu/link.png" width="78" height="26" /></li>
<li><img src="res/img/menu/link.png" width="53" height="24" /></li>
<li><img src="res/img/menu/link.png" width="207" height="19" /></li>
<li><img src="res/img/menu/link.png" width="109" height="35" /></li>
<li><img src="res/img/menu/link.png" width="124" height="19" /></li>
<li><img src="res/img/menu/link.png" width="76" height="18" /></li>
<li><img src="res/img/menu/link.png" width="63" height="18" /></li>
<li><img src="res/img/menu/link.png" width="195" height="132" /></li>


</div><!--menu-->

<div id="maincontent">


</div> <!--maincontent-->


</div><!--content container-->

<div id="footer">
</div><!--footer-->
</div> <!--container-->




</body>
</html>


This is the CSS:




/* This is a stylesheet for a website */
/* http://example.com/ */
/* website design and layout by me */
/* have fun */

/*
==Document settings==
*/

html {
padding:0;
margin:0;
}

body {
padding:0;
margin:0;
border:0;
background:url('res/img/layout/fill.jpg') #b1b180;
}

/*
===Page Layout===
*/

#container {
width:911px;
margin:0px;
min-height: 1000px;
/*border: 3px solid #000000;*/
background: url('res/img/layout/parrot.jpg') no-repeat;
}

#header {
width:737px;
height:123px;
margin-left:174px;
position:relative;
background: url('res/img/layout/header.jpg') no-repeat;
}

#contentcontainer {
width:737px;
margin-left:174px;
position: relative;
/*border:1px solid;*/
}

#topdivider {
width:737px;
height:8px;
position: relative;
background: url('res/img/layout/headdiv.jpg') no-repeat;
}


#rightdivider {
width:21px;
height:541px;
float:left;
clear:left;
background: url('res/img/layout/right.jpg') no-repeat;
}

#maincontent {
width:468px;
margin:0px 0px 0px 19px;
min-height:541px;
border-left:2px solid #f93;
border-right: 2px solid #f93;
position:relative;
background: url('res/img/layout/maincontent.jpg');
}

#menu {;
width:228px;
margin: 0px 16px 0px 0px;
/*float:right;*/
border-right:2px solid #f93;
position: relative;
background: url('res/img/layout/menu.jpg') #9c9b56 no-repeat;
}

#footer {
width:737px;
height:94px;
margin:0px 0px 0px 174px;
position: relative;
background: url('res/img/layout/footer.jpg') no-repeat;
}

/*
==Page Styles==
*/

/*
===menu Styles===
*/

#menu ul {
list-style:none;
text-align:center;
padding:0px 0px 0px 0px;
margin: 30px 0px 0px 0px;
}

#menu li {
line-height:35px;
}

#menu img {
padding:0px 5px 0px 5px;
}

/*end of css file*/



Alright

Here is what this webpage looks like normally:

http://i37.photobucket.com/albums/e73/RiseRobotRise/help/regular.jpg

This is what the webpage looks like when I expand the Main Content area (using line breaks with in the XHTML file or changing the height in the CSS file)

http://i37.photobucket.com/albums/e73/RiseRobotRise/help/mcexpand.jpg

This is what happens when I expand the Menu (using line breaks in the HTML file or changing the hight in the CSS file)

Note that the reason I think this is happening is because I use the "float" property to position the menu properly.

http://i37.photobucket.com/albums/e73/RiseRobotRise/help/menuexpand.jpg

This is what happens when I turn the Float property off.

http://i37.photobucket.com/albums/e73/RiseRobotRise/help/menufloatoff.jpg

And finally this pretty much illustrates what I want to Menu and the Main Content area to do. I want them both to expand togheter as one unit.

If the menu expands, the main content area would expand as well, and vice versa.

http://i37.photobucket.com/albums/e73/RiseRobotRise/help/highlighted.jpg

If anyone out there can explain to me what I'm doing wrong, that would be great.

If I havn't made myself clear, please let me know.

_Aerospace_Eng_
06-08-2007, 08:00 AM
You need to use the faux columns technique explained here: http://www.alistapart.com/articles/fauxcolumns/ Good luck.

7Gte
06-08-2007, 11:33 AM
Thanks engineer for that tip! it a really awesome trick.

It works now, but for some reason. I still have to put the menu above the main content in order for it to not rest under the content itself.

so much for trying to be SEO :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum