Welcome to WebmasterWorld Guest from 54.196.147.57

Forum Moderators: not2easy

Message Too Old, No Replies

Image one above the other

     

damiantaylor

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

5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



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

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

5+ Year Member



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

damiantaylor

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

5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



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

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

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month