CODEWITHSUNDEEP
htmlcsspositioninghtml-lists
Karine
Karine

Reputation: 587

list item positioning as it is in the picture

Can anyone please help me understand how to position the following layout? It seems to be pretty simple. enter image description here

I have this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#container
{
    width:730px;
    margin:0 auto;
    }
#big_img
{
    width:270px;
    height:270px;
    float:left; 
}
ul
{
    list-style-type:none;
    float:left;
    padding:0;
}
 ul li
{
    display:inline;
    float:left;
    margin-right:9px;
    margin-top:0;
    margin-bottom:9px;
}
 li a img
{   
    width:130px;
    height:130px;
    border:1px solid #dcd9d9;
}

</style>


</head>

<body>

<div id="container">
  <div id="big_img"><img src="images/new-cat.jpg"/></div>
  <ul>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>           
  </ul>
</div> 
</body>
</html>

As a result the list items are displayed under the IMG. But I need to have them as it is shown in the picture.

Thanks in advance,

Upvotes: 0

Views: 87

Answers (3)

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41855

This looks close to what you want: (you don't have to use lists)

HTML:

​<div id="container">
  <div id="bigimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
  <div class="smallimage"></div>
​</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​

#container {
  width:730px;
}

#bigimage {
    width:270px;
    height:270px;
    background-color: red;
    float: left;
    margin: 7px;
}

.smallimage {
    border:1px solid green;
    width:130px;
    height:130px;
    float: left;
    margin: 5px;
}​

jsFiddle here

Upvotes: 0

michaeltintiuc
michaeltintiuc

Reputation: 671

You have to remove float: left; from #big_img and ul

Upvotes: 0

Pete
Pete

Reputation: 1554

You need to take the float style out of your ul class:

ul {
    list-style-type:none;
    padding:0;
}

The float in the ul is causing the whole list as one big element to be floated, which is forcing it down below the img.

Upvotes: 2

Related Questions