Drop Down Menu

Tuesday, November 12, 2013

Formatting HTML 5 Semantic tags with CSS 3

Last week we got a taste of HTML 5 semantics, this week we will look at how to style them using CSS 3.  Really both html and css will work in tandem even more than they have in the past.  In addition the old html formatting tags are depreciating and will soon be obsolete.  So learning CSS is a must. 


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!

No comments:

Post a Comment