Mini-layout inspired on 9rules design - CSS PartListThumbs
Mini-layout inspired on 9rules design - CSS Part
Previously we've shown how to make a small layout on fireworks based on the 9rules desing. Now we're going to show you how to set this to code up. We're gonna explain everything, from slicing in Fireworks to setting the css in the code. Enjoy and let's get started!
STEP 1 - SECTIONS
First of all, we need to open the file at the the Tutorial Part 1. After that, we're going to set the regions of this page, this will help us to make the code.
STEP 2 - THE CODE
Now we can start to code. We will make the basic structure and then see how the page will look only with some plain text. To do the code, we use Smultron, a free and powerfull text editor, but you can use whatever you want. Let's code it region by region:
HEADER:
MAIN:
The idea behind this blog is mainly to be a channel to design.
CONTENT:
FULL CODE
<body><!--*** With this DIV is to put all content centralized ***--></body>The idea behind this blog is mainly to be a channel to design.
You may save this file and call it index.html. Here you can see how your browser will render it with no styles right now.
STEP 3 - SLICING THE PNG
At this step, we're gonna hide some layers and use the Slice Tool to export the images that we'll use in the CSS. Select the tool and make the slices as shown.
STEP 4 - EXPORTING IMAGES
After making the slices we'll export the images. Click with the right button over each slice and select Export Select Slice, save the images inside a folder in the root, and call this folder "images". Check the names of each image we've exported.
STEP 5 - CSS
Now we must link the CSS file in the HTML. Insert the following line inside the <head> tag.
To build the CSS we'l use CSSEdit. Open a new CSS file and save it on the root folder as style.css. To begin the styles we will create the main ID's.
body {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
background: #000;
}
#total {
width: 600px;
height: 600px;
border: 5px solid #FFF;
position: relative;
margin: 20px auto;
}
#header {
height: 105px;
background: url(images/bg_header.jpg);
position: relative;
}
#main {
background: url(images/bg_body.png) left top repeat-x #DBE8C4;
height: 477px;
width: 500px;
padding: 18px 50px 0 50px;
}
#slogan {
width: 195px;
height: 82px;
background: url(images/bg_slogan.jpg) no-repeat;
color: #325D6A;
padding: 18px 20px 0 285px;
line-height: 1.3em;
}
#content {
background: url(images/bg_roundWhite_top.png) left top no-repeat #FFF;
margin-top: 15px;
}
#footer {
background: url(images/bg_roundGreen_top.png) left top no-repeat #81AC40;
margin-top: 15px;
}
Now, let's make the style for the contents inside the ID #content. We must create the #content_inner, to make the round corners at the bottom and at the top.
#content_inner {
background: url(images/bg_roundWhite_bottom.png) left bottom no-repeat;
height: 240px;
padding: 10px 15px;
}
#content_inner h2 {
margin: 0;
color: #666;
font-size: .9em;
font-weight: normal;
border-bottom: 1px dotted #CCC;
padding-bottom: 10px;
height: 15px;
}
#content_inner ul {
margin: 0;
padding: 0;
}
#content_inner ul li{
margin: 0;
padding: 0;
list-style: none;
height: 50px;
padding-top: 10px;
padding-left: 15px;
border-bottom: 1px dotted #CCC;
}
#content_inner ul li.gray {
background: #f5f5f5;
}
#content_inner ul li h3 {
margin: 0;
font-size: .95em;
line-height: 20px;
}
#content_inner ul li .submitted {
color: #666;
font-size: .8em;
height: 20px;
line-height: 20px;
}
#content_inner ul li .submitted a{
color: #325D6A;
font-weight: bold;
text-decoration: none;
}
#content_inner ul li .submitted a:hover {
color: #000;
text-decoration: underline;
}
#content_inner .pager {
position: relative;
height: 30px;
}
#content_inner .pager .pages {
position: absolute;
left: 0;
top: 0;
color: #666;
font-size: .7em;
line-height: 30px;
}
#content_inner .pager .pages strong {
color: #000;
}
#content_inner .pager .links {
position: absolute;
right: 0;
top: 10px;
height: 18px;
line-height: 18px;
font-size: .6em;
font-weight: bold;
text-transform: uppercase;
}
#content_inner .pager .links a{
text-decoration: none;
background: #325D6A;
color: #FFF;
line-height: 18px;
height: 18px;
padding: 3px 5px;
margin-left: 5px;
}
#content_inner .pager .links a:hover {
background: #000;
}
For the footer, we're gonna do the same thing, create the #footer_inner for the round corners.
#footer_inner {
background: url(images/bg_roundGreen_bottom.png) left bottom no-repeat;
height: 70px;
line-height: 70px;
text-indent: 15px;
color: #2A3D15;
font-size: 1.2em;
font-weight: bold;
}
For our final step, we're gonna place the logo. We're gonna name our logo 'logo.png'. Take a look how we'll make this style.
#header h1 {
width: 292px;
height: 130px;
background: url(images/logo.png);
margin: 0;
text-indent: -2000px;
position: absolute;
left: 50px;
top: 20px;
}
#header h1 a {
display: block;
width: 292px;
height: 130px;
outline: none;
text-decoration: none;
}FINAL RESULT
You can see that all process is very easy, but you must exercise the CSS part, this is the heart of web design. A beatiful code is nothing without a good CSS to show the hard work we had to design. Practice and share with us your results!
| Attachment | Size |
|---|---|
| 9rules_tutorial.zip | 312.2 KB |
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.
15 Comments
Great tutorial! Super helpful for some of us CSS challenged
Hello, great tutorial. But there is one problem I noticed. Under "Step 2: The Code" when you are giving the code for "Main" you have Div id="main" listed two times. This won't validate under W3C regulations.
Please see this W3C article for more info.
I'm not sure if it was a typo or not, but just wanted to make you aware.
for whatever reason the format on my last comment is all messed up. What I was trying to say is that you have the div id "main" listed two time in the code for "Main". This unfortunately won't validate under the W3C validator.
Thanks.
@ksteed: Cool, I had missed this tag and paste there 2 times!
Just fixed.
Thanks.
Your png-fixer is working on all browsers, thats not needed. Get a better one, because now it fcuks up everything on Opera.
CSS...
I need learn this and improve AS.
But I didn't have patience with codes. :(
It's not a good idea to use the name of the color as the name of the class. Imagine you change the color from 'white' to 'purple' - you'll need to change the classname also. :)
@Dominik: That is a nice tip!
I've just used the name of the colors to help with the tutorial, and this way you can know that the object is related to that class. Thanks for the comment.
Thank you very much for this tutorial. I think you have finally filled all the gaps for me.
wowww.!!!! good layout and good ideas
nice tutorial..thanx
This is the tutorial i was looking for ages ive always wonder how you can make a great site deisgn in Fireworks and then use it. The CSS coding is hard to understand but im gonna do this tutorial a few times till i know it inside it.
Im wondering why you didnt use Dreamweaver for CSS editing as it would have made understanding this tutorial easier for me.
This site is amazing thanks again.
Thank You very nice topic
Nice work ,great collection. Thanks for the share.
I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
Post new comment