zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Boxen, flexibel nebeneinander?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.10.2013, 22:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2013
Beiträge: 4
shna befindet sich auf einem aufstrebenden Ast
Standard 3 Boxen, flexibel nebeneinander?

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!

Geändert von shna (19.10.2013 um 12:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.10.2013, 12:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.106
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.10.2013, 12:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2013
Beiträge: 4
shna befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 19.10.2013, 22:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
Gruß schatzi
Mit Zitat antworten
  #5 (permalink)  
Alt 20.10.2013, 11:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2013
Beiträge: 4
shna befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 20.10.2013, 13:42
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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>

Geändert von Manfred62 (20.10.2013 um 19:13 Uhr) Grund: Link ergänzt
Mit Zitat antworten
  #7 (permalink)  
Alt 20.10.2013, 13:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2013
Beiträge: 4
shna befindet sich auf einem aufstrebenden Ast
Standard

Media-query bedeutet also, dass der Browser die aktuelle Fenstergröße abfragt und dementsprechend die Boxen anpasst?
Mit Zitat antworten
  #8 (permalink)  
Alt 20.10.2013, 14:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.106
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Antwort

Stichwörter
boxen, floating, responsive, textumfluss

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:47 Uhr.