nicht angemeldet
Wie positioniere ich das Logo?
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
-
Hallo nochmal!
Moin!
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. :)
Wozu gibt's Foren? ;)
Sofern ich richtig verstanden habe, was du meinst, kannst du deine Ebenen ja überlagern. Das Hintergrundbild, dass überlagert wird, wird als Hintergrund eingebunden und das Bild das überlagert bindest du mithilfe von <img> ein.
Ich habe mal eben schnell ein kleines Beispiel erstellt: http://webf19.mc6.methfessel-computers.de/ueberlagert.htmlIch hoffe es hilft. :-)
Gruß
Christian Wansart-
Bei dem Thema fällt mir spontan der Webauftritt von Jürgen Vogel ein
http://www.derjoerchen.de/ -
Hallo nochmal!
Moin!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. :)
Wozu gibt's Foren? ;)Sofern ich richtig verstanden habe, was du meinst, kannst du deine Ebenen ja überlagern. Das Hintergrundbild, dass überlagert wird, wird als Hintergrund eingebunden und das Bild das überlagert bindest du mithilfe von <img> ein.
Ich habe mal eben schnell ein kleines Beispiel erstellt: http://webf19.mc6.methfessel-computers.de/ueberlagert.htmlIch hoffe es hilft. :-)
Gruß
Christian WansartPuh, ich glaub ich leide etwas unter Schlafmangel >.<
Jetzt wo du es mir vor Augen hältst, fällt mir auch wieder ein dass ich so Sachen mit einem background-image in einem DIV welches dann ein <img> enthält ja auch schon gemacht hab... *klatsch*Vielen Dank für den Anstoß in die richtige Richtung! ;)
Beste Grüße,
Noel
-