nicht angemeldet
In Inline-Divs die Inhalte vermitteln
0 0 
Matthias Apsel
In Inline-Divs die Inhalte vermitteln
Hello,
ich bekomme das leider nicht hin.
Ich habe eine Reihe von Divs, in denen je ein Bild dargestellt wird. Die Bilder sollen innerhalb der Divs vermittelt ausgerichtet werden.
div.thumbframe
{
height:<?php echo (THUMB_SIZE + 8); ?>px;
width:<?php echo (THUMB_SIZE + 8); ?>px;
text-align:center;
vertical-align:middle;
background-color:#FFEEEE;
margin:4px;
padding-top:2px;
display:inline;
float:left;
border:1px solid black;
}
div.thumbframe p
{
margin-top:0px;
margin-bottom:4px;
}
Die Bilder befinden sich jeweils im p-Element
In der Breite klappt das auch, in der Höhe leider nicht.
Jetzt bin ich etwas ratlos. Woran liegt es?
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
Hallo Tom,
» div.thumbframe > { > height:<?php echo (THUMB_SIZE + 8); ?>px; /* ungültiger Wert für height :-) */ > width:<?php echo (THUMB_SIZE + 8); ?>px; /* dito */ /* PHP-Code ist für clientseitige Problem irrelevant, aber das weißt Du doch */ > text-align:center; > vertical-align:middle; > background-color:#FFEEEE; > margin:4px; > padding-top:2px; /* was denn jetzt? */ > display:inline; /* oder doch display: block; siehe [link:http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#dis-pos-flo] */ > float:left; /* warum nicht display: inline-block; ? */ > border:1px solid black; > }Freundliche Grüße
Vinzenz
-
Hello lieber Vinzenz,
ich wünsche Dir ein Frohes Neues Jahr mit 366 flotten Tagen :-)
/* PHP-Code ist für clientseitige Problem irrelevant, aber das weißt Du doch */
warum nicht display: inline-block; ?
Du hast ja Recht. Ich wollte es "quick & dirty" repariern. Und dann klingelte auch gerade noch das Telefon: Alarm bei meinen Gästen im Ferienhaus... Also habe ich nur schnell Return gedrückt und weg.
Aber das Problem muss ich grundlegend klären und das mache ich dann wohl am besten extrahiert. Ich werde jetzt erstmal meine Skizze suchen, die genau zeigt, was dabei eigentlich herauskommen soll. Die werde ich dann einscannen und hier verlinken. Du weißt: manchmal helfen die Buntstifte auch im Computerzeitalter noch weiter.
Und dann werde ich meine Gehversuche nochmal ausführlicher darlegen und die Problemchen beschreiben.
Das "inline-block" hatte ich schon drin zwischenzeitlich, aber irgendwie hat es das Problem mit dem vertikalen Vermitteln auch nicht gelöst.
PS: Auth fürs Forum ist mal wieder gestört
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
-
Om nah hoo pez nyeetz, Tom!
leg noch eine passende Zeilenhöhe fest.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Tom!
leg noch eine passende Zeilenhöhe fest.
guckst du
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Tom</title> <style type="text/css"> div { width: 400px; height: 500px; line-height: 500px; display: inline-block; border: 5px solid gold; text-align: center;} img { vertical-align: middle; } </style> </head> <body> <div> <img src="http://www.billiger-im-urlaub.de/germany/germany_borders_only.gif" alt="deutschland"> </div> <div> <img src="http://www.billiger-im-urlaub.de/austria/austria_borders_only.gif" alt="österreich"> </div> </body>in HTML5 wohl figure statt div.
Matthias
--
1/z ist kein Blatt Papier.
-