#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    153
    Rep Power
    13

    Css nav menu inline help


    Hi

    I am trying to get the following nav menu to display in a line horizontially instead of vertically

    [HTML]
    <div id="navigation">
    <div id="navigation-inner">
    <ul class="sf-menu">
    <li><a href="index.php">Welcome</a></li>
    <li><a href="whatwedo.php">What We Do</a></li>
    <li><a href="meetwhiskey.php">Meet<br />Whiskey</a></li>
    <li><a href="packages.php">Packages</a></li>
    </ul>
    </div>
    </div>
    [/HTML]

    Code:
    #navigation {
    position:relative;
    z-index:4;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    }
    
    #navigation-inner {
    position:absolute;
    z-index:4;
    top:-13px;
    left:-20px;
    width:211px;
    }
    
    .sf-menu {
    margin:0;
    padding-left:25px;
    padding-top:60px;
    padding-right:0;
    padding-bottom:0;
    list-style-type:none;
    }
    
    .sf-menu li {
    width: 92px;
    height: 110px;
    margin-left:0;
    margin-right:0;
    margin-top: 0;
    margin-bottom:8px;
    /*background: #cab077;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    /*background: url(../images/nav-background.png);*/
    /*background-image:url('./images/nav-background.png');*/
    background: url(../images/navballoon.png) no-repeat;
    background-position:0 0;
    }
    
    .sf-menu li:hover {
    /*background: #FFFFFF;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;*/
    background: url(../images/navballoonhover.png) no-repeat;
    background-position:0 0;
    color: #000000;
    }
    
    .sf-menu li a {
    display:block;
    padding-left: 2px;
    padding-top: 30px;
    font-size:9pt;
    font-weight:bold;
    color: #FFFFFF;
    text-align: center;
    }
    
    .sf-menu li a:hover {
    text-decoration:none;
    color: #FFFFFF;
    }
    The link is below to see how it currently is

    http://www.irhwebsites.co.uk/sites/e...ties/index.php
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    8
    Rep Power
    0
    change display:block; to display:inline;

IMN logo majestic logo threadwatch logo seochat tools logo