Power By 专否社区

list item positioning as it is in the picture

Go To StackoverFlow.com

0

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,

2012-04-03 22:58
by Karine
If you're using jQuery, Masonry might be worth a look. Otherwise, why not put them in a table - Bojangles 2012-04-03 23:02
I don't use jQuery. Table should work fine, but I want to understand the reason why my code doesn't work and not just to solve the problem at the moment - Karine 2012-04-03 23:06

2

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.

2012-04-03 23:04
by Pete

0

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

2012-04-03 23:06
by michaeltintiuc

0

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

2012-04-03 23:08
by Benjamin Crouzier
Ads