SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I code this layout???

    Forgive me for my mad photoshop skills, however I thought it's be best if I made my idea an image to better represent what I'm trying to do... I've attached a quick layout that I've made, but not sure what would be the best way to code a layout such as this. I'm not sure if tables or CSS would be better.

    I can see how both would do well, however the way I'd like the text aligned I'm not sure which would be best or where to start and any pointers would be greatly appreciated.


    Thanks,

    -Michael
    Attached Images Attached Images

  2. #2
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WoodiE55
    Forgive me for my mad photoshop skills, however I thought it's be best if I made my idea an image to better represent what I'm trying to do... I've attached a quick layout that I've made, but not sure what would be the best way to code a layout such as this. I'm not sure if tables or CSS would be better.

    I can see how both would do well, however the way I'd like the text aligned I'm not sure which would be best or where to start and any pointers would be greatly appreciated.


    Thanks,

    -Michael
    It isn't tabular data so it shouldn't really be in a table. Of course, that hasn't stopped people before.

    To me it looks like a pretty simple two column layout. Inside the right column you'll need to add a few adjusted styles to layout the button and price information.

    I suggest starting with an established two column layout and start cutting!

    http://css-discuss.incutio.com/?page=TwoColumnLayouts
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

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

    Heres a rough and ready example to get you going.
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #left{
     float:left;
     width:200px;
    }
    #centre {
     margin-left:205px;
    }
    .image {
     width:180px;
     height:140px;
     color:#FFFFFF;
     background-color: #909090;
     margin-bottom:25px;
    }
    h1 {background:#ffffcc;margin:5px;padding:2px 0}
    h2 {
     color:#000;
     background-color: #DBDBDB;
     margin:5px;padding:2px 0;
    }
    h2 span{
     font-size:small;
     float:right;
     width:5em;
     margin-top:.25em;
    }
    * html h2 span{font-size:x-small;f\ont-size:small}/* for ie5 and 5.5. that are one size out*/
    #centre p.filler {width:70%}
    form {margin:0;padding:0}
    #centre input {float:right;margin-top:-45px}
    </style>
    </head>
    <body>
    <h1>Testing</h1>
    <div id="left"> 
      <div class="image">Image</div>
      <div class="image">Image</div>
    </div>
    <div id="centre"> 
      <h2><span>$ PRICE</span>Title...</h2>
      <p class="filler">Filler text Filler Text Filler Text Filler Text Filler text 
    	Filler Text Filler Text Filler Text Filler text Filler Text Filler Text Filler 
    	Text Filler text Filler Text Filler Text Filler Text Filler text Filler Text 
    	Filler Text Filler Text Filler text Filler Text Filler Text Filler Text </p>
      <form id="form1" method="post" action="">
    	<p> 
    	  <input type="submit" name="Submit" value="Subscribe" />
    	</p>
      </form>
      <h2><span>$ PRICE</span>Title...</h2>
      <p class="filler">Filler text Filler Text Filler Text Filler Text Filler text 
    	Filler Text Filler Text Filler Text Filler text Filler Text Filler Text Filler 
    	Text Filler text Filler Text Filler Text Filler Text Filler text Filler Text 
    	Filler Text Filler Text Filler text Filler Text Filler Text Filler Text </p>
      <form id="form2" method="post" action="">
    	<p>
    	  <input type="submit" name="Submit" value="Subscribe" />
    	</p>
      </form>
      <h2><span>$ PRICE</span>Title...</h2>
      <p class="filler">Filler text Filler Text Filler Text Filler Text Filler text 
    	Filler Text Filler Text Filler Text Filler text Filler Text Filler Text Filler 
    	Text Filler text Filler Text Filler Text Filler Text Filler text Filler Text 
    	Filler Text Filler Text Filler text Filler Text Filler Text Filler Text </p>
      <form id="form3" method="post" action="">
    	<p>
    	  <input type="submit" name="Submit" value="Subscribe" />
    	</p>
      </form>
    </div>
    </body>
    </html>
    (For info on ie's 3 pixel jog on static content next to floats then look at the FAQ on floats which explains how to overcome this.)

    Hope this helps anyway

    Paul

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AlexW - thank for the link, I'm looking at it now.

    Paul B - Man that will do VERY well and here I thought I'd have to use tables, THANKS! Now I'm gonna see about making it work for FireFox as well, but this gets me more then started - THANKS!


    -Michael


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
  •