SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help creating a box element using a list?

    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:

    HTML 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:

    HTML Code:
    <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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - only thng is now the "Visit Website" is appearring at the top, rather than the bottom?

    HTML Code:
    <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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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. #5
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great Stuff Paul - thanks for your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •