Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

zweispaltiges layout, rechte spalte im quellcode unten

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
Neues Thema Antworten
umwelt
PostRank 6
PostRank 6
Beiträge: 386
Registriert: 16.11.2011, 22:06

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!

chris21
PostRank 9
PostRank 9
Beiträge: 2758
Registriert: 10.04.2005, 18:17

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;

nerd
PostRank 10
PostRank 10
Beiträge: 4023
Registriert: 15.02.2005, 04:02

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 )

mkraehe
PostRank 3
PostRank 3
Beiträge: 66
Registriert: 05.09.2013, 07:48

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.

umwelt
PostRank 6
PostRank 6
Beiträge: 386
Registriert: 16.11.2011, 22:06

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.

umwelt
PostRank 6
PostRank 6
Beiträge: 386
Registriert: 16.11.2011, 22:06

Beitrag von umwelt » 13.09.2013, 14:04

fällt jemandem vielleicht noch eine antwort ein?

viele grüße?

nerd
PostRank 10
PostRank 10
Beiträge: 4023
Registriert: 15.02.2005, 04:02

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.

Antworten
  • Vergleichbare Themen
    Antworten
    Zugriffe
    Letzter Beitrag