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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts

    thumbnails causing problems with horizontal lists

    I've created some example code that roughly conveys my troubles.

    My page has images at the top and down the right hand side.
    All of the images are in a single div; as much as I'd like to have a top div and a side div I have some other scripting that will not permit this.

    the left side is then left open for some content...

    all content works fine EXCEPT when I make my list a horizontal one (by floating the li tags) the list moves further down the page then I want....

    Below is a quick an example... if you remove the ul li float:left the spacing between the h1 and ul li elements is fine.. but they are vertical...

    I've been playing with block display for the images and other things.. any insight will be appreciated ...


    In summary; i need a horizontal list below the h1 tag while their are images at the top and right sides of the page.....thanks...



    Code:
    <html>
    <style>
    body{
    width: 800px;
    
    }
    
    ul li {
    float: left;
    }
    
    </style>
    
    
    <body>
    <img src="http://www.codingforums.com/img/logo.gif" />
    <img src="http://www.codingforums.com/img/logo.gif" />
    <img style="float: right; display: block;" src="http://www.codingforums.com/img/logo.gif" />
    <img style="float: right; display: block; clear: right;" src="http://www.codingforums.com/img/logo.gif" />
    <img style="float: right; display: block; clear: right;" src="http://www.codingforums.com/img/logo.gif" />
    <img style="float: right; display: block; clear: right;" src="http://www.codingforums.com/img/logo.gif" />
    <h1>some header</h1>
    <ul>
     <li>why the gap above?</li>
     <li>when</li>
     <li>float for horizontal?</li>
    </ul>
    </body>
    
    </html>
    Last edited by twinturbotom; 08-11-2011 at 10:30 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try

    Code:
    * { margin: 0; padding: 0; }
    all tags have default margins and paddings, this resets all of them

    oh, nevermind i actually just plugged the code in, so every time you clear:right, all the content underneath is pushed down. try to set this up with 2 columns, one to the left (text) and the logos in the right column instead
    Last edited by Sammy12; 08-11-2011 at 11:00 PM.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    putting the content in a div doesn't fix the problem oddly enough. div'ng up the images (a top and a side div) does but I cannot allow the images to be in different divs because of another script.

    any other thoughts? seems like some fundamental float, li display thing I haven't grasped.

    ideally I'd like to have a solution with CSS ul / li changes only. Or CSS on the images without having to put them in different divs. Fun one! Thanks

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    css only I don't think that's possible. Maybe someone else may post an idea. good luck

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I got it to work by replacing the ul li "float: left;" with "display: inline;"


    SO the bigger question is.... horizontal lists should be displayed inline or floated left?

    if floated left then how do I fix the problem I'm running into without floating?


    My understanding of lists was that the items were their own type of display (block, inline, LIST)... so that logic made it difficult for me to change the display to inline..

    Thoughts on horizontal lists? thanks!

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your original problem is to do with float context - when you float the list they are then positioned with regard to other floated elements - the images on the right. There's an explanation here.

    If you apply overflow:auto to your ul, this establishes a new float context and the problem goes away.

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thank you for the link and explanation; EXTREMELY helpful... creating inline li elements creates some other minor problems I was about to fix up but now I'm going to work on what you mentioned...

    overflow: auto; is new for me... thanks! i appreciate the help!

    setting my ul with overflow: auto fixed it up perfectly... my li's are floated left and everything looks perfect... THANK YOU!
    Last edited by twinturbotom; 08-12-2011 at 02:06 PM.


  •  

    Posting Permissions

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