Results 1 to 6 of 6

Thread: CSS/HTML Menu Help in lower Screen Resolution

  1. #1
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Default CSS/HTML Menu Help in lower Screen Resolution

    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:

    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>
    and my CSS file:

    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;
    }
    thanks again and i hope this is descriptive enough.

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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

  3. #3
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Default

    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

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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.

    Code:
    width: 100%;
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  5. #5
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Default

    oh ya duh, why didnt i think of that before...thanks blizzard for helping me out

  6. #6
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    No worries, often the simple things give us the largest headaches..

    whoa, I sounded like a fortune cookie just now.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •