|
|||
Responsive Layout: Doppelten Quelltext vermeiden
Hallo Forum Gemeinde,
ich bin eigentlich sehr gut was HTML und CSS angeht, habe mich allerdings bislang noch nicht mit Responsive Layouts beschäftigt. Momentan möchte ich eine meiner Seiten aktualisieren, und diese für 3 Auflösungen aufbereiten, dabei habe ich mir eine Veränderung für den Header wie auf der Skizze zu erkennen vorgestellt. Leider bin ich auf keine Lösung gekommen, wie ich das sauber und ohne doppelten Quelltext realisiere. Hat jemand da eine Idee? Normal würde der Quelltext bei mir so aussehen: <div id="header" class="clearfix"> <div id="logo"></div> <div id="access" class="clearfix"> <div id="navigation"></div> <div id="search"></div> </div> </div> Und das dazugehörige CSS #header { width: 900px; } #logo { width: 300px; float: left; } #access { width: 600px; float: right; } #navigation { width: 300px; float: left; } #search { width: 300px; float: right; } .clearfix:after { clear: both; } |
Sponsored Links |
|
|||
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Zitat:
Du brauchst nichts doppelt schreiben, sondern fragst mit Media Queries z.B. die Fensterbreite ab bzw. weisst entsprechend das jeweilige CSS zu. Hier ein sehr gutes Tutorial dazu: Create a Responsive Web Design with Media Queries Schöne Grüße aus Berlin Heiko |
|
|||
Danke für eure Antworten - leider hat das meine Frage noch nicht geklärt.
Was Media Queries sind und wie damit ein Responsive Layout realisiert wird, weiß ich. Was ich allerdings suche, ist eine Technik wie ich, wie auf dem Bild von mir dargestellt, einmal die Suche Über der Navigation und einmal unter der Navigation habe (je nach Bildschirmbreite), ohne dass ich diese 2 mal im Quelltext notieren muss, und mit display hidden etc arbeite... |
|
|||
Zitat:
Die Technik lautet CSS und die Grundlage ist dein HTML. |
|
|||
Zitat:
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bitte um Hilfe - CSS und Prozentangaben | sprefer | CSS | 3 | 01.03.2011 05:11 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 22:19 |
CSS Layout auf position basierend (float vermeiden) | akb | CSS | 0 | 04.10.2008 00:32 |
zwei Spalten layout, IE Abstandproblem | paramit | CSS | 2 | 03.07.2008 14:05 |
Probleme mit Layout | kruemelchen26 | CSS | 0 | 15.05.2007 23:40 |