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:

Code :

1 2 3 4 5 6 7 8 9 10 11 12

<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

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

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.

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...nline_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

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?

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

mfg Maik

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

mfg Maik

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

Die Größe soll bei allen gleich bleiben.

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

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.

Nehme ich für .foto display:block, gebe Höhe und Breite an und float:left sieht es schon ganz ordentlich aus:
http://www.janneundderfotoapparat.de/fotos.php.4.html

Nur funktioniert druch das float:left das vertikale Ausrichten des Textes nicht mehr.
Gibts da irgendeinen Trick?

Moin,

der Trick liegt einfach darin, dass die relevante Box .fotoserie_title nicht floaten darf

Code css:

1 2 3 4 5 6 7 8 9 10

ul#fotoserie li span {         float:left;  /* gilt für alle span-Elemente, um ihnen "Block-Level-Charakteristika" zu verleihen */ }   ul#fotoserie li span.title span.fotoserie_title {         display:table-cell;         vertical-align:middle;         height:65px;         float:none; /* hebt für dieses span-Element die "globale"  float:left-Deklaration auf */ }

Dein vorgestelltes Konzept hab ich bei Null beginnend auf meine Weise umgesetzt, und es funktioniert wie gewünscht in allen Browsern, die die Tabellenwerte der display-Eigenschaft (hier table-cell) zu interpretieren wissen, die hier für eine Angabe zu vertical-align erforderlich ist - bei mir sind das FF, Mozilla, NN, Opera, Safari und Seamonkey. Für den IE dürften dir mein eingangs empfohlenen Links weiterhelfen, da sie einen Workaround für ihn enthalten.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-02-21">

<title>tutorials.de | demo_vom_manuel</title>

<style type="text/css">
<!--
ul#fotoserie {
        list-style:none;
        margin:0;
        padding:0;
}

ul#fotoserie li span {
        float:left;
}

ul#fotoserie li span.foto {
        position:relative;
        margin-right:30px;
}

ul#fotoserie li span.foto span.ul,
ul#fotoserie li span.foto span.ur,
ul#fotoserie li span.foto span.ll,
ul#fotoserie li span.foto span.lr {
        position:absolute;
        height:10px;
        width:9px;
        font-size:0;
}

ul#fotoserie li span.foto span.ul {
        top:0;
        left:0;
        background:transparent url(ul.gif) no-repeat scroll left top;
}

ul#fotoserie li span.foto span.ur {
        top:0;
        right:0;
        background:transparent url(ur.gif) no-repeat scroll right top;
}

ul#fotoserie li span.foto span.ll {
        bottom:0;
        left:0;
        background:transparent url(ll.gif) no-repeat scroll left bottom;
}

ul#fotoserie li span.foto span.lr {
        right:0;
        bottom:0;
        background:transparent url(lr.gif) no-repeat scroll right bottom;
}

ul#fotoserie li span.foto img {
        vertical-align:middle;
        border:0;
}

ul#fotoserie li span.title span.fotoserie_title {
        display:table-cell;
        vertical-align:middle;
        height:65px;
        float:none;
}
-->
</style>

</head>
<body>

<ul id="fotoserie">
    <li>
        <a href="#">
           <span class="foto">
               <span class="ul">&nbsp;</span>
               <span class="ur">&nbsp;</span>
               <span class="ll">&nbsp;</span>
               <span class="lr">&nbsp;</span>
               <img src="1.jpg" alt="">
           </span>
           <span class="title">
               <span class="fotoserie_title">Fototitel</span>
           </span>
        </a>
    </li>
</ul>

</body>
</html>

mfg Maik

Super, ich werd mir deine Lösung nochmal genau anschaun.
Danke für die viele Mühe