PDA

View Full Version : CSS/HTML Menu Help in lower Screen Resolution



Moshambi
11-21-2007, 01:28 AM
i started to work on a project for a website and created a menu that runs along the top under the banner using HTML and CSS, but when i change my screen resolution from 1024x768 to 800x600 it makes the last menu link drop down below the others...im assuming this is something simple but i have just begun to explore CSS so any help will be appreciated.

Here is the HTML for my Menu:




<div id="menu">
<ul>

<li><a href="#"> Home </a></li>
<li><a href="#"> Register </a></li>
<li><a href="#"> Games </a></li>
<li><a href="#"> Events </a></li>
<li><a href="#"> Community </a></li>
<li><a href="#"> Arcade </a></li>
<li><a href="#"> Leaderboards </a></li>
<li><a href="#"> About </a></li>
</ul>
</div>



and my CSS file:



#menu
{
margin-top: 0px;
margin-left: -41px;
font-family: arial;

}

#menu ul
{
list-style-type: none;
}

#menu ul li
{
display: inline;
}

#menu ul li a
{
text-decoration: none;
height: 25px;
margin: 12px 0;
padding: 15px;
width: 65px;
text-align: center;
border: solid gray 1px;
}

#menu a:link, #menu a:visited
{
color: white;
font-weight: bold;
background-image: url("images/menu_tile.bmp");
background-repeat: repeat-x;

}

#menu a:hover, #menu a:active
{
color: white;
font-weight: bold;
background-image: url("images/menu_tile_reverse.bmp");
background-repeat: repeat-x;
}


thanks again and i hope this is descriptive enough.

boogyman
11-21-2007, 02:16 PM
thats a combination of the width of the menu and the font-size of the text... only way to avoid that is to moderate one of those elements

Moshambi
11-21-2007, 08:29 PM
there is no way to make it so it will always stay like that? cuz it also happens when i resize the window....ill change the font size for now but if you know of a way to keep it set there that would be awesome. thanks

BLiZZaRD
11-21-2007, 08:41 PM
Set the width to a percentage instead of a px or em amount. If you set it to 100% it will resize the menu with the width of the window.



width: 100%;

Moshambi
11-21-2007, 08:47 PM
oh ya duh, why didnt i think of that before...thanks blizzard for helping me out

BLiZZaRD
11-21-2007, 09:12 PM
No worries, often the simple things give us the largest headaches..

whoa, I sounded like a fortune cookie just now.