Forum Moderators: open
TITLE
M TEXT
E TEXT
N TEXT
U TEXT
FOOTER
Above is the design for my latest web site. It seems simple but I have found a major hassle when editing the content of any one of its pages. The menu on the left stays stationary even if the content becomes longer and longer. (Currently using a numerical value) But due to its design, the menu and footer look as if they are connected. Is there a way someone could write me up or cut and paste some code into this forum that will allow me to write and write without having to approximate the length of the new menu's height? (Hopefully automated, maybe by connecting the two. ) I am willing to e-mail anyone the CSS and HTML code I currently have under file so that they can get any measurements or visual representations to help with the coding. (Or just tell me where to fill-in those values. ) Either way, any help would be appreciated.
1) Use a varible to hold the value of the content area.
2) Use the set variable to set the height of the menu bar.
3) Include an area where where it will be possible to add or subtract pixels. (Or I could just use the margin declaration in CSS! )
If anyone can write this piece of code, I would be willing to add any button or Affiliate information to the site just for your help.
Thanks in Advance. (P.S. Like I said, I'm not good with Javascript so I may ask some questions on how to install it into my exsisting code. )
I need this, [synergywd.bravehost.com] to stay like this, [synergywd.bravehost.com] even as I add content to the main page. This was built in CSS and HTML codes but I can not get the menu to "follow" my writing. It just stays stationary and exposes that white space.
Please Help!
How about something like this? The trick is to set the background of #main as the color you want for your left menu. Left-float the menu in #main, and right-float the #content div.
Hope this helps,
ajkimoto
<style type="text/css">
body,html{
font-size: 1em;
padding:0;
margin: 10px 0 0 10px;
font-family:arial,helvetica, sans-serif;
}
#header{
width: auto;
margin:auto;
background-color: #5573a3;
color: #d2d2f8;
font-size: 2em;
padding: 10px;
}
#main{
float: left;
height:auto;
width:100%;
background-color:#d7dfed;
border-left: 1px solid #657483;
}
#leftmenu{
width: 18%;
float:left;
}
#content{
background-color: #fff;
top:0px;
float: right;
width:75%;
border-left: 1px solid #657483;
padding: 1em;
}
#footer{
width: 100%;
margin:auto;
border: 1px solid #657483;
background-color:#d7dfed;
text-align:center;
}
</style>
</head>
<body>
<div id="header">Title Here</div>
<div id="main">
<div id="leftmenu">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
<div id="content">
<h2>Welcome to this site</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nonummy. Proin eget sapien. Cras sed orci. </p>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer">footer here</div>
</body>
SynergyWD
