Skeeve: Hilfe! Verstehe die Positionierung nicht

Beitrag lesen

SELF-Forum

Hilfe! Verstehe die Positionierung nicht

Skeeve
– Informationen zu den Bewertungsregeln

Moin!

Ich verzweifel hier noch!

Ich möchte eine Überschrift vertikal mittig in einer grauen Box positionieren.

Gleichzeitig sollen in derselben Box rechts 2 Button untereinander stehen.

Die Höhe der Box soll nun mindestens so hoch sein, wie die 2 Buttons + etwas Abstand. Gleichzeitig soll sie aber, bei langen Überschriften oder großen Fonts, sich der benötigten Höhe anpassen.

Mein Versuch (s.u.) scheitert kläglich:
1. Die Überschrift ist links oben in der Box, statt vertical-align:middle
2. Die Buttons ragen rechts aus der Box hinaus
3. Die Box passt sich nicht der Höhe der Buttons an.

Kann mir bitte jemand auf die Sprünge helfen?

<html>  
 <head>  
  <style type="text/css">  
   .header {  
    background-color:#efefef;  
    vertical-align:middle;  
    padding:0 .5em 0 .5em;  
    min-height:3em;  
   }  
  
   .print-buttons {  
    position:absolute;  
    top:0px;  
    right:0px;  
    list-style-type:none;  
   }  
  
   .print-buttons button {  
    margin-top: .5em;  
    margin-bottom: .5em;  
   }  
  </style>  
 </head>  
  <!-- gewünschtes Layout  
+- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -+  
|                                                      [ Button1 ]  |  
|  überschrift                                                      |  
|                                                      [ Button2 ]  |  
+- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -+  
  -->  
 <body>  
  <div class="header">  
   <p class="headline">  
    &Uuml;berschrift  
   </p>  
   <ul class="print-buttons">  
    <li>  
     <button>Button1</button>  
    </li>  
    <li>  
     <button>Button1</button>  
    </li>  
   </ul>  
  </div>  
 </body>  
</html>

Vielen Dank!

-- Skeeve

Beitrag melden
–
Informationen zu den Bewertungsregeln