Felix Riesterer: Vertikale Zentrierung eines Bildes zwischen zwei Linien

Beitrag lesen

SELF-Forum

Vertikale Zentrierung eines Bildes zwischen zwei Linien

Felix Riesterer Homepage des Autors
– Informationen zu den Bewertungsregeln

Lieber Wolfgang,

ich habe mir Dein Testbeispiel etwas genauer angesehen. Das <input>-Element braucht aus struktureller Sicht ein Blockelement, innerhalb dessen es stehen kann (das <form>-Element gilt nicht), z.B. einen Textabsatz. Die tatsächliche Höhe dieses Textabsatzes ist dann ausschlaggebend, ob unterhalb des Bildes noch ein Abstand ist, oder nicht.

In meinem Gegenbeispiel habe ich die <hr>-Elemente entfernt. Dafür habe ich dem <form>-Element einen oberen und unteren Rahmen geben, um das visuell Wesentliche sichtbar zu machen.

Außerdem habe ich diese grässlichen inline-Styles durch ein kleines Stylesheet im <head> Deines Beispiels ersetzt. Das lässt sich dann später besser in eine externe CSS-Datei auslagern...

<!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 http-equiv="Content-Style-Type" content="text/css">  
  <meta http-equiv="Content-Script-Type" content="text/javascript">  
  <title>Test</title>  
  <style type="text/css">

    body { background-color:gray; }  
    form, form p, input { margin: 0 auto; padding: 0; }  
    form { border-top: 1px solid white; border-bottom: 1px solid black; }  
    form p { height: 27px; }

  </style>  
</head>  
<body>  
<p>Test</p>  
<form action="http://www.example.test/cgi/index.pl"  method="post">  
  <p><input type="image" src="/bilder/d.gif"></p>  
</form>  
<p>Test</p>  
</body>  
</html>

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
Beitrag melden
–
Informationen zu den Bewertungsregeln