zweispaltiges layout, rechte spalte im quellcode unten

Beitrag von **umwelt** » 10.09.2013, 19:49

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!

von **Anzeige von ABAKUS** »

Beitrag von **chris21** » 10.09.2013, 19:57

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&#123;width&#58;60%;&#125;
#rechts&#123;position&#58;absolute;left&#58;60%;top&#58;0%;&#125;

und dann entsprechend css für den responsive

Code: Alles auswählen

@media screen and &#40;max-width&#58; ___px&#41;&#123;
#rechts&#123;position&#58;relative;left&#58;0%;top&#58;0%;&#125;
&#125;

Beitrag von **nerd** » 11.09.2013, 00:49

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 )

von **Anzeige von ABAKUS** »

Beitrag von **mkraehe** » 11.09.2013, 10:37

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

Beitrag von **umwelt** » 11.09.2013, 17:44

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.

Beitrag von **umwelt** » 13.09.2013, 14:04

fällt jemandem vielleicht noch eine antwort ein?

viele grüße?

Beitrag von **nerd** » 16.09.2013, 00:05

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.