Central Floating Column Website
This is a common layout used for websites and is usually achieved by wrapping the website content in a div with a declared width and automatic margin.
.wrapper{
width:80%;
margin:0 auto;
}
note: width can be either % or pixels (px), the example uses shorthand margin (margin: top right bottom left).
However this technique is not supported in IE. The text-align property of the html/body tag needs to be set to center, the text-align for the website content can then be set back to left in the wrapper class.
CSS becomes:
html, body{
text-align:center;
}
.wrapper{
text-align:left;
width:80%;
margin:0 auto;
}
Div Height
Some say the height of a div cannot be set as a percentage, others say it can only be achieved by setting the size of a hidden image in the div, both are wrong.
A div's height is relevant to it's parent and so to set a div's height, the height of the parent ie. body must be declared. For example:
html, body{
width:100%;
height:100%;
}
.content{
width:100%;
height:100%;
}
Floats
Floats are often misunderstood. They do not float to the side of the content, the content floats around them. As well as declaring the floated element, the point at which to stop floating content around it needs to be declared using the 'clear' property. I usually use preset classes for the floats and clear so they can be easily implemented.
.fltlft{
float:left;
}
.fltrt{
float:right;
}
.clear{
clear:both;
}
Hover
CSS Psuedo-class ':hover' is usually used as part of anchor tags for links, however they can be used on almost any tag. For example:
.my_div:hover{
border: 1px solid #000000;
}
However in order for this to work the DOCTYPE needs to be declared in the HTML file.
<!DOCTYPE HTML>
<html>
<head>
...
<!DOCTYPE HTML>
<html>
<head>
...
No comments:
Post a Comment