Sep 22
Designing a CSS based template - Q&A
2004 at 01.42 am posted by Veerle Pieters
A reader of my tutorial asked me a couple of interesting questions. Since I think it can help people I thought I share these Q&A with you:
Can you please tell me a little more on why you prefer to use FireFox over IE 6, I know you talked about bugs etc. but can you tell me some more on it?
I.E. handles certain CSS styles in a different (read: wrong) way, it doesn't always follow the W3C standards. These are CSS bugs. There are a lot of sites that explain these bugs. One of them is Position is Everything. Here you find an overview of the most known I.E. bugs. Of course you find all that and much more in my PDF resource file.
You mentioned that you had a lot of fixes to even your own blog with IE 6, what are these javascript fixes? Is it done in such a way that the browser doesn't recognise that bug anymore or is it that it bypasses that error?
No, these are no Javascripts. These are so called CSS "hacks", you add certain code that only I.E. will read, this way we can fix the errors. There are different kind of hacks, you have hacks only for I.E. 5, or for I.E. 5 Mac, or for both I.E. 5 and 6 etc.
You mentioned that after 1600 pixels it will show #F7F7F6, the only way we can fix this is to have an image much larger right? Is there another way?
In our design I don't see any other solution. But if the design (the frame around the layout) didn't have a drop shadow on both sides or if our background was just 1 plain color instead of a pattern, there would be other options here (see below in the next Q&A).
In this tutorial you have used a 1600 wide image as the background. Is this the only way you can create the background writing the code without tables?
There are other ways, it just depends on the design. The one I use for the tutorial is maybe a bit challenging. If we leave out the pattern or we leave out the drop shadow around the frame, we would have another situation. We could either just use a repetitive pattern for the body background and we could use a div container with a padding of 11px and white background or a div container with a 11px white border. If we use only a drop shadow but no pattern, our background would be just a color and we would have a container with a 1px high white line background with the fading shadow on each sides (fading into the background color). This background would be repeated vertically. And I'm sure there are even other ways.
What if it's a vertical background with a gradient?
Well if you want to have yellow on top faded into red on the bottom, and you want to have this red aligned at the bottom, you can use a yellow as background color and you can use 1 px vertical line of the gradient and repeat it horizontally and then align it to the body:
body {
background: #ffcc00 url(images/gradient_line.gif) x-repeat bottom;
}
What do you do, add the styles to your html document or do you use an external .css file attached to your html document? Is there a difference?
I always use an external stylesheet document (styles.css), but for tutorials or if I need to show examples I put them in the same document just to be practical. You choose "view source" and save it to your HD and you have everything there fast. In part VIII I explain how to create and link an external stylesheet document. The difference is that, if you use an external document, you can link all your webpages to it and if you decide to change certain things (for instance the size or color of your text) it will affect all those pages, so you only need to change it once (in the stylesheet document). This is of course not the case if you implement your styles in your html document, then this can only have its purpose if you design only 1 page.
15served
1
Veerle, can I make a comment on your answer to the fifth question?
Actually, It’s not such a good idea to make your background image only 1 pixel wide. On an average display resolution, the GIF will be tiled more than a thousand times on each screen redraw. With older processors, this will noticable slow down the redraw process. It not only depends on CPU power, but also on the browser you’re using, the color depth of your videocard and the screen resolution. I’ve seen cases where (only) rendering a background (with tiled 1px images) took more than a full second.
Try making the image 50 or 100 or pixels wide. The files size will change just a tiny bit (probably a few extra bytes...), but the redraw will be much faster!
2
Hi Roel, I didn’t know this. Thanks for the input, it’s good to know this.
3
I’ve been following this tutorial Veerle and it is really so helpful to me. Thank you for sharing your knowledge and talent as well. :)
4
Hi Veerle, I am a novice to css and to html as well. (I guess I am privileged to learn it from scratch) i am collecting/harvesting “raw material” to learn from.
I real your wonderful essay on CSS.
I stumbled upon this page about the deadcentre JS script.
Couldn’t this replace your 1600 pixel method of centering your page?
Just interested to know.
Btw I just love your CSS course.
Greetz, Erwin
5
Hi,
the template of this particular page is broken in IE 6/Windows, the comments come over the menu in the left.
i was about to ask you why when i try to select some parts of your page, I can’t use normal mouse operations, as when i first click to start the selection, i already have a section of the page highlighted.
calin
6
Hi Calin, I see. I think I’ve fixed it. Someone posted a very long URL in the comment which messed up the layout, it’s gone now. I’ve place the link on the text instead.
7
Veerle,
This tutorial was excellent. I’ve been creating various CSS layout templates and your method has definately gone the smoothest. I came up with a design for my development team’s website and now want to use this same style to create a blog template. Any referrels on how to easily convert the CSS layout template from your tutorial to a blog template?
8
@kari, it took a while (since I had to do some research myself) but I’ve found a few URLs that might help you if you would consider pMachine as a blog tool (the cms tool I use for my blog):
- a step-by-step tutorial in Flash about pMachine
- pMachine 2.3 Tutorial and Installation How To
- pMachine Quick Start Tutorial
9
Hi Veerle. I followed your tutorial and well i didnt get the right outcome. My site is located http://shaysblog.com/index.html
As you can see the header.jpg image and the bullets for my navigation unordered list aren’t showing. The footer is too far up. What did i do wrong?
10
@shayshay, I see that I get an “access denied” if I try to access the header image, or any other image you refer to in your css. So there might be a permission problem on the server where the images are located. I don’t see any footer on your page, not in the code (HTML or CSS) and not in Safari. If you fix the permissions on your images it might solve half of your problem already. Hope this helps.
11
Hi Veerle and bloggers
re the background image opportunities, there have been times when I’ve wanted tiled background plus a vertical line edge, but didn’t want to use a 1600pixel-wide image.
So I make one smaller tiling image for the background that goes into the css for the body.
Then I make another separate image of the page edges that will be dropped vertically. This file will be as wide as you like, eg. 700pixels.
I then make another css div immediately inside the body tags called “page_edges”, and put the new vertical image in as a background, with repeat-y and position center.
This way the browser resize will allow the tiled background to tile, but also for the page edges to remain centered over the top of the background tile, regardless of browser size.
Any further such ‘wrappers’ are placed deeper inside these div tags as well, eg. to achieve the popular column with yet another vertical background graphic.
One caution, if you use gradients in the “page_edges” image, it is fine as long as it matches to your tiling background ‘behind’ it.
Patterned backgrounds are unlikely to work very well unless you have a strong vertical edge on your “page_edge” image. Alternatively, a clear transparency on the outer edges of your “page_edge” imagery...hope that makes sense. eg. If your page edge was in fact irregular, like a wobbly torn paper edge, that is ok, as long as it has a transparent outer edge that can crisply overlay the further image behind it..
I like doing this because I can have the best of both worlds, a patterned tiling background, plus a custom page edging, that will work in any browser width.
Hope that helps.
12
Hello Veerle and all!
I loved the your walk thru for “2 column Css layout” and I have used it for a few sites already. Thank you very much for posting the tutorial!
I am currently working on a new website that is 3 columns, and I am having a problem with the 3rd column. everything keeps getting pushed into the middle of the 3rd column and centred there.
You can see it here.
http://chatnoirbooks.com/new/chatnoir
I have checked out a few other sites that give 3 column examples but when I try to incorprate the footers, headers and body code the column do not align again.
Just hopping you might be able to help me out.
Thanks
13
@Brimmy, the right column’s text and image is jumping under the “content” div since the width of that container is still set to 479px and that is too wide. It takes up the entire space on the left (including the space of the right column). If you add a border of 1px to the “content” style in the css, you’ll see what I mean. Adding a border is a handy trick to look for floating errors btw. So what you need to do is alter the width: 479px minus the width of the right column (-178px), so the width of the “content” style should be 301px instead of 479. I think this will fix the error.
14
Veerle,
I wanted to thank you for all the info you post here, and I hope that you know that it is greatly appretiated. I used the tutorial and look what I got.
Your blog has become my daily reading, it is allways intresting to see what you were up to this time :).
Since I am begginer, I would love to see more css/php tutorials. Keep them coming girl!
I am also looking for blog machine I could have full controll over. I was contemplating over wordpress or p-machine.
What do you think?
Thanks in advance.
15
@LAURAS: Your site looks good but to make it even more original I would use a different background then the one of the tutorial ;-)
The only advice that I can give you is to use the system that suits you best and requires little time when doing an update.