SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Moving <li> onto new line.

    Site in question

    Can someone see a quick & easy way of moving the 'Design & Print' option in the <ul> onto a new line, so it sits under 'home'? Is there a tidier way of wrapping the top/bottom lines in seperate divs?

    Thank you.

  2. #2
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    havn't tried this... but if you float all the li's to the left you may be able to add a clear:left to the deign & Print li, dropping it onto the new line
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes - remove the display: inline and replace it with float: left - then you can clear that item (or alternatively, apply a width to the UL so that the items have to wrap).

  4. #4
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok now I'm confused.

    Home Page

    I tried that and it seemed to work fine in Firefox, then looked at it in IE and the promotion <li> seems to have shifted order!

    Can anyone please help again...

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

    Although you have cleared one list item IE doesn't agree that following list items should also be cleared and will stack as many as it can on the line above. IE needs a 100&#37; width clearer to make it start on a new line.

    Therefore instead just break it into 2 lists as follows.

    Code:
    #header ul.sub{margin:0!important;}
    Code:
            <ul>
                <li class="no-bg"><a href="index.html" title="Home">Home</a></li>
                <li><a href="contact-us.html" title="Contact Us">Contact Us </a></li>
                <li><a href="links.html" title="Links">Links </a></li>
            </ul>
            <ul class="sub">
                <li  class="no-bg"><a href="design-print.html" title="Design &amp; Print">Design &amp; Print </a></li>
                <li><a href="promotion.html" title="Promotion">Promotion</a></li>
                <li><a href="web.html" title="Web Solutions">Web Solutions </a></li>
            </ul>

  6. #6
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats fixed it. Paul, you're a star. THANKS.



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
  •