✔ vertical-align: middle neben div

[vom_manuel]

Hallo zusammen,

ich möchte neben einem Bild (mit "css-abgerundeten" Kanten, daher im <div>) einen Text vertikal in der Mitte ausrichen.

Das ganze sieht so aus:

<li class="fotoserie" id="1">
		<a href="http://blackbox/janneundderfotoapparat/fotos.php?fotoserie=1">
			<div class="foto">
				<div class="ul"/>
				<div class="ur"/>
				<div class="ll"/>
				<div class="lr"/>
				<img src="fotos.php-Dateien/1.jpg"/>
			</div>
			<div class="fotoserie_title">Fotoserie 1</div>
		</a>
	</li>

Das Foto in <div class="foto"> wird durch ul, ur, ll und lr "abgerundet" und der Text "Fotoserie 1" soll vertikal in der Mitte daneben stehen.

Leider erscheit der Text aber unter dem Foto und die abgerundeten Kanten verrutschen.

Das ganze kann man sich hier anschauen: http://www.janneundderfotoapparat.de/fotos.php.html

Hat jemand eine Idee wie ich das richtig hinbekomme?

Danke für Hinweise!
Manuel

 

[Maik]

Hi,

schau dir hierzu mal http://www.pmob.co.uk/temp/vertical-align3.htm oder auch http://www.pmob.co.uk/temp/vertical-align11.htm an.

mfg Maik

 

[vom_manuel]

hmm, dem li-Tag habe ich ja schon "vertical-align: middle" zugewiesen. Wenn ich aus den foto-, ul-, ur-, ll- und lr-Tags statt divs spans mach, wird auch alles in einer Zeile ausgegeben.
Nur dann stimmen die Positionen der abgerundeten Kanten nicht mehr mit den Kanten des Bildes überein.

 

[Maik]

Das a-Element (=Inline-Element) darf aber kein div-Element (=Block-Element) enthalten, sondern nur weitere Inline-Elemente - siehe hierzu http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente.

Wenn du stattdessen das span-Element verwendest, dass ebenso zur Familie der Inline-Elemente zählt, muß dieses mit display:block formatiert werden, um die "Block-Level-Charakteristika" eines Bockelements zu erhalten.

mfg Maik

 

[vom_manuel]

Hi,

danke für die Antwort.

Ich habe mal den a-Tag rausgenommen. Leider ohne Erfolg: wieder der Zeilenumbruch.

Wenn ich die Divs durch spans ersetze und dem span.foto-Element display:block zuweise, bin ich ebenfalls da, wo ich auch jetzt bin: "Fotoserie 1" erscheint in einer neuen Zeile.
Weise ich den anderen spans desweiteren auch display: block zu, bleibt es dabei: "Fotoserie 1" erscheint in einer neuen Zeile.

Oder habe ich dich falsch verstanden?

 

[Maik]

Kannst du mal den Probelauf mit den span-Elementen online stellen?

mfg Maik

 

[Maik]

Andere Frage: liegt das Grafikelement in einer vorgegebenen Größe vor, oder variiert sie?

mfg Maik

 

[vom_manuel]

Klar: http://www.janneundderfotoapparat.de/fotos.php.2.html

Die Größe soll bei allen gleich bleiben.

 

[Maik]

Und noch ein Seiteneinwurf, um eine Box mit abgerundeten Ecken zu generieren

http://www.curvycorners.net/examples/demo2.html @ http://www.curvycorners.net

mfg Maik

 

[vom_manuel]

Der ist mit javascript. Das finde ich nicht so schön.

Der "Rundung"-Ansatz funktioniert ja: Wenn ich "Fotoserie 1" weglasse, sieht es schön aus:
http://www.janneundderfotoapparat.de/fotos.php.3.html

Nur dieses "Fotoserie 1" vertikal in der Mitte daneben auszurichten macht mir Sorgen.