SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make an existing vertical navigation list horizntal

    Hi there

    I have an exisiting navigation list which is currently vertical however, I would like it horizontal, but I am not sure how this is done. I have added display:inline into the li's properties but this doesn't help. Any ideas?

    CSS:-

    Code:
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	}
    
    /* 
    
    =-=-=-=-=-=-=-[Menu One]-=-=-=-=-=-=-=- */
    	
    #menu {
    	width:95px;
    	border-style: solid solid none solid;
    	border-color: #94AA74;
    	border-size: 0px;
    	border-width:0px;
    	margin: 0px;
    	}
    	
    #menu li a {
    	height: 80px;
      	voice-family: "\"}\""; 
      	voice-family: inherit;
      	height: 80px;
    	text-decoration: none;list-style:none;display:inline;
    	}	
    	
    #menu li a:link, #menu li a:visited {
    	color: #5E7830;
    	display: block;
    	background: url(images/home.png);
    	padding: 8px 0 0 10px;
    	}
    	
    #menu li a:hover {
    	color: #26370A;
    	background: url(images/home.png) 0 -90px;
    	padding: 8px 0 0 10px;
    	}
    	
    #menu li a:active {
    	color: #26370A;
    	background: url(images/home.png) 0 -90px;
    	padding: 8px 0 0 10px;
    	}
    HTML:-

    Code:
    <div id="menu">
    		<ul>
    			<li><a href="#1" title="Home">Home</a></li>
    			<li><a href="#2" title="About">About</a></li>
    			<li><a href="#3" title="Services">Services</a></li>
                            <li><a href="#4" title="Portfolio">Portfolio</a></li>
    			<li><a href="#5" title="Store">Store</a></li>
    			<li><a href="menu1.zip" title="Download">Download Menu</a></li>	
    		</ul>
    	</div>
    Kind Regards

    James

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    You forgot to take out the "display:block" in your third declaration. (#menu li: a:link etc.)
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ShyFlower, however this doesn't work

    The result of removing the display:block is here

    How I want it to be displayed, but horizontally is here

    Any other way of making the menu horizontal instead of vertical?

    Cheers

    James

  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you need to change more to make it perfect, but the width of the box is too small:
    Code:
    #menu {
    	width:95px;
    }
    Better increase or remove it.

    And you need to add:
    Code:
    #menu li {
    display: inline;
    }

  5. #5
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks anyway but unfortunatley this doesn't work. By increasing the width of the div, the buttons just become wider and by adding display:inline to the Li doesn't make a difference I am afraid. Any other ideas anyone?

    Cheers

    James

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Williamsport, PA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do a "float: left" on the li elements.

  7. #7
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Page title</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!-- 
    #menu {
    
    border: none;
    margin: 0 auto;
    text-align: center;
    }
    #menu li{
    width:95px;
    display: inline;
    list-style-type: none;
    }
    	
    #menu li a {
    height: 80px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    height: 80px;
    text-decoration: none;
    padding: 8px 0 0 10px;
    }	
    	
    #menu li a:link, #menu li a:visited {
    color: #5E7830;
    background: url(images/home.png);
    }
    	
    #menu li a:hover {
    color: #26370A;
    background: url(images/home.png) 0 -90px;
    }
    	
    #menu li a:active {
    color: #26370A;
    background: url(images/home.png) 0 -90px;
    }
      
    -->
    </style>
    </head>
    <body>
    <div id="menu">
    <div id="menu">
    <ul>
    <li><a href="#1" title="Home">Home</a></li>
    <li><a href="#2" title="About">About</a></li>
    <li><a href="#3" title="Services">Services</a></li>
     <li><a href="#4" title="Portfolio">Portfolio</a></li>
    <li><a href="#5" title="Store">Store</a></li>
    <li><a href="menu1.zip" title="Download">Download Menu</a></li>	
    </ul>
    	</div>
    </div>
    </body>
    </html>

    This works. Just one sheet here, though. You'll of course need to take the css from this html and put it into your style sheet. The general problems were:
    1. you need to take the width out of the division declaration and put it into your list item.

    2. put the display:inline into #menu li

    3. Take display:block out of your code
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  8. #8
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for taking a look and coming up with the code- you might have understood me - I don't want to have any of the words within the navigation - just the images, and each image displayed must be 95w and 90h

    Any ideas?

    Cheers for the help

    James

  9. #9
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to bump this thread, but does anybody know the answer on how to do this? Any help you can give me is much appreciated

    Kind Regards

    James

  10. #10
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Several people told you to remove the display block, and remove the menu width setting, and add a display inline. Maybe some finetuning is needed after that, but since the links you posted do not show any of those *required* changes it's difficult to help you any further I think.


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
  •