Anordnung von DIVs und Text-Ausrichtung

[Muckel1986]

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]

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

1. http://www.pmob.co.uk/temp/vertical-align3.htm
   (die Bilddateien können durch Text ersetzt werden)
   
   
2. 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)
   
   
3. 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]

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]

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]

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]

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

Aber das/der Korn war lecker

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]

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

Soso.

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]

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]

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.

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.

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.