CODEWITHSUNDEEP
htmlimagelist
s.poole
s.poole

Reputation: 131

Basic HTML - Unordered List, how to make it my images vertical?

I have two images and would like to place one on top of another using a list. The current code I'm using places the second image to the right of the first one, not directly below it.

Any ideas? Might be basic but I'm new to programming. Thanks.

<ul>
<li>
<img width="178" height="178" alt="ZE40" src="images/ze40.jpg">
<img width="178" height="40" alt="ZE40" src="images/ze40i.jpg">
</li>
</ul>

Upvotes: 0

Views: 80

Answers (3)

Duncan Lukkenaer
Duncan Lukkenaer

Reputation: 13914

You should try this:

<ul>
    <li>
        <img width="178" height="178" alt="ZE40" src="images/ze40.jpg">

    </li>
    <li>
        <img width="178" height="40" alt="ZE40" src="images/ze40i.jpg">
    </li>
</ul>

To remove the space between them you can do this in your CSS:

ul, li {
    margin: 0;
    padding: 0;
}

Upvotes: 0

j08691
j08691

Reputation: 207861

There are two basic options here:

  1. Change the CSS display property for the images to block. jsFiddle example 
img {
    display:block;
}
  1. Put each image in its own list item and set the vertical alignment to top. jsFiddle example:
<ul>
    <li>
        <img width="178" height="178" alt="ZE40" src="images/ze40.jpg" />
    </li>
    <li>
        <img width="178" height="40" alt="ZE40" src="images/ze40i.jpg" />
    </li>
</ul>
img {
    vertical-align:top;
}

Upvotes: 2

Azertit
Azertit

Reputation: 102

Just use another <li></li> for the second image

<ul>
<li>
<img width="178" height="178" alt="ZE40" src="images/ze40.jpg">
</li>
    <li>
        <img width="178" height="40" alt="ZE40" src="images/ze40i.jpg">
    </li>
</ul>

Edit: When you use 2 images on 1 <li>, it would put 2 images next to each other, but when you use the second, the first one will go on top of the second one just like when you make a list for yourself on a paper.

Upvotes: 0

Related Questions