SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to lay out this info?

    Hi,

    I want to lay out the following info horizontally in a container 460px wide:

    32 Likes (Restricted to 50px wide, facebook likes) (whitespace) From Great Britain(Post location) (whitespace) Featured (Floated to the right, category)


    What would you recommend being the best tags to use to lay these out?

    An image of what I mean can be viewed here http://www.flickr.com/photos/6257077...in/dateposted/

    Kyle

  2. #2
    SitePoint Enthusiast PiontekMedia's Avatar
    Join Date
    May 2011
    Location
    Vermont
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could have them be spans in a main div.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Sounds like a sentence to me:

    "32 likes from Great Britain featured".

    I probably do something 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">
    .likes{
        width:460px;
        border-top:3px solid #f00;
        text-align:right;
        border-bottom:1px solid #000;
        padding:0 0 3px;
        text-transform:uppercase;
        overflow:hidden;
        font-size:85%;
        line-height:32px;
    }
    .likes span,.likes em{float:left}
    .likes span{
        text-align:center;
        width:50px;
        background:#f00;
        margin:0 10px 0 0;
        color:#fff;
        font-size:85%;
        line-height:1.0;
        padding:2px;
    }
    .likes b{
        font-size:120%;
        display:block;
    }
    .likes em{
        font-style:normal;
        font-weight:normal;
        clor:#666;
    }
    
    
    
    </style>
    </head>
    
    <body>
    <p class="likes"><span><b>32</b>likes</span> <em>From Great Britain</em> <strong>Featured</strong></p>
    </body>
    </html>
    I made the country and the "featured" key points and the b element just for styling the bold text.

  4. #4
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats awesome Paul, thanks very much!


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
  •