I30R6
Neues Mitglied
Hi,
Ich versuche gerade ein Seitenlayout mit Divs zu erstellen, welche alle ein festes Seitenverhältnis zueinander haben, sprich egal auf welchem Monitorformat die Seite angezeigt wird, alles immer dasselbe Größenverhältnis zueinander haben.
Ich habe mich dabei an folgendem Tool orientiert. Dort lassen sich Divboxen bequem per Schieberegler generieren.
http://go-lux.de/go-lux-stellt-sich-vor/webtec/46-flexible-divs-mit-festem-seitenverhaeltnis
Den daraus entsehenden Code verstehe ich nur in Ansätzen, und arbeite daher vorwiegend mit copy/paste und etwas rumspielen an den CSS Eingaben.
Aber selbst das ist anscheinend zu anspruchsvoll für mich. Was ist aktuell die einfachste Möglichkeit ein komplexes Seitenlayout zu erstellen. Sollte ich mich da an irgendeinen Baukasten wie Jimdo oder Wix wenden und die dort erstellten Ergebnisse dann einfach in meine Seite einbinden, was empfehlt ihr mir?
Vielleicht kann auch jemand das Problem in meinem aktuellen Seitenaufbau finden. Den Code, den ich zusammengebastelt habe, sieht aktuell so aus.
Ich will das in der Blauen Div Box 4 Reihen mit 5 Spalten an quadratischen Boxen gleichmäßig zueinander ausgerichtet sind.
Hier ein Beispielbild:
Viele Grüße
I30R6
Ich versuche gerade ein Seitenlayout mit Divs zu erstellen, welche alle ein festes Seitenverhältnis zueinander haben, sprich egal auf welchem Monitorformat die Seite angezeigt wird, alles immer dasselbe Größenverhältnis zueinander haben.
Ich habe mich dabei an folgendem Tool orientiert. Dort lassen sich Divboxen bequem per Schieberegler generieren.
http://go-lux.de/go-lux-stellt-sich-vor/webtec/46-flexible-divs-mit-festem-seitenverhaeltnis
Den daraus entsehenden Code verstehe ich nur in Ansätzen, und arbeite daher vorwiegend mit copy/paste und etwas rumspielen an den CSS Eingaben.
Aber selbst das ist anscheinend zu anspruchsvoll für mich. Was ist aktuell die einfachste Möglichkeit ein komplexes Seitenlayout zu erstellen. Sollte ich mich da an irgendeinen Baukasten wie Jimdo oder Wix wenden und die dort erstellten Ergebnisse dann einfach in meine Seite einbinden, was empfehlt ihr mir?
Vielleicht kann auch jemand das Problem in meinem aktuellen Seitenaufbau finden. Den Code, den ich zusammengebastelt habe, sieht aktuell so aus.
Code:
-----CSS-----
.aspect-box {width: 80%; border: 1px solid red; padding: 1rem 1rem 0 0; margin: 0 auto; position: relative;}
.block-aspect {float:left; width:calc(100% / 2); position:relative;}
.aspect-spacer {content:""; display:block; padding-top:100%;}
.tile {position: absolute; top:0; right:0; bottom: 2rem;left: 2rem; border: 1px solid #ccc;}
.tile2 {position: absolute; top:2%; right:2%; bottom: 75%;left: 2%; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.5);}
.tile3 {position: absolute; top:27%; right:2%; bottom: 2%;left: 2%; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.5);}
.tile4 {position: absolute; top:27%; right:2%; bottom: 2%;left: 2%; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.5);}
.aspect-box2 {width:100%; border: 1px solid blue; padding: 1rem 1rem 0 0; margin: 0 auto; position: relative;}
.block-aspect2 {float:left; width:calc(100% / 3); position:relative;}
.aspect-spacer2 {content:""; display:block; padding-top:100%;}
-----HTML------
<div class="aspect-box">
<div class="block-aspect">
<div class="aspect-spacer"> </div>
<div class="tile"></div>
</div>
<div class="block-aspect">
<div class="aspect-spacer"> </div>
<div class="tile">
<div class="tile2">XXX</div>
<div class="tile3">
<div class="aspect-box2">
<div class="block-aspect2">
<div class="aspect-spacer2"> </div>
<div class="tile"></div>
</div>
<div class="block-aspect2">
<div class="aspect-spacer2"> </div>
<div class="tile"></div>
</div>
<div class="block-aspect2">
<div class="aspect-spacer2"> </div>
<div class="tile"></div>
</div>
</div><!-- Tile3 Ende -->
</div>
</div>
</div><!-- Aspektbox Ende -->
<div style="clear:both;"></div>Ich will das in der Blauen Div Box 4 Reihen mit 5 Spalten an quadratischen Boxen gleichmäßig zueinander ausgerichtet sind.
Hier ein Beispielbild:
Viele Grüße
I30R6
