Keeping it simple ( CSS for starters )
Many designers have pointed out on many occasions that keeping it simple in css matters.When you create a website design in a graphics platform the first thing you do is try to separate it in divs, but most of us end up creating too many of them. Think about it. Do you really need all this wrappers and content divs?
In my experience sometimes you do in other case you don’t, but let’s us focus in the case that you don’t.
We want to create a simple fixed 800px width layout that has a header, content, a sidebar and footer. In most cases the markup would look like this:
<body>
<div id="wrapper">
<div id="header">hello I am the header</div>
<div id="content">hi I am the content</div>
<div id="sidebar">hi I am the sidebar</div>
<div id="footer">don’t forget me I am the footer</div>
</div>
</body>
And the css would look like this:
body {
Text-align: center; /*centers everything on the page*/
Margin: 0; /*removes default browser margins*/
Padding: 0; /*removes default browser paddings*/
Color: #fff; /*sets all text color on page to black*/
}
#wrapper {
Width: 800px; /*declares the fixed width*/
Margin: 0 auto; /*sets all of the margins */
Text-align: left; /*aligns everything inside the wrapper*/
background-color:#999; /*sets the background color*/
}
#header {
background-color:#555; /*sets the background color*/
Padding: 10px; /*adds some interior spacing*/
}
#content {
Float: left; /*floats the content on the left*/
Width: 560px; /*sets its width*/
Padding: 10px; /*adds some interior spacing*/
background-color:#ccc; /*sets the background color*/
}
#sidebar {
Float: right; /*floats the sidebar to the right*/
Width: 200px; /*sets its width*/
Padding: 10px; /*adds some interior spacing*/
background-color:#777; /*sets the background color*/
}
#footer {
Clear: both; /*clears all floats*/
background-color:#555; /*sets the background color*/
Padding: 10px; /*adds some interior spacing*/
}
Well, this does make sense!
We have the body declaring that everything will be centered and then we have the wrapper aligning everything inside it on the left.
Everything is aligned and the layout sits graciously in the middle of your screen.
But is there another way?
What happens if we loose the wrapper, won't everything fall apart?
By removing the wrapper and giving attributes to our html in the markup, we can do this:
html {
Text-align: center; /*centers everything on the page*/
Color: #fff; /*sets all text color on page to white*/
}
body {
width:800px; /*declares the fixed width*/
Text-align: left; /*aligns everything left on the page*/
Margin: 0 auto; /*removes default browser margins*/
Padding: 0; /*removes default browser paddings*/
}
#header, #footer, #content, #sidebar {
padding:10px; /*adds some interior spacing*/
}
#header, #footer {
background-color:#555; /*sets the background color*/
}
#content {
width:560px; /*declares the fixed width*/
background-color:#ccc; /*sets the background color*/
}
#sidebar {
width:200px; /*declares the fixed width*/
background-color:#777; /*sets the background color*/
}
We can give our divs not only an id but a class also. We can create these additional classes and use them in the markup when we need them:
.left_float {
Float: left;
}
.right_float {
Float: right
}
.clear_all {
Clear: both;
}
In this case we need them here:
<div id="content" class="left_float">hi I am the content</div>
<div id="sidebar" class="right_float">hi I am the sidebar</div>
<div id="footer" class="clear_all">don’t forget me I am the footer</div>
By doing this we get the same result in our layout as before. Combining ids and classes may some times come in handy.
When we want more complex layouts and many different pages it might also be wise to give our body an id so we can manipulate its ancestors according to their parent body.
We could also go with positioning our divs, but that’s an entire different ball game in which I will write about soon.
In conclusion which is the easiest way to do it it’s totally up to you. This technique will work in other kinds of layouts other than a fixed width one.
Labels: css techniques, layouts, web design
posted by Nick Fassolas @ Sunday, March 02, 2008 | Permanent link here
1 Comments:
Thats real cool, I have done that on some of my projects!
Post a Comment
Links to this post:
Create a Link
<< Home