SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way of re-creating this in CSS

    Hi everyone

    What would be the best way of re-creating this image i found using CSS http://www.premier-resin-systems.co.uk/mockup.gif

    any suggestions?

  2. #2
    SitePoint Enthusiast yodaddy's Avatar
    Join Date
    Aug 2004
    Location
    georgetown, tx
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There really isn't a best way to do this as there is limitless answers that can achieve the desired end result. Without actually writing the code, I would make a containing div tag for the entire block and nest two div tags with absolute positioning for each category within. Then you could further subdivide each category into two for placing the category image and the text and just use padding (or margin offset) to put things where you want them.

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

    As yodaddy said above there are many ways to do this and really all depend on what happens next.

    here is a very basic example using floats.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer {
     width:600px;
    }
    .header {
     height:40px;
     background:#CCCCCC;
     width:300px;
     float:left;
    }
    .column {
     float:left;
     width:150px;
     margin-top:-20px;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div class="header">Flash Memory</div>
      <div class="header">Single Board Computers</div>
      <div class="column"><img src="images/pmoblogof.jpg" width="140" height="102" /></div>
      <div class="column"> 
    	<ul>
    	  <li>item 1</li>
    	  <li>item 2</li>
    	  <li>item 3</li>
    	  <li>item 4</li>
    	  <li>item 5</li>
    	  <li>item 6</li>
    	</ul>
      </div>
      <div class="column"><img src="images/pmoblogof.jpg" width="140" height="102" /></div>
      <div class="column"> 
    	<ul>
    	  <li>item 1</li>
    	  <li>item 2</li>
    	  <li>item 3</li>
    	  <li>item 4</li>
    	  <li>item 5</li>
    	  <li>item 6</li>
    	</ul>
      </div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  4. #4
    SitePoint Enthusiast yodaddy's Avatar
    Join Date
    Aug 2004
    Location
    georgetown, tx
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I don't know how you have the time. You should have your status elavated to "MVP - Most Valuable Poster"

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I don't know how you have the time
    Neither do I lol - I must go and get some sleep now so you can take over for the night


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
  •