Jul 16
Designing a CSS based template - part IV
2004 at 01.33 pm posted by Veerle Pieters
Here are the previous parts of this tutorial : part 1, part 2 and part 3. Now that our color paint and pencils are tucked away, we can move on to part 4. In this chapter we will concentrate on slicing our design and determine the DIV containers.
The question you need to ask is, what are the different parts of our design? What are the different components of this page? By doing that we'll have our answer on how to slice it up. If you are a web designer it might be a rather easy answer since you are thinking about the next step, the dividing into separate DIV containers ... and no, no tables. With CSS and XHTML we create not only lighter web pages, we also make things much more flexible and much more accessible.
This is how I see my different areas, components or whatever you call them:
- the header
- the left
- the content
Exporting the gifs and jpegs
These are the different elements you need to export to gif or jpeg:
- 1. header
- 2. bg_navbutton
- 3. bg_navbutton_over
- 4. bullet_extlink
- 5. bullet_title
Ok, you probably think, "what about the background?" That's right, it's not listed here. This needs a little explainging. We want a smart solution, since we still want our content centered if we stretch our window. Here is how you should export your background. It's 1600 pixels wide and 5 pixels high (this should be enough... unless you are the proud owner of an Apple 30 inch Cinema Display ?).
Implement the background by using CSS
This is the CSS code we need to have our centered background:
body {background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;background-attachment: fixed;}
Our background is a 5 pixels high "line" which is repeated vertically (repeat-y) starting horizontally centered (50%) at the top (0) of our browser window. Background-attachment: fixed, means the background will not scroll with the content, it is "fixed". We use the body tag as our selector, since our background should be applied to the entire body of our page.
View the result here.
Adding our first layout DIV containers
Now we will be adding the first layout DIV containers: our header, left and the content.
Here is the CSS for our header:
#header {text-align: center;}
Now we use an id selector to create the header container div. An id selector is always applied to only 1 element of the page. An id attribute must be unique within the document. Our header needs to be centered, that's why we use "text-align: centered;" This line is added to our code in the body:
<div id="header"><img src="images/header.jpg"alt="My blog" width="692" height="90" /></div>
You'll notice that when you add this header image that it doesn't align at the very top of the page. That's why we add a "margin: 0" and"padding: 0" into our body tag selector:
body {background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;background-attachment: fixed;margin: 0;padding: 0;}
View the result here.
If all of this is really very new to you, then this full introduction to CSS is a must read to get a better understanding of the matter. Good luck! ;-)
60served
1
I think you meant to say:
text-align: center;instead of:
text-align: centered;2
nice conscise and informative, keep up the good work and enjoy ur hols!
3
ummmm… not sure but isn’t text-align:center exactly the wrong way of doing centering of elements over a page? As text-align is only meant to be used (and should only be accepted by) text parts?
I always center elements with
margin-left:auto; margin-right:auto;
Though I’m not sure that’s the “right” way of doing it, either
4
Hey,
Is it better to use a background image like you use that has a full background (i mean an image that has the gray and dark green in the middle) or is it better to use CSS to draw the gray and dark green and use an image for the left or right side?
Thanks for the great articles. I’m learning a lot
Sjmeilh
5
Another great part to the article!
Personally i would have set the page background (the greenish one) in the body tag, then added an outer container which wraps around my left and content containers which had the actual “main” part of the background in it.. that way you’re creating a pretty much true “multi resolution” design.
Chris.
6
@Colin, you are right. It seems I made a typo in my article ...grr :-S An oversight of mine, mea culpa and thanks for mentioning :-) The source file that I link to was luckily fine.
@Mark, not sure but I tried your advice and my header image aligns left, not centered. I’ve learned it the way I explained and if you look at Zeldman for example you’ll see that he uses the same property and value in his body tag selector. So I’m assuming that it is fine to use not only on text.
@Sjmeilh, the thing is our background has a drop shadow on both sides and this makes it impossible to implement it the way you mention, except of course if transparent PNG would be supported, but it’s not in I.E. 6. So when you design a layout without any transparent drop shadows on top a background pattern (if no transparent PNGs are needed), the technique you describe would be better.
7
@Chris, ok I understand you, but is this still possible with a transparent drop shadow on both sides “moving” over my pattern? Doesn’t that require an alpha transparent PNG? I don’t want to use the PNG hack just for I.E.
8
Yeah, i didn’t actually notice about the drop shadow. So thats probably the easiest solution too, afterall you’re trying to teach the basics of CSS based design, and you are doing a very good job of it too.
Did i forget to mention that your blog is quickly becoming one of my favourites? ;)
9
Excellent tutorial, Veerle. It all comes together like pieces of a puzzle. I am beginning to think I can actually create a CSS based design.
Thank you very much!
10
ths is really helpful. now i gotta go back and make the graphics. hehe.
11
Ah, very nice tutorial/article, and easy to understand too. I will post my design and site when it’s done.
Thanks again.
12
keep up the good work!
13
I know what I am about to say doesn’t directly impact what was spoke of in this article it has to do with some comments people have made.
If you have 1 main div that will act as the container for the site and you want the 700 px wide div centered in a layout, competent browsers will understand margin-left: auto, margin-right: auto, however, something like IE 5.5 won’t get it which is why you need a text-align center. So what I usually do is if my main portion of the site is 700px wide, I will put everything inside another pair of divs and give that div attributes of text-align: center. Then in the main content of the site, I apply margin-left: auto and margin-right: auto as well as text-align: left.
That usually works to get a layout centered in most/all browsers.
14
Nice tutorial!
It’s a great way of having a frame to start working on.
I saw this background idea on alistapart (http://www.alistapart.com/articles/fauxcolumns/)
but this is also a very elegant solution. I’m redesigning my site, switching to CSS/XHTML and tutorials like these are really helpful. Have a nice holiday and let’s have the next part after that!
15
I saw your webadress first on Whitespace but is seems you’re the first belgian webmaster that have a link on Stopdesign
Congratulations!
16
@Mark and Veerle
The reason that Mark’s method *appears* to not work here is that the header div is assuming the width of the viewport, as it has no dimesions declared on it. So it *is* centering itself, however it is the same width as the browser window, and therefore it is putting itself at the center of something that has the same width as itself!
If you set the width of the header to, say, 700px, his method would work.
Veerle’s method works here (on all browsers) because she is including the graphic via an image tag, which is an inline element and therefore subject to obey ‘text-align:center’.
With Regards to Bryan’s trick:
Bryan settled the text align center issue above, however one little trick for simplifying things:
Put ‘text-align:center’ for the body.
Then, use the ‘margin:0 auto’ on your wrapper (the 700 or 750 px one) and reset the text-align there to ‘left’.
That saves you using a second div simply for centering the fixed width wrapper.
17
BlueRobot: Centering: Auto-width margins
I would’ve wrapped the whole page in a container that’d be centered the way described above. Plus, since we’re dealing with a header here, I probably would’ve used an h1-element with the image replacement technique of my choice. Like so:
CSS:
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
text-align: center;
}
#container {
margin: 0px auto;
text-align: left;
width: 692px;
}
h1 {
width: 692px;
height: 90px;
text-indent: -1234em;
background: url(images/header.jpg);
}
HTML:
<body>
<div id=“container”>
<h1>My Blog</h1>
[all the other content goes here]
</div>
</body>
Using semantic markup (eg. the h1-element for the main header) makes sites more accessible to search engines as well as people with no CSS (though I’d personally put more emphasis on point one, but it’s just me). Each of the image replacement methods has at least some known downside to them, but they should nevertheless be considered.
Great job you’re doing. Props for that.
18
Great stuff. Hope you have a nice holiday.
Two remarks. Firstly this is not precise to the pixel. If the length of the header is even, and the width of the browser window is odd, Mozilla is different from IE (on the PC). So if you put dropshadows into the back-ground image you have to be careful.
Secondly, and I do not know why, when the nesting of the div’s gets more complex, Mozilla seems to have problems keeping the central; column centralised. See my link.
19
@Ezku, nice tip. Thanks for sharing this. I’m definitely going to pick up on that in my next part of my tutorial after my holiday.
I’ve (finally) found a WiFi café here at Ibiza, but it’s not cheap :-S I’ll pop in now and then if I can. I’m having a ball here! btw ;-)
20
Glad to be of assistance :)
21
I didn’t read all of the comments, so I’m not sure if anyone answered this yet.
It’s best to use both text-align: center AND margin-left and right: auto when centering a layout. I’ve never known a different way of doing it. I may be wrong, of course.
22
Thank you so much for this tutorial!!! I found your site in kind of a weird way and I am glad that I did. I did a search for website templates….I really wanted to make my own. Now I have a great start. I am not a wonderful designer like you but your steps really made this easy for me
Can’t wait for the next part of this tutorial
23
Yes, this was a good start for a tutorial. I found what you started was a great resource, but I’m sorry it wasn’t complete. The two weeks is or just about up, right? I’m looking forward to more! Thanks!
24
Thank you so much for this tutorial! I am finding your advice so helpful. I did try Ezku’s advice with the h1 and image replacement, but it didn’t work right in Firefox (didn’t line up at the top, though it worked fine in IE.) Perhaps it is my error, but I’ll stick with the way the tutorial instructs for now. I’m looking forward to the next part!
25
Kristen: If I got you correctly, your problem was whitespace around the h1-element. My example was lacking in this part - see, h1-elements (with all the others) commonly have such default attributes as margin applied to them by browsers. To get rid of this behaviour, apply margin: 0; padding: 0; to the h1 via CSS.
(I myself apply * { margin: 0; padding: 0; } in each of my CSS files just to get rid of unexpected whitespace around all elements. I can then apply the values of my choice to the elements I wish without the need to worry about browsers’ defaults. Ie. if I don’t declare a margin, it won’t be there. Unnecessary, perhaps, but it’s become a nice convention.)
26
just found this site. very great. can’t hardly wait the next tutorial of CSS :).
27
hi ezku, i’m trying your tips and it works on IE 5.5 but it’s not works right on IE <5 and opera. i still looking out for the error while waiting for the next tutorial :).
28
Really astonishing for the clearness.
I have always thought that to understand a subject you have to start from the basic principles: you’re the living proof of this!
Your 4 tutorials are like the 4 corner stones of a beatiful building to be.
We are looking forward for the next ones!
29
nice tutorials .. when using IFR how can i make the div cickable .. ? i.E. the logo image .
30
sakn, good question! You need to add 1 extra CSS style:
h1 a:link {width: 692px;
height: 90px;
display: block;
background: url(images/header.jpg);
margin: 0;
padding: 0;
border: 0;
}
“display:block” is needed to create the clickable area of the header. All you need to do in the HTML is add the link in between the <h1> tag.
You can make this even more interesting by adding an a:hover effect when people mouseover the header (some color changing in the header image for example). Then you use the same technique as the navigation buttons in part V, you swap the background images in the CSS styles.
31
“It’s best to use both text-align: center AND margin-left and right: auto when centering a layout. I’ve never known a different way of doing it. I may be wrong, of course.”
The “correct” method *is* to use margin: auto in regards to centering block elements. The reason people use text-align: center *and* margin: auto is because IE 5 (possibly all “quirks” mode rendering for IE) and I think NS 4 improperly implemented text-align: center to align the element itself to the center of the page, instead of just the text it contains. Browsers with broken text-align: center implementations coincidentally also ignore margin: auto for centering block level elements.
32
Hi,
Can some one direct me to a tutorial on the how and why or creating the background image?
33
More information about centering layouts can be found on on Simplebits.com. Very interesting article ;-)
34
Hi Veerle,
Thanks for the reply, my questions was on creating the background image, placed behind the container, giving the illusion of a drop shadow.
35
@Christopher, not sure if this explanation helps :
There are 2 things: there is the pattern and there is the background we use in the CSS. The pattern is part of the background gif we use in our design. So once you have created your pattern (select your pattern, go to Edit > Define Pattern as described in my tutorial), you have to fill your background with it in your Photoshop layout. Now you need to crop a line out of your design. But to do this you first need to enlarge your canvas to 1600px wide (Image > Canvas Size - 1600 width, click OK). Now you need to apply the pattern on the entire background. If that’s done, you can crop a line out of your design. And while you do this you need to bare in mind that this line will be vertical repeated. In my example I need to crop 5px high, but maybe you have another pattern that is bigger, so it depends on that. Just keep in mind that it needs to fit perfectly to have it repeated vertically. Hope this makes sense.
36
Hello Again Veerle,
That was the explanation is was looking for any sites or tutorials that explain this method, for my “notes”. I like to have more than one source for a topic.
37
I noticed you wrote the line:
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;without quotes around the URL in the tutorial post, but in the final web site there are quotes around it like so:
background: #F7F7F6 url(“images/background.gif”) repeat-y 50% 0;I take it this doesn’t matter? And that you can even use single quotes?
The reason I bring this up is that this was the only difference I could find between my code and yours, and I can’t get my background to repeat all the way down the page unless I fill the body tag with content. Why is that? I’ve added the “repeat-y 50% 0” part so if I understand correctly it should repeat down no prob—only it doesn’t.
The link to the page is http://atlantis.plastiqueweb.com/2005-2
and my CSS code is:
body {background: #E3E1DE url(”../images/layout/background.png”)
repeat-y 50% 0;
background-attachment: fixed;
}
Thanks if you have the time to help.
38
Actually, it’s only in Mozilla Firefox that it won’t go down, because I just tried in IE 6.0 and it looks fine. But your sample page does repeat down in Firefox, so what am I missing here?
39
@Atlantis, I’m currently doing some tests on your page and it’s very weird. If I look to your URL “online” the baclground doesn’t show, but if I open the local version on my HD the background shows :-S
About the quotes, it doesn’t matter indeed (as far as I know).
40
You’re right, it does view properly offline. I hadn’t tried that because I’m writing it in PHP. So in that case it would have to be something to do with the main.inc.php file I’m linking to.
41
Yes, it was the main.inc.php file, which had browser checking routines in it and all sorts of other stuff that my brother wrote, so I’ll bug him about getting an update for that.
Thanks for your help though and for providing these tutorials. It’s a little more difficult trying to apply it to my own design that I had already made, but I think I’m making progress. The version without the included php file is up at http://atlantis.plastiqueweb.com/2005 and the background goes all the way down now. :)
42
thanks veerle, came here looking for exactly what i found! how to center a div for firefox.
thanks again ;)
43
For some reason the background-attachment atribute doesn’t seem to work for me. I tried using it in my layout, but the bg still scrolls with the scrollbar. The same happens with your final result here.
Any ideas? This is very strange.
44
William, not sure what could be the problem I don’t see the background scroll. This should be supported by most of the browsers, even older ones expect for Netscape 4.x. I have no idea why this happens on your side :-S
45
Yeah, that’s why I find it so strange… I have my resolution set at 1024x768. But when I manage to make the scrollbar appear, it does this. Did you try resizing your preview page until the window is smaller than the centered DIV? I’m stumped.
46
William, the example you link to has no content yet, so when I resize the window I get no scrollbars so I can’t test what you suggest. I tested the page of the last step of my tutorial since this is a good example to test this. And my background doesn’t move when I scroll.
47
Sorry for the hassle. It’s hard for me to explain what’s happening, so here are screenshots.
Before scrolling:
http://img.photobucket.com/albums/v138/nyarr/scroll1.jpg
After scrolling:
http://img.photobucket.com/albums/v138/nyarr/scroll2.jpg
48
I just wanna say,i have read alot of tutorials on the subject of css and by fay veerle you are the best teacher.you make it look so easy.
thanks much
49
How did you make the bg?
50
@Travis, I think I have explained this already in the comments here (15th comment counting from this comment back to top). Hope this is what you need to know ;-)
51
I’m confused as to how you got the 1600 x 5 px background? Did I miss a step? I successfully created a pattern as instructed in the 2nd part, but if I export that as 1600 x 5 there is no “separate sections” like in your exported example.
52
@Jonah, not sure if this will help you but I have explained this in the comments already. (17th comment counting from this comment back to top).
53
I am so glad I have come across your tutorial. Many times I find instruction of changing a website based on html to CSS, but not starting with CSS. AND your design style makes me smile - it is definitely a style I would like to use as my base for my portfolio. I really appreciate the Photoshop hints…I am so new to web design and there is so much to learn!
54
Is there a way to fix this page from being displayed improperly in IE? The content gets ‘bumped’ down and shown on the next line in the ‘navcontainer’ area. Also .. oddly enough, this does not happen when viewing the page offline.
Any way to fix this ?(only happens in IE)
55
hi veerle - i accidentally posted this comment on your previous tutorial somehow? anyway, can you please tell me where the “drop shadow” is supposed to be when i look at the background? i do not see any, but perhaps i don’t know what you mean by a drop shadow!
Also, from a “beginner’s perspective” - the background 5pix high repeated image seemed to be thrown in to this tutorial as an assumed-to-be-understood technique, with very little explanation around it’s inclusion, especially considering it’s importance to the overall aesthetic. Thanks for the considerate website, i am not trying to be negative :)
56
Hi trevor, it’s a very light shadow on the right of the white line on the background image. You can view it here. Maybe download it and zoom in in Photoshop if you can’t see it, but it’s there.
57
Hi again Veerle, thanks for the explanation. I see now that the shadow is very subtle.
...and now for my humble begging - i have REALLY tried to solve this on my own, but i am going crazy about one thing from your tutorial that i can’t get working, and i wish that i may ask you directly for help - if you have any time in the next while:
i followed your instructions to create a background gif (5x1600 px), no problem. When i view the gif in a browser window (ie 6) it is ok, it streches with the window and it is centered.
However, when i put it as a background, it fails to act like yours!??? I cut and pasted your code and simply changed the name of the background image to my gif, but mine doesn’t work!!!
my page is at:
http://www.martianradio.com
i’m sorry to outright ask you for help, i know you must be busy, so if you can’t get to it i understand. i have really enjoyed your whole tutorial (i used container background colours to simulate the background since mine didn’t work ;) so…...thanks a lot!
greetings again from canada
58
@trevor, you did everything correct except for the background image itself. You need to make sure that the white border and grey is centered on the green pattern, since your browser will place this background right in the center of it. If the image isn’t centered then the background won’t appear centered either. Hope I’m making sense to you. Anyway, I’ve mailed you the correct image. Hope this helps ;-)
59
Hello,
Thanks for this good tutorial, but I have a question:
I design a new background, W: 1600px H: 10px, okay, and I make my site in center of this background, I make a light gray section for nav (170px) and (430px) for the conent area. which they are (600px)..
Okay, when I make css I do div 170px and div for content 430 and aligned them center as you explained, but the result is not okay, the div whic is as the width of I made in background isn’t match!!
How to design background?
You didn’t explained that????
And what is the formula between the background and css whidth and height?
Is they same? I don’t have that same!!
I checked in mozilla firefox and IE6
Thanks alot.
60
@Hasan, can you please give me some URL it’s hard to follow what went wrong purely based on your comment here. Also, please look in the comments here for explanation on the background, I have explained it a few times already, step-by-step (I think in the 15th comment).
Commenting is not available on this article.