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:
and my CSS file:Code:<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>
thanks again and i hope this is descriptive enough.Code:#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; }



Reply With Quote

Bookmarks