...

View Full Version : CSS: Images refuse to float left



JFro
05-31-2009, 01: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
05-31-2009, 08: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
05-31-2009, 03: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
06-01-2009, 09: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
06-03-2009, 06:52 PM
Still nothing on this...I'll have to think of another way round it I think!

Alith7
06-09-2009, 10: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
06-10-2009, 09: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
06-10-2009, 09: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum