SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Scotland
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Boxes and contents with css

    Hi

    I am a CSS newbie and have searched the forum but can't find an answer to my problem.

    www.play.com use a layout technique that I don't know how to achieve. If you look on their site you will see a midde column, it is basically boxes that are filled with text and graphics. My question, how do I achieve this layout using css i.e the solid strip at the top of the box, followed by a tint underheath that. How do they control the content in the box i.e. graphics and text??

    Hope someone can help..

    Keith

  2. #2
    SitePoint Enthusiast blakems's Avatar
    Join Date
    Oct 2002
    Location
    Utah
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    blakems.com
    "reaching more of your brain cells"


  3. #3
    SitePoint Guru silver trophy Luke Redpath's Avatar
    Join Date
    Mar 2003
    Location
    London
    Posts
    794
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by keithl
    Hi

    I am a CSS newbie and have searched the forum but can't find an answer to my problem.

    www.play.com use a layout technique that I don't know how to achieve. If you look on their site you will see a midde column, it is basically boxes that are filled with text and graphics. My question, how do I achieve this layout using css i.e the solid strip at the top of the box, followed by a tint underheath that. How do they control the content in the box i.e. graphics and text??

    Hope someone can help..

    Keith
    Have a look here:

    http://testpad.sonicdeath.co.uk/play/play.htm

    Just a quick example I knocked up, not intended as a perfect replica and I've implmented no box model hacks so use IE6 for best view.

    The first step is to create your basic top banner (in this case two top banners, one for navigation), three column, center fluid layout, using the link posted in the past post as a reference. With no borders around each column, you can then put what I've defined as "panels", in each column - a <div> with a class of "panel", which in my stylesheet is simply defined as a box with a dark blue 1px border and no padding, with a bottom margin to create gaps between each panel.

    Inside each of these "panel" div's, the content is marked up semantically using <h1> (the blue bar), <h2> (the pale blue bar), <h3> (normal paragraphy heading) and <p> tags. Using CSS, I've given these tags their appropriate backgrounds, margins (top and bottom for vertical spacing) and in the case of the <h2> tag a bottom 1px border. This "panel" div can then be replicated as many times as you want in each column.

    The full style sheet is:

    http://testpad.sonicdeath.co.uk/play/play_styles.css


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
  •