Width/Height korrekt angeben

davidos_no.1

Bisher habe ich Width/Height immer nur in Pixeln angegeben, da ich ich nicht genau weiß, wie man das mit Prozenten macht. Nun will ich das aber mal ändern - ich hoffe, mir kann jemand helfen!

Bisher habe ich es so gemacht - das Element div #main {width: 850px;}
umschließt die Elemente div #left {width: 650px; float: left;} und div #right {width: 200px; float: left;}, die dann nebeneinander platziert werden. Wie mache ich das jetzt mit Prozenten?

Gruß

synaptic

ja genauso, nur eben mit %
du machst 90% von der gesamtbreite...
bedenke die 80% der gesamtbreite sind für alle innenliegenden elemente 100% verfügbare breite...

sejuma

Wenn du mit Prozentwerten arbeitest, brauchen die eine Basis, worauf sie sich beziehen.
Deshalb solltest du unbedingt definieren:

Code

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

Siehe auch flexibles Layout

davidos_no.1

Ok...also bezieht sich die Weite eines Elements immer auf die Weite des umschießenden Elements? Beispiel: ich habe #wrapper mit einer Weite von 80%, der #header umschließt. #header soll über die volle Weite von #wrapper gehen, dann schreibe ich es so:

Code

#wrapper {width: 80%; margin: 0px auto;}
     #header {width:100%;}


<div id="wrapper">
     <div id="header">
     </div>
</div>

Läuft das so vom Prinzip her ab oder steckt da ein Denkfehler drinne?

sejuma

Ist korrekt so.

davidos_no.1

Habe mir jetzt mal ein kleines Gerüst gebaut, allerdings klappt das nicht so ganz.

Code

#wrapper {
width: 80%;
height: auto;
}


	#header {
	width: 100%;
	height: auto;
	}

	#main {
	width: 100%;
	height: auto;
	}

		#sidebar {
		width: 30%;
		height: auto;
		float: left;
		text-align: right;
		}

		#content {
		width: 70%;
		height: auto;
		float: left;
		text-align: justify;
		}

	#footer {
	width: 100%;
	height: auto;
	}

Alles anzeigen

Wieso floatet #sidebar nicht links neben #content? Mit Pixeln klappt es...

synaptic

weil du bei 100% die maximale breite erreichst probier es mal mit weniger % also 29% und 69%

sejuma

Klappt bei mir auch mit Prozent (IE).

Prüfe mal, ob du einen qualifizierten Doctype verwendest. http://www.ohne-css.gehts-gar.net/0006.php

Auch das wäre möglich:

Code

#content {
		width: 70%;
		height: auto;
		margin-left: 30%;
		text-align: justify;
		}

davidos_no.1

Zitat von synaptic

weil du bei 100% die maximale breite erreichst probier es mal mit weniger % also 29% und 69%

Ja klar. Das wollte ich ja auch. #sidebar und #content sollen 100% (also die gesamte Weite) von #main umfassen. Habe ich da einen Denkfehler drinne?

Zitat von sejuma
Klappt bei mir auch mit Prozent (IE).

Prüfe mal, ob du einen qualifizierten Doctype verwendest. http://www.ohne-css.gehts-gar.net/0006.php

Auch das wäre möglich:
Code
#content {
		width: 70%;
		height: auto;
		margin-left: 30%;
		text-align: justify;
		}

Ich habe bei mir folgendes stehen, das sollte doch eigentlich korrekt sein?

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

davidos_no.1

Keiner, der mir helfen kann?

Width/Height korrekt angeben

Tags

Benutzer online in diesem Thema