HTML/CSS
Ralf Herbst
Website bauen:
Im HTML-Editor die weiteren Unterseiten im Ordner Seiten anlegen:
- gebrauchtwagen.html
dazu die angebote.html kopieren und im Ordner Seiten als gebrauchtwagen.html einfügen
die Pfade und Namen in der gebrauchtwagen.html abändern:
<div id="navigation">
<ul> <li><a href="../index.html">Home</a></li>
<li><a href="angebote.html">Angebote</a></li>
<li class="selected"><a href="#nogo">Gebrauchtwagen</a></li>
anlegen der div-container im Maincontent:
<div id="maincontent"> <!--Begin Maincontent-->
<h1>Gebrauchtwagen</h1>
<div class="gebrauchtwagen"> <!--Begin Gebrauchtwagen 1-->
<div class="bildPreis">
<img src="../bilder/cars/lambo02.jpg" alt="" border="0" width="210" height="158">
<p class="gebrauchtwagenPreis">Preis: 180.100€</p> </div>
<div class="text">
<h2>Fahrzeugtyp</h2>
<p>TEXT</p>
</div> <!--End of Gebrauchtwagen 1--> = wiederholen so oft wie benötigt
</div></div> <!--End of Maincontent-->
dazu in der Datei announcen.css die Attribute für die Unterseite Gebrauchtwagen anlegen:
.angebote, .gebrauchtwagen { border-bottom: solid 1px farbe; }
kennzeichnung ag jetzt: /*------------------------Gebrauchtwagen----------------------------*/
.gebrauchtwagen { margin-bottom: 10px; }
.gebrauchtwagen h2 { font-size: 120%; color: farbe; margin-bottom: 10px; }
.gebrauchtwagen img { border: solid 1px farbe; }
.gebrauchtwagen .bildPreis { float: right; width: 210px; padding: 4px 2px 0 0; }
.gebrauchtwagen .text { min-heigth: 200px; padding: 0 230px 10px 0; text-align: justify;}
.gebrauchtwagenPreis { color: farbe; padding-top: 7px;}
Wichtig in der main.css-Datei im body-bereich einfügen:
body { overflow-y: scroll; overflow-x: auto; }
= erstellt leere Scrollbar bei kurzen Seiten (Home) und verhindert das Wackeln
- galerie.html
mit Unterstützung von Lightbox
die Dateien in unseren _work-Ordner entpacken, die lightbox.css im Ordner css kopieren sowie die Bilder close.png, loading.gif, next.png, prev.png im Ordner bilder kopieren, den Ordner js kopieren ins Projekt Autohaus Luigi,
auf der galerie.html die Pfade im head-bereich einfügen:
<link rel="stylesheet" href="../css/main.css" type="text/css">
<link rel="stylesheet" href="../css/lightbox.css" type="text/css">
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/lightbox.min.js"></script>
= die script kopieren und einfügen aus website lightbox, abändern css/main.css in ../css/main
in der Navigation den Pfad abändern:
<div id="navigation">
<ul> <li><a href="../index.html">Home</a></li>
<li><a href="angebote.html">Angebote</a></li>
<li><a href="gebrauchtwagen.html">Gebrauchtwagen</a></li>
<li><a href="hit.html">Hit des Monats</a></li>
<li class="selected"><a href="#nogo">Galerie</a></li>
<h1>Galerie</h1>
anlegen der div-container im Maincontent mit festlegung der Anordnung (abstand_rechts_unten etc.):
<div id="maincontent"> <!--Begin Maincontent-->
<h1>Galerie</h1>
<div id="gallery"> <!--Begin Galerie 1-->
<a href="../bilder/galerie/lambo01.jpg" data-lightbox="roadtrip">
<img src="../bilder/galerie/thumbs/lambo01t.jpg" alt="" border="0" width="210" height="158" class="abstand_rechts_unten"></a> <!--End of Galerie 1--> = so oft wiederholen wie nötig
</div> </div> <!--End of Maincontent-->
in der lightbox.min.js-Datei abändern (ca. 3. Zeile) von {return"image"+a+"von "+b"} auf
{return"Bild "+a+" von "+b} =deutsche Verwendung
in der lightbox.css-Datei durch suchen + ersetzen: ../img in ../bilder und Attributa anlegen:
#gallery { width: 750px; }
#gallery a img { border: solid 5px #FFF; border-bottom-width: 30px; border-radius: 5px }
#gallery a img:hover { border-color: #666; }
.abstand_rechts_unten { margin: 0 30px 30px 0; }
.abstand_unten { margin: 0 0 30px 0; }
Keine Kommentare:
Kommentar veröffentlichen