12. Tag HTML 24.10.2014

HTML/CSS
Ralf Herbst


Website bauen:


Vorgehensweise:
bauen der div-Container im index.html body-Bereich:
sowie setzen des Links zur eMail-Adresse 
<a href="mailto:info@autohaus-luigi.de">E-Mail</a>
und im Footer Link zur eigenen Website setzen:
<div id="footer">
        © Autohaus Luigi site by <a href="http://www.birgit-murmann.de" target="_blank">Birgit Murmann</a>
</div>
sowie Logo und Texte in die Sitebar einsetzen:
<div ID="sidebar">
      <img src="bilder/logo.gif" alt="Logo" border="0" width="85" height="95">
 </div>
bei Avator noch das Hintergrundbild einbauen im Head-Bereich: 
 <style type="text/css">
         body {
         background-image: url(bilder/bg_body.jpg);
         background-repeat: no-repeat;
         background-position: center 0px;
         background-attachement: fixed;
         background-color:#000;
         }
      </style>
dann die main.css im Ordner css:
body { font-family: Verdana; font-size: 80%; color: farbe; background-color: farbe; }
* { margin: 0; padding: 0; }
h1, h2, h3 usw { font-weight: normal;}
a { color: farbe; text-decoration: none; }
a:hover { text-decoration: underline; }
#container { background-color: farbe, width: 1000px; min-height: 550px; margin: 0 auto; border: solid 1px farbe; border-top: none; }
#header { heigt: 150px; background-image: url(..bilder/banner.jpg); background-repeat: no-repeat; background-position: 0px 0px; }
#navigation { height: 25px; background-color: farbe; }
#sidebar { font-size: %; width: 200px; padding: 15px 20px; float: right; background-color: farbe; }
#sidebar h3 { font-size: 110%; margin: 10px 0; border-bottom: solid 1px Farbe; }
#sidebar p { line-height: 140%; margin-bottom: 20px; }
#maincontent { min-height: 350px; padding: 10px 250px 10px 20px; margin-bottom: 40px;  }
#maincontent h1 { font-size: 170%; border-bottom: solid 1px Farbe; line-height: 90%; padding-bottom: 2px; margin: 5px 0 10 px 0; }
#maincontent p { line-height: 140%; margin-bottom: 10px; }
#footer { padding: 10px 20px; clear: both; } = floating von sidebar und später navi aufheben!
#footer a { color: Farbe;}

 und die Inhalte einfügen


alles abarbeiten von oben nach unten!
zum Betrachten der einzelnen Bereiche/Container etc. mit Farbe (background-color) einfärben!





EMPFEHLUNGEN:

CSS-Boxmodell