PDA

Click to See Complete Forum and Search --> : HTML + Css Small Problem

Aush
02-25-2010, 09:42 PM
Hey there, I am having a small problem everytime I try to make a page like this. The navbar will move up when I make the page bigger, and it will act weirdly and create extra pixels and such when I make it smaller. Please help! I validated everything, I would just like to know why it is doing this. Thanks a ton. I really appreciate it!


Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="web.css">

<title>Sample</title>

</head>

<body>

<div id="top">

<img src="samplebanner.png" width="750" height="150" alt="Banner">

</div>

<div class="navbar">

<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>

</div>

</body>

</html>


Css:

.navbar ul
{
position: absolute;
text-decoration: none;
background-color: aqua;
background-image: none;
padding-left: 0px;
top: 143px;
}

.navbar li
{
list-style-type: none;
border-style: solid;
border-color: black;
border-width: 1px;
border-bottom: 0px;
}

img
{
border-style: solid;
border-color: black;
border-width: 1px;
position: absolute;
}


Thank you so much for all of your help!
ryanbutler
02-26-2010, 08:07 AM
My guess is that since you absolutely positioned the nav bar, it's jumping. You could try floating it instead inside a fixed width container.
Webnerd
02-26-2010, 10:53 PM
absolute positioning does not guarantee an element to maintain window position. it guarantees to maintain position within it's containing element, which is <body>.

Sounds like you want position "fixed" but that won't work in IE6. You can sure try it though.
appletree
02-27-2010, 05:18 AM
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="web.css">

<title>Sample</title>

<style>
.navbar {
width:750px;
}

.navbar ul {
text-decoration: none;
background-color: aqua;
background-image: none;
margin:0px;
padding-left:0px;
}

.navbar li {
list-style-type: none;
border-style: solid;
border-color: black;
border-width: 1px;
border-bottom: 0px;
}

img {
border-style: solid;
border-color: black;
border-width: 1px;
}

#top {
height:150px;
width:750px;
}
</style>

</head>

<body>

<div id="top">
<img src="samplebanner.png" width="750" height="150" alt="Banner">
</div>


<div class="navbar">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>


</body>
</html>