Building upon the past two modules, this week my budding young front-end web developers are faced with the challenging topics of CSS floats and positioning. Pop quiz: Can you make the design seen below using XHTML and CSS only? My students can…
In case you are not sure how to achieve this, here is how:
Basic Structure
First comes the HTML. We of course have to throw in the essential tags (doctype, html, head, meta charset, title and body) followed up by a few div tags to build out our general HTML structure. The result should look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS Only Navigation</title> <link type="text/css" rel="stylesheet" href="normalizer.css" /> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <div id="wrapper"> <div id="header"></div><!-- end header --> <div id="nav"></div><!-- end nav --> <div id="content"></div><!-- end content --> <div id="footer"></div><!-- end footer --> </div> </body> </html>
Once we have that in place we are going to jump over to our CSS (note that in the head section of my HTML document I have included a link to two external CSS stylesheets). We want to build up the basic two dimensional structure and then fill it in with some more goodies. Here is the CSS code that we are thus looking at:
/* DIVS */
#wrapper{
width: 900px;
margin: 0px auto;
position: relative;
border: 2px solid #ccc;
}
#header{
height: 200px;
background-color: #ccc;
}
#nav{
height: 50px;
background-color: #999;
}
#content{
/*min-height: 300px;*/
background-color: #eee;
}
#footer{
height: 50px;
background-color: #ccc;
}
Working With Floats
Now that we have the basics in pace, lets kick things to the next level by adding our navigation and two columns. The modified code will now look like this:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS Only Navigation</title> <link type="text/css" rel="stylesheet" href="normalizer.css" /> <link type="text/css" rel="stylesheet" href="review.css" /> </head> <body> <div id="wrapper"> <div id="header"></div><!-- end header --> <div id="nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> <div class="clear"></div> </div><!-- end nav --> <div id="content"> <div id="colOne"></div> <div id="colTwo"></div> <div class="clear"></div> </div><!-- end content --> <div id="footer"></div><!-- end footer --> </div> </body> </html>
CSS
/* DIVS */
#wrapper{
width: 900px;
margin: 0px auto;
position: relative;
border: 2px solid #ccc;
}
#header{
height: 200px;
background-color: #ccc;
}
#nav{
/*height: 50px;*/
background-color: #999;
}
#nav ul{
width: auto;
float: right;
}
#nav ul li{
width: auto;
float: left;
position: relative;
border-left: 1px solid #777;
}
#nav ul li a{
display: block;
padding: 10px 25px;
}
#content{
/*min-height: 300px;*/
background-color: #eee;
}
#colOne{
width: 600px;
min-height: 300px;
float: left;
background-color: pink;
}
#colTwo{
width: 300px;
min-height: 300px;
float: right;
background-color: purple;
}
#footer{
height: 50px;
background-color: #ccc;
}
/* GENERAL CLASSES */
.clear{clear: both;}
It is worth taking note that whenever we want to have block-level elements line up next to each other we should be using the “float†CSS property to do so.
Positioning Work: The Drop downs…
The final component is adding in our dropdown menu(s). This technique will demonstrate our understanding of CSS positioning. What is the frist thing that we should do when tackling CSS only dropdown navigation (hint: what will our absolutely positioned elements position relative to?)? Here is what the code should develop into:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Review</title> <link type="text/css" rel="stylesheet" href="normalizer.css" /> <link type="text/css" rel="stylesheet" href="review.css" /> </head> <body> <div id="wrapper"> <div id="header"></div><!-- end header --> <div id="nav"> <ul> <li><a href="#">Link 1</a> <ul> <li><a href="#">SubLink 1</a></li> <li><a href="#">SubLink 2</a></li> <li><a href="#">SubLink 3</a></li> <li><a href="#">SubLink 4</a></li> </ul> </li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> <div class="clear"></div> </div><!-- end nav --> <div id="content"> <div id="colOne"></div> <div id="colTwo"></div> <div class="clear"></div> </div><!-- end content --> <div id="footer"></div><!-- end footer --> </div> </body> </html>
CSS
/* DIVS */
#wrapper{
width: 900px;
margin: 0px auto;
position: relative;
border: 2px solid #ccc;
}
#header{
height: 200px;
background-color: #ccc;
}
#nav{
/*height: 50px;*/
background-color: #999;
}
#nav ul{
width: auto;
float: right;
}
#nav ul li{
width: auto;
float: left;
position: relative;
border-left: 1px solid #777;
}
#nav ul li a{
display: block;
padding: 10px 25px;
}
#nav ul li ul{
width: 200px;
position: absolute;
background-color: #ccc;
}
#nav ul li ul li{
float: none;
}
#nav ul li ul li a{
text-transform: uppercase;
}
#content{
/*min-height: 300px;*/
background-color: #eee;
}
#colOne{
width: 600px;
min-height: 300px;
float: left;
background-color: pink;
}
#colTwo{
width: 300px;
min-height: 300px;
float: right;
background-color: purple;
}
#footer{
height: 50px;
background-color: #ccc;
}
/* GENERAL CLASSES */
.clear{clear: both;}
Pseudo Classes!
The final tweak is to add the interactivity with the “:hover†pseudo class. Thus the final code looks like this:
CSS
/* DIVS */
#wrapper{
width: 900px;
margin: 0px auto;
position: relative;
border: 2px solid #ccc;
}
#header{
height: 200px;
background-color: #ccc;
}
#nav{
/*height: 50px;*/
background-color: #999;
}
#nav ul{
width: auto;
float: right;
}
#nav ul li{
width: auto;
float: left;
position: relative;
border-left: 1px solid #777;
}
#nav ul li a{
display: block;
padding: 10px 25px;
}
#nav ul li ul{
display: none;
width: 200px;
position: absolute;
background-color: #ccc;
}
#nav ul li ul li{
float: none;
}
#nav ul li ul li a{
text-transform: uppercase;
}
#nav ul li:hover ul{
display: block;
}
#content{
/*min-height: 300px;*/
background-color: #eee;
}
#colOne{
width: 600px;
min-height: 300px;
float: left;
background-color: pink;
}
#colTwo{
width: 300px;
min-height: 300px;
float: right;
background-color: purple;
}
#footer{
height: 50px;
background-color: #ccc;
}
/* GENERAL CLASSES */
.clear{clear: both;}
…Just another week at CDIA. Stay tuned for more :-)
Splist for jQuery: I am very excited to announce my jQuery plug-in -