Menu Alignment Issues

[justen]

Hey, we are re-designing our high school website and the menu looks ok on a 1024X768 monitor but when I go to a smaller resolution, which most of our school has it looks out of whack, same when makign the browser windows small. It's almost as if the menu is not staying fixed. Take a look for yourself.... I need help.

http://www.camas.wednet.edu/chs/temp/

 

[steammultimedia]

Hey, we are re-designing our high school website and the menu looks ok on a 1024X768 monitor but when I go to a smaller resolution, which most of our school has it looks out of whack, same when makign the browser windows small. It's almost as if the menu is not staying fixed. Take a look for yourself.... I need help.

http://www.camas.wednet.edu/chs/temp/

Hi there,

It looks to me that you have additional padding on the main menu. you have probably given the menu a width and not taken off the padding from the width.

It might help if you gave some idea of the CSS used for the divs that contain the navigation

 

[justen]

Here is the css for for the page.

Not sure what you are refering to padding it is set to 0.

* {
padding : 0;
margin : 0;
}
body {
font : 85% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size : 13px;
background-image : url(images/body_bg.jpg);
background-repeat : repeat-y;
background-position : 50% 50%;
background-color : #c8c8c8;
}
.clear {
clear : both;
}
ul {
line-height : 165%;
}
#wrapper {
position:relative;
margin : 0 auto;
width : 932px;
}
#header {
color : #333;
width : 900px;
float : left;
height : 100px;
margin : 10px 13px 5px 15px;
background-image : url(images/black_header.jpg);
background-repeat : no-repeat;
}
.logo {
width : 240px;
text-align : center;
}
.logo h1.lineone {
font-size : 1.7em;
font-weight : lighter;
padding-top : 25px;
padding-left : 5px;
border : none;
letter-spacing : -1px;
color : #FFFFFF;
}
.logo h1.lineone span {
color : #3054c1;
}
.logo h2.linetwo {
padding-left : 5px;
font-size : 14px;
text-transform : none;
color : #990000;
}
.logo a {
color : #3054c1;
text-decoration : none;
}
#navigation {
position:absolute;
left:-165px;
color : #333;
padding : 0;
margin : 0 0 15px 0;
width: 100%;
}
#leftcolumn {
color : #333;
margin : 28px 0 5px 18px;
min-height : 340px;
width : 212px;
float : left;
}
#leftcolumn h2, #rightcolumn h2, #rightcolumn h3 {
color : #FFFFFF;
font-size : 1.3em;
background-image : url(images/hbg.jpg);
background-repeat : no-repeat;
line-height : 30px;
text-indent : 5px;
}
.ver-nav ul {
margin : 0;
padding : 0;
list-style : none;
font-size : 14px;
}
.ver-nav li li {
padding-left : 10px;
background : url(images/menuimg.gif) no-repeat left center;
border-bottom : 1px dotted #cccccc;
}
.ver-nav a {
text-decoration : none;
}
.ver-nav a:hover {
color : #999999;
}
#content {
float : left;
color : #333;
background : #ffffff;
margin : 0 0 5px 5px;
padding : 10px;
min-height : 350px;
width : 441px;
display : inline;
}
.maintext {
background-image : url(images/mtbg.jpg);
background-repeat : repeat-x;
}
.maintext p {
font-size : 100%;
color : #333333;
text-align : left;
padding : 0 5px 0 5px;
}
.post {
background : #eeeeee;
padding : 3px;
margin : 20px 10px 20px 5px;
border : 0 dashed #8a795d;
font-size : 110%;
}
.post .date {
background : url(images/clock.gif) no-repeat left center;
padding-left : 20px;
margin : 0 15px 0 5px;
}
.post a {
color : #ff6c17;
}
.post .comments {
background : url(images/comment.gif) no-repeat left center;
padding-left : 20px;
margin : 0 15px 0 5px;
}
.post .readmore {
background : url(images/page.gif) no-repeat left center;
padding-left : 20px;
margin : 0 15px 0 5px;
}
#rightcolumn {
color : #333;
margin : 28px 0px 5px 5px;
min-height : 350px;
width : 212px;
float : left;
}
#rightcolumn h3 {
}
.thumbs {
border : 1px solid gray;
margin : 5px 8px;
padding : 1px;
}
.news h4 {
font-family : verdana;
font-size : 1.0em;
padding-top : 10px;
padding-left : 3px;
padding-bottom : 5px;
color : #990000;
margin-left : 10px;
}
.news p {
font-family : verdana;
font-size : 0.75em;
padding-left : 0px;
padding-bottom : 5px;
margin-left : 10px;
margin-right : 5px;
text-align : left;
padding-right : 0px;
background-color : #FFFFFF;
}
.news a {
float : right;
margin-right : 5px;
}
#footer {
width : 900px;
clear : both;
color : #333;
border : 1px solid #ccc;
margin : 5px 0 5px 17px;
padding : 10px 0;
background-image : url(images/footerbg.jpg);
background-repeat : repeat-x;
background-position : top 0%;
text-align : center;
}

 

[Requisition]

I'm have the same kind of issue on a website of my own. It looks nice when it is in a bigger resolution, but whenever it is below 1024x768 or the window isn't maximized, it is no longer aligned. Anyone know what to do about this?

 

[AdExpressions]

The navigation div in your style.css says position:absolute, which means that no matter what size the viewing window is, it is going to stay in its same position. Take out the absolute element, put in float:left; and it should adjust to window size. It's worth a shot.

 

[constanthosting]

What adexpressions should work, You may also want to try defining your menu to it's own div as when I look at your source it appears to be stick into a bunch of Ul's and li's with another set of ul's and li's altho I may be wrong, sometimes the view source doesn't show what is actually in the php/html file, heh.