SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can i stop last link on horizontal menu from float out

    Hi i have the following webpage which has horizontal menu at the top (home, about us and so on) my problem is that if the users minimaze the page with ctrl - or maximise with ctrl+ the last links from the menu moves under the navigation bar.
    how can i stop that from happening so that no matter if the users minimizes or maximimise the links words should shrink enough to always fit in the navigation bar here my page
    website

    here my menu codes

    HTML
    PHP Code:
    <div class="row6">  <!--START navigation button START -->      

       <
    ul id="topnav">
            <
    li><a href="index.php"><b>HOME</b></a></li>
            <
    li><a href="home2.html"> <b>ABOUT US</b></a></li>
            <
    li><a href="gallery.html"><b>GALLERY</b></a></li>
            <
    li><a href="market.php"><b>VIDEO MARKETING</b></a></li>
            <
    li><a href="#"><b>WEB <span style="color: #0F0; font-weight:900px;">TV</spanPRESENTERS.co.uk</b></a></li>
            <
    li><a href="#"><b>AWARDS</b></a></li>
            <
    li><a href="#"><b>INSTANT QUOTE</b></a></li>
            <
    li><a href="#"><b>EQUIPMENT</b></a></li>
            <
    li><a href="#"><b>STAFF</b></a></li>
            <
    li><a href="#"><b>CONTACT US</b></a></li>      
        </
    ul>
         <!-- 
    END navigation button END -->
    </
    div
    the CSS

    PHP Code:
    ul#topnav {
    width:800px;
        
    margin0padding0;
        
    floatleft;
        
    height:25px;
        list-
    stylenone;
        
    background-image:url(images_menu_top/middle.gif);


    }
    ul#topnav li {
        
    floatleft;
        
    margin0padding0;
        
    border-left1px solid #555;
        
    height:25px;
    }
    ul#topnav li a {
        
    padding5px 5px;
        
    displayblock;
        
    colorblack;
        
    text-decorationnone;
        
    font-size:14px;
    }
    ul#topnav li:hover {
        
    text-decoration:underline;

    }
    #topnav li ul {
        
    floatleft;
        
    padding10px 0;
        
    positionabsolute;
        
    left0top:25px;
        
    displaynone;
        
    width1000px;
        
    colororange;
        -
    moz-border-radius-bottomright5px;
        -
    khtml-border-radius-bottomright5px;
        -
    webkit-border-bottom-right-radius5px;
        -
    moz-border-radius-bottomleft5px;
        -
    khtml-border-radius-bottomleft5px;
        -
    webkit-border-bottom-left-radius5px;
    }
    #topnav li:hover ul { display: block; }
    #topnav li ul a { display: inline; color:orange; }
    #topnav li ul a:hover {text-decoration: underline;} 

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The last two links in all my browsers are on the next line anyway at normal text size. I have to shrink the text quite a few times before it will fit on one line.

    You should either design it so that text can wrap to another line and the background follows or reduce the number of links in that menu so that it can grow a bit withut dropping. Or design the width of the page and nav in ems and not pixels so that the width scales with text resize at the same rate.

    Apart form the above there is nothing you can do otherwise to stop the text from enlarging and moving to the next line.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks can i just ask to have a lok at this one can you tell me if the links are going under aswell the menu is at bottom
    1st4film | High Definition INTERNET FILMS for Television and Sport inc. WEB TV Streaming NORTH OF ENGLAND

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    They seem to be ok on one line in that page at normal text size in Firefox and IE.

    For narrow width layouts like that I would usually accept that the text is going to wrap when increased in size and maybe have the menu text centred and the background follow down to the next line.

    The options are few as I mentioned above because you gave no real control over these things so you should always expect that things may not fit exactly as your picture dictates and make sutiable arrangements when text wraps or stretches.

    These are the trials of a web developer

  5. #5
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much i'll work on it


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
  •