CSS Layout Basics: Structure
Divs and What they can do for you
CSS uses divs as divisions or sections. A layout can have as many divs as you want. More divs make it easier to update pages, but it can make it harder at the beginning when you are first creating your design.
Divs can be stacked which means that you have a div inside another div. You can have a div for your left sidebar and have smaller divs inside it for your navigation and affliate links.
Divs are particularly helpful if you use php and for some layouts it is best to have a different div for each layout.
What Divs do I want?
It depends. For more basic designs it is common to have a div for the header, a div for the footer, a div for your main content, and a div on the right and or the left for navigation, terms of use, affiliate links, most popular pages, etc.
It is important to note that you cannot have two divs with the same name. Thus, if you want two navigation bars (ie one for sections and one for subsections) you can't name them both navigation.
What is the xhtml for a div?
<div="nameofdiv"> Put your content here </div> where "nameofdiv" is the name of your div such as header, sidebar, navigation, etc.
What is the css for a div?
For the div structure the css will vary, but the basic code is:
#divname { css information } OR
#Divname {
float:left;
height: 500px;
margin:0;
padding:1px 2px 5px 2px;
width:50px;
background-color:#fff;
}
Div vs. Class
Unlike divs classes can be used multiple times. Classes are particularly good for more detailed work. If you want all definitions to be shown using a different font, font size, and/or background it is best to use a class.
Classes can be shown in relationship to a div so that the class only affects content within a specific div.
What is the xhtml for a class?
<p class="class name"> Put your content here</p> where "class name" is whatever you have named your class. I recommend making it something that will still be obvious to you in six months.
What is the css for a class?
This varies depending on what you want the class to do. If you want the class to make the text red and underlined you would use:
.classname { color:red; text-decoration:underline; }
The important part is .classname {the css you want to apply to it}
HELP!: Or an easy to fix common error
It is important to close your divs and close them in the correct order. The more divs you add the more complicated this can be. Since all divs regardless of their name are closed using </div> and you can stack divs it is easy to accidently forget one. If you have a sidebar div with two divs inside it be sure to close both the smaller div and the sidebar div.
This error seems to be especially common when making minor edits and it can cause the layout to look like an utter disaster.
Where can I find more information on divs and classes?
I am working on additional tutorials, but until then I have a collection of web design links.
