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