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.
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.