I have a list with six items and the third one is not in the place it should be.
Here's the html:
And the css:
Here's the html:
Code:
<ul> <!--1--> <a href=""> <li><img class="hp_img" src="images/homepage/W12.png" width="145" height="182" alt="W12 2 in 1 tablet"> <p class="hp_ad_txt">W12 2-in-1 Tablet<br />-------<br />12" Screen</p> </li> </a> <!--2--> <a href=""> <li><img class="hp_img" src="images/homepage/4U.jpg" width="145" height="182" alt="Dream Micro 4U Server"> <p class="hp_ad_txt">Dream<br />Micro 4U Server<br />--------<br />Full Scalability</p> </li> </a> <!--3--> <a href=""> <li><img class="hp_img" src="images/homepage/H81.jpg" width="180" height="132" alt="Dream Vision H81 All In One PC" style="padding-top:20px;"> <p class="hp_ad_txt">Dream Vision H81<br />-------<br />All In One PC</p> </li> </a> <br /> <!--4--> <a href=""> <li><img class="hp_img" src="images/homepage/MINI_PC.jpg" width="180" height="132" alt="Dream Vision Mini P C" style="padding-top:20px;"> <p class="hp_ad_txt" style="margin-top:20px">Dream Vision <br />-------<br />Mini Pc</p> </li> </a> <!--5--> <a href=""> <li><img class="hp_img" src="images/homepage/P77.jpg" width="180" height="132" alt="Dream Book Laptops" style="padding-top:20px;"> <p class="hp_ad_txt" style="margin-top:30px">Dream Book<br />-------<br />Laptops</p> </li> </a> <!--6--> <a href=""> <li><img class="hp_img" src="images/homepage/5018D.jpg" width="180" height="132" alt="5018D Server" style="padding-top:20px;"> <p class="hp_ad_txt" style="margin-top:10px">5018D Server<br />-------<br />Starting at $1249</p> </li> </a> </ul>
Code:
.col2 ul{
display:block;
list-style:none;
margin:0;padding:0;
text-align:center;
}
.col2 ul a li{
display:inline-block;
width:305px;
height:212px;
margin:0 auto;
background-image:url('images/homepage/border.png');
background-repeat:no-repeat;
padding-top:5%;
color:green;
position:relative;
}
.hp_img{
margin:-45px 100px 0 0;
}
.hp_ad_txt{
position:absolute;
top:5%;left:45%;
text-align:center;
}
Comment