SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast ReadyMade's Avatar
    Join Date
    Mar 2006
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How can I make this simple layout with CSS?

    My site is showing its age with tables and I would like to update and replicate its design using CSS.

    I thought it would be pretty easy to achieve and I've tried many times to replicate it in Dreamweaver, but it's just becoming really difficult and frustrating as I can't seem to do it. I'd have thought that creating a site like this in CSS would be straightforward, but I just can't seem to manage it.

    I'd really appreciate your help as it's holding me back from redeveloping my site for 2010. I've linked to a Screenshot of the desired layout that I'm trying to achieve.

    Desired CSS Layout
    http://img192.imageshack.us/img192/1...iredlayout.gif

    Thanks for your time.

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, we'll be happy to help, but I think we also need to know the dynamics of the layout.

    Which boxes are flexible/fluid in width/height, and should they stay equal in column height? They can't all be fix lengths, I guess.
    Happy ADD/ADHD with Asperger's

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Paul has many 2 column layouts at his site
    http://www.pmob.co.uk

    To get the second box in teh right column, just create one (although you can find the dynamics of the layout in there, whatever they are )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    From looking at your screenshot it caused me to remember something similar I had done a while back.

    I guess I could describe it as an "equal height two column layout with stacked sidebar".

    http://www.css-lab.com/demos/2col/stacked-sidebar.html

    From what I see, if you were to swap the stacked sidebar boxes with the main content it would be similar to what you are after. It would just need some headings on each of the boxes and that could be as easy styling some "h" tags.

  5. #5
    SitePoint Enthusiast ReadyMade's Avatar
    Join Date
    Mar 2006
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur, that's pretty close to what I'm trying to achieve, but how would I go about getting each box to have a shaded cell bar at the top which will contain the title description of each content box? I'm a complete novice with CSS layouts and Dreamweaver.

    Thanks for your help everyone, I really appreciate it!

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    how would I go about getting each box to have a shaded cell bar at the top which will contain the title description of each content box?
    Hi,
    As I had mentioned above you could set some "h" tags for the headings, then you could just set a shaded BG image on those headings.

    If you read through the notes on that demo you will notice where I explained that it could be done much easier by using a repeating faux image if it is a fixed width site.

    Will it be a fixed width?

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Assuming that it will be a fixed width layout it can be done much easier using this repeat-y faux image.

    Demo Faux Image

    Then I set up the stacked divs on the right side in your main content area and came up with this example.

    http://www.css-lab.com/demos/2col/st...divs-faux.html

    I just used an old gradient image I had as a BG for the headings.


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
  •