3 Boxen, flexibel nebeneinander?

shna · #1 (**permalink**) 18.10.2013, 22:54

Hallo,

ich bin absoluter Anfänger in CSS und habe mir jetzt mittels der Little-Boxes-Seite die Grundlagen angelesen.

Ich möchte in einer vorhandenen Wordpress-Installation zusätzlich zu den vorhandenen Formatierungsmöglichkeiten etwas hinzufügen, habe das mal in einer Grafik veranschaulicht

Derzeit löse ich das sehr unelegant mit einer Tabelle: Drei Felder enthalten Bilder oder Texte und unter den zwei letzten Feldern steht ein viertes Feld, das einen Button enthält.

Im ersten Schritt möchte ich gerne diese Struktur mittels CSS lösen.

Meine bisher begrenzte Vorstellung ist, dass ich dafür etwas wie

Code:

div {
  background: transparent;
  width: 20%;
  padding: 10px;
  border: 0;
  margin: 5px;
}

schreibe und dann in der Code-Ansicht auf der jeweiligen Wordpress-Seite per <div>Hier kommt die Grafik oder der Text</div> diese "Box" aufrufe.

Nur zum Verständnis (das habe ich bisher noch überhaupt nicht geblickt) - diese CSS-Angabe kommt in die übergeordnete Style.css, die für alle Seiten gilt? Ich füge sie einfach im Body-Bereich ein?

Angenommen, ich bekomme das so hin, dann fehlt noch der Code für die vierte Box, in die der Button kommt. Die Besonderheit hierbei: Sie soll zentriert unter den beiden letzten Boxen stehen. Einen Zentrierungsbegriff für diese Mischung aus Relation (zur restlichen Seite) und Absolution (zu den beiden Boxen 2 und 3) kenne ich nicht.

Nun aber die richtig knifflige Frage

Auf den beiden unteren Ebenen meiner Grafik möchte ich schematisch darstellen, wie sich die Boxen verhalten sollen, wenn das Browserfenster verkleinert wird (ergo: irgendwie soll das zu meinem Responsive-Theme passen).
Die Boxen sollen so verschachtelt positioniert werden, dass im Falle einer Verkleinerung zuerst der gesamte Block aus 2,3,4 nach unten rückt und später dann jede Box unter der anderen steht, damit sie auch auf mobilen Endgeräten richtig "fließen".

Fließen ist glaube ich der richtige Begriff, irgendwie muss das mit "float" gelöst werden, oder?

In der Hoffnung, mich einigermaßen verständlich ausgedrückt zu haben schon einmal vielen Dank für eure Hilfe(-Stellung) und Anregungen, wie ich das hinbekommen kann!

MrMurphy · #2 (**permalink**) 19.10.2013, 12:20

Hallo,

mir wird leider keine Grafik angezeigt.

Am besten wäre ein Online-Beispiel. Ohne den späteren Inhalt zu kennen ist es schwierig dir konkrete Hilfe zukommen zu lassen.

Und was soll das für ein Button sein, der eine extra Box benötigt?

Gruss

MrMurphy

shna · #3 (**permalink**) 19.10.2013, 12:57

Hallo MrMurphy,

komisch, ich sah das Bild. Habe es gerade bei einem anderen Hoster hochgeladen und eingefügt.

Der Button benötigt vielleicht gar keine extra Box, aber ich habe ihn in der jetzigen Version mittels einem Tabellenfeld positioniert.
Eigentlich soll der vom Wordpress-Theme bereitgestellte Button mittels Shortcode genutzt werden - kann ich den anders als mit CSS im Layout positionieren?

schatzi · #4 (**permalink**) 19.10.2013, 22:35

Hallo!

Wenn ich deine Bilder richtig verstehe, dann wäre dies eine mögliche Lösung:
Edit fiddle - JSFiddle

Für den schmalsten Viewport wäre dann noch ein entsprechender media-query nötig.

shna · #5 (**permalink**) 20.10.2013, 11:57

Hei Schatzi,

das sieht schon super aus, vielen Dank!

>>Für den schmalsten Viewport wäre dann noch ein entsprechender media-query nötig.

Verstehe ich nicht

Ich habe testweise deine 200px Breite durch 30% ersetzt, jetzt werden aber nur 2,3,4 schmal dargestellt, eins dagegen bleibt sehr breit.
Das liegt wohl an der Verschachtelung?
Können die drei oberen Boxen nicht jeweils 30% der Seitenbreite einnehmen?

