PDA

View Full Version : Ideas for a site layout using css.


ratz2plt
09-27-2004, 07:07 AM
I need to do a site where there is content in the middle and either side is like a background that is a diferent color than the middle content. The middle content needs to stay the same width in px's but the sides or background need to adjust to the browser window size. What would be the best way to do this with CSS. Layers? Also the logo at top which overlaps the top blue section (images or layered)?

Here is an example of the site.
site example ('http://homepage.mac.com/ratz2plt/iblog/C494058816/E83470656/index.html')

gmcrone
09-27-2004, 10:12 PM
Your easiest method is CSS layers in a background table.

Make the entire page a one cell table with only your background colour in it.
Set it to 100% width margins 0 top, 0 left.

Inside the table your main body is a layer set to center in table, x pixels wide,
top margin set to bottom of your banner/logo (using CSS)

Your top banner/logo would be easiest as a graphic but can also be done with CSS & layers. However you may have browser problems with nested layers inside a table, as some browsers don't like it.

OR, you can do the whole thing in nested layers setting positioning in CSS.
You would need background layer, banner layer, logo layer, navigation layer, and main body layer.

Mike.

ratz2plt
09-30-2004, 03:04 PM
Thanks Mike

gmcrone
09-30-2004, 08:47 PM
For a pure CSS layout, start with this :

The HTML:
<body background="whatever">
<div class="wrapper">contents of page</div>
</body>

The CSS:
body {
text-align: center;
min-width: 770px; /* Use this, or */
}
div.wrapper {
text-align: left;
margin-left: auto;
margin-right: auto;
border: 1px solid white; /* this. Both are not necessary */
}
end of CSS

ratz2plt
10-04-2004, 01:38 AM
Thanks again Mike.
I have bought a few books on CSS and plan on really learning it.

Web Standards Solutions by Dan Cederholm and
Designing with Web Standards by Jeffrey Zeldman

digi_mediaguru
10-20-2004, 06:00 PM
Hey gmcrone

I tried what you suggested and I dont know what I am doing wrong but it did not work with the central layout being 770px with explanding space on the left and the right of the layout... isnt that what you were going to simulate with that css you posted

Please let me know if I am wrong :unsure:

digi_mediaguru
10-20-2004, 07:29 PM
Here is a style that I came up with that would work as well and works for me in Dreamweaver MX

The CSS is a modification of what Mike posted. The "wrapper" has been decorated ofcourse but you can strip it down to use it as you please. Let me know what you guys think B)

CSS starts here
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
margin: 0px 0%;
padding: 0px;
}

div.wrapper {
width: 720px;
height: 500px;
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 10px;
border-top: 1px none white;
border-right: 1px dashed white;
border-bottom: 1px dashed white;
border-left: 1px dashed white;
color: #CCCCCC;
}
End of CSS

gmcrone
10-20-2004, 08:54 PM
Here is a style that I came up with that would work as well and works for me in Dreamweaver MX

The CSS is a modification of what Mike posted. The "wrapper" has been decorated ofcourse but you can strip it down to use it as you please. Let me know what you guys think

That is a very good example. (I did say in my example that it was a starting point)

I think I'm going to have to write an article on "how to start using CSS" as most people don't even know where to begin to plan a layout with CSS.

What do you think of the idea?

Mike..

digi_mediaguru
10-21-2004, 07:59 PM
I think that is a GREAT idea Mike. I don't actually have much knowledge of CSS-P but I know quite a bit about CSS in table based layouts so if you do give an introduction on CSS-P I think everyone here including me will learn from it.


So PLEASE push forward with a "How to start with CSS" post.

Thank you for the reply. B)

gmcrone
10-23-2004, 06:31 PM
I think that is a GREAT idea Mike. I don't actually have much knowledge of CSS-P but I know quite a bit about CSS in table based layouts so if you do give an introduction on CSS-P I think everyone here including me will learn from it.

I will start working on an article shortly. My next article is being posted on our home page here shortly. It covers the "Karma" of colour, and how to apply it to web design.

Check out http://www.enorc.com ('http://www.enorc.com') for a fuller article on colour.

Mike....

Anonymous
02-27-2005, 08:53 PM
Mike,

That article will be great. The problem i'm having is even getting started and making sure i start correctly.

I tried alittle css on a site of mine and asked for some advice and got raked over the coals because my html wasn't semantic, or something like that.

I'm looking forward to the article.

gmcrone
02-27-2005, 10:23 PM
It's taking a while to get this article done.
I'm in the middle of a website makeover for a new client.

His old site was originally done in Net Fusion, then updated in Front Page.
What a mess.....

In the meantime, here is a good site to get you started on CSS

http://www.westciv.com/style_master/house/ ('http://www.westciv.com/style_master/house/')

They have free & purchasable courses on Design & CSS.

If you don't mind sharing, what is the URL of the site you were working on.
I don't think you will get raked over the coals here.

Mike...

MenionLeah
02-28-2005, 12:47 AM
Mike,

Wish i could. I abandoned it after the response i got. I shouldn't have, but......