homepage Welcome to WebmasterWorld Guest from 54.224.179.98
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Image one above the other
damiantaylor




msg:4361440
 4:05 pm on Sep 12, 2011 (gmt 0)

This must be really easy but I just can't figure out how to do it!

I have an unordered list with 2 small images inside a single list item.
I want the images to appear one above the other. By above I don't mean floated over using z-index, just one above the other, like this

IMAGE1
IMAGE2

At the moment, they just appear side by side, like this

IMAGE1 IMAGE2

Here is my code

<div style="height: 465px; width: 996px;">
<ul>
<li style="list-style: none; position: absolute; top: 0px; left: 0px;">
<img style="float:left; vertical-align:text-top" src="images/image1.jpg" height="165" width="247"></a>
<img style="float:left; vertical-align:text-top" src="images/image2.jpg" height="165" width="247"></a>
</li>
</ul>
</div>


Please help!

 

alt131




msg:4361461
 4:31 pm on Sep 12, 2011 (gmt 0)

Hi damiantaylor, yes this should be easy :)

Images are inline elements (display:inline), which means they will horizontally align themselves along the same "line" if there is enough width for them to fit. Explicitly setting float:left changes the display value, but also tells the images to float left of the following element - which is what the first image is doing.

Removing the float and just setting display:block should do it.

damiantaylor




msg:4361468
 4:44 pm on Sep 12, 2011 (gmt 0)

Thanks for the quick reply!
That did the trick :)

damiantaylor




msg:4361478
 5:20 pm on Sep 12, 2011 (gmt 0)

Now I need to do something a bit trickier. Is it possible to make the images appear side by side if they are too tall to fit one on top of the other, and one on top of the other if they are able to?

I have a comtainer div that is 465px high and 990px wide.

If IMAGE1 is 465px high and 350px wide, and IMAGE2 is 465px high and 350px wide I'd like them to appear side by side as

IMAGE1 IMAGE2

If I also have IMAGE3, IMAGE4 and IMAGE5 which are all 155px high and 290px wide, I'd like them all to appear like this

IMAGE1 IMAGE2 IMAGE3
IMAGE4
IMAGE5


Is this possible with just css?

Thanks again for your help!

alt131




msg:4361513
 6:32 pm on Sep 12, 2011 (gmt 0)

Is this possible with just css?
I think that really depends on how much you want to "automate".

If you already know the dimensions it is possible to class the images. I'd suggest leave the first three at their defaults and class the last two to set display:block. However, if you are supporting modern versions, this could be a great chance to utilise the more advanced selectors [w3.org]. That provides lots of ways to do this - but you might try something like attribute selectors or nth-child/nth-of-type to start:
img[width="?"] {display:block}
or
img:nth-of-type(n+4) {display:block}

damiantaylor




msg:4361833
 10:07 am on Sep 13, 2011 (gmt 0)

I'll give that a try.
Thanks again for your help!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved