nicht angemeldet
Hallo nochmal!
Ich muss euch hier ja ganz schön auf den Geist gehen. Aber ich stoße halt ständig erneut an meine (engen) Grenzen, und hoffe auf 'erfahrene' Hilfe. :)
Im Moment bereitet mir folgendes Kopfzerbrechen:
(Code-Skizze)
<html>
<body>
<div class="alles" align="center">
<div class="content">
<div class="headbalken"></div>
<p clas="headtext">Dies ist die Seitenüberschrift</p>
</div>
</div>
</body>
</html>
Wozu dann natürlich noch gehört:
html, body {
height:100%;
width:100%;
margin:0;
padding:0; }
.alles {
height:100%;
width:100%;
background-color:#000000; }
.content {
height:100%
width:1000px;
background-color:#FFFFFF; }
.headbalken {
background-color:#123456;
height:100px;
width:1000px; }
.headtext {
color:#000000;
font-family:Verdana; }
Soweit so gut, ein kleines einfaches Layout mit einem stets mittigen Contentstreifen der bei 1024x768 den kompletten Viewport ausfüllen sollte, bei größeren Auflösungen dann rechts und links jeweils Hintergrund zutage treten lässt - schwarzen in der Code-Skizze oben.
Mein Problem: Wie positioniere ich nun sinnvoll ein Logo (png) mit Transparenz optisch auf dem Headbalken. Möglichkeiten die ich nicht in Frage kommen: <img> mit position:fixed direkt auf den headbalken legen, wenn man das Browserfenster dann skaliert, verschiebt durch das Vergrößern/Verkleinern der Randbereiche der Contentbereich und der headbalken sich zwar, das Logo sich jedoch nicht - ist im ungünstigsten Fall dann also links vom Contentbereich oder in der Mitte des headbalkens. Positionieren mit relative geht ebensowenig, dann bricht er nämlich das ganze um und der headbalken rutscht unter das Logo. Eine Idee wäre auch gewesen, das Logo mit float:left und den Headbalken (entsprechend verkürzt) mit float:right auszustatten und dann optisch das Logo so zu gestalten dass rechts ein Teil des Balkens integriert ist. Aber da rendert zumindest FF3 mir eine hässliche weisse Spalte zwischen headbalken und logo.
Ich bin ein bisschen am Ende meines Lateins.
Vorschläge?
Beste Grüße,
Noel