# Anordnung von DIVs und Text-Ausrichtung



## Muckel1986 (27. August 2010)

Guten Abend zusammen,

habe gerade ein Problem mit meiner DIV-Anordnung. Idee ist, dass ich für diesen zusammenhängenden Bereich ein Umspannendes DIV (oben) nehme. In diesem DIV sollen dann zwei Bereiches sein (grafik und logo) die sich links bzw. rechts anordnen. Dazwischen soll die Überschrift der Seite mit einer Kurzbeschreibung sein, welches zusammen wiederum in einem DIV (titel) ist.

Der html-Aufbau schaut so aus: 
	
	
	



```
<div id="oben">
	<img id="logo" src="Bilder/Logo/fueller1.jpg" alt="Ein F&uuml;ller mit Kappe als Logo der Seite," />
	<img  id="grafik" src="Bilder/Logo/kothe-04-sw.gif" alt="Eines der wechselnden Fotos." />
	<div id="titel">
		<h1>Titel der Seite</h1>
		<p>Beschreibung der Seite</p>
	</div>
</div>
```
 Der CSS-Teil schaut so aus: 
	
	
	



```
#oben {
	display:block;
	padding:0em;
	margin:0em;
	text-align:center;
	border:1px solid red;
}

#logo {
	float:right;
	display:block;
	padding:0em;
	margin:0em;
	width:25%;
	border:none;
}

#grafik {
	float:left;
	display:block;
	padding:0em;
	margin:0em;
	width:25%;
	background-color:darkblue;
	border:none;
}

#titel {
	display:block;
	padding:0em;
	margin:0em;
	border:none;
}
```
 Nun habe ich das Problem, dass die beiden Bilder über das DIV oben hinaus ragen. Das sollte so nicht sein. Ändern kann ich es, wenn ich vor dem Ende von "oben" einen Umbruch mit clear:both schreibe: 
	
	
	



```
<br style="clear:both;" />
```
 Das Ergebnis ist dann aber so, dass der Bereich in dem der Titel und Untertitel ist, nur zwischen rechts & links zentriert ist. Dies hätte ich am liebsten auch von oben & unten. Wie kann ich das umsetzten? Nur wenn ich das DIV als Tabellen-Zelle definiere? Wenn ja, können sich dann die folgenden DIVs noch richtig anschließen?

Vielen Dank
Muckel


----------



## SpiceLab (27. August 2010)

Muckel1986 hat gesagt.:


> Nun habe ich das Problem, dass die beiden Bilder über das DIV oben hinaus ragen. Das sollte so nicht sein. Ändern kann ich es, wenn ich vor dem Ende von "oben" einen Umbruch mit clear:both schreibe:
> 
> 
> Das Ergebnis ist dann aber so, dass der Bereich in dem der Titel und Untertitel ist, nur zwischen rechts & links zentriert ist. Dies hätte ich am liebsten auch von oben & unten. Wie kann ich das umsetzten? Nur wenn ich das DIV als Tabellen-Zelle definiere? Wenn ja, können sich dann die folgenden DIVs noch richtig anschließen?


Ich versteh zwar nicht, wie anhand des Stylesheets die Bilder nach *oben* über das Elternelement hinausragen, aber das soll hier mal nicht weiter von Belang sein.

Da die Höhen nicht bekannt sind, um das erforderliche Maß der vertikalen Zentrierung zu ermitteln, läuft es auf die Tabelleneigenschaften der display-Eigenschaft in Kombination mit *vertical-align:middle* hinaus.

Beispiele gefällig?

Aller guten Dinge sind drei 


http://www.pmob.co.uk/temp/vertical-align3.htm 
(die Bilddateien können durch Text ersetzt werden)


http://www.pmob.co.uk/temp/vertical-align9.htm 
(hier kommt zwar *vertical-align:bottom* zum Zuge, ist aber nebensächlich, da es sich in *middle* umwandeln lässt)


http://www.pmob.co.uk/temp/vertical-align11.htm


Und was verstehst du hier bitte unter dem richtigen "Anschluß" der nachfolgenden Blöcke?

Ich geh bei deinem Codeschnipsel davon aus, dass nach diesem DIV-Block mit dem eindeutigen Bezeichner *oben* ein Block namens *mitte* folgt, der sich meines Erachtens dort auch sauber anschließen lässt.

