Example for TheMakerHs

A website design based on one created by TheMakerHs however includes a working dropdown menu that he requested. Please ignore the header image, this image is found from 'http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/inspire/2012/08/_headers/IssueHeader_960x220.jpg' and is used here for example purposes only.

by Matthew Dewhurst

HTML

<div id="wrapper">

    <div id="header">
        <img src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/inspire/2012/08/_headers/IssueHeader_960x220.jpg" />
    </div>
    
    <div id="nav">
        <ul>
            <li><a href="#">Hjem</a></li><li>
            <a href="#">NXT</a></li><li>
            <a href="#">Website</a></li><li>
            <a href="#">Kontakt</a>
                <ul>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Google+</a></li>
                </ul>
            </li><li>
            <a href="#">Dokumentation</a>
                <ul>
                    <li><a href="#">Arbejdsprocessen</a></li>
                    <li><a href="#">Menusystem</a></li>
                    <li><a href="#">Gestaltlove</a></li>
                    <li><a href="#">Usability og KISS</a></li>
                    <li><a href="#">Farver</a></li>                 
                    <li><a href="#">Typografi</a></li>
                    <li><a href="#">Brugerdynamiske muligheder</a></li>
                    <li><a href="#">Tre-lagsarkitektur</a></li>
                    <li><a href="#">CSS-styring</a></li>
                </ul>
            </li><li>
            <a href="#">Billedmanipulation</a></li>
        </ul>
    </div>
    <div id="content-container">
        
        <div id="content-left">
            <p>Dette er en hjemmeside af Asger, Iman og Maria fra Espergærde Gymnasium og HF.</p>
            <p>Vi har lavet denne hjemme side for at informere om informationsteknologi som et fag. I vil her kunne følge med i de projekter vi laver. Der vil være tekster og illustrationer, der forklarer om disse projekter.</p>
            <p>Vores formål er at vise kommende elever, hvor fedt faget er. Vi håber selvfølgelig at denne hjemmeside vil få flere til at vælge informationsteknologi som fag på gymnasiet.</p>
            <p>Hvis i går ind under ”kontakt”,...

CSS

body{ overflow-y: scroll; padding: 0; margin: 0; font-family: Arial; font-size: 16px; color: #555; background-color: #E5E5E5; }

#wrapper{ width: 960px; margin: 0 auto; text-align: left; }

#header{ margin: 0; padding: 0; }
#header img{ width: 100%; }

#nav{ background-color: #222; }
#nav ul{ list-style-type: none; padding: 0; margin: 0; }
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a,visited{ display: block; padding: 15px; color: #FFF; text-decoration: none; }

#nav ul li:hover ul{ display: block; }
#nav ul ul{ display: none; position: absolute; background-color: #333; min-width: 200px; }
#nav ul ul li{ display: block; }

#content-container{ background-color: #FFF; overflow: hidden; clear: both; }
#content-left{ width: 440px; float: left; padding: 20px 0 20px 20px; }
#content-right{ width: 440px; float: right; padding: 20px; }
#content{ padding: 15px; }

#footer{ margin: 30px 0 30px 0; font-size: 14px; text-align: center; }