Roland: Responsive Webdesign

SELF-Forum

Responsive Webdesign

Roland
– Informationen zu den Bewertungsregeln

Hi,
in meiner HP sind die divs (Navigation, Kop, Inhalt) über floats angeordnet.
Jetzt möchte ich die Seite flexibler gestalten.
Wenn ich daher auf eine kleinere Screensize gehe und die floats deaktiviere, stehen die divs untereinander - allerdings nicht in der von mir gewünschten Reihenfolge.
Kann ich über eine Angabe die Anzeigereihenfolge festlegen?
Danke!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Responsive Webdesign

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Kann ich über eine Angabe die Anzeigereihenfolge festlegen?

    Prinzipiell ja - aber mit dem Browsersupport siehts da noch "etwas" mangelhaft aus:
    http://dev.w3.org/csswg/css-flexbox/#order-property

    Du wirst nicht darum kommen, deinen Content so zu sortieren, dass er in beiden Layouts sinnvoll funktioniert.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Responsive Webdesign

      Roland
      – Informationen zu den Bewertungsregeln

      Kann ich über eine Angabe die Anzeigereihenfolge festlegen?

      Prinzipiell ja - aber mit dem Browsersupport siehts da noch "etwas" mangelhaft aus:
      http://dev.w3.org/csswg/css-flexbox/#order-property

      Habe jetzt folgendes Beispiel in verschiedenen Browsern getestet. Bis auf den Firefox war es überall ok (A,B,C untereinander).
      Im Firefox 23 nicht, obwohl in about:config
      layout.css.flexbox.enabled auf "true" gesetzt ist.

        
<html>  
<head>  
<style type="text/css">  
.box {  
    display: flex;  
    flex-flow: column nowrap;  
    justify-content: center;  
    align-content: center;  
    align-items: center;  
	}  
.box div.A {  
    order: 1;  
    flex: 0 1 auto;  
    align-self: auto;  
    min-width: 0;  
    min-height: auto;  
}  
.box div.B {  
    order: ;  
    flex: 0 1 auto;  
    align-self: ;  
    min-width: 0;  
    min-height: auto;  
}  
.box div.C {  
    order: 3;  
    flex: 0 1 auto;  
    align-self: ;  
    min-width: 0;  
    min-height: auto;  
}  
</style>  
</head>  
<body>  
<div class="box">  
  <div class="A">A</div>  
  <div class="B">B</div>  
  <div class="C">C</div>  
</div></body>  
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Responsive Webdesign

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, Roland!

        Habe jetzt folgendes Beispiel in verschiedenen Browsern getestet. Bis auf den Firefox war es überall ok (A,B,C untereinander).

        <div class="box">
          <div class="A">A</div>
          <div class="B">B</div>
          <div class="C">C</div>
        </div></body>
        </html>

          
A,B,C steht auch ohne jegliches Zutun untereinander. Deshalb hast du dich täuschen lassen, der IE unterstützt flexbox erst ab Version 10 und dort nur mit Präfix `-ms-`{:.language-css}, Safari und Opera benötigen den Präfix `-webkit-`{:.language-css} (siehe <http://caniuse.com/flexbox>). Du willst doch die Reihenfolge der Blöcke vertauschen:  
  
~~~html
<!doctype html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <title>test</title>  
    <style>[code lang=css]      .box {  
        display: flex;  
	flex-direction: column;  
      }  
      .A {  
	order: 2;  
      }  
      .B {  
	order: 3;  
      }  
      .C {  
	order: 1;  
      }
~~~    </style>  
  </head>  
  <body>  
    <div class="box">  
      <div class="A">A</div>  
      <div class="B">B</div>  
      <div class="C">C</div>  
    </div>  
  </body>  
</html>[/code]  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Box und Boxer](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=B#box).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln