AZ: vertical-align in Blockelementen (Firefox)

SELF-Forum

vertical-align in Blockelementen (Firefox)

AZ
– Informationen zu den Bewertungsregeln

Hallo Forum,

ich bin auf folgendes Problem mit meinem Firefox 2.0.0.6 gestoßen und wollte fragen, ob es dazu eine CSS-basierte Lösung gibt.

Das Problem:
Die Internetseite erzeugt die Struktur
 <div class="box-body">
  <p>
   <img ... >
   <br>
   ... text ...
  </p>
 </div>
. Dabei bekommt der div-Tag eine min-height Angabe für ein einheitliches Aussehen. Um nun den p-Tag vertikal unten anzuordnen, wollte ich diesem einfach ein style="vertical-align:text-bottom;" verpassen.
Geht jedoch leider nicht.

Daher habe ich folgende Testdatei erzeugt (das hallo soll unten stehen.)
<html>
<body>
<p style="background-color: red; min-height: 200px;">
<div style="background-color: yellow; vertical-align:text-bottom;">
hallo
</div>
</p>
</body>
</html>
 ==> klappt wunderbar.
<html>
<body>
<div style="background-color: red; min-height: 200px;">
<p style="background-color: yellow; vertical-align:text-bottom;">
hallo
</p>
</div>
</body>
</html>
  ==> geht nicht.

Mit der webdeveloper-Erweiterung zeigt Firefox an, dass es den "p"-Tag nicht als Blockelement auffasst.

Hat noch jemand eine Idee, wie ich ein p - Tag in einem div vertikal ausrichten kann, wenn mir die genaue Höhe des p-Tags nicht (vorher) bekannt ist?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. vertical-align in Blockelementen (Firefox)

    Engin Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi AZ,

    Hat noch jemand eine Idee, wie ich ein p - Tag in einem div vertikal ausrichten kann, wenn mir die genaue Höhe des p-Tags nicht (vorher) bekannt ist?

    Also meine Idee wäre das ganze mit position:absolute zu lösen, vielleicht nicht der
    sauberste weg aber besser als garnichts.  ;-)

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<title>..::INTCASE::..</title>  
<meta name="author" content="Engin Yildiz" />
~~~~~~css
  
<style type="text/css">  
#rotebox  
{  
background: #f00;  
min-height: 200px  
;position:relative;  
}  
#rotebox p  
{  
width:100%;  
margin:0;  
padding:0;  
background: #ff0;  
position:absolute;  
bottom:0;  
left:0;  
}  
</style>  
<!--[if IE]>  
<style type="text/css">  
#rotebox  
{  
height:200px;  
}  
</style>  
<![endif]-->  
 <!--[if IE 7]>  
<style type="text/css">  
#rotebox  
{  
min-height:200px;  
}  
</style>  
<![endif]-->  

~~~~~~html
  
<html>  
<body>  
<div id="rotebox">  
<p>  
hallo  
</p>  
</div>  
</body>  
</html>

    Im Firefox 2 und IE 6 sieht es denke ich mal wie gewünscht aus,
    Live Demo.

    Grüße,
    Engin
     GYRO

    --
    Dilated peoples|Team Vestax
    Gut ist der, der nach dem finden noch weiß, was er suchte.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. vertical-align in Blockelementen (Firefox)

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    <html>
    <body>
    <p style="background-color: red; min-height: 200px;">
    <div style="background-color: yellow; vertical-align:text-bottom;">

    Daß das div nicht innerhalb des p liegt, ist Dir bewußt?
    Das schließende Tag von p ist optional; da p kein div enthalten kann, wird es also implizit geschlossen, bevor das div beginnt.

    vertical-align wirkt sich nur bei inline- und bei table-cell-Elementen aus.
    Dein div ist keins von beiden.

    </p>

    Du schließt hier ein p, das nirgends geöffnet wurde.

    <div style="background-color: red; min-height: 200px;">
    <p style="background-color: yellow; vertical-align:text-bottom;">

    vertical-align wirkt sich nur bei inline- und bei table-cell-Elementen aus.
    Dein p ist keins von beiden.

    Im ersten Versuch scheint es zu klappen, weil das p _vor_ dem div eine Mindesthöhe hat - das div wird aber nicht innerhalb des p an dessen Unterkante ausgerichtet.

    Mit der webdeveloper-Erweiterung zeigt Firefox an, dass es den "p"-Tag nicht als Blockelement auffasst.

    Wie genau ermittelst Du das?

    Hat noch jemand eine Idee, wie ich ein p - Tag in einem div vertikal ausrichten kann, wenn mir die genaue Höhe des p-Tags nicht (vorher) bekannt ist?

    Über Positionierung oder über table-cell.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln