Lorem | Ipsum | Dolar | Amit | Consetetur | Sadipscing
Lorem
Ipsum
Dolar
Sic Amet
Consetetur
Lorem
Ipsum
Dolar

Die oben stehenden Hyperlinks stellen eine allgemeine Navigationsstruktur dar, bei der eine ungeordnete Liste mit CSS formatiert wird. Verwenden Sie diese Navigationsstruktur als Ausgangspunkt und ändern Sie die Eigenschaften, um Ihre Website nach Ihren Vorstellungen zu gestalten. Wenn Sie Ausklappmenüs verwenden möchten, erstellen Sie ein eigenes Menü auf Grundlage eines Spry-Menüs, eines

Anweisungen

Beachten Sie, dass der CSS-Code für diese Layouts mit vielen Kommentaren versehen ist. Wenn Sie vor allem in der Entwurfsansicht arbeiten, werfen Sie einen Blick auf den Code, um Tipps zum Verwenden von CSS für die festen Layouts zu erhalten. Sie können diese Kommentare vor dem Veröffentlichen Ihrer Site löschen. Weitere Informationen zu den in

Clearing-Methode

Da alle Spalten fließend sind, wird bei diesem Layout die Deklaration clear:both in der Regel .footer verwendet. Diese Clearing-Methode bewirkt, dass .container das Ende der Spalten erkennt, damit alle in .container platzierten Rahmen oder Hintergrundfarben angezeigt werden. Wenn Sie in Ihrem Entwurf die Regel .footer aus .container entfernen müssen, ist eine andere Clearing-Methode erforderlich. Am zuverlässigsten ist das Hinzufügen eines <br class="clearfloat" />- oder <div class="clearfloat"></div>-Tags nach der letzten fließenden Spalte (jedoch vor dem Ende von .container). Dadurch wird der gleiche Clearing-Effekt erzielt.

Ersetzen des Logos

 

Ersetzen des Logos

In diesem Layout wurde ein Bild-Platzhalter im .header verwendet, wo in der Regel ein Logo platziert wird. Es empfiehlt sich, dass Sie den Platzhalter entfernen und durch Ihr eigenes, als Hyperlink eingebundenes Logo ersetzen.

Wenn Sie mithilfe des Eigenschafteninspektors im Feld "Quelle" zum Bild Ihres Logos navigieren (anstelle den Platzhalter zu entfernen und zu ersetzen), müssen Sie die Inline-Stile für Hintergrund und Anzeige entfernen. Diese Inline-Stile werden lediglich zum Anzeigen des Bild-Platzhalters in Browsern zu Demonstrationszwecken verwendet.

 

Hintergründe

Die Hintergrundfarbe für jedes div-Tag wird grundsätzlich nur für die Länge des Inhalts angezeigt. Wenn Sie statt einer Hintergrundfarbe eine Trennlinie verwenden möchten, fügen Sie an der Seite des div-Tags .content einen Rahmen hinzu (jedoch nur, wenn das Tag stets mehr Inhalt enthält).

Lorem
Ipsum
Dolar
Sic Amet
Consetetur
Sadipscing