[X-Tractor]

Hi,

da ich ja desöfteren mal Probleme mit CSS habe, habe ich mal angefangen mir irgendwelche Aufgaben zu stellen, nur um das mal ein wenig mehr zu lernen.
Allerdings bin ich jetzt wieder an einem Punkt, wo ich nicht weiterkomme, vielleicht könnt ihr mir da etwas helfen.

Es geht um folgendes:
Das hier möchte ich in HTML mit CSS umsetzen:

Die Frage ist, wie kriege ich den gelben Container rechtsoben dran?

Folgenden Code habe ich in der CSS Datei:

body	{
	margin:0;
	height:100%;
	background-color:#273B53;
	}

.boxlinks 	{
		background-color:#5C7AA0;
		height:100%;
		width:30%;
		border-right:2px #fff solid;
                float:left;
		}

.boxtoprechts	{
		background-color:#FFFF00;
		height:20%;
		width:70%;
		border-bottom:2px #fff solid;
		float:right;
		margin-top:0px; 
                margin-left:100px;		
		}

In der HTML steht folgendes:

<div class='boxlinks'>
</div>

<div class='boxtoprechts'>
</div>

Aber das geht irgendwie nicht. Ich hoffe ihr könnt mir weiterhelfen.

Dankeschön!

[Greg5000]

Gib .boxlinks float:left;

[X-Tractor]

Ja, hatte ich schon vorher ausprobiert. Es ist nur so, dass
die Box dann weiterhin unten rechts angeordnet ist.
Die ist dann am unteren Bildschirmrand, weiterunten als die linke Box und nicht neben ihr.

Habe auch schonmal mehrere Seiten durchforstet, aber nichts dazu gefunden.

[Greg5000]

Das liegt am Boxmodel. Rahmen und padding wird zur Breite addiert. Versuch einfach mal:

*{margin:0; padding:0;}

Und gib keinen Rahmen an. Ansonster wäre es nicht schlecht, wenn Du die Seite mal hochladen könntest.

Achja, einen vernünftigen Doctype und HTML-Grundgerüst hast Du auch, oder?

[Mary Huana]

top:0 px;

[Greg5000]

Super Beitrag, Mary. Aber was soll das bringen? Sind die Container absolut positioniert o.Ä.? Nein, und das ist auch gut so

[X-Tractor]

Habs mal angehängt.
Mit Padding:0;... ging es auch nicht

Den unteren Rahmen wollte ich designtechnisch einbauen, weil ich ihn toll finde.

[Greg5000]

Da liegt es u.a. am margin-left. 70% + 30% nimmt doch schon 100% der Breite ein, wie sollen da noch 100px Abstand zwischengeklebt werden? Und einen Doctype hattest Du genausowenig, wie ein komplettes HTML-Grundgerüst (html und body musst Du auch wieder schließen)!

[X-Tractor]

Ah, ok, verstehe. Aber geht das nicht auch noch, dass man den weißen Strich an der linken Box hat? Oder geht das überhaupt nicht?

[Greg5000]

Klar geht das, war ja vorher auch richtig. Dann musst Du nur etwas von der Breite wegnehmen, damit trotzdem alles passt. Wieviel du wegnehmen musst ist sone Sache, wenn man %- und px-Angaben mischen möchte.

[Mary Huana]

Zitat von Greg5000 

... Sind die Container absolut positioniert o.Ä.? Nein, und das ist auch gut so

..., weil ?

Super Beitrag, Greg. Was soll uns Unwissenden das bringen, hast Du irgendwo eine Erklärung dafür, o.Ä.?

Ich hatte tatsächlich übersehen, dass keine position definiert ist.
Da beide divs direkt im body liegen, spricht doch nichts gegen
position:absolute ?

..und wenn Du immer genervt bist (was für Mitmenschen unangenehm ist), rauch mal 'ne Tüte, dicker

Mary

[Greg5000]

Weil es mit absoluter Positionierung fast immer Probleme gibt. Ganz besonders bei unerfahrenen Webautoren, aber auch sonst.

Was soll uns Unwissenden das bringen, hast Du irgendwo eine Erklärung dafür, o.Ä.?

Ist Dein Codeschnipsel hilfreicher?

..und wenn Du immer genervt bist (was für Mitmenschen unangenehm ist), rauch mal 'ne Tüte, dicker

Was glaubst Du, wie unangenehm das erst für mich ist. Würde ih einen Rauchen, würden mich gewisse Dinge erst recht nerven, digger.

Fühl Dich nicht auf den Schlips getreten, ich bin gar nicht so gemein