Centered Website With Fixed Width - ...begginers lesson...

This will be tutorial on how to make a simple website design with fixed width and center position. This is actually rather simple tutorial, but hopefully it will help others that are new in world of creating websites. Website will also contain header, content area and footer.

First we must do Wrapper. Wrapper is actually an area of fixed width and will be position into center, so that our page doesn't fall apart.



This is actually an IE5 hack were we did center align of everything that is inside of body. Meaning Wrapper will stay in center due the fact, that margin left and margin right – AUTO doesn't aplly for IE5. So this problem is solved.



This is code for Wrraper. We used fixed width, margin are set to AUTO left and AUTO right, which will keep your site centered in browsers like Firefox, Opera, IE6.., new browsers actually. Next things that will be defined are Header, Content and Footer.



In this section we have defined Header properties. Width and height, margins and background. No big fuss.



We have defined Content area so that it has 10 pixels of padding at top, meaning that Text will not be touching any borders of Content and will look more compact.



Here we have defined Footer, which is 750px of width and 25px of height. No padding, nor margin.



This next thing is p.class for text. With classes you can define different styles of text (you are formatting it). Notice the padding-bottom, left and right of 10px. That means you don't have to use paragraph breaker, you just start with new area of same p.class and will show up like you use command break. Padding left and right gives space on left and right side of content. Font is defined as 11px of height with 14px of spacing (around 2px between lines in same paragraph), color is black (#000000).

So here we will make a CSS file and HTML file which is gonna be linked to a CSS file. CSS file serves as graphical presentation of our website and HTML builds and renders our actual website.

Here is the code of HTML file:



Here is CSS file (name it layout12.css, cause HTML is linked to this name of CSS file, but you can change it to your needs, but prior change the name of link to CSS file in HTML file):



Notice: You can change your background colors or you can even change your colors into background images. All you need to do is to change code:



for Footer, into code:



where »images1/layout/content1.jpg« is relative path to your image for footer. You can do all of this for content, header and footer. NO-REPEAT means background is shown only once (for footer or header), whereas content can use command REPEAT-Y where backround is repeated vertically, command REPEAT-X will repeat background horizontally.

Working exaple of this tutorial is here.

CSS file is available here.

Any comments are welcome, maybe I have made some mistakes by myself, so that even I can learn out of this tutorial.

Best regards, hope you have enjoyed this tutorial,
Robert

 

 

 

Comment/Reply (w/o sign-up)

Just a couple of points to make about some of your code:
You don't need to specify px (or anything else) if you're using a 0 value, e.g., margin: 0.

You also don't need to specify the bottom and left properties of something if they're the same as top and right because B & L automatically inherit those properties. So instead of margin:0px auto 0px auto you can just type margin: 0 auto. In the case of padding:10px 0px 0px 0px, you'd type padding:10px 0 0: the L property takes its value from 0 specified for R, but because you want B to be 0 instead of 10, you have to specify that too.
Keep in mind that the order of properties goes clockwise: top, right, bottom and left.

Comment/Reply (w/o sign-up)

Cool, thanx mate. Now even I have learned some pointers. Especially about inherit thing. Never really bother myself with this option.
And yes, I forgot to write, when writing margin, padding or other properties, it goes like this: top, right, bottom, left.

Comment/Reply (w/o sign-up)