Seite 1 von 1
zweispaltiges layout, rechte spalte im quellcode unten
Verfasst: 10.09.2013, 19:49
von umwelt
Hallo,
ich möchte gern ein zweispaltiges, responsives layout erstellen, das aus zwei spalten besteht... eine hauptspalte mit ca. 60% breite und einer sidebar mit ca. 40% breite.
an sich könnte ich ja beide divs nach links floaten, so dass die rechte Navi auch im Quellcode unter dem Haupt-Inhalt erscheint (das ist mir wichtig). Aber das akzeptiert der Browser nicht... hat jemand ein Tutorial parat, wie das funktioniert? Wichtig: Rechte spalte im Quellcode UNTER der Hauptspalte, damit es beim Resize (responsive) entsprechend umklappt.
Viele Grüße!
Verfasst: 10.09.2013, 19:57
von chris21
Verstehe nicht so ganz, warum es mit dem float nicht klappt, denn das müsste klappen (iaW: der Fehler liegt woanders bei Dir im Code), aber nun als schnelle Alternative:
Code: Alles auswählen
<div id="links">
haupt bla haupt bla bla
</div>
<div id="rechts">
sidebla sidebla sidebla
</div>
und css
Code: Alles auswählen
#links{width:60%;}
#rechts{position:absolute;left:60%;top:0%;}
und dann entsprechend css für den responsive
Code: Alles auswählen
@media screen and (max-width: ___px){
#rechts{position:relative;left:0%;top:0%;}
}
Verfasst: 11.09.2013, 00:49
von nerd
warum willst du das rad neu erfinden, wenn es schon jede menge responsive layout frameworks gibt die noch dazu korrekt auf tablets und handys runterskalieren?!
https://responsiveboilerplate.com/
https://www.getskeleton.com/#grid
https://foundation.zurb.com/templates.php
usw. usf.
Bei 12-grid layouts musst du dich fuer ein 40%/60% layout wohl zwischen 4/8 oder 5/7 grids entscheiden (siehe
https://www.getskeleton.com/#grid )
Verfasst: 11.09.2013, 10:37
von mkraehe
kauf die auf Themeforest ein responsive Theme. Kostet nicht mal 50 Euro und du hast deine perfekte Website.
Verfasst: 11.09.2013, 17:44
von umwelt
hallo,
ich möchte es aber nicht einfach so übernehmen
@nerd: das klingt schon interessant und ich habe mehrere systeme angesehen. das problem ist nur: wie bekomme ich das ganze denn wirklich responsive mit breakpoints usw?
ein 12-spaltiges Layout auf dem mobilen bildschirm ist ja nicht besonders hübsch...
bisher hatte ich die lösung, es so zu machen:
und dann je nach breakpoint die Klassen zuzuweisen.
Wie läuft das denn sonst? Irgendwie steh ich auf dem Schlauch - so schwer kanns ja nicht sein.
edit: und wenn ich einer span8 einfach per media-query zuweise, dass sie eben 3 spalten breit ist, kann das doch nicht die wahre lösung sein, oder wo ist der denkfehler? das wäre doch dann auch kein mobile-first-ansatz.
Verfasst: 13.09.2013, 14:04
von umwelt
fällt jemandem vielleicht noch eine antwort ein?
viele grüße?
Verfasst: 16.09.2013, 00:05
von nerd
umwelt hat geschrieben:hallo,
ich möchte es aber nicht einfach so übernehmen
@nerd: das klingt schon interessant und ich habe mehrere systeme angesehen. das problem ist nur: wie bekomme ich das ganze denn wirklich responsive mit breakpoints usw?
ein 12-spaltiges Layout auf dem mobilen bildschirm ist ja nicht besonders hübsch...
es ist kein "12-spaltiges layout", sondern der bildschirm wird in 12 "blocks" eingeteilt; und deine "spalten" bekommen soviele "blocks" zugeteilt das am ende jeder bereich aim layout (z.b. header, main, footer) genau 12 blocks belegt - bei 6/6 sind beide blocks je 50% breit; bei 3/3/3/3 ist jeder block 25% breit usw.
Ab einer gewissen bildschirmaufloesiung (smartphones) werden alle spalten auf "width:100%" gesetzt damit es auch auf smartphones gut aussieht.
Siehe
https://www.getskeleton.com/#grid und ziehe den browser klein.