Also nicht gleich  schwarz sehen, nur weil du dich mit dem CSS-Handlling schwer tust - insbesondere wenn float-Eigenschaften im Spiel sind ;-)


----------



## SpiceLab (27. August 2010)

spicelab hat gesagt.:


> Ich versteh zwar nicht, wie anhand des Stylesheets die Bilder nach *oben* über das Elternelement hinausragen, aber das soll hier mal nicht weiter von Belang sein.


Mit oben war nicht von der Ausrichtung, sondern von dem ID-Bezeichner die Rede 

Auch ein blindes Huhn findet sein Korn - zum Wohl :suspekt:


----------



## Muckel1986 (27. August 2010)

Die Bilder ragen nach unten durch das DIV id="oben" heraus. (Schlechte Formulierung...)

Gut, dann muss ich das wohl mit der Tabellen-Zelle machen.

Liebe Grüße
Muckel


----------



## Jan-Frederik Stieler (27. August 2010)

Hi,
also ersteinmal benötigst du kein display:block; für deine Divs.
Um dein Vorhaben umzusetzen benötigst du auch kein Manteldiv. Um deinen Titel mittig zu bekommen weißt du diesem ein text-align: center zu.
Aber ehrlich, ich verstehe nicht so ganz was du eigentlich erreichen willst. Denn ich denke das dies nur ein Schnipsel aus der gesamten Webseite ist.

Gruß


----------



## SpiceLab (28. August 2010)

Muckel1986 hat gesagt.:


> Die Bilder ragen nach unten durch das DIV id="oben" heraus. (Schlechte Formulierung...)


Aber das/der Korn war lecker 



Muckel1986 hat gesagt.:


> Gut, dann muss ich das wohl mit der Tabellen-Zelle machen.


Tabellenzelle <td>? Warum das denn? :suspekt:

In den Quellcodes der drei Beispiele suchst du dir einen Wolf nach so einer Tabelle.

*display:table* und *display:table-cell* kommen dort zum Einsatz, damit die *vertical-align*-Eigenschaft genutzt werden kann.


----------



## SpiceLab (28. August 2010)

Jan-Frederik Stieler hat gesagt.:


> Um deinen Titel mittig zu bekommen weißt du diesem ein text-align: center zu.


Soso.



Muckel1986 hat gesagt.:


> Das Ergebnis ist dann aber so, dass der Bereich in dem der Titel und Untertitel ist, nur zwischen rechts & links zentriert ist. Dies hätte ich am liebsten auch von oben & unten.



Mit *text-align:center* wird es ein schweres Unterfangen, den Inhalt vertikal zu zentrieren.


----------



## Jan-Frederik Stieler (28. August 2010)

> Soso.


Was soll dieser Abfällige Ton?


> Mit text-align:center wird es ein schweres Unterfangen, den Inhalt vertikal zu zentrieren.


Es war nie die Rede davon das er den Text komplett mittig haben möchte. Aber text-align:center erzeugt einen mittigen Satz.


----------



## SpiceLab (28. August 2010)

Jan-Frederik Stieler hat gesagt.:


> Was soll dieser Abfällige Ton?


Abfällig?  Witz komm' raus, du bist umzingelt 

Da ist seinereiner wohl irgendwie irgendwo irgendwann auf dem falschen Fuß gelandet, dass er meinen Kommentar im falschen Hals verschluckt, und als "abfällig"  ausspuckt  

Da bist du  gleichermaßen falsch gewickelt, wie mit deinem vermeintlichen Lösungsvorschlag.



Jan-Frederik Stieler hat gesagt.:


> Es war nie die Rede davon das er den Text komplett mittig haben möchte. Aber text-align:center erzeugt einen mittigen Satz.


Es stand nie die Frage im Raum, wie der Text zwischen den Bildern horizontal zentriert werden kann, denn das ist doch nach seiner eigenen Aussage schon längst Bestand, sondern nach den Möglichkeiten zur vertikalen Zentrierung.



Muckel1986 hat gesagt.:


> Das Ergebnis ist dann aber so, dass der Bereich in dem der Titel und Untertitel ist, nur zwischen rechts & links zentriert ist. Dies hätte ich am liebsten auch von oben & unten. Wie kann ich das umsetzten?


Hätte ich sonst die drei Beispielvarianten  für *vertical-align* empfohlen?

Wer lesen und das Gelesene verstehen kann, ist klar im Vorteil.


----------

