13. Tag HTML 27.10.2014

HTML/CSS
Ralf Herbst


Website bauen:

Im HTML-Editor in der index.html bauen der Navigation im Bodybereich:
<div id="navigation"> <!--Begin Navigation-->
                   <ul>
                        <li class="selected"><a href="#nogo">Home</a></li>
                        <li><a href="seiten/angebote.html">Angebote</a></li>
                        <li><a href="seiten/gebrauchtwagen.html">Gebrauchtwagen</a></li>
                        <li><a href="seiten/hit.html">Hit des Monats</a></li>
                        <li><a href="seiten/galerie.html">Galerie</a></li>
                        <li><a href="seiten/service.html">Service</a></li>
                        <li><a href="seiten/anfahrt.html">Anfahrt</a></li>
                        <li><a href="seiten/kontakt.html">Kontakt</a></li>
                        <li><a href="seiten/impressum.html">Impressum</a></li>
                        <li><a href="seiten/agb.html">AGB</a></li>
                   </ul>
              </div> <!--End of Navigation-->

und in der main-css-Datei die Attribute dazu einbauen:
alle Bild-Pfade abändern in  url (../bilder /name.jpg);
#navigation { height: 25px; background-color: #333; padding-left: 10px; background-image: url(../bilder/bg_navi.jpg); background-repeat: repeat-x; background-position: 0px 0px; }

#navigation ul { list-style-type: none; }
#navigation ul li { line-height: 24px; }
#navigation ul li a { color: farbe; padding: 0 15px; float: left; }
#navigation ul li a:hover { text-decoration: none; background-image: url(../bilder/bg_navi.jpg);
    background-position: 0px -25px; }
#navigation ul li.selected a { color: farbe; background-image: url(../bilder/bg_navi.jpg); background-position: 0px -25px;} =der ausgewählten Klassen-Link die Attribute geben

bauen der Unterseiten:
- Unterseite: "Angebote" in Verbindung mit der "annoncen.css" im Ordner css
dazu die Datei index.html speichern unter Ordner seiten mit Dateinamen: angebote.html
abändern der Pfade: ../ dh. vor alle Pfade setzen sowie
<link rel="stylesheet" href="../css/annoncen.css" type="text/ anlegen = externe Datei für die Gestaltung
abändern:
<div id="navigation"> <!--Begin Navigation-->
 <ul>  <li><a href="../index.html">Home</a></li>
           <li class="selected"><a href="#nogo">Angebote</a></li>
           usw.
 <div id="maincontent"> <!--Begin Maincontent-->
           <h1>Angebote</h1>
          <div class="angebote"> <!--Begin Angebote 1-->
          <h2>Garallda</h2>
          <img src="../bilder/cars/lambo01.jpg" alt="Lambo1" border="0" width="210" height="158">
          <p class="angeboteText">TEXT.</p>
          <p>&nbsp;</p>
          <p class="angebotePreis">Preis: 222.000€</p>
         </div> <!--End of Angebote 1-->
dies entsprechend oft wiederholen!

dazu im css-Ordner - neues Dokument - speichern unter  - Dateiname "annoncen" - Erweiterung ".css" und beachten Ordner css - übernehmen
@charset "utf-8";
.angebote {  border-bottom: solid 1px farbe; }
.angebote h2 { font-size: 120%; color: farbe; margin: 8px 0 5px 0; }
.angebote img { float: left; margin: 5px 10px 0 0; border: solid 1px farbe; }
.angeboteText { text-align: justify; padding-bottom: 30px; }
.angebotePreis { color: farbe; }