tutorial1

Simple HTML/CSS page: header menu, sidebar and footer

Posted on
 

This tutorial is dedicated for CSS beginners.

We are going to create a CSS file called mystyle.css to design the following simple and pure HTML file in order to enhance the visibility and make it look user-friendly. We will not edit the HTML file which by default import the CSS file called mystyle.css

Capture d’écran 2015-10-18 à 4.48.46 PM

The source code for the HTML file can be found below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>Designing CSS for a fixed HTML file -  Achraf Ammar</title>
  <style type="text/css" media="all">
    @import "mystyle.css";
  </style>
</head>


<body>

<div id="main_container">
  <div id="header">
    <h1>Lorem ipsum: Sed ut perspiciatis</h1>
    <h2>Neque porro quisquam</h2>
  </div>
  <div id="nav_main">
    <ul>
      <li><a href="#"><i>Lorem</i></a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Neque</a></li>
      <li><a href="#">Porro</a></li>
    </ul>
  </div>
  <div id="nav_sub">
    <ul>
      <li><a href="http://www.achrafammar.com"><i>Perspiciatis</i></a></li>
      <li><a href="http://www.achrafammar.com">Reprehenderit</a></li>
      <li><a href="http://www.achrafammar.com">Consectetur</a></li>
      <li><a href="http://www.achrafammar.com">Dolores</a></li>
      <li><a href="http://www.achrafammar.com">Veniam</a></li>
      <li><a href="http://www.achrafammar.com">Cirure</a></li>
      <li><a href="http://www.achrafammar.com">Duis</a></li>
      </ul>
  </div>
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
    sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam 
    est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius 
    modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, 
    quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
    Quis autem vel eum iure reprehenderit qui in ea voluptate 
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>	
    <a href="http://www.achrafammar.com">Quis autem vel eum iure reprehenderit</a>	
  </div>

  <div id="footer">
    <h3>Ut enim ad minima veniam, 
    quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</h3>
  </div>

</div>

</body>
</html>

Step 1: We will start by designing the body which is the main layout of the web page. We will style the text font and set margins to 0 to eliminate spaces on right side, left side, top and bottom.

body { font:75% verdana, sans-serif; margin: 0px 0px 0px 0px;}

Step 2:  To assign a style to a div with a given id, all we need to do is to create an id selector named #id (The id should always be unique within a page). In our case, the id is called header so we are using #header in CSS. Below we are defining the header’s background color, text color, text alignment and setting margins.

#header {background-color: #325A75; color: #fff; text-align: center; margin: -16px 0px 0px 0px; padding: 10px}
#header h2{ color: #66C2FF; }

Step 3: At this stage we want to style the main menu in a horizontal way. So the div element containing the main menu has an id called nav_main and as I mentioned before we will use an id selector called #nav_main. Now the tricky thing here is the fact of using a list as a menu, we all know that lists are represented vertically so how can we make them horizontal. The key point here is the  float property. Click here to learn more about float.
This property will be applied to li elements to make them all float on the right of page inside their container which is the nav_main div. The padding property is applied as well to make space between elements as by default float will put all elements on each other.

#nav_main li {float: right; margin-top: 6px; padding-right: 40px; text-decoration: none; list-style-type: none; font-weight: bold; font-size: 14px; }
#nav_main a:link, a:visited, a:hover, a:active{text-decoration: none; color: white}
#nav_main a:hover {color: #58A6DA;}
#nav_main ul  {background-color: #2A7DB5; height: 30px; margin-top: 0px !important;}

Step 4: As we have two different menus in our page, it would be better to put them in different places. The sub-menu can be represented as a sidebar using the magic magical property float.

#nav_sub {padding: 70px 20px 0px 15px; text-align: center;}
#nav_sub ul {float: left;}
#nav_sub li {margin-bottom: -1px; text-decoration: none; list-style-type: none; padding: 15px 35px; background-color: rgb(50, 90, 117); border: solid 1px #fff;}
#nav_sub  a:link, a:visited, a:hover, a:active{text-decoration: none; color: white; font-weight: bold;}
#nav_sub  a:hover {color: white;}
#nav_sub  li:hover {background-color:#2A7DB5;}

Step 5: For the content is up to you how you want to design it, the following code is so basic but the remarkable property here is padding-bottom which is used to avoid an overflow problem between the content and the footer.

#content {margin-left: 300px; margin-right:100px; text-align: justify; padding: 20px;  padding-bottom: 80px; border: solid 1px #000; margin-top:12px}
#content a:hover {color: red;}

Step 6: The final step is making the footer stick to the bottom of the window no matter the height is. To make it happen, we will use a new magical property called position which allows us to give fixed position to elements basing on given distances from the window’s 4 sides. For example, if you want to place an element right in the middle of the screen you say that the distance is always 49% from each side (distance is always based on the element’s dimensions).

#footer {position: fixed; bottom: 0; left: 0;  right: 0; height: 50px; text-align: center;  background-color: #2A7DB5;}
#footer h3 {color: white; font-size:12px}

Now this is how the final mystyle.css file will look like.

body { font:75% verdana, sans-serif; margin: 0px 0px 0px 0px;}


#header {background-color: #325A75; color: #fff; text-align: center; margin: -16px 0px 0px 0px; padding: 10px}
#header h2{ color: #66C2FF; }

#nav_main li {float: right; margin-top: 6px; padding-right: 40px; text-decoration: none; list-style-type: none; font-weight: bold; font-size: 14px; }
#nav_main a:link, a:visited, a:hover, a:active{text-decoration: none; color: white}
#nav_main a:hover {color: #58A6DA;}
#nav_main ul  {background-color: #2A7DB5; height: 30px; margin-top: 0px !important;}

#nav_sub {padding: 70px 20px 0px 15px; text-align: center;}
#nav_sub ul {float: left;}
#nav_sub li {margin-bottom: -1px; text-decoration: none; list-style-type: none; padding: 15px 35px; background-color: rgb(50, 90, 117); border: solid 1px #fff;}
#nav_sub  a:link, a:visited, a:hover, a:active{text-decoration: none; color: white; font-weight: bold;}
#nav_sub  a:hover {color: white;}
#nav_sub  li:hover {background-color:#2A7DB5;}

#content {margin-left: 300px; margin-right:100px; text-align: justify; padding: 20px;  padding-bottom: 80px; border: solid 1px #000; margin-top:12px}
#content a:hover {color: red;}

#footer {position: fixed; bottom: 0; left: 0;  right: 0; height: 50px; text-align: center;  background-color: #2A7DB5;}
#footer h3 {color: white; font-size:12px}

And this is how the final design will look like:

Capture d’écran 2015-10-18 à 4.45.50 PM