zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive Layout: Doppelten Quelltext vermeiden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.09.2012, 19:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2012
Beiträge: 3
ranopalepu befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Angehängte Grafiken
Dateityp: gif responsive-problem.gif (9,7 KB, 13x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.09.2012, 19:50
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Media Queries.
__________________
Ü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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2012, 13:12
X
neuer user
 
Registriert seit: 27.06.2012
Beiträge: 13
Heiko Mamerow befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gato Beitrag anzeigen
...grünau!

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
Mit Zitat antworten
  #4 (permalink)  
Alt 22.09.2012, 17:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2012
Beiträge: 3
ranopalepu befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #5 (permalink)  
Alt 22.09.2012, 18:13
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von ranopalepu Beitrag anzeigen
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...
Mit Media Queries. (Und je nach Breite eine entsprechende Verwendung von Eigenschaften wie float, position, margin, etc).

Die Technik lautet CSS und die Grundlage ist dein HTML.
Mit Zitat antworten
  #6 (permalink)  
Alt 22.09.2012, 18:17
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von ranopalepu Beitrag anzeigen
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),
z.B. für die Desktopversion die Suche ganz normal vor die navi schreiben und unterhalb einer bestimmten Bildschirmbreite wird sie absolut so positioniert das sie unterhalb der navi erscheint. Die navi wird dabei z.B. oberhalb der Suche positioniert. Um beides dann einen Container der relativ positioniert wird damit sich die absoluten Elemente daran orientieren können.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 22.09.2012, 18:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2012
Beiträge: 3
ranopalepu befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
z.B. für die Desktopversion die Suche ganz normal vor die navi schreiben und unterhalb einer bestimmten Bildschirmbreite wird sie absolut so positioniert das sie unterhalb der navi erscheint. Die navi wird dabei z.B. oberhalb der Suche positioniert. Um beides dann einen Container der relativ positioniert wird damit sich die absoluten Elemente daran orientieren können.
Danke. Die Verwendung von Absolut beim Break-Down und ein paar Container mit relativ sollten die Lösung sein.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:43 Uhr.