Google search term CSS +tutorial
Thought I can't say that any of them will bring it all together in one place for you.
Let me throw something out for your consideration that might help you get a grasp on the concept.
A page is like a big sheet of paper. On that page you draw a rectangle usually called a container. In most cases it should have a finite (fixed) width.
The inner portions of that rectangle can be defined many ways but let's go for the Holy Grail, a 3 column layout with a full width header and footer. Your divs would be defined like this:
container -- the box that holds it all
header -- a box the width of the container that spans 3 columns
left -- the left column
middle or main -- the center portion usually wider than the 2 sides
right -- that is over there on the right side of the page
footer -- full width of the three columns across the bottom of the page
One or more of can have a fixed width. The total can not exceed the size of the container.
Notice we declared no heights. If properly done the footer + header + tallest of the 3 center columns will determine and control the height.
Images of course must fit inside the box they are placed in or they will break the layout.
Here is a sample div declaration from a site of mine. It does contain some stuff not mentioned in this post:
Quote:
#container {
width:990px !important; /*moz width*/
width:990px; /*IE width*/
/* float:left; */
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
background:#fff;
padding:0px;
/*border: #5087BF 2px solid; */
}
#navpanel {
width:205px !important; /*moz width*/
width:210px; /*IE width*/
float:left;
background:#fff;
padding:5px;
}
#maincenter {
width:525px !important; /*moz width*/
width:575px; /*IE width*/
float:left;
background:#fff;
padding:25px;
}
#newblock {
width:500px !important; /*moz width*/
width:550px; /*IE width*/
float:left;
font-family: verdana;
color: #000000;
font-size: 8pt;
/* background:#F7F5EE; */
padding:25px;
}
#sidepanel {
width:160px !important; /*moz width*/
width:170px; /*IE width*/
float:right;
background:#fff;
padding:10px;
}
#t-banner {
background:#D1E1EC;
padding-bottom:5px;
}
#b-banner {
padding-bottom:15px;
}
#header {
width:990px !important; /*moz width*/
width:990px; /*IE width*/
/*width:100%;*/
float:left;
background:#fff;
padding-bottom:0px;
}
#footer {
width:100%;
float:left;
font-family: verdana;
color: #000000;
font-size: 8pt;
padding-top: 15px;
}
|
Most of the IE hacks that are still in this one are not really needed any more. I just have not taken the time to clean them out.
Linear Mode
