HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="sv"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>MIN WEBBSIDA</title> <meta name="author" content="Namn"> <meta name="description" content="Beskrivning."> <meta name="keywords" content="nyckelord, en fras, nyckelord"> <link rel="stylesheet" href="stilmall.css" type="text/css"> </head> <body> <div id="layout"> <div id="main"> <h1>Huvudrubrik </h1> <h2>Rubrik h2 </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h3>Rubrik h3 </h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h4>Rubrik h4 </h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h5>Rubrik h5 </h5> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Här är en lista:</p> <ul> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> <li>Punkt 4</li> <li>Punkt 5</li> </ul> <p>Här är en avdelare:</p> <hr> <p>Här är en länk: <a href="#layout" title="Länk till bra hemsideguide">NinetNet - Hemsideguide & HTML-skola</a></p> </div> <!-- / main --> <div id="side"> <ul id="meny"> <li>» <a href="sida1.html" title="Beskrivning av länken">Sida 1</a></li> <li>» <a href="sida2.html" title="Beskrivning av länken">Sida 2</a></li> <li>» <a href="sida3.html" title="Beskrivning av länken">Sida 3</a></li> <li>» <a href="sida4.html" title="Beskrivning av länken">Sida 4</a></li> <li>» <a href="sida5.html" title="Beskrivning av länken">Sida 5</a></li> </ul> </div> <!-- / side --> <br class="clear"> </div> <!-- / layout --> </body> </html> |
CSS:
/* grunder */
body {
padding: 0; margin: 0;
margin-top: 30px; margin-bottom: 30px;
font-size: 76%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
background-image: url(bg.gif);
background-repeat: repeat;
}
/* rubriker */
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", serif;
color: #000000;
}
/* text */
p {
line-height: 140%;
}
/* länkar */
a {
color: #333333;
}
a:visited, a:hover {
color: #535050;
}
/* avdelare */
hr { border: thin solid #000000; }
/* layout */
#layout {
width: 90%;
margin: 0 auto; /* centrerar innehållet */
padding: 20px;
background-color: #FFFFFF;
border: 2px solid #000000;
}
#side {
width: 22%;
float: left;
padding-top: 4em;
}
#main {
width: 75%;
float: right;
}
.clear { clear: both; }
/* meny */
#meny {
list-style-type: none;
line-height: 1.5em;
padding: 0; margin: 0;
}
#meny a {
color: #000000;
font-weight: bold;
text-decoration: none;
}
#meny a:hover {
text-decoration: underline;
}
|