Mobile Webseite: Navigation per CSS verschieben

[sartorial]

Hallo zusammen

Ich bin gerade dabei eine persönliche Webseite für mobile Geräte zu optimieren. Was ich möchte ist, dass nur eine HTML-Datei, dafür 2 CSS-Dateien benutzt werden. Die Erkennung und Anpassung funktioniert soweit gut.

Leider habe ich vor die Navigation auf dem Desktop neben dem Webseiten-Logo anzuzeigen. Beim Smartphone/Tablet sollte sie aber vor dem Footer sein.

Meine Frage: Muss ich den Code für die Navigation 2x schreiben und jeweils eine Nav per CSS ausblenden? Ich würde aber gerne die Navigation nur im Header-Div haben, damit keine Code-Repetitionen vorliegen. Geht das mit CSS? Wenn nicht, was wäre die eleganteste Art?

Danke für eure Hilfe.

Meine Struktur:

<div id="header">
* * <h1>Titel</h1>
* * <ul>
* * * * <li>Link</li>
* * * * <li>Link</li>
* * </ul>
</div>

<div id="content"></div>

<div id="sidebar"></div>

<div id="footer"></div>

 

[SpiceLab]

Grundsätzlich / theoretisch bietet CSS mit der absoluten Positionierung (position:absolute) die Möglichkeit, die Navigation aus ihrem normalen Dokument-/Textfluß (hier: aus dem Headerbereich) herauszunehmen, und im Dokument an anderer Stelle anzuzeigen.

Ob es in deinem Fall tatsächlich mit CSS alleine praktisch realisierbar ist, vermag ich ohne Detailwissen nicht zu beurteilen.

Die Vorgabe ist hier, dass der zu deklarierende Wert für top oder bottom aus der Höhe der jeweiligen Seitenbereiche bekannt, rechnerisch nachvollziehbar ist.

Ist der Inhaltsbereich variabel, und die komplette Seite wird gescrollt, bis der Footerbereich ins Browserfenster rückt, wäre hier zusätzlich JavaScript gefragt, um die Höhe von #content zu ermitteln, die in der Addition mit der Headerhöhe den top-Wert repräsentiert.

Ist der Footer am unteren Browserfensterrand positioniert (siehe Webmaster FAQ -> CSS Wie lässt sich der Footer am unteren Fensterrand ausrichten? -Methode 3 mit position:absolute-), kann bottom als Referenz genutzt werden - unter denselben genannten Bedingungen.