Ergebnis 1 bis 4 von 4
  1. #1
    Avatar von jeko
    jeko ist offline Foren-Gott
    registriert
    03-06-2004
    Ort
    [CH]Vor meinem PC[/CH]
    Beiträge
    3.069

    Zeilen gleichmässig über Höhe verteilen?

    Hallo zusammen,

    ich hätte da ein Problemchen für das mein CSS-Latein nicht ausreicht - und zähle auf eure Hilfe

    Ich würde gerne einem Container mit 100% Höhe (Referenz: body/viewport) vertikal Elemente arrangieren, wobei:
    - jedes Element gleich hoch sein sollte
    - es keine Rolle spielt, wieviele Elemente darin sind, die Höhe der einzelnen soll sich nach der Formel ElternContainer-Höhe / AnzahlKinder anpassen

    Also sprich, das was wir bei ausgeglichenen Tabellenzeilen haben. Schönerweise muss das ganze nur auf dem iPad laufen - somit sind CSS3-Selektoren/Anweisungen welcher Art auch immer möglich (und ich hoffe ihr kennt da einen der mir noch nicht untergekommen ist !).

    Habt ihr da eine Lösung?

    Liebe Grüsse
    Dominique

    PS: Grüsse an alle, war lange nicht mehr hier *wink*
    PPS: Im Anhang eine Skizze.
    Angehängte Grafiken Angehängte Grafiken
    Arbeit an der Sprache ist Arbeit am Gedanken.
    NoPaste / Format / Analyze / Crypt
    Ich bin ein Schwätzer.

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Zeilen gleichmässig über Höhe verteilen?

    Hab' mich mal ein bisschen schlau gemacht: das geht mit dem sehr neuen Flexbox-Modul.

    Im neuesten Safari und FF 11 funktioniert das:
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <style type="text/css">
    body, html {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    .container {
    	width: 50px;
    	height: 100%;
    	display: -moz-box;
    	display: -webkit-box;
    	-moz-box-orient: vertical;
    	-webkit-box-orient: vertical;
    }
    .item {
    	-moz-box-flex: 1;
    	-webkit-box-flex: 1;
    	background-color: #333333;
    }
    .item:nth-child(2n){
    	background-color: #888888;
    }
    </style>
    </head>
    <body>
    <div class="container">
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    </div>
    </body>
    </html>

  3. #3
    Avatar von jeko
    jeko ist offline Foren-Gott
    registriert
    03-06-2004
    Ort
    [CH]Vor meinem PC[/CH]
    Beiträge
    3.069

    AW: Zeilen gleichmässig über Höhe verteilen?

    Hallo kkapsner!

    Du bist der beste ! Funzt 1A: http://jsfiddle.net/TFGcd/ vielen Dank!

    Liebe Grüsse

    Dominique
    Arbeit an der Sprache ist Arbeit am Gedanken.
    NoPaste / Format / Analyze / Crypt
    Ich bin ein Schwätzer.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Zeilen gleichmässig über Höhe verteilen?

    Bitte - gern geschehen.

Ähnliche Themen

  1. [JS] Tabellenausgabe auf mehrere Seiten verteilen
    Von opiWahn im Forum JavaScript
    Antworten: 13
    Letzter Beitrag: 30-01-2011, 01:16
  2. background-image über 100% der höhe
    Von rasputin im Forum CSS und (X)HTML
    Antworten: 18
    Letzter Beitrag: 06-01-2007, 21:01
  3. javascript variablen über mehrere Zeilen
    Von bubu-der-uhu im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 04-10-2005, 16:44
  4. [MySQL] news auf mehere seiten verteilen
    Von schwerminator im Forum Serverseitige Programmierung
    Antworten: 5
    Letzter Beitrag: 29-10-2004, 12:26
  5. bilder/datein in arrays verteilen
    Von D3nde im Forum Serverseitige Programmierung
    Antworten: 4
    Letzter Beitrag: 24-11-2002, 11:52

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •