3-Teiliges Layout

[Emjay_Lee]

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

 

[T4k3C4r3]

Benütze "float" und gib die Breite bzw Höhe in % an.

Problem gelöst?

 

[Emjay_Lee]

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?

#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;}

<div id="video"></div>                                <div id="sidebar"></div>                                <div id="footbar"></div>

 

[T4k3C4r3]

Am besten haust den Html Code noch in eine Übergeordnete Div mit Grössen und positionsangaben deiner wahl

 

[Emjay_Lee]

Wie gebe ich dem eine Höhe von 100% also das der ganze Screen genutzt wird OHNE scrollbalken etc . . .

 

[T4k3C4r3]

Normalerweise eh mit 100% du kannst es aber genauso auch auf auto setzten damit sich die Größe an den Inhalt anpasst

 

[Emjay_Lee]

Im HTML wurde ein Div ergänzt namens Content. CSS sieht so aus

#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?

 

[T4k3C4r3]

Der Breite und der Höhe den selben Wert geben :-D

 

[Tronjer]

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

 

[T4k3C4r3]

Ja Bootstrap ist wahnsinn! Verwende ich auch immer wieder gerne. Kann ich ebenso nur weiterempfehlen.

 

[Emjay_Lee]

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