Die Schwierigkeit ist der Kasten rechts mit den Buttons.
Auf das minimum reduziert und unausgeschmückt soll es so oder so ähnlich aussehen:
Mein Logo
Buttons
Jetzt müssen wir nur verstehen wie der Aufbau ist.
Das was Du immer im Quelltext siehst, als div bezeichnet, ist ja nichts anderes als eine Box.
In diesem Fall haben wie eine Box und darin befinden sich zwei boxen,
Eine links und die andere rechts positioniert. Alle Boxen haben hier eine Höhe von 30px.
Vereinfacht haben wir in der HTML:
<div class="green">
<div class="red">Mein Logo</div>
<div class="orange">Buttons</div>
</div>
Daher ist unsere CSS (background entspricht der jeweiligen Farbe) erstmal
.green {background:green; height:30px}
.red {background:red; height: 30px}
.orange {background:orange; height: 30px}
Doch das wird nicht klappen, weil die div-elemente von Haus aus einen Standardwert haben.
Das ist display: block.
Das heißt sie zieht sich -solange ich nichts anderes befehle- bis zum Ende des vorhandenen, restlichen Platzes.
Zum besseren Verständnis:
Die grüne Box alleine verhält sich so:
Und was passiert, wenn ich alle drei Boxen wie oben beschrieben miteinander verschachtel?
Mein Logo
Buttons
Die zwei Boxen innen verhalten sich wie die grüne.
Ziehen sich bis zum Ende, stellen sich untereinander und überdecken den Hintergrund der grünen Box.
Es wird also Zeit den inneren Boxen bescheid zu geben, dass sie sich anders verhalten sollen als sie standardmäßig unterwegs sind. Den Befehl aushebeln.
Dafür gibt es für diesen Zweck die CSS-Anweisung float (engl.sowas wie fließen,schweben,gleiten).
Da hätten wir float:right - float:left - float:none
CSS:
.green {background:green; height: 30px}
.red {background:red; height: 30px;float:left}
.orange {background:orange; height: 30px; float:right}
Mein Logo
Buttons
Das einzige was wir noch machen müssen ist, bescheid zu geben, dass wir mit dem floaten aufhören.
Das machen wir mit CSS-Anweisung clear: both (tradizionelle Methode.gibt andere,aber lassen wir erstmal gut sein)
Hier um Verwirrung zu vermeiden die gesamte CSS nochmal,bevor wir anfangen sie auszuschmücken.
.green {background:green; } << Höhe jetzt weggelassen,damit sie sich automatisch anpasst
.red {background:red; height: 30px;float:left}
.orange {background:orange; height: 30px; float:right}
.clear {both}
Gesamte HTML:
<div class="green">
<div class="red">Mein Logo</div>
<div class="orange">Buttons</div>
<div class="clear"></div>
</div>
Und jetzt fügen wir endlich unsere social-things-bums ein.
Ich nehme die ersten drei, die mir vor die Flinte laufen und lade sie auf Picasa hoch.
<div class="green">
<div class="red">Mein Logo</div>
<div class="orange">
<img src="Pfad zum Bild1" alt="">
<img src="Pfad zum Bild2" alt="">
<img src="Pfad zum Bild3" alt="">
</div>
<div class="clear"></div>
</div>
Und hier das Ergebnis mit minimale Veränderungen
ICH HABE KEINE LUST MEHR ZU SCHREIBEN
Habe mich sehr bemüht verständlich zu schreiben.
Fachchinesisch möglichst vermieden.
Ein Webdesigner würde mir die Ohren lang ziehen, aber who cares?
