Help creating a box element using a list?

HTML & CSS
1

Hi,

Wondering if anyone can help me. I’m trying to display 3 CSS boxes in a row, which i’ve done successfully using CSS here:

My Boxes

However, my code for these boxes is messy, here’s a box code:


<div style="float:left;padding:5px; border: 5px solid #CCC;margin-bottom:10px;width:280px;margin-right:10px;">
  <img src="image2.png">
  <p style="background:#EEE;margin-top:2px">
    <img src="arrow2.jpg" style="margin-right:4px;height:14px;width:14px;padding-top:3px;" />Visit Website
  </p>
</div>

However, i’m trying to do this using less code with list elements, but not getting too far too quickly - anyone please help. Thanks:


<style type="text/css">
ul#portfolio { margin:0 auto; width:860px; height:570px; }
ul#portfolio li { list-style: none; width: 280px; height:200px; }
ul#portfolio p { width:280px; background: #EEE url('small_arrow.png') no-repeat top; }

li.theimage { border:5px solid #ccc; padding:5px; background: url('image2.png') no-repeat top; }
</style>

<ul id="portfolio">
  <li class="theimage"></li><p>Visit Website</p>
  <li class="theimage"></li><p>Visit Website</p>
</ul>
2

Put the <p>'s inside the <li>. The HTML you ahve is illegal right now because <p> can’t be children of <ul>

Then you’ll need to float the <li>'s.

3

Thanks - only thng is now the “Visit Website” is appearring at the top, rather than the bottom?


<style type="text/css">
ul#portfolio { margin:0 auto; width:860px; height:570px; }
ul#portfolio li { float:left; border:5px solid #ccc; padding:5px; float:left;list-style: none; width: 280px; height:200px; background: url('image2.png');margin-left:5px;}
ul#portfolio p { width:100%; background: #EEE url('small_arrow.png') no-repeat bottom; }
</style>

<ul id="portfolio">
  <li><p>Visit Website</p></li>
  <li><p>Visit Website</p></li>
</ul>
4

Hi,

I’d stick with the image in the html because it’s really content and if every image is different you’d have to class all the lists.

I’d do it like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
ul#portfolio {
    margin:0 auto;
    width:860px;
    padding:0;
    list-style:none;
    overflow:hidden;
}
ul#portfolio li {
    border:5px solid #ccc;
    padding:5px;
    float:left;
    list-style: none;
    width: 280px;
    height:200px;
    overflow:hidden;
    margin-left:5px;
    display:inline;
}
ul#portfolio span {
    display:block;
    background: #EEE url(http://www.sloughtownfc.net/boxes/arrow2.jpg) no-repeat 5px 50%;
    padding:5px 0 5px 25px;
}
</style>
</head>
<body>
<ul id="portfolio">
    <li><img src="http://www.sloughtownfc.net/boxes/image2.png" alt="Website name" /><span>Visit Website</span></li>
    <li><img src="http://www.sloughtownfc.net/boxes/image2.png" alt="Website name" /><span>Visit Website</span></li>
</ul>
</body>
</html>

If the elements were unequal heights then I would use display:inline-block instead of floating (although you’d need to hack for ie7 and under as it doesn’t natively understand display:inline block)

5

Great Stuff Paul - thanks for your help!