• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3-Teiliges Layout

Emjay_Lee

Neues Mitglied
Guten Tag liebes Forum,

ich versuche mich gerade an einer mobilen Webseite und habe leider Probleme mit dem Layout. Ich möchte ein dreiteiliges Layout machen, welches dynamisch sein soll. Also sich an die Größe des Bildschirmes Orientieren. Im Prinzip ist der Aufbau simpel. Hier ein MockUp wie es aussehen könnte und was die 3 Teile zeigt 17Schnappschuss (2013-05-12 19.31.20).jpg
Die Schwierigkeit ist die Sidebar. Dieso soll so hoch sein wie die zwei linken Container zusammen und trotzdem daneben stehen (am rechten Rand).

Ich beantworte gerne noch weitere Frage zu dem Layout.

Vielen Dank schon einmal für jede Hilfe

Emjay
 
Werbung:
So das hab ich nun rausbekommen. Hatte es vorher mal gemacht. Aber ohne min-width. Das mit der Höhe klappt jetzt noch nicht. Wie könnte man das lösen?
HTML:
#video {	float: left;	width: 75%;	min-width: 768px;	background-color: #000000;	height: 60%;	min-height: 460px;}
#sidebar {	float: left;	width: 25%;	min-width: 256px;	background-color: #5393C5;	height: 100%;	min-height: 768px;}
#footbar {	margin-top: 460px;	width: 75%;	min-width: 768px;	background-color: #BBBBBB;	height: 40%;	min-height: 308px;}

HTML:
<div id="video"></div>                                <div id="sidebar"></div>                                <div id="footbar"></div>
 
Zuletzt bearbeitet:
Werbung:
Am besten haust den Html Code noch in eine Übergeordnete Div mit Grössen und positionsangaben deiner wahl
 
Wie gebe ich dem eine Höhe von 100% also das der ganze Screen genutzt wird OHNE scrollbalken etc . . .
 
Normalerweise eh mit 100% du kannst es aber genauso auch auf auto setzten damit sich die Größe an den Inhalt anpasst
 
Werbung:
Im HTML wurde ein Div ergänzt namens Content. CSS sieht so aus
HTML:
#content {	margin: 0 !important;	padding: 0 !important;	border: 0 !important;	height: 100%;}
#video {	float: left;	width: 75%;	min-width: 200px;	background-color: #000000;	height: 60%;	min-height: 460px;}
#sidebar {	float: right;	width: 25%;	min-width: 256px;	background-color: #5393C5;	height: 100%;	min-height: 768px;}
#footbar {	float:left;		width: 75%;	min-width: 200px;	background-color: #BBBBBB;	height: 40%;	min-height: 308px;}

was muss ich ändern damit die höhe sich so verhält wie die Breite?
 
Guten Tag liebes Forum,

ich versuche mich gerade an einer mobilen Webseite und habe leider Probleme mit dem Layout. Ich möchte ein dreiteiliges Layout machen, welches dynamisch sein soll. Also sich an die Größe des Bildschirmes Orientieren.

Du kannst so etwas natürlich per Hand machen, oder dir 90% der Arbeit ersparen, in dem du das hier verwendest.

Bootstrap
 
Werbung:
Ja Bootstrap ist wahnsinn! Verwende ich auch immer wieder gerne. Kann ich ebenso nur weiterempfehlen.
 
Ich benutze derzeit jQuery.
Eine frage habe ich jetzt noch Das ganze passt sich super an die breite (width) an. Aber bei der Höhe (Height) funktioniert das leider nicht. wie kann ich das ebenfalls anpassen? Die seite soll nicht scrollbar sein.
also der Bildschirm soll voll ausgefühlt sein. und innherhalb der container kann gescrolled werden.(wie ich das mach weiss ich).

DAnke
 
Zurück
Oben