Manfred62 · #6 (**permalink**) 20.10.2013, 13:42

Hier ein Beispiel mit media-queries. Ich hatte so etwas ähnliches mal mit PocketGrid gemacht (daher stammt block und block-group).

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        test
    </title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    body {font: 100%/1.6 sans-serif; padding: 2em 0; color: #000;}

    /* Border-box-sizing */
    .block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }

  /* Clearfix */
  .block-group {
      *zoom: 1;
  }
  .block-group:before, .block-group:after {
      display: table;
      content: "";
      line-height: 0;
  }
  .block-group:after {
      clear: both;
  }
  .block-group {
      /* ul/li compatibility */
      list-style-type: none;
      padding: 0;
      margin: 0;
  }

  /* Nested grid */
  .block-group > .block-group {
      clear: none;
      float: left;
      margin: 0 !important;
  }

  /* Default block */
  .block {
      float: left;
      width: 100%;
  }
  .container {
    max-width: 60em;
    margin: 0 auto;
    background: #FFFF80;
}

.b1, .b2, .b3 {
    margin-left: 1.5%;
    margin-top: 1em;
    padding: 1em;
    background: #ccc;
    width: 31.333333333333332%;
}

.b4 {
    margin: 1em;
    margin-left: 55%;
    padding: 1em;
    background: #0FF;
    width: 10em;
    text-align: center;
}

/* =Tablet (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 48em) and (max-width: 59.9375em) {
    .container {width: 45.5em;}
    .b1 {width: 40%;}
    .b2, .b3 {width: 48%;}
    .b2 {clear: left;}
    .b4 {margin-left: 40%;}
}

/* =Mobile (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 47.9375em) {
    body {padding: 0;}
    .container { width: 19.375em;}
    .b1, .b2, .b3 {width: 97%;}
    .b4 {margin-left: 33%;}
}

/* =Mobile (Portrait 320px)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 29.9375em) {
    .b4 {margin-left: 25%;}
}

/* =Mobile (Landscape)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 30em) and (max-width: 47.9375em) {
    .container { width: 29.375em; }
}
</style>
</head>
<body>
    <div class="container block-group">
            <div class="b1 block">
                <b>Block 1</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, earum, porro, nesciunt, culpa numquam magni unde officia dolores quo quibusdam ipsam ipsum animi reprehenderit totam rem sint placeat optio aperiam!
            </div>
            <div class="b2 block">
                <b>Block 2</b> Deleniti, repellendus, quidem, quo, libero distinctio praesentium nesciunt odit asperiores esse ipsa voluptas consequatur voluptatem nemo aspernatur tenetur quasi debitis qui provident quibusdam dolore culpa sunt inventore nobis cumque molestias.
            </div>
            <div class="b3 block">
                <b>Block 3</b> Molestiae, reprehenderit, architecto, odit, consequuntur voluptas earum nulla magni nostrum voluptatibus magnam alias iusto dolores similique deserunt maiores ullam eius dolor. Hic, ducimus, in ipsum asperiores quia mollitia accusamus vero.
            </div>
        <div class="b4 block">
            <b>Block 4</b>
        </div>
    </div>
</body>
</html>

shna · #7 (**permalink**) 20.10.2013, 13:52

Media-query bedeutet also, dass der Browser die aktuelle Fenstergröße abfragt und dementsprechend die Boxen anpasst?

MrMurphy · #8 (**permalink**) 20.10.2013, 14:31

Hallo

Fast.

Der Browser fragt die aktuelle Fenstergröße ab und passt dann das Aussehen insgesamt (also nicht nur die Boxen) so an, wie der Webseitenersteller das im CSS vorgegeben hat.

Gruss

MrMurphy

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2 Boxen nebeneinander ohne id/class	overflow	CSS	3	08.12.2012 15:09
Boxen nebeneinander untereinander	Muckelfloh	CSS	1	14.12.2009 19:56
3 Boxen nebeneinander	Roux	CSS	3	15.07.2008 15:20
2 CSS Boxen nebeneinander positionieren	-seppel-	CSS	3	25.06.2008 00:45
2 Boxen nebeneinander ?	Ivory	CSS	3	08.10.2006 15:41