SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confused with css and lists not tables

    I am unsure how to create the attached image in css. Ideally I would like to use CSS but canít work out the correct way of doing it. The code below is what I have for a simple 3 section horizontal list, but to split it up how it looks in the image I am unsure how to do it. I could do it I think in tables but was hoping to do it with css.

    HTML Code
    Code:
    <div class="section">
    <ul class="ulhomepage">
    <li><img src="images/annual-report.jpg" class="homepage" /></li>
    <li><h2>2009 Annual Review</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></li>
    </ul>
    
    </div> <!-- close section -->
    <div class="section">
    <ul class="ulhomepage">
    <li><img src="images/annual-reportx2.jpg" class="homepage" /></li>
    <li><h2>Investor Presentation</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></li>
    </ul>
    
    </div> <!-- close section -->
    <div class="section last">
    <ul class="ulhomepage">
    <li><img src="images/annual-reportx3.jpg" class="homepage" /></li>
    <li><h2>Investor Presentation</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit</p><p class="view"><a href="marine-transmissions.php">Read More</a></p></li>
    </ul>
    
    </div> <!-- close section -->
    CSS Code

    Code:
    .ulhomepage
    { 
    list-style: none;
    display: block;
    padding: 0px; 
    border: 0;
     
    }
    
    
    
    .ulhomepage li { margin: 10px 0px;} 
    
    img.homepage { float: left; margin: 0px 10px 0px 0px; padding: 0px; border: 1px solid #333; }
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi, instead of waiting for the image to attach could you post a link to the image?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You could do something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    a img{border:none}
    ul.news {
        margin:0;
        padding:0;
        list-style:none;
        float:left;
    }
    ul.news li {
        float:left;
        width:126px;
        word-wrap:break-word;
        overflow:hidden;
        margin:0 30px 30px 0;
        display:inline;
    }
    ul.news h3 {
        font-size:93&#37;;
        color:#000;
        line-height:1.1;
        border-bottom:1px solid #000;
        overflow:hidden;
        margin:0;
    }
    ul.news h3 span {
        display:block;
        color:#666;
        font-weight:normal;
    }
    ul.news h3 img {
        float:left;
        margin:0 5px 0 0;
        display:block;
        width:38px;
        height:38px;
        background:red;/* for testing only */
    }
    ul.news h4 {
        font-size:92%;
        color:#f00;
        margin:0 0 1px;
    }
    ul.news p {
        color:#666;
        margin:0 0 .6em;
        line-height:1.2;
        font-size:85%;
    }
    </style>
    </head>
    <body>
    <ul class="news">
        <li>
            <h3><img src="" width="380" height="38" alt="">News<span>29/05/2009</span></h3>
            <h4>Transaction in own shares</h4>
            <p>Lorem ipsum text here Lorem ipsum text here Lorem ipsum text here Lorem ipsum text here </p>
        </li>
        <li>
            <h3><img src="" width="380" height="38" alt="">News<span>29/05/2009</span></h3>
            <h4>Transaction in own shares</h4>
            <p>Lorem ipsum text here Lorem ipsum text here Lorem ipsum text here Lorem ipsum text here </p>
        </li>
        <li>
            <h3><img src="" width="380" height="38" alt="">News<span>29/05/2009</span></h3>
            <h4>Transaction in own shares</h4>
            <p>Lorem ipsum text here Lorem ipsum text here Lorem ipsum text here Lorem ipsum text here </p>
        </li>
        <li>
            <h3><img src="" width="380" height="38" alt="">News<span>29/05/2009</span></h3>
            <h4>Transaction in own shares</h4>
            <p>Lorem ipsum text here Lorem ipsum text here Lorem ipsum text here Lorem ipsum text here </p>
        </li>
    </ul>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul, that looks perfect.


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
  •