zweispaltiges layout, rechte spalte im quellcode unten

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

[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%;}
}

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

[mkraehe]

kauf die auf Themeforest ein responsive Theme. Kostet nicht mal 50 Euro und du hast deine perfekte Website.

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

Code: Alles auswählen

<div class="mobile-1 medium-2 large-3">blabla</div>

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.

[umwelt]

fällt jemandem vielleicht noch eine antwort ein?

viele grüße?

[nerd]

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.