This time I would like to introduce a nice and powerful property: position:fixed. Unfortunately this property is not correctly interpreted by IE-family browsers. To fully understand how it works let’s create a layout as show in the picture below:
Header, footer and menu always stay at their places. Footer is always at the bottom of the browser window, header is always at the top. The only scrollable part is content. There is also a white line-space between each element.
This template has four regions: header, menu, content and footer. We can start by adding four <div> to the body of the page:
<body> <div id="header">header</div> <div id="menu">menu</div> <div id="content">content</div> <div id="footer">footer</div> </body>
Perhaps a questions crosses you mind what is the different between <span> and <div>. A <div> is a block element which means that it takes a whole line, whereas <span> is an inline element what means that you can put many of them in one line. You can change this behavior defining a display: block|inline property.
Now we should create a style for every region:
#header {
background-color: #A5BEF2;
}
#menu{
background-color: #B9DDF9;
}
#content{
background-color: #E2F0FD;
}
#footer{
background-color: #A5BEF2;
}
At this moment our layout looks like a four stripes of different colors. Normally an element appears according to its normal flow. That means that a block element will appear below another element that was former defined in a source code. (An inline element will appear next to the previous one).
We can change this normal flow using position parameter. In this case we change to position:fixed. It means that the position of an element is described by a set of coordinates left, top, right, and bottom which values are relative to the browser window.
We can change this normal flow using position parameter. In this case we change to position:fixed. It means that the position of an element is described by a set of coordinates left, top, right, and bottom which values are relative to the browser window.
There are also few more properties to changing appearance of a single element: width, margin, border and padding.
Let's start with header and footer elements. The header should start at the top and be wide for the whole page. I will also set padding to 5px.
#header{
background-color: #A5BEF2;
margin: 0;
padding: 5px;
height: 40px;
position: fixed;
left: 0;
right: 0;
top: 0;
}
The footer must start at the bottom of the website, be page-wide, and 30px high.
#footer{
background-color: #A5BEF2;
position: fixed;
height: 30px;
padding: 5px;
bottom: 0;
right: 0;
left: 0;
}
Now is the time to set-up menu. Menu is 200px wide, starts just below header (and white space) – 52px from top and reaches footer (and white space) -42px from bottom.
#menu{
background-color: #B9DDF9;
margin: 0;
width: 200px;
padding: 5px;
border: 0;
position: fixed;
top: 52px;
left: 0;
bottom: 42px;
}
At the end we need to shift content element to the left side of menu. It is also stretched between header and footer. The full width-size of menu is 210px and because I wish to achieve a white space between them the content element will start at 212 pixel.
#content{
background-color: #E2F0FD;
margin: 0;
padding: 5px;
position: fixed;
top: 52px;
left: 212px;
right: 0;
overflow: auto;
}
Voilà!! The main layout is done.
Now we can focus on some more detailed formatting. First of all we can change a font. Because we want to use the same font for the entire page we can define it for the body tag. Now I should explain few words about inheritance. In general every element that find itself inside another one inherits a style from containing element unless it is changed by its own style. If we define a font for body, it will be used for every element, unless an element has its own font defined.
body{
font-family: Verdana;
font-size:10px;
}
Now we will define a big main header title and some sub-header much smaller and shifted to the left site. (Notice that in this case it’s much more suitable to use classes because they may be used for many elements.)
<div id="header"> <div class="header">Page Header</div> <span class="sub_header">Some header details.</span> </div>
.header{
font-size: 25px;
text-decoration: bold;
color: #003666;
}
To achieve the shift effect for the submenu we should use position:relative. It shifts an element relative to its normal position by the values defined in top, left, right and bottom properties.
.sub_header{
text-decoration: bold;
color: #ffffff;
position: relative;
bottom: 7px;
left: 45px;
}
Now we can make a title in the main page a bit more emphasized e.g making spaces between letters.
<div id="content"> <h1>Lorem ipsum</h1> </div>
h1{
font-size: 12px;
letter-spacing: 0.3cm
}
The remaining part is a menu. To create one we can use a list and modify it with CSS.
<div id="menu"> <ul class="menu"> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Fusce vulputate</a></li> <li><a href="#">Donec blandit</a></li> <li><a href="#">Proin nulla</a></li> <li><a href="#">Nam nibh</a></li> </ul></div>
First, we want to remove the bullets:
.menu{
list-style-type: none;
}
Now we can customize the elements of this list:
.menu li {
padding: 2px;
margin: 2px;
}
We wish also to avoid underlining a link, but make it changing color every time a cursor is over it.
.menu li a{
text-decoration: none; color: #003666;
}
.menu li a:hover{
text-decoration: none; color:#ffffff;
}
At this point I should explain the pseudo-classes. These are some "sub" classes of an selector that may add some special effect to an element e.g change a style of an element's child selector:first-child.
One of such pseudo-classes is :hover, that change a style of an element when the cursor is over it. That is very useful to define a link behavior, but you can use it also with other selectors.
One of such pseudo-classes is :hover, that change a style of an element when the cursor is over it. That is very useful to define a link behavior, but you can use it also with other selectors.
Now let’s add some simple formatting to the footer. It looks nice when a text alignment in a footer is on opposite site to a text alignment in a header, so in this case to the right.
.footer{
font-size:10px;
text-decoration: bold;
color:#ffffff;
display:block;
text-align: right;
}
Of course it is difficult to talk about an alignment of an inline element that takes only so much space as it needs for a contained element. To make an effect on text-align modification the element must be a block. Of course it can be achieved using <div> element that is a block by definition, but it is always worth to assure it (adding display:block)when we create a style for a class and we don’t know to what kind of element this class will be applied for.
The template is ready. You can see it here .
Next time I will show how to create a replacement of this layout for IE.
No comments:
Post a Comment