thumbnails causing problems with horizontal lists

twinturbotom

08-11-2011, 10:27 PM

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

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

Sammy12

08-11-2011, 10:53 PM

try

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

twinturbotom

08-11-2011, 11:30 PM

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

Sammy12

08-11-2011, 11:48 PM

css only I don't think that's possible. Maybe someone else may post an idea. good luck

twinturbotom

08-12-2011, 01:33 PM

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!

SB65

08-12-2011, 01:48 PM

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 (http://www.communitymx.com/content/article.cfm?cid=6BC9D).

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

twinturbotom

08-12-2011, 02:01 PM

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!