Results 1 to 7 of 7
Apr 19, 2010, 08:13 #1
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
Thanks for your time.
Apr 19, 2010, 10:04 #2
- Join Date
- May 2007
- Countryside, Sweden
- 0 Post(s)
- 0 Thread(s)
Apr 19, 2010, 16:21 #3
- Join Date
- Oct 2008
- Whiteford, Maryland, United States
- 6 Post(s)
- 0 Thread(s)
Apr 19, 2010, 18:14 #4
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".
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.
Apr 20, 2010, 11:36 #5
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!
Apr 20, 2010, 12:00 #6how 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?
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?
Apr 20, 2010, 13:06 #7
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.
I just used an old gradient image I had as a BG for the headings.