Let’s build this diagramed layout. So you can see how to use
the semantic tags. First we need to look
at the CSS.
header {
background-color:#EFCE16;
width: 100%;
height:90px;
clear:both;
}
|
We are specifying background color and width in percent so the screen
will be adjustable. There is a height
added for the purpose of making it show in this example, but you can make it
a percent or experiment more with that, the last style clears any possibility
of this element to float.
|
nav {
background-color:#918F87;
width: 100%;
height:25px;
clear:both;
}
|
Just like the header we have background color, flexible width, height
for showing the element in this example and we are clearing any floats.
|
section {
background-color:#EFE3A7;
width: 70%;
height:200px;
float:left;
}
|
The section is the main column so in addition to defining a themed
background color and a float we need to make sure the width is smaller to accommodate
a column on the left.
|
aside {
background-color: #1294C1;
width: 30%;
height:200px;
float: right;
}
|
Using aside for the right column means we need the width to add accommodate
the design. That means if section is
70% then aside can’t be larger than 30% or it will drop below its intended
resting spot. Of course since section
floats left aside must float right. Of
course we have a coordinating height and added a background color.
|
article {
background-color:#0B6994;
width: 60%;
position: absolute;
left: 20px;
top:180px;
height:30px;
}
|
Since the article is dropped in absolute positioning was used, with
top and left values defined. This can
be experimented with further to help it drop in just the right place. Like other elements background color,
height and width were added to the style.
|
footer {
background-color:#EFCE16;
width: 100%;
height:50px;
clear:both;
}
|
For this layout footer can be set up like the header.
|
So how could this code look on an actual html page?
<!DOCTYPE html>
<html>
<head><title> test </title>
<style type=”text/css”>
header {
background-color:#EFCE16;
width: 100%;
height:90px;
clear:both;
}
nav {
background-color:#918F87;
width: 100%;
height:25px;
clear:both;
}
section {
background-color:#EFE3A7;
width: 70%;
height:200px;
float:left;
}
article {
background-color:#0B6994;
width: 60%;
position: absolute;
left: 20px;
top:180px;
height:30px;
}
aside {
background-color: #1294C1;
width: 30%;
height:200px;
float: right;
}
footer {
background-color:#EFCE16;
width: 100%;
height:50px;
clear:both;
}
</style>
</head>
<body>
<header> Page header goes here. </header>
<nav> HOME | ABOUT US | CONTACT US </nav>
<section> Page content goes here.</section>
<aside> Right column content goes here. </aside>
<article> Special attention getter goes here.
</article>
<footer>Copyright, legal, text links. </footer>
</body>
</html>
Check out how this code looks in a browser with two
potentially different screen widths:
This is just a small taste of how HTML 5 and CSS 3 can work
together. More exploring and posts
coming soon! If you missed the overview of semantics check out last weeks post!
Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
ReplyDeleteSoftware testing course in chennai
Excellent post gained so much of information, Keep posting like this.
ReplyDeleteAviation Courses in Chennai
Air hostess training in Chennai
Airline Courses in Chennai
airport ground staff training courses in Chennai
Aviation Academy in Chennai
air hostess training in Chennai
airport management courses in Chennai
ground staff training in Chennai