PDA

View Full Version : CSS: Images refuse to float left



JFro
May 31st, 2009, 02:31 AM
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?


.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}

SB65
May 31st, 2009, 09:29 AM
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:


.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.

Excavator
May 31st, 2009, 04:39 PM
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.

JFro
Jun 1st, 2009, 10:57 PM
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)


.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:

<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>

JFro
Jun 3rd, 2009, 07:52 PM
Still nothing on this...I'll have to think of another way round it I think!

Alith7
Jun 9th, 2009, 11:53 PM
.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.

sophiamore
Jun 10th, 2009, 10:22 AM
.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:


.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;}

SB65
Jun 10th, 2009, 10:36 AM
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.