Downloads, Tipps und Hilfen

Schaltpläne Elektrofahrräder

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 Menü-Widgets aus Adobe Exchange oder einer Vielzahl anderer JavaScript- oder CSS-Lösungen.

Wenn sich die Navigationsstruktur am oberen Rand befinden soll, verschieben Sie ul.nav an den oberen Rand der Seite und erstellen Sie die Formatierung neu.

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 fließenden Layouts zu erhalten. Sie können diese Kommentare vor dem Veröffentlichen Ihrer Site löschen. Weitere Informationen zu den in diesen CSS-Layouts verwendeten Methoden finden Sie in diesem Artikel im Adobe Developer Center - http://www.adobe.com/go/adc_css_layouts.

Clearing-Methode

Da alle Spalten fließend gestaltet sind, wird bei diesem Layout die Deklaration overflow:hidden für .container verwendet. Diese Clearing-Methode bewirkt, dass .container das Ende der Spalten erkennt, damit alle in .container platzierten Rahmen oder Hintergrundfarben angezeigt werden. Ein großes Element, das über .container hinausragt, wird abgeschnitten angezeigt. Sie können darüber hinaus keine negativen Ränder oder absoluten Positionen mit negativen Werten verwenden, um Elemente aus .container zu ziehen, da diese auch in diesem Fall nicht außerhalb von .container angezeigt werden.

Wenn Sie diese Eigenschaften unbedingt verwenden möchten, müssen Sie auf eine andere Clearing-Methode zurückgreifen. Am zuverlässigsten ist das Hinzufügen eines
- oder

-Tags nach der letzten fließenden Spalte (jedoch vor dem Ende von .container). Dadurch wird der gleiche Clearing-Effekt erzielt.

Fußzeile

Durch Hinzufügen einer Fußzeile nach den Spalten, jedoch immer noch innerhalb von .container, schlägt die Clearing-Methode mit der Anweisung overflow:hidden fehl. Sie können einen .footer in einem zweiten .container außerhalb des ersten platzieren, ohne dass dies negative Auswirkungen hat. Am einfachsten ist es unter Umständen, ein Layout mit Kopf- und Fußzeilen zu erstellen und die Kopfzeile zu entfernen, um die Clearing-Methoden in diesem Layouttyp zu verwenden.

Bedingte Kommentare für Internet Explorer

Diese flexiblen Layouts enthalten einen bedingten Kommentar für Internet Explorer zum Beheben von zwei Problemen.

In den verschiedenen Browsern werden die Größenangaben der div-Tags in den auf Prozentwerten basierenden Layouts unterschiedlich gerundet. Bei der Darstellung eines Werts wie 144,5 Pixel oder 564,5 Pixel in einem Browser muss dieser Wert auf die nächste Ganzzahl gerundet werden. Safari und Opera runden den Wert ab, Internet Explorer rundet auf und Firefox rundet um eine Spalte auf und um eine Spalte ab und füllt den Container vollständig auf. Dies kann zu Uneinheitlichkeiten in einigen Layouts führen. In diesem bedingten Kommentar für Internet Explorer ist ein negativer Rand mit 1 Pixel festgelegt, um das Problem in IE zu beheben. Sie können diesen Rand in jeder Spalte (rechts oder links) einfügen, um das Layout entsprechend anzupassen.
Dem Anker wurde innerhalb der Navigationsliste die zoom-Eigenschaft hinzugefügt, da in IE6 und IE7 in einigen Fällen zusätzlicher Leerraum dargestellt wird. Mit der zoom-Eigenschaft erhält IE die proprietäre Eigenschaft hasLayout zum Beheben dieses Problems.

Anleitungen

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).