Results 1 to 5 of 5

Thread: Problem in alignment of text link

  1. #1
    Join Date
    Jul 2010
    Posts
    228
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Default Problem in alignment of text link

    Good day!

    I got a navigation bar in dynamicdrive and the problem is the alignment of the text link:

    here is the code of css and html:

    Code:
    <style type="text/css">
    #nav_vertical {
    	position:absolute;
    	width:191px;
    	height:111px;
    	z-index:7;
    	left: 10px;
    	top: 159px;
    }
    
    #nav_vertical ul{
    font: bold 12px Arial, Verdana, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
    }
    
    #nav_vertical li{
    display:inline;
    margin: 0 0 0 0;
    padding: 0;
    text-transform:uppercase;
    }
    
    
    #nav_vertical a{
    float:left;
    color: green;
    /*background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;*/
    margin:0 2px 0 0;
    padding:0 0 1px 3px;
    text-decoration:none;
    letter-spacing: 1px;
    }
    
    #nav_vertical a span{
    float:left;
    display:block;
    /*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
    padding:9px 9px 2px 6px;
    }
    
    
    #nav_vertical a:hover{
    color:#00CC00;
    }
    
    #nav_vertical a:hover span{
    color: #00CC00 ;
    }
    
    #nav_vertical #current a, #nav_vertical #current span{ /*currently selected tab*/
    /*background-color: #678b3f; */
    color:#FFFFFF
    }
    
    </style>
    
    
    <div id="nav_vertical">
    <ul>
    <li id="current"><a href="player.php" title="PLAYERS"><span>PLAYERS</span></a></li>
    <li><a href="photos.php" title="PHOTOS"><span>PHOTOS</span></a></li>
    <li><a href="news.php" title="NEWS"><span>NEWS</span></a></li>
    </ul>
    </div>
    the output of this code is like this:

    PLAYERS PHOTOS

    NEWS


    I want that like this:

    PLAYERS
    PHOTOS
    NEWS

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    Please post a link to your live page/development page so we can see the problem first-hand.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    Try taking out the float:left; values of #nav_vertical a and #nav_vertical a span ?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Your
    HTML Code:
    #nav_vertical li{
    display:inline;
    margin: 0 0 0 0;
    padding: 0;
    text-transform:uppercase;
    }
    Should be:

    HTML Code:
    #nav_vertical li{float:left; clear:both;display:block;margin: 0;padding: 0;text-transform:uppercase;}

  5. #5
    Join Date
    Jul 2010
    Posts
    228
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Default

    Thank you

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
  •