SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot Skibum1321's Avatar
    Join Date
    Jun 2003
    Location
    Malden, MA
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Horizontal navigation problems

    Problem #1
    This seems to be a recurring topic on the boards, but I can't seem to get the link to stretch out to the entire size of each of my buttons. It only highlights the text. I've tried to make them blocks but that just seems to make them line up one under another.

    Problem #2
    My links will load in one place on my page and then shift to the left on the first mouseover. It's really all pretty screwy. Any suggestions?

    Here is my code:
    Code:
    body {
    margin: 0px;
    padding: 0px;
    font-family: Trebuchet MS, verdana, arial, helvetica, sans-serif;
    color: #ffffff;
    background: #ffffff;
    z-index:1;
    }
    
    #header{
    position:relative;
    background-color:#000000;
    color:#ffffff;
    top:0px;
    left:0px;
    width:100%;
    height:150px;
    }
    
    #topnav{
    padding:2px 0px 2px 20%;
    background-color:#009900;
    }
    
    #topnav ul{
    display:inline;
    list-type:none;
    }
    
    #topnav ul li{
    display:inline;
    list-type:none;
    padding:2px 5px 2px 10px;
    margin:0px 5px 0px 5px;
    border: #000000 1px solid;
    border-bottom:0px;
    }
    
    #topnav a:link, a:visited { 
    	height:100%;
    	width:100%;
    	text-decoration: none; 
    	color:#003300; 
    	background-color:#000099;
    	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; 
    }
    
    #topnav a:hover, a:active { 
    	text-decoration: none; 
    	color:#33ff33;
    	background-color:#000033;
    	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    }
    
    #sidenav{
    position:relative;
    top:0px;
    left:0px;
    width:15%;
    background-color:#006600;
    color:#ffffff;
    padding:15px 0px 0px 15px;
    }
    
    #pageborder{
    position:absolute;
    background:transparent;
    border:#000000 solid 1px;
    left:5%;
    width:90%;
    top:20px;
    }
    
    a.navlink:link, a.navlink:visited { 
    	text-decoration: none; 
    	color:#ccff99; 
    	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; 
    	background-color:inherit;
    }
    
    a.navlink:hover, a.navlink:active { 
    	text-decoration: none; 
    	color:#33ff33;
    	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    	font-style:italic;
    	background-color:inherit;
    }
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
    <html>
    <head>
    <title>M.O.V.E. - Mobilization of Volunteer Efforts</title>
    <link rel="stylesheet" href="movestyle.css" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    
    <body>
    <div id="pageborder">
    	<div id="header">M.O.V.E.</div>
    	<div id="topnav"><ul>
    		<li><a href="directors.html">Directors</a></li>
    		<li><a href="programs.html">Programs</a></li>
    		<li><a href="events.html">Upcoming Events</a></li>
    		<li><a href="mission.html">Mission</a></li>
    		<li><a href="campusministry.html">Campus Ministry</a></li>
    	</ul>
    	</div>
    	<div id="sidenav">
    	</div>
    </div>
    </body>
    </html>
    Here is a link to the site:
    http://www.geocities.com/keith1369/moveindex.html
    Keith Rousseau

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,277
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Problem #2
    My links will load in one place on my page and then shift to the left on the first mouseover. It's really all pretty screwy. Any suggestions?
    I think this is a problem with IE when padding is set on an inline element (in some circumstances). If you have a look at the list apart site (taming lists) their vertical menu behaves the same way in IE6. Mozilla does not have this problem.

    The offending line is the left padding (20%) in this line:

    Code:
    #topnav{ padding:2px 0px 2px 20%; background-color:#009900; } 



    If you take the 20% out then the problem disappears so if you can position your list some other way then the problem should go away (hopefully).

    I can't remember the proper solution to your first problem but I just added some padding to the links when I used a similar layout and that seemed to work.

    Sorry I can't be more specific but hope it helps a bit.

    Paul

  3. #3
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://ecoculture.com/styleguide/r/rollovers.html

    That'll explain how to resolve both issues with your menu

  4. #4
    SitePoint Zealot Skibum1321's Avatar
    Join Date
    Jun 2003
    Location
    Malden, MA
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That tutorial presents the same problem that I am already encountering. Whenever I use display:block my link gets stretched across the screen and they display one under another.
    Keith Rousseau

  5. #5
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #topnav{
    padding:2px 5px 2px 10px;
    background-color:#009900;
    }

  6. #6
    SitePoint Zealot Skibum1321's Avatar
    Join Date
    Jun 2003
    Location
    Malden, MA
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That takes care of the shifting problem, but the links still don't reach to the borders. The padding has no effect on this. I know I could do it without using a list, but I also want this to work using a list.
    Keith Rousseau

  7. #7
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Completely removing the padding does have an effect - I just tried it, and it makes the link fill the space to the border. Though it does resize things - you might want to consider non-breaking spaces to pad, and removing the padding.


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
  •