nicht angemeldet
Hilfe! Verstehe die Positionierung nicht
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">
Überschrift
</p>
<ul class="print-buttons">
<li>
<button>Button1</button>
</li>
<li>
<button>Button1</button>
</li>
</ul>
</div>
</body>
</html>
Vielen Dank!
-- Skeeve
-
Hi,
.header {
vertical-align:middle;da das ein Block-Element ist, wird diese Eigenschaft ignoriert - AFAIK sogar im quirks mode.
.print-buttons {
position:absolute;damit nimmst Du sie aus em Fluss und sie beeinflussen auch das Elternelement nicht mehr.
Dein Wunsch dürfte sich nur mit Tabellen(eigenschaften) umsetzen lassen.
freundliche Grüße
Ingo-
Moin!
Dein Wunsch dürfte sich nur mit Tabellen(eigenschaften) umsetzen lassen.
Ich habe es befürchtet! Dankeschön! Werde ich mich also darauf konzentrieren...
-- Skeeve
-