I have a site when viewed in high resolution it looks good but when it is down to 800x 600 the menu that is absolute positioned on for navigation is spilling in to the content. I know how it is getting screwwy but how can I fix it? I used relative positioning but it doesn't have the effect I desire. the Menu is all far down from the top when I do it. I want it snug, but the content in the main td as it grows longer the menu just centers out in the nav td. I will give you the link to the site <!-- m --><a class="postlink" href="http://www.eriescene.com">http://www.eriescene.com</a><!-- m -->
and the css Style Sheet associated with that section
#align{
position:absolute;
top:150px;
width: 165px;
left: 120px;
}
#lh-col{
width: 165px;
background-color:#CCCCCC;
background-image:url(images/gradient.jpg);
background-position:left;
background-repeat:repeat;
color:#336600;
padding: 20px 20px 0px 0px;
text-align: left;
height:inherit;
}
.menu{
font-family:cursive;
color:#ffffff;
}
ul.menu{
font-size:12px;
left: 0px;
right: 30px;
}
/* Anchor Tags */
/* Menu Anchor Tags */
ul a:link {
color:#000000;
text-decoration: none;
}
ul a:visited {
text-decoration: none;
color:#666666;
}
ul a:hover
{
color:#336600;
background-color:#FFFFFF;
}
/* Anchor for forum script */
and html portion of the section in question
<td height="1290" id="lh-col">
<div id="align">
<div align="center">
<h3>Navigation</h3></div>
<ul class="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.eriescene.com/index.php">Main Page</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.eriescene.com/erie_events.php">Home of Erie
<ul class="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.weather.com/outlook/events/sports/local/16506?lswe=16506&lwsa=Weather36HourSportsCommand&from=whatwhere">Weather Channel</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wicu12.com/weather/">WICU 12</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wjettv.com/weather/default.asp">WJET 24</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.35wsee.com/weather.cfm">WSEE 35</a></li>
</ul>
<hr width="75%" align="center"/>
<div align="center">
<h5>Useful Erie Links!</h5>
</div>
<ul class="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.pictureerie.com/" target="_blank">Picture Erie</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://presqueisle.org/swimming.html" target="_blank">Erie Beaches and Swimming</a></li>
</ul>
<!-- validator -->
<hr width="75%" align="center" />
<div align="center">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=http://www.eriescene.com/"><img
src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" />
</a>
<br />
<!-- end of left column -->
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"script/sidemenu.js"></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</div>
</td>sorryhaving trouble getting Nav menu to stay at the top of the <td> when the content in the body grows. can anyone help??
This is the page that makes me look bad righthere (<!-- m --><a class="postlink" href="http://www.eriescene.com/battle_bands_sherlocks/battle_of_the_bands.php">http://www.eriescene.com/battle_bands_s ... _bands.php</a><!-- m -->) the lh-col is the problem area the <td id=lh-col> is the column name and here is a link to the CSS (<!-- m --><a class="postlink" href="http://www.eriescene.com/layoutbands.css">http://www.eriescene.com/layoutbands.css</a><!-- m -->)
Please please please help me. I am having trouble with this for weeks.This probably won't be much help... it's 5.20am so I'll do my best....
I used to get confused about absolute/relative positioning, but now it's easy. The key is - don't use position: absolute unless you have to.
I guess you noticed that an absolute layer with specified 'top' and 'left' will start the layer from the very top left of the window, no matter where you put the layer in the code.
All you need to do is wrap that absolute layer in a relative one. The relative layer can be anywhere on the page - any absolute layers inside it will start from the top left of the relative layer, not the window!
Test this code to see what I mean....
<html>
<head>
<style type="text/css">
#relative_layer { position: relative; width: 500px; height: 500px; background-color: black; color: white; }
#absolute_layer { position: absolute; top: 150px; left: 150px; width: 500px; height: 500px; background-color: yellow; color: black; }
</style>
</head>
<body>
<pre>
</pre>
<div id="relative_layer">This layer appears wherever you put it in the code.
<div id="absolute_layer">This layer starts from the top left of the relative layer, not from the top left of the entire window.</div>
</div>
</body>
</html>
and the css Style Sheet associated with that section
#align{
position:absolute;
top:150px;
width: 165px;
left: 120px;
}
#lh-col{
width: 165px;
background-color:#CCCCCC;
background-image:url(images/gradient.jpg);
background-position:left;
background-repeat:repeat;
color:#336600;
padding: 20px 20px 0px 0px;
text-align: left;
height:inherit;
}
.menu{
font-family:cursive;
color:#ffffff;
}
ul.menu{
font-size:12px;
left: 0px;
right: 30px;
}
/* Anchor Tags */
/* Menu Anchor Tags */
ul a:link {
color:#000000;
text-decoration: none;
}
ul a:visited {
text-decoration: none;
color:#666666;
}
ul a:hover
{
color:#336600;
background-color:#FFFFFF;
}
/* Anchor for forum script */
and html portion of the section in question
<td height="1290" id="lh-col">
<div id="align">
<div align="center">
<h3>Navigation</h3></div>
<ul class="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.eriescene.com/index.php">Main Page</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.eriescene.com/erie_events.php">Home of Erie
<ul class="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.weather.com/outlook/events/sports/local/16506?lswe=16506&lwsa=Weather36HourSportsCommand&from=whatwhere">Weather Channel</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wicu12.com/weather/">WICU 12</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wjettv.com/weather/default.asp">WJET 24</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.35wsee.com/weather.cfm">WSEE 35</a></li>
</ul>
<hr width="75%" align="center"/>
<div align="center">
<h5>Useful Erie Links!</h5>
</div>
<ul class="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.pictureerie.com/" target="_blank">Picture Erie</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://presqueisle.org/swimming.html" target="_blank">Erie Beaches and Swimming</a></li>
</ul>
<!-- validator -->
<hr width="75%" align="center" />
<div align="center">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=http://www.eriescene.com/"><img
src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" />
</a>
<br />
<!-- end of left column -->
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"script/sidemenu.js"></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</div>
</td>sorryhaving trouble getting Nav menu to stay at the top of the <td> when the content in the body grows. can anyone help??
This is the page that makes me look bad righthere (<!-- m --><a class="postlink" href="http://www.eriescene.com/battle_bands_sherlocks/battle_of_the_bands.php">http://www.eriescene.com/battle_bands_s ... _bands.php</a><!-- m -->) the lh-col is the problem area the <td id=lh-col> is the column name and here is a link to the CSS (<!-- m --><a class="postlink" href="http://www.eriescene.com/layoutbands.css">http://www.eriescene.com/layoutbands.css</a><!-- m -->)
Please please please help me. I am having trouble with this for weeks.This probably won't be much help... it's 5.20am so I'll do my best....
I used to get confused about absolute/relative positioning, but now it's easy. The key is - don't use position: absolute unless you have to.
I guess you noticed that an absolute layer with specified 'top' and 'left' will start the layer from the very top left of the window, no matter where you put the layer in the code.
All you need to do is wrap that absolute layer in a relative one. The relative layer can be anywhere on the page - any absolute layers inside it will start from the top left of the relative layer, not the window!
Test this code to see what I mean....
<html>
<head>
<style type="text/css">
#relative_layer { position: relative; width: 500px; height: 500px; background-color: black; color: white; }
#absolute_layer { position: absolute; top: 150px; left: 150px; width: 500px; height: 500px; background-color: yellow; color: black; }
</style>
</head>
<body>
<pre>
</pre>
<div id="relative_layer">This layer appears wherever you put it in the code.
<div id="absolute_layer">This layer starts from the top left of the relative layer, not from the top left of the entire window.</div>
</div>
</body>
</html>