A
Anonymous
Guest
ok this is a little bit old now and i shall return to improve it later on like removing the #ie section and just putting 'text-align: center;' in the body section, but i got good review on this so i thought it might be useful for begginers, anyways, suggestion will be noted, the site i have it hosted on is being redeveloped so if there are any renovations you could suggest i will amend them for a new draft for the reopening. thanks 
Here we go, after explaining this to Cmain I thought I might as well post it publicly, a beggining guide to making layouts in CSS.
Okay to start we need a framework, now this can be whatever size and can be wherever you want but for this tut lets say we want a centred column 500 pixels wide, to do this we need to create this frame in a CSS entry which would be something along these lines:
(more CSS apt people will know that IE screws this code up but I will explain how to debug it at the end)
The width obviously defines the width of the column, but it is the margins that are key to the layout. When both margins are set to auto the browser automatically configures them to be the same regardless of resolution or screen size., the colours are just to make the column more visible while you work on it.
To put this column into your page you merely need to add the correct <div> entry to your HTML document
Once we have our centered column we need some content to put into it, so lets start with a header, the header will be full length so 500x100 pixels for an example, this becomes in the HTML <div id="header"></div> and in the CSS
That defines the width, height and filepath for the image and also sets a background colour incase the connection is slow.
Next on the list is some navigation for the site, in this case I will make it a seperate box with a small gap between it and the edges of the column. This can be done simply by setting the <div id="navigation"> putting your links here and finishing with the </div> the CSS for this would be something like this:
That defines the width and then defines how far the navigation should be from the top, left, and right sides of the column, it then centers the text, adds 2 pixels of cell padding and a 1 pixel black border.
Once that is finished you can go on to make the content area, this is fairly simple, it only requires a quite basic entry as there will be no text formatting, as i'll leave that to you. To add it to the HTML use the same format as always: <div id="content">Content Goes Here</div> and then add a content CSS entry like this:
and thats a Firefox friendly page!
but I already mentioned IE is not friendly with the auto function so we need a way to fix that, and we do this through another of IE's CSS flaws (thank you DCElliott for this tip) and make an outer division called IE and give it these paramaters in the main CSS document:
and this will not affect anything while in Firefox but then you add this to the page:
which will use the text-center flaw IE has, the flaw is that it will not only center text but any divs within that section therefore centring the page in IE but not doing anything in Firefox, but annoyingly that centers all the text within main, so you will have to add the text-align: left; paramater to that CSS entry and there you go, you should have a page something along these lines.
http://alex85.coolinc.info/csstut/
bear in mind this CSS is for a one column layout so it will need a drastic overhaul to work for more, this is only a begginers layout tut after all.
also to see how this can make a real layout look at Cmains layout which I conerted to CSS for him (btw Cmain, remember to give me the URL when you get it up so they dont have to look at the layout on my host)
http://www.seemyblog.net/
thank you for reading feel free to post your own suggestions i'm always keen to see how others would do it
Here we go, after explaining this to Cmain I thought I might as well post it publicly, a beggining guide to making layouts in CSS.
Okay to start we need a framework, now this can be whatever size and can be wherever you want but for this tut lets say we want a centred column 500 pixels wide, to do this we need to create this frame in a CSS entry which would be something along these lines:
Code:
body {
background: #6d6d6d;
}
#main {
width: 500px;
margin-left: auto;
margin-right: auto;
background: #fff;
}The width obviously defines the width of the column, but it is the margins that are key to the layout. When both margins are set to auto the browser automatically configures them to be the same regardless of resolution or screen size., the colours are just to make the column more visible while you work on it.
To put this column into your page you merely need to add the correct <div> entry to your HTML document
Code:
<body><div id="main">
</div></body>Once we have our centered column we need some content to put into it, so lets start with a header, the header will be full length so 500x100 pixels for an example, this becomes in the HTML <div id="header"></div> and in the CSS
Code:
#header {
width: 500px;
height: 100px;
background: url(images/yourimage.jpg) no-repeat;
background-color: #000;
}That defines the width, height and filepath for the image and also sets a background colour incase the connection is slow.
Next on the list is some navigation for the site, in this case I will make it a seperate box with a small gap between it and the edges of the column. This can be done simply by setting the <div id="navigation"> putting your links here and finishing with the </div> the CSS for this would be something like this:
Code:
#navigation {
width: 480px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
background-color:#555;
text-align: center;
padding: 2px;
border:1px solid #000;
}That defines the width and then defines how far the navigation should be from the top, left, and right sides of the column, it then centers the text, adds 2 pixels of cell padding and a 1 pixel black border.
Once that is finished you can go on to make the content area, this is fairly simple, it only requires a quite basic entry as there will be no text formatting, as i'll leave that to you. To add it to the HTML use the same format as always: <div id="content">Content Goes Here</div> and then add a content CSS entry like this:
Code:
#content {
width: 500px;
margin-top: 10px;
}
#content p {
padding-left: 5px;
padding-right: 5px;
}and thats a Firefox friendly page!
but I already mentioned IE is not friendly with the auto function so we need a way to fix that, and we do this through another of IE's CSS flaws (thank you DCElliott for this tip) and make an outer division called IE and give it these paramaters in the main CSS document:
Code:
#IE {
margin-left: auto;
margin-top: 0px;
margin-right: auto;
width: 500px;
}and this will not affect anything while in Firefox but then you add this to the page:
Code:
which will use the text-center flaw IE has, the flaw is that it will not only center text but any divs within that section therefore centring the page in IE but not doing anything in Firefox, but annoyingly that centers all the text within main, so you will have to add the text-align: left; paramater to that CSS entry and there you go, you should have a page something along these lines.
http://alex85.coolinc.info/csstut/
bear in mind this CSS is for a one column layout so it will need a drastic overhaul to work for more, this is only a begginers layout tut after all.
also to see how this can make a real layout look at Cmains layout which I conerted to CSS for him (btw Cmain, remember to give me the URL when you get it up so they dont have to look at the layout on my host
)http://www.seemyblog.net/
thank you for reading
feel free to post your own suggestions i'm always keen to see how others would do it