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 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    26
    Thanks
    8
    Thanked 0 Times in 0 Posts

    CSS: Images refuse to float left

    Ok...I must be missing something here. I would like some images to appear horizontally, so I can use a horizontal scroll bar. But when they reach the edge of the div they drop down to the next row, meaning I have 3 images hortizonally on one row and then two on the next row down.
    What SHOULD work? I am using float:left and have tried no-wrap as well. I will post my CSS code, but it's a bit all over the place as I have been trying anything any everything!
    I am new to CSS. I might be doing this quite a complicated way or something?

    Code:
    .seasonsframe{width:50%; height:130px; margin-top:1%; float:left; overflow:hidden; white-space:nowrap; position:relative}
    ul.seasons{list-style-type:none; text-align:center;}
    li.season{float:left; padding-left:5%; padding-right:5%;}
    img.season{width:60px; height:60px; display:inline}
    Last edited by JFro; 05-31-2009 at 01:35 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Hello JFro

    I think it's the float that's causing the problem here as this property will cause the image to drop down if there's no space. In this instance you're just using the float to convert a vertical list into a horizontal one, which here you can also do using display:inline on the <li> element.

    The overflow property you need is overflow:scroll.

    Give this a try:

    Code:
    .seasonsframe{width:50%; height:130px; margin-top:1%; float:left; overflow-x:scroll;white-space:nowrap; position:relative}
    ul.seasons{list-style-type:none; text-align:center;}
    li.seasons{padding-left:5%; padding-right:5%;display:inline}
    img.seasons{width:60px; height:60px;}
    Other thoughts: You could remove your <ul> entirely and just have the images in .seasonsframe, which dodges some of the issues anyway.

    I'm assuming, incidentally, that you just have the image in your <li>. If you're putting text in as well, that probably changes things.
    Last edited by SB65; 05-31-2009 at 08:35 AM.

  • Users who have thanked SB65 for this post:

    JFro (06-06-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello JFro,
    I have a demo of a Horizontal scrollbar here - http://nopeople.com/CSS/scrollers/index.html
    View the source to see how it's done.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    JFro (06-06-2009)

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    26
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hello SB65 and Excavator,

    Thank you very much for your help...I have had another play with the code, but still no joy! Removing float:left from li makes the images display diagonally. Altering my code to be more like Excavators didn't seem to work either (I probably missed something!). Anyway, futher suggestions would be very welcome - this is taking me many hours! (the original CSS I posted is probably a better working version at the moment)

    Code:
    .seasonsframe{width:75%; height:130px; margin-top:1%; overflow-x:scroll; overflow-y:hidden;}
    ul.seasons{list-style-type:none; text-align:center;}
    li.season1{padding-left:5%; padding-right:5%; display:inline}
    img.season{width:60px; height:60px;}
    AND (the basics of!!) the HTML:
    Code:
    <div class="seasonsframe padding4">
    <ul class="seasons">
            
    <li class="season1"><a><img class="season" src="pics/Spring 08/Misc/DSC_0169.jpg" alt=""/><br/> Spring 2008 </a>            </li>
            
    <li class="season1"><a><img class="season" src="pics/Spring 08/Misc/DSC_0169.jpg" alt=""/><br/> Summer 2008 </a>            </li>
            
    <li class="season1"><a><img class="season" src="pics/Spring 08/Misc/DSC_0169.jpg" alt=""/><br/> Autumn 2008 </a>            </li>
    
    </ul>
    </div>

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    26
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Still nothing on this...I'll have to think of another way round it I think!

  • #6
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    Code:
    .seasonsframe{width:75%; height:130px; margin-top:1%; overflow-x:scroll; overflow-y:hidden;}
    ul.seasons{list-style-type:none; text-align:center; display:inline;}
    li.season1{padding-left:5%; padding-right:5%; display:inline}
    img.season{width:60px; height:60px;}
    you need to add the part that I added in red.

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    .seasonsframe{width:75%; height:130px; margin-top:1%; overflow-x:scroll; overflow-y:hidden;}
    ul.seasons{list-style-type:none; text-align:center;}
    li.season1{padding-left:5%; padding-right:5%; display:inline}
    img.season{width:60px; height:60px;}
    -----------------------------------------------
    remove ul. li. and img. just keep the name of the class is ok. try following code:

    Code:
    .seasonsframe{width:75%; height:130px; margin-top:1%; overflow-x:scroll; overflow-y:hidden;}
    seasons{list-style-type:none; text-align:center;display:inline}
    season1{padding-left:5%; padding-right:5%; display:inline}
    season{width:60px; height:60px;}

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    remove ul. li. and img. just keep the name of the class is ok. try following code:
    No!

    In CSS, a class selector is a name preceded by a full stop.


  •  

    Posting Permissions

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