Tutorial: Obama's Background in CSS - Part 2ListThumbs
Tutorial: Obama's Background in CSS - Part 2
In this tutorial we're going to show how you may use the background we've created in the Obama's Background 1st part. But we're not only gonna show you how to put it inside a site body, but also how to create and structure the site main regions like the menu, main content, support column and footer.
Our objective is not only to assemble the whole site, but also show some CSS basic concepts and Fireworks intregration with Web.
STEP 1
The first thing we must do is to export our images. Since we're creating only the basic structure, we're only gonna need two images: background and logo.
STEP 2
Now let's create the html file. The structure will have 4 regions: #header, #main, #sidebar and #footer. Notice that we're gonna insert the #main and #sidebar inside a #content, this way we're gonna have a greater possibility to modify things in the future.
<body>
<div id="total">
<div id="header">
<a href="#">
<img src="logo_obama.jpg" alt="Home Obama"/>
</a>
</div>
<div id="menu">MENU
</div>
<div id="content">
<div id="main">HERE IS THE MAIN CONTENT
</div>
<div id="sidebar">SIDEBAR
</div>
<div>
<div id="footer">FOOTER
</div>
</div>
</body>
STEP 3
Now let's create the CSS. You may use the text/CSS editor of your choice. We're using here CSSEdit, and we're going to open Live Preview. With that, we'll be able to view in real time the things we are modifying. Notice that the structure is really simple. We're inserting a body #total with "margin: 0 auto" and all the other elements inside it.
body {
margin: 0;
color: #999;
font-weight: bold;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 2em;
background: #01245c url(bg_obama.jpg) no-repeat center top;
}
// AQUI ESTÁ NOSSO BG!
// Repare também que usamos a cor #01245C.
#total {
width: 960px;
margin: 0 auto;
}
#header {
height: 160px;
}
#header img{
border: 0;
}
#menu {
height: 60px;
background: #FFF;
text-align: center;
line-height: 60px;
}
#main {
float: left;
width: 650px;
background: #f0f0f0;
height: 400px;
text-align: center;
padding-top: 100px;
}
#sidebar {
float: right;
width: 310px;
background: #dadada;
height: 400px;
text-align: center;
padding-top: 100px;
}
#footer {
height: 150px;
text-align: center;
padding-top: 50px;
clear: both;
color: #15539c;
}
STEP 4
Check the final result... really simple, huh? You only have to structure well the code and practice!
About the author
I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.
13 Comments
Nice and simple layout. I like the colors!!! Keep em coming
Very easy but effective, thanks abduzeedo
yey, I've been waiting for this since... forever.
Obrigado por tudo.
Very useful! Obama would be proud of you :P
Nice, but not very semantic.
hi i made a lay out like this. but the div is not in the center? how i place it on the center? like it's perfectly place and fits on the backgound?
Awesome! But if the content require some scrolling in the browser window? The background image must repeat to achieve the right effect. I don´t know how to proceed about this issue.
(by the way, I´m a brazilian web designer living and working at Porto Alegre!)
Hi, Thanks for your wonderful tut.
I had one doubt, how can i optimise the background image so it takes minimum time to load?
No source files for this one?
GREAT TUTORIAL!! good design, colors, concept... and the final result is beautiful!
cssedit looks like a very cool ap, i'll try it!!
Thank You very nice topic
Nice work ,great collection. Thanks for the share.
Thanks!
Very helpful!!!! ;D
Post new comment