Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Menu positioning - A horizontal UL with images either side, the image drops down desp

    Hi All.

    I have a problem with the horizontal main nav. I want to include images either side of the UL. I have managed the left image, but the right image drops down to the next line, despite using display:inline for the container div and the ul.

    To see what i mean: http://magazine.foxybingo.com/layout_test/help/

    Here is the HTML code
    <code>
    <div id="nav"><img src="images/fmb_nav_left.gif" align="middle" style="float:left">
    <ul>
    <li><a href="#">home</a> | </li>
    <li><a href="#">life</a> | </li>
    <li><a href="#">love</a> | </li>
    <li><a href="#">looks</a> | </li>
    <li><a href="#">gossip</a> | </li>
    <li><a href="#">nice nosh</a> | </li>
    <li><a href="#">destiny</a></li>
    </ul>
    <img src="images/fbm_nav_right.gif" align="middle"></div>
    </code>

    And here is the relavent css code
    <code>
    #nav img {display:inline}
    #nav ul { padding:0px; width:745px; background-color:#feae04; height:20px}
    #nav ul li{display:inline; list-style-type:none}
    /* fonts */
    #nav ul li a {text-transform:capitalize; color:#000000; text-decoration:none; font-weight:bold; font-size:0.8em}
    #nav ul li a:hover {text-decoration:underline}
    </code>

    Any ideas on why it's dropping down to the next line rather than appearing next to the ul?

    any help greatly appreciated
    thanks

    jon

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Float:right the second Image.

    http://jlhaslip.com/mlafever/index.html

    *edit*

    just reviewed that link, looks like the owner modified some stuff. I'll post the original code as soon as i find a copy around here...

    *another edit*

    well, anyways, can't find the original validated page, but float the second image to the right and you might be okay with what you have there.

    And check this out: http://w3schools.com/css/pr_pos_vertical-align.asp or maybe this one: http://w3schools.com/css/css_reference.asp#positioning

    I can't find align= on either of them. I think it is deprecated... YUP!, sure is: http://www.w3schools.com/tags/tag_img.asp
    Last edited by jlhaslip; 09-17-2007 at 10:58 AM.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is from my PC.
    IE7 - 1024x728

    Frank
    Attached Thumbnails Attached Thumbnails Menu positioning - A horizontal UL with images either side, the image drops down desp-screenhunter_02-sep.-17-11.27.jpg   Menu positioning - A horizontal UL with images either side, the image drops down desp-screenhunter_03-sep.-17-11.35.jpg  
    Last edited by effpeetee; 09-17-2007 at 11:39 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Couple of other things:

    set the width of the nav ul to 100%
    change the order of the html so that the second image is above the ul id=nav
    Code:
    #nav ul { padding:0px; width:100%;  background-color:#feae04;  height:20px}
    
        <div id="nav">
        
        <img src="Your%20Page%20Title_files/fmb_nav_left.gif" style="float: left;" align="middle" />
        <img src="Your%20Page%20Title_files/fbm_nav_right.gif" align="middle" style="float:right;" />
            <ul>
            <li><a href="#">home</a> | </li>
            <li><a href="#">life</a> | </li>
            <li><a href="#">love</a> | </li> 
            <li><a href="#">looks</a> | </li> 
            <li><a href="#">gossip</a> | </li>
            <li><a href="#">nice nosh</a> | </li> 
            <li><a href="#">destiny</a></li>
        </ul>
          <div id="main">
    The ul is a block level element, so there is a "newline" that comes with it. Having the right-hand image follow it, of course, forces it to be below the block level element. Float it into position first and the ul will fit between them.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •