✔ Responsive Web - Anordnung ändern

[Genesyst]

Hallo zusammen,

ich hoffe das ist der richtige Bereich für mein Anliegen. Da es aber primär um @media geht, denke ich sollte es passen.

Folgendes Szenario. Ich habe folgendes Markup:

<div id="main">    
   <div class="left-sidebar">
        &nbsp;
    </div><!-- Left Sidebar -->
    <div class="content">
        &nbsp;
    </div><!-- Content -->
    <div class="right-sidebar">
        &nbsp;
    </div><!-- Right Sidebar -->
</div>

Bedeutet, eine linke Sidebar, eine rechte und in der Mitte Inhalt. Dieses gilt für eine Auflösung von max 1200px, wobei es auf 1200px fixiert ist an der Stelle.

Initial sieht das so aus:

#main {    
    max-width:1200px;
    margin:0 auto;
}
.left-sidebar {
    width:25%;
    float:left;
    background-color:#3F0;
}
.content {
    width:50%;
    float:left;
    background-color:#C00;
    min-height:1000px;
}
.right-sidebar {
    width:25%;
    float:right;
    background-color:#6F0;
}

Ist aktuell nur nen Test-Setup.

Im nächsten Schritt will ich nun, dass bei einer Auflösung von 980px die linke sidebar unter die rechte switched, und der Content-Bereich nach links. Das Problem ist, dass wenn ich den content links floate und die beiden sidebars rechts, dann ist die ursprünglich linke sidebar immer über der rechten, weil sie natürlich höher angeordnet ist. Ich wills aber gern umgekehrt. Hab schon einiges probiert, aber irgendwie will es nicht so recht.

@media screen and (max-width: 980px) {    
    .content {
        width:70%;
        float:left;        
    }
    .right-sidebar {
        float:right;
        width:30%;        
    }
    .left-sidebar {        
        float:right;
        width:30%;
    }
}

Geht ja noch weiter. Bei 767px will ich nun, dass alle 3 Bereiche eine Breite von 100% bekommen, die beiden Sidebars sollen aber wiederum unter den Content-Bereich. Auch hier habe ich Probleme, weil die linke Sidebar immer über dem Content angesiedelt wird, was auch wieder logisch erscheint.

    @media screen and (max-width: 767px) {    
      .content {
        width:100%;
    }
    .right-sidebar {        
        width:100%; 
    }
    .left-sidebar {
        width:100%;
    }
}

Ich habe schon viel rum gesucht, aber so richtig zufrieden bin ich nicht, und habe bisher keine 100%ig Lösung gefunden, wenn es die überhaupt gibt.

Ich würde mich sehr über entsprechende Hilfe freuen!

Beste Grüße, und frohe Weihnachten!

 

[ByeBye 270552]

Hey Genesyst,
die Lösung ist eigentlich eine ziemlich einfache. Durch die floats muss der Inhalt im Quellcode nicht in der Reihenfolge stehen wie es auch nachher dargestellt werden soll. Im Moment hast du ja die Reihenfolge: sidebar1, content, sidebar2. Um das Ergebnis zu erziehlen was du willst musst du aber die div's so anordnen wie sie nachher auch angezeigt werden sollen, also content, sidebar2, sidebar1.
Dein HTML-Code muss also so aussehen:

<div id="main">
   <div class="content">
      &nbsp;
   </div><!-- Content -->
   <div class="right-sidebar">
      &nbsp;
   </div><!-- Right Sidebar -->
   <div class="left-sidebar">
      &nbsp;
   </div><!-- Left Sidebar -->
</div>

Ich hoffe das war was du gesucht hast. Schöne Weihnachtsgrüße noch,
Mainz007

 

[Genesyst]

Grüße dich Mainz007,

erst einmal danke für deine Hilfe. Leider habe ich noch immer Probleme, weil ich mit deiner Variante das ganze in Grün habe. Zur Erklärung.

Der Code schaut nun so aus, wie von dir vorgeschlagen:

<div id="main">
	<div class="content">
    	inhalt
    </div><!-- Content -->
    <div class="right-sidebar">
    	rechts
    </div><!-- Right Sidebar -->
    <div class="left-sidebar">
    	links        
    </div><!-- Left Sidebar --> 
</div>

Nun muss die linke Leiste nach links, also float:left. Der Content muss nun nach rechts, sonst wäre er ja wieder davor, also float:right. Wenn ich nun aber der rechten Leiste ein float:right gebe, ist sie linksseitig des contents, da es sich ja bei float:right quasi andersrum anordnet.

Weder so -

#main {
	max-width:1200px;
	margin:0 auto;
}

.left-sidebar {
	width:25%;
	float:left;
	background-color:#3F0;
}

.content {
	width:50%;
	float:right;
	background-color:#C00;
}

.right-sidebar {
	width:25%;
	float:right;
	background-color:#6F0;
}

- noch so -

#main {
	max-width:1200px;
	margin:0 auto;
}

.left-sidebar {
	width:25%;
	float:left;
	background-color:#3F0;
}

.content {
	width:50%;
	float:left;
	background-color:#C00;
}

.right-sidebar {
	width:25%;
	float:right;
	background-color:#6F0;
}

- geht es.

In der Ausführung ab 980px geht es aber nun, so wie erhofft. Der Ansatz ist also richtig, und ich verstehe auch die Logik die da hin führt, aber bei der vollen Auflösung von 1200px will es noch nicht so wie ich gern will.

Eventuell mache ich aber auch immer noch etwas falsch?

Vielen Dank noch mal!

 

[ByeBye 270552]

Hey Genesyst,

ich muss mich entschuldigen. Ich habe nur die verkleinerten Größen im Kopf gehabt (also alles kleiner 980px) und dabei vergessen, dass es in groß ja auch noch vernünftig aussehen muss
Melde mich wenn ich wieder ne Lösung habe

Schöne Grüße,
Mainz007

 

[Genesyst]

Danke dir schon mal.

Die schmutzige Lösung wäre es, die Sidebar zwei mal einzubinden und je nach Größe mit display:none zu arbeiten. Aber das ist einfach zu unsauber. Jede dieser Sidebars wird am Ende 8-10 Widgets inne haben, die zwar gecached sind, und auch sonst nur aus html und css bestehen, aber trotzdem würde es bedeuten, dass die Sidebar zwei mal geladen wird, da display:none ja nur die Sichtbarkeit verhindert, nicht aber das Laden.

Ist echt n Problem. Beschäftige mich damit nun schon ein paar Tage, und bin noch nicht viel weiter gekommen. Das einzige wäre, wenn man per PHP oder JS eine Art switch einbindet, oder eine Abfrage, aber auch da bin ich mir unsicher ob das so optimal ist, vor allem weil "responsive" grundsätzlich ja auch kompatibel sein soll.

Anyhow - Noch mal vielen Dank, und eventuell finde ich ja auch noch was. Für etwaige weitere Hilfe bin ich trotzdem sehr zu haben!

Nur zur Info:

Das ganze ist möglich mittels Flexbox (CSS3), was ein "Umsortieren" des Layouts erlaubt. Leider ist Flexbox auch in gängigen Browsern kaum oder nur halb unterstützt. Aktuell teste ich mal, ob sich das mittels Modernizr regeln lässt, aber es ist ein recht gewagtes Spiel. Werde es aber mal austesten.

 

[djheke]

Es wäre doch sehr vorteilhaft sich mit der Problematik der Positionierung zu beschäftigen. Hier mal ein Link, der dir weiterhelfen sollte.
http://www.gipspferd.de/css/anleitung/spaltenreihenfolge-aendern/

So geht's

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive </title>
<style type="text/css">
#main {    
    max-width:1200px;
    margin:0 auto;
}
.left-sidebar {
    width:25%;
    float:left;
 margin-left:-100%;
    background-color:#3F0;
  min-height:1000px;
}
.content {
    width:50%;
    float:left;
    margin-left:25%; 
    background-color:#C00;
    min-height:1000px;
}
.right-sidebar {
    width:25%;
    float:left;
    background-color:#aaa;
    min-height:1000px;
}

@media screen and (max-width: 980px) {    
    .content {
      width:75%;
      margin-left:0;
     }
    .right-sidebar {
     width:25%;  
     min-height:500px;      
    }
    .left-sidebar {        
      width:25%;
      min-height:500px;
      margin-left:0;
    }
}

  @media screen and (max-width: 767px) {    
      .content {
        width:100%;
    }
    .right-sidebar {        
        width:100%; 
    }
    .left-sidebar {
        width:100%;;
       
    }
}
</style>
</head>

<body>
<div id="main">  
   <div class="content">
        Content
    </div><!-- Content -->  
   <div class="right-sidebar">
        Right Sidebar
    </div><!-- Right Sidebar -->
   <div class="left-sidebar">
        Left Sidebar
    </div><!-- Left Sidebar -->
 
 
</div>
</body>
</html>

Viel Spaß damit.

 

[bigtail]

Probiere mal das hier:

@charset "UTF-8";
/* CSS Document */
/* CSS RESET
------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
/* =========== End of Reset ============== */


#main {
	max-width:1200px;
    margin:0 auto;
	width: 100%;
}
.left-sidebar {
    width:25%;
    float:left;
    background-color:#3F0;
	min-height: 200px;
}
.content {
    width:50%;
    float:left;
    background-color:#C00;
    min-height:200px;
}
.right-sidebar {
    width:25%;
    float:right;
    background-color:#ccc;
	min-height: 200px;
}

@media screen and (max-width: 980px) {    
    .content {
        width:70%;
    }
    .right-sidebar {
        width:30%;
		min-height: 100px;    
    }
    .left-sidebar {   
		width:30%;
		float:right;  
		position: absolute;
		top: 100px;
		left: 70%;
		min-height: 100px;
    }
}

@media screen and (max-width: 767px) {    
    .content {
        width:100%;
    }
    .right-sidebar {        
        width:100%; 
    }
    .left-sidebar {
        width:100%;
		position: absolute;
		top: 300px;
		left: 0;
    }
}

 

[Genesyst]

Ich möchte mich an dieser Stelle noch einmal für eure Hilfestellung und Tipps bedanken. Letztendlich habe ich es jetzt mit der Lösung von djheke gemacht. Warum auch immer hat man gegen negative Margins immer noch so seine Vorbehalte, obwohl diese selbst nach W3 valide sind. Nach ein wenig austesten hat es nun aber problemlos auf diese Art und Weise funktioniert.

Vielen Dank noch mal!