nicht angemeldet
Hilfestellung benötigt: Überschrift mit Buttons
Moin!
Was ich gerne mit CSS erreichen möchte ist folgendes:
Eine Überschrift soll in einer grauen stehen und am rechten Rand in dieser Box sollen 2 Buttons stehen. Mit <table> wäre das in so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.docHead {
background-color:#efefef;
font-size:17px;
}
.printButtons {
float:right;
}
</style>
</head>
<body>
<table class="docHead" width="100%">
<tr>
<td rowspan="2">
Headline
</td>
<td align="right">
<button>do this</button>
</td>
</tr>
<tr>
<td align="right">
<button>do that</button>
</td>
</tr>
</table>
</body>
</html>
Mein Versuch mit CSS sieht so aus und ist nicht im Mindesten das erwartete:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.docHead {
background-color:#efefef;
font-size:17px;
}
.printButtons {
float:right;
}
</style>
</head>
<body>
<div class="docHead">
<div class="printButtons">
<p>
<button>do this</button>
</p>
<p>
<button>do that</button>
</p>
</div>
Headline
</div>
</body>
</html>
Vieleicht kann mir einer von Euch auf die Sprünge helfen, wo mein Denkfehler liegt und wo ich am besten diese Wissenslücken füllen kann?
In jedem Fall schaue ich jetzt erst noch mal durch SelfHTML...
Dank im voraus
-- Skeeve
-
Moin!
Meine Lösung sieht nun so aus.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> .doc-head { background-color:#efefef; font-size:20px; vertical-align:middle; padding:0 .5em 0 .5em; min-height:3em; } .doc-head .headline { float:left; } .print-buttons { list-style-type:none; text-align:right; } .print-buttons button { margin-top: .5em; margin-bottom: .5em; } </style> </head> <body> <div class="doc-head"> <p class="headline"> Headline </p> <ul class="print-buttons"> <li><button>do this</button></li> <li><button>do that</button></li> </ul> </div> </body> </html>Ich bitte um konstruktive Kritik ;-)
-- Skeeve