Aug 13
Designing a CSS based template - part VI
2004 at 05.41 am posted by Veerle Pieters
This is part 6 of our tutorial. (Previous parts: part 1, part 2, part 3, part 4 and of course last week’s part 5). Now we will add the content part of our webpage. Next week we’ll be adding the (favorite) links under our navigation and I’ll also explain how to create a footer.
First we add a new id selector in our styles and we give it the width 514px (692px - 178px):
#content {width: 514px;float: left;}
Since the navigation "floats" on the left, we need to add a "float: left" to our "left" id. But we also need to add it to our "content" id selector because it also floats left within our main id container:
#left {width: 178px;float: left;}
We add this to our XHTML code:
<div id="content">this is the right</div>
If the above doesn't make any sense to you, I'm sure you'll find these very helpful:
- More about Float basics
- Floatutorial
Still, our content now sticks to the navigation on the left, we want a bit of space of course so we add some padding to our style of the content container:
#content {width: 479px;float: left;padding-top: 15px;padding-right: 0;padding-bottom: 10px;padding-left: 20px;}
Or we can use the shorter version:
#content {width: 479px;float: left;padding: 15px 0 10px 20px;}
This is exactly the same: the first value defines the padding for the top, the 2nd for the right, the 3rd for the bottom and the 4th for the left. If we add the padding we need to edit the width of our container since the actual width has now increased with 20px padding (20px left, 0 for the right). We need to change this to 494px. But since we want some space on the right (so that the text doesn't stick to our right border) we deduct it with 15 and use 479px instead.
You could argue with me on the last part and say "hey, why don't you just stick to "width: 494px" and use "padding-right: 15px"? Aha good point! Yes I tried that at first and all looked well in Safari, FireFox and Mozilla, but it didn't in Internet Explorer. The entire content jumped underneath my navigation (underneath my "left" id container). Apparently there wasn't enough space left for I.E. to make it fit on the right. This is actually the only explanation I have for this. By using my little trick everything is still perfect in every browser.
Adding the title
To create our title we add a header tag in our XHTML code:
<h2>This is the title</h2>
Now we will add a style for this tag to define the look of it:
#content h2 {font: normal 18px Georgia, Times New Roman, Times, serif;color: #80866A;background: transparent url(images/bullet_title.gif) no-repeat;width: 454px;padding: 0 0 0 30px;margin: 0;}
We use #content h2 which means we give a style to the header 2 element (h2) within our content id. It means that all h2 elements within the content div will be viewed in this style. We could also just use "h2" without the id preceding, this would mean that this style would be applied to all h2 tags within the webpage. Adding this id in front can be handy if you want to use another styled h2 in the left container (#left h2) for example.
<div id="content">all h2 tags here will have this style</div>
The first line of our CSS sets the style for the font: the font-weight (normal), the font-size (18px) and the font-family. Again, just like the padding, this is the short version, it sets all these values for the different font properties in 1 line of code. Next we have the color of the text, third the values for the background which is our bullet. Again I've used the short version, I define the background-color (transparent), the background-image (url to the image) and the background-repeat (no-repeat) just in 1 line. Last with the total width of our header and the padding (top, right, bottom and left).
Adding the text
This is the style for the text of the content:
.text {font: 11px/18px Verdana, Arial, Helvetica, sans-serif;color: #5B604C;margin-bottom: 10px;}
We use a class now (dot in front) since we will use this style repetitively in our webpage. The first line sets the style for the font, starting with the font-size (11px) and line-height (18px) followed by the font-family. In the 2nd line we define the color of the text. And last but not least we add some space between paragraphs by adding a margin-bottom of 10 pixels.
In our XHTML code we add a paragraph tag under the h2 tag that holds our text and we apply the class "text" to it.
<p class="text">Here comes the text</p>
-Adding the image
This is the style for the image that is aligned right:.imageright {float: right;padding: 7px;background-color: #ffffff;border: 1px solid #bac1a3;}
Again we use a class for this since we should be able to apply this style a couple of times within our webpage. Our image floats right within our text div container, so we add "float:right". Next we set a padding of 7px around the image and we add a white background. This will create a white area of 7px around the image. Next, we add a 1 solid pixel border in a specified color. The last line is again the short version of border-width (1px), border-style (solid) and border-color (#bac1a3). You can add another class for the left aligned images and call it ".imageleft" and use the same properties and values except for the floating part, you change "float: right" to "float: left".
Here is the final result
50served
1
I have a LOT of questions. How do I add a bottom strip like the one below on your site?
How to divide left bar into different sections with different purposes (like in yur site), for example like search, calendar, mailing list are at separate ‘containers’ or ‘sections’ divided by a dotted line. Also, how can I add an image to each of those sections (like the leaves at the top right of all yur sections?
lol, well that’s about it. :)
2
oops, I just read yur gonna do thatnext week. :) *making a stupid smile*
3
Hi Rohit, I’m planning on explaining all of this in my next part. You are ahead of the game ;-) Then I’ll explain how to add a footer and how to divide the left into different sections (like the favorite links in my design example).
4
Hi again Veerle :)
I’ve been following the CSS build with great interest…I haven’t had a chance to read through it all so you may have answered this already: Do you plan on putting this all in one spot when you done, perhaps linked off the nav bar somewhere?
Thanks again for all the great CSS stuff!
5
Hi shad, thanks for “passing by” again ;-) Not sure if this answers your question, but this tutorial is archived under the category “Tutorials” (my left navigation). So far this is the only tutorial I made, so it’s pretty easy to find all parts.
I’m also thinking of creating 1 PDF file of this tutorial, so you ahev everything from A till Z.
Next week I’ll add the last part: the creation of footer and some extra div elements (like favorite links etc.) in the left margin (under the navigation).
6
Veerle, your elegant design is inspiring. I’m planning on putting many of your great layout and design tips to work on my new web site I’ve just started.
I only wish I could create an artistic banner as easily as you. ;-)
7
Hello Veerle
Why is the width defined for the h2 tag? Does this have an advantage?
Sorry for the newbie question
Sjmielh
8
sjmielh, it’s a bit of a “best practise” of mine ;-) It’s just important for the background of the header. We use an ornament in front of the title so width doesn’t really matter here, so you could leave it out if you want. If you are using a wider background like the example of my article of Aug. 11, then width matters.
9
I think the reason that the float was not working for you in IE when you used the larger width on the container was because of the infamous 3-pixel jog float bug in IE WIn. If you ever try and make a perfect 2 column side by side float in IE Win you would also fall into the em tag bug. Whereas if there is content used inside the container in an em or i tag the width of the container box will actually increase, and also cause the floats to display improperly. There are fixes, I think positioniseverything.net does a nice job exposing all of these.
10
Nice job again.
Just out of curiosity, what’s wrong with using p-elements for the text? A div with a special class isn’t just longer, it’s also less semantical. And I’m not seeing a special reason to use one here… Or is it expected to be used like
<div class=“text”><p>Textual content!</p></div>being somewhat like a content wrapper?
11
Hi, nice article again. The float problem could have something to do with the double-float-margin -bug. See The IE Doubled Float-Margin Bug
With the
display:inlinehack/workaround it’s possible and very easy to avoid the problem.
Matthijs
12
Nice tutorial, but i’ve got two questions as well.
My first question was the same like Ezku’s, but my proposition was:
#content p { ... the same definitions like .text ... }and then using
<p>instead of
<div>.I also think it’s much more semantical.
My second question:
Why don’t you use relative font-sizes like em?
Greetings from Switzerland!
13
ok,
sorry I didn’t look at the code well enough and placed my comment too fast! It may not be the double margin bug because there isn’t any margin defined (yet). So just delete my comments or let them be (the tutorial about the bug on positioniseverything.net is nice anyway).
matthijs
14
Ezku, Andreas, I wasn’t aware that the p tag is better (more semantic) then the div tag. Since I use CSS/XHTML I always tend to use div’s in general even for blocks of text. My blog generates p tags because of pMachine’s cms (in case you are wondering why I use it in my blog and not in my tutorial). I just wasn’t aware of the “difference” between them. Guess I should adjust this then? Or I’ll post something about all this in my next part, just to avoid confusion.
About the bugs, I’ve heard of them all, still learning the the “why and when” I’ve visited the Position Is Everything website a lot (and others). Too bad there are SO many :-( I didn’t want to start on that part (already) since there are a lot of newbies reading my tutorial ;-) Could scare them off you know.
@Anreas, this might be a bit of a bad (is it bad?) habit of mine to use px instead of em. Typical for a graphic designer I guess, since you want it to look nice and equal (as much as possible) on each platform and browser. I know em is much more “flexible”. Well in Safari, you can hit command + plus and the fonts appear bigger, but I guess that doesn’t work like this in all browsers. I think I would rather go for a styleswitcher or something to give the use some options. Maybe in the next version of my blog I’ll implement a more flexible way, I kind of like that. Also, if I design a website with stricter guidelines I go for stretchable layouts and also more flexible fontsize… more challenging to keep everything nice of course but in some cases this flexibility is really needed, in other situations it might not be so important. I guess it is a matter of choice depending on you target audience/visitors.
BTW thanks very much for the info and feedback, very helpful :-)
15
This is some good stuff, you should submit it to sitepoint or ALA.
But remember folks: this was the easy part. The hard part comes when you want to integrate it into your cms/blog system and not make any comprimises on the design.
Having said that, the difficulty entirely depends on the way templating is implemented in the system and how ambitious your layout is.
16
Hi AkaXakA, thanks for the nice words :-) Actually SitePoint did post an article about my tutorial and added it to their newsletter too. And Jeffrey Zeldman added a link to his “On the moment” links for my previous parts of the tutorial, now I’m on his Externals page. I’m very pleased and honored.
17
@Veerle, you claim
I wasn’t aware that the p tag is better (more semantic) then the div tag. Since I use CSS/XHTML I always tend to use div’s in general even for blocks of text
Now, I turn off the CSS support and your example template turns into a unformatted pile of text lines. Not very nice. As a designer (who you proclaim to be) you are aware of the fact that
divtag is a part of CSS language, whilst
pwas introduced in first versions of HTML; CSS is comparatively new let alone its “supportness”.
I’ve always thought that HTML is for the structure of the document (read: contents, which also means paragraphs) and CSS is for the look. IMNSHO including text in
divs with no paragraph tags is an obvious misuse and a grevious mistake which definitely should not occur in a tutorial.
18
@Lukasz, thanks for being so friendly to me here. It’s people like you that are so “helpful” to others that makes the web such a friendly place, isn’t it ? At least I’m doing something constructive here. Are you?
19
@Veerle, I’ve never claimed myself as a web-designer nor never tried to be one. But I’ve always expected expected CSS/XHTML zealots who write turorials for newbies to have an intimate knowledge of what they write about. I am aware of the fact you’ve made a mistake. Now, how can a newbie be aware of that?
20
@Lukasz, then add something constructive instead of just criticizing. And for the record, I just checked and my template doesn’t render as a pile of text. You clearly see the title, the navigation in a bulleted list and the different paragraphs of text, so everything is fine.
21
@Veerle, obviously it renders quite nicely but it’s not for the structure of your code but rather thanks to “cleverness” of modern browsers. Nonetheless, <p> tag is semantically required and as such should be included into your code.
As far as “constructive” remarks are being considered: it’s not recommended to align your text with <br />. It’s much better to use padding-bottom property to align vertically your paragraphs. Also, whilst it’s relatively easy to left- or right-align an image, you should consider adding a paragraph or two explaining how to actually center a div (large images that occupies most of main content do not look that well with lone character floating on the left). HTH.
22
Veerle,
Fantastic tutorial, I am a newbie and really enjoyed reading it. I have learnt a lot. Thank you and please keep up the good work.
I do have one question though, I am trying to justify the text, I have tried using text-align: but it does not come out right it just seems to stick/slide under the image on the right…I am thinking that this is because of the float, am i right? and how can I fix this???
23
Hi Fitzroy, maybe if you add a left margin to the css style of your image it might do the trick:
.imageright {
float: right;
padding: 7px;
margin-left: 10px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}</pre>
It seems to work in Safari, but I haven’t tested it in other browsers.
24
Veerle,
Thanks for your prompt response, It works in IE, for both a left and right image. Will test it later in Opera and Netscape as well.
Thanks again, and I look foward to more of your Tutorials.
Fitzroy.
25
Maybe I’m stupid but I really don’t see how you make that background pattern i photoshop. You say in part 1 you use just one pattern and make a 300x300 pixel image. Then you resize it to 1600x5. But I only get the same colour on the screen when I do that. ?
26
This was amazing, thanks so much.
27
Nice tutorial, Veerle!
However, I have to agree with Lukasz that you should be using p elements for paragraphs of text. Not only because it’s what the HTML spec says, but also because doing so allows you to use top and bottom margins to adjust the vertical spacing between paragraphs. That way you can get rid of the br elements, and paragraph spacing is independent of font size and line height. And since browsers have default top and bottom margins for p elements, someone viewing the site without CSS would still get the paragraphs as separate chunks of text.
28
@Roger, thanks, I was planning on getting back on this in my next part, but I’ve adjusted it also in the article too now that I had some time.
29
@nb, the dimensions of the patterns I made in the tutorial are 30 x 30 pixels, not 300 x 300. To create the background you extent the layout of your total design in Photoshop to 1600 pixels wide (Edit > Canvas Size and you alter the width by 1600 px). Then you actually crop (so not resizing or scaling!) a line of 5 pixels high and 1600 width out of your total layout. Make sure the necessary layers are hidden, so only the background you want to use is visible. This way you get 1 line of background that you can use by repeating it vertically (through CSS). Hope this makes sense to you and this helps you back on track ;-)
30
oh great finally part 6, been waiting for this since days :-)
31
Veerle,
Have been playing with CSS since reading your wonderful tutorial.
I am trying to have my header fixed so that when I scroll the page the header remains fixed at the top of the screen. I have tried using Position: fixed; etc.. but it does not work…any suggestions for a newbie, u dont have to give me the code, just point me in the right direction and I will go away and play, if I am not sucessfull them will come back for help…I want to learn not have the code dropped in my lap :)
Thanks again.
fitzroy.
32
great work on the tutorial veerle, have to say thanks and keep up the good work. its great to have such tutorials. ‘lukasz’, what the hell is wrong with you man, someones doing something nice and you gotta go and screw it up? WTH? hey veerle forget what he says im sure a 100 others agree with me, this was definitely a great help.
33
@Kronk, I guess I am for the option that if one attempts to do something it is much better to do it right. Otherwise, it’s better not to do it at all. Bear with me.
34
hey Veerle
That’s a cool & damn useful tut going on. Thanks very much. I’ve come across many tuts on creating CSS layouts but yours the best, its easy to follow, explains things & doesn’t rush at all. Looking forward to more. :D
35
This is one of the most thorough CSS Tuts i’ve seen so far.. I was wondering, could i integrate this tut with a table design to create a hybrid CSS layout?
36
@kel, why would you like to do this? My tutorial is just about how to create a tableless layout. It’s a bit of a contraction to me not sure if it would even work.
37
Well, I’m just trying to ease the transition from table based layouts to a completely CSS layouts. It would be easier for me to grasp CSS if i could first integrate tables with it. Then move on to full CSS layouts. I was reading a tut on
Projectseven.com , and figured it would be a good way to learn css. I rarely find sites that explain how to do this. Its either just CSS or just tables.
38
I am hoping to be a CSS convert as I have used tables till now. I have started to create the CSS style as per this tutorial and I thought it would be cool if (as a CSS newbie) to give you feedback as I go.
So far I have only typed 3/4 of the CSS, so I’ll let you know how it goes as progress!
Thanks for the tutoria, hopefully it’s goodbye totables!
Regards; steve (lazymouse.co.uk)
39
hey Veerle. Its me again! lol
I fixed my site. And i am pleased with the outcome (so far = ) ). http://shaysblog.com/weblog.php
Thank you for your tutorial!
Oh i would greatly appreciate your comments on it good or bad. I’m tough lol!
40
My Blog has found a new home. LOL
www.shaysblog.com
Thanks again Veerle. You helped a lot.
41
@shayshay, great to hear this. Congratz with your blog’s new home ;-)
42
Thanx for taking the time and doing all this.
Very useful to some of us begginers.
43
Veerle, 99.9% of us appreciate the time and effort you have gone to in creating this tutorial. As a web designer I dont claim to know everything and how can I??
Keep up the good work.
Lukasz, Veerle is doing everybody a huge favour, your negative comments dont help anybody.
44
Veerle many thanks for the tutorial. I have a little knowledge of doing table layouts, bu this is the begginning of CSS for me. My main question is how I add other images and control where they are positioned? I always use tables so it’s easy to put them in a cell, but I have no idea how to do it in CSS.
Thanks,
Al
45
Err… trouble, trouble…. Click my link.
46
Hi Jennifer, I’ve corrected you files you can download it here.
The main error was that the background image wasn’t centered. I’ve corrected this in Photoshop. Also the position of the background file in the CSS wasn’t centered in the body tag.
Also I would like to mention here that people should look at my source code of the example and not just look at what I explain in the article. There are lot of people that don’t use a doctype element, nor the body or html tag etc. When you start on this tutorial you should already know the basics of HTML. I see that a lot of people make really basic mistakes. I can only suggest, to do some tests and learning at www.w3schools.com Once you got the basic knowledge this tutorial will make much more sense and you will learn do it the correct way.
47
Hi there,
I am such a rookie, but with big ideas. I am a graphic designer, but work in print. I have taken some html classes and dreamweaver classes. I am currently trying to build a website for my newest venture www.montereystreet.com
Of course, I am inspired by Veerle’s site and have read and re-read the tutorials.
I am not thinking right. Could anyone shed some light on this for me?
I am trying to build this site using css, however, I cannot wrap my head around containers, for placement control. I have used tables in the past. I keep reading everything, but I don’t understand, perhaps because I am trying to compare it with what I already know. Which is probably my handicap. I feels like some things are assumed that I should know, but I do not understand.
Can anyone explain how I should be thinking to “Get it”
thanks and I apoligize for being “lame”
Denise
48
@Denise: You have to forget everything you know. Start fresh and don’t look back. The only recommandation that I can give is study the source of other sites. My tutorial is as simple as it gets I’m affraid. Another good tutorial is the westciv course found here.
49
I’d like to add my comment here, if that’s ok ...
I, too, was a ‘rookie’ 12 months ago and I haven’t looked back since following this tutorial.
I would say that it’s a steep learning curve and you will be learning for a long time yet!
But it is a brilliant way to design your sites - it does take time to ‘get it’ though!!
I recommend you follow the tutorial step by step and maybe look at an existing site and save the site (Save As) to your desktop and simply see how it’s done.
A basic view of using DIVS is to assume thay are tables, but with just one cell but don’t use loads of them to build up a page.
Another basic tip is to think of your early designs in termas of CSS, before you design the page, otherwise you’ll tear your hair out trying to get a wonderfully graphic design to ‘work in CSS’
Keep it simple to begin with
Copy other sites
Keep the CSS file tidy, with lots of notes to remind you later
Go for it and you won’t look back!!
Steve
50
thanks so much for your response. I will be putting on my student hat after the craziness of the holidays is past.
Denise
Commenting is not available on this article.