HTNASL Part IV: The Content and Footer
December 24th, 2005
Well, long time no sexy layout, eh? I apologize for the length of time between part 3 and this final article in the series of How To Nail A Sexy Layout. I have been swamped at work and with freelance projects. With Christmas comes a bit of free time, so I decided I would finish up the series as present to all. Great present eh? Anyway…on with the last bit of sexiness.
The Content Div
The content area of humanradiator.com has two equal length columns stretching down to the footer. In order to accomplish equal height columns, I used a bit of faux columns theory. One line of styles and you have a new example to look at.
#content {width:760px; float:left; display:inline; background:transparent url(images/bg_content.jpg) repeat-y 0 0;}
Example 9 With Content Background
The Two Columns
Obviously, the text doesn’t form two columns as I have not yet instructed it to, but the background image instantly gives it the two column feel. All I need to do now is give each column (#content-main and #content-side) widths and float them inside the #content div.
#content-main {float:left; margin:0 0 0 6px; width:485px !important; width /**/:525px; padding:12px 20px; display:inline;}
#content-side {float:right; margin:0 6px 0 0; width:182px !important; width /**/:222px; padding:12px 20px; display:inline;}
Example 10 With Columns Working
Float Nearly Everything
Now you can really see the design take shape. The key to this two column layout with floats is Steve Smith’s Float Nearly Everything method. Because #content, #content-main, and #content-side are all floated, #content will always clear the two inner divs. This means our columns will always be equal heights.
The Footer
I know that the content area is not quite finished, but I will complete the last piece of the layout before working on the finishing touches.
#footer {clear:both; width: 734px !important; width /**/:760px; height:114px; background:transparent url(images/bg_footer2.jpg) no-repeat 0 0; padding:20px 0 0 26px;}
Because I have floated #content, I need to clear the footer to make sure that it always appears below. Now that the main layout is completed, it is time for a few finishing touches.
The Heading Image Replacement
#whats-cooking {width:481px; height:77px; text-indent:-9000px; overflow:hidden; background:transparent url(images/bg_whats_cooking.gif) no-repeat 0 0; margin:0 0 12px;}
#content-side h3 {width:183px; height:53px; text-indent:-9000px; overflow:hidden; margin:0; padding:0 0 6px;}
#content-side h3 a {display:block; width:183px; height:53px; text-indent:-9000px; overflow:hidden; margin:0; padding:0 0 6px;}
#meet-the-heat h3 {background:transparent url(images/bg_meet_the_heat.gif) no-repeat 0 0;}
#enflame h3 {background:transparent url(images/bg_enflame_the_name.gif) no-repeat 0 0;}
#blog-archives h3 a {background:transparent url(images/bg_blog_archives.gif) no-repeat 0 0;}
#blog-categories h3 {background:transparent url(images/bg_blog_categories.gif) no-repeat 0 0;}
#links h3 {background:transparent url(images/bg_passing_the_scorch.gif) no-repeat 0 0;}
Example 12 With Headings Replaced
Final Notes
You will notice that I changed the body and link text to white. Also, I have also decreased the font size a bit. There are a few other styles I added into the stylesheet to make the site appear more like the design Jim handed me. These styles are not important for what I am trying to show in this article though so I will leave them out. I have now taken you through my entire development thought process. The specific techniques in this article such as the box model hacks and the image replacement techniques will grow out of date (some already have), but the important thing to learn from this series is the basics.
Also, when I get a bit more free time (yeah right!) I will be cleaning the writing and examples up and putting the entire series into PDF format. It could be a few months though. Hope you have enjoyed the series. Let me know if you have any questions. Merry Christmas!
The How To Nail A Sexy Layout Series
- How To Nail A Sexy Layout: Skeletize, Visualize and Nakedize
- HTNASL Part II: Crop and Style
- HTNASL Part III: The Header
- HTNASL Part IV: The Content and Footer
Subscribe
HTNASL, der vorerst letzte Teil
Pünktlich zu Weihnachten ist der 4. Teil vom Tutorium “How To Nail A Sexy Layout“, welche ich schon mehrfach empfohlen habe, da!
Dies soll wohl vorläufig der letzte Teil sein, ich finde, es lohnt sich!
Danke dafür an John Nunemaker (a…
Great present :) It’s very nice of you the first thing you do when you finally have a bit of spare time is to finish the series for your readers.
Merry Christmas to you too!
Yes, this is a wonderful present! I was hoping you would finish the series in time for me to try it over the holidays. I appreciate the links to faux column theory and floating everything as well. Thanks!
No problem. Glad everyone is enjoying it. I am a bad procrastinator.
John, Can you explain, or point me to some documentation on the “width:485px !important; width /**/:525px;” for content-main? I’ve never seen this before. Greatly appreciate your work.
@busychild - No problem. If you are unfamiliar with the box model hack you can read up on it. If you are familiar then read on in this comment.
That declaration is a box model hack. The first declaration
width:485px !important;is applied by browsers that adhere to the w3c specs. The second declaration is for those that don’t.I know longer use this method because it uses !important to force IE/Mac 5 into submission. !importants make stylesheets harder to override. I now use
width:525px; width/**/:/**/485px;as my box model hack. Hope this helps, let me know if it doesn’t.Hi John,
Just wanted to say how much I have enjoyed this series. I’ve learned so much.
I have a question that maybe you could answer or point me in the right direction. I working on a site with two columns, narrow on the left, main on right. I have some images that I want to float out of the main content into the sidebar. You can see it here: http://www.staging.smudgedgraphics.com/dbs/whois.html. A little ways down the page I have photos of the women who are described. It works in Mac Firefox 1.5 and Safari, but you won’t see the images in Win IE6. The images are inline with a class with a negative margin. Do you know how to make this work in IE, or point me in the direction to find the answer?
Thanks a lot.
Lou
Hi,
hope you had a good time between the years and a fine christmas.
Thanks a lot for completing your wonderful work and lots of new insights,
claus.
I was looking at your previous articles on this topic and in the first two are links to examples of your (a) starting page template and (b) starting css template…both of which aren’t valid links anymore. Any chance of getting those links refreshed?
John,
first of all I would like to thank You for sharing Your great skill with us.
I started using CSS because I feel that there should be a clear separation between document contents and presentation.
Being said that I still don’t have a clear idea of how accomplish it with the tools I’m using and I wonder if You have any suggestion. What I would like to do would be:
1) using ASP.NET
2) dinamically reading document contents (text and image) from a database (being a relational database or a xml file or a text file, he does not matter)
3) layout documents contents using CSS
I use to dinamically load user controls from a xml configuration file and having each of this controls render itself. What I don’t understand though is how I can layout this data with CSS. It seams to me that to being able to do it I should know what will be the contents (text, images, etc.) to be displayed before writting the CSS file which is obviously the opposit of dinamically loaded controls.
If this is off topic I apologise for not posting on the right place.
Any suggestions or link to be pointed to will be greatly appreciated.
Thank You,
Alex
@Alex - Well, the data has to be first formatted with XHTML. Once you have that, you just style the XHTML to your liking. One thing that I often do is mockup what the page will look like with static XHTML not generated by ASP or PHP or whatever you use. Once you have the mockup, you can style it. When you are finished styling, just make the server side language (ASP or PHP) generate the markup that is used in the mockup. Hope that helps.
Hi John,
thank You for the quick replay!
Yes, it helped because it’s confirming what I was slitly heading at!
I started reading “Design with web standards” and reached the same conclusion.
It’s always a pleasure being helped by great web expert like You!
By the way Your site is really nice: I like when I disable CSS style in the browser (Firefox) and I see plain simple html.
I’ll keep reading Your work!
Alex
I just want to thank you… it was for me very illustrating..
Gracias y saludos desde México…
Hey this is a really nice page with a good tutorial,
I would break things up a little more I didn’t get it
the first time I read through it but the technique is
nice, I’m gonna try to mimic the faux columns technique
with a split middle so i can get a liquid layout and still
benefit from this break down, works well especially
since I’m applying the technique on a totally different
layout design… still works, thanks for finally dispelling
what seemed to be a designer only trade secret ;-)
Hi John,
Absolutely a wonderful series of tutorials. I did the tutorial 2 times and really learned a great deal. I am new to all this and it seems this is the way to go for the future. I have one quick question… I did this tutorial in GoLive and after I was finished with the tutorial, the site looked great in Firefox and IE browsers but the images did not line up right in the actual index.html page viewing it in GoLive. Is there a reason for this or did I do something wrong along the way? Again, thank you for the great tutorials and I look forward to the pdf version.
Rob G
@Rob - GoLive probably doesn’t have as sophisticated preview as a real browser. Never rely on an editor for your previews. Always use the browser that will actually display them.
John- I am pumped to see this series is still published here. I have used it SO many times for my own projects, and to guide others in the ways of CSS. I would love to see you finish this off as you say:
“Also, when I get a bit more free time (yeah right!) I will be cleaning the writing and examples up and putting the entire series into PDF format.”
Thanks again!!
I just want to thank you so many times, although I’m from Austria, it helped a lot!
Exactly what I was looking for :)
just wanted to let you know that i found you tutorial very helpful and I hope you keep it up for a little while longer.