SammyCircle
Grünschnabel
Moin!
Ich bin gerade dabei eine Homepage zu entwickeln und habe auch sofort ein Problem.
Die Absicht war es, ein Logo mittig im Bild zu platzieren. In diesem Logo ist ein Streifen der an der rechten Seite des Logos endet.
Hieran wollte ich ein weiteres div-Element enfügen, dass diesen Streifen bis zum Rand weiterführt.
Damit das Ganze flüssig aussieht, hab ich also beim rechten div-Element als Position "relative" benutzt.
Wenn ich nun aber bei der Breite ein "auto" verwende funktioniert das beim IE, aber beim Firefox wird der Streifen um die Breite des Logos erweitert.
Ich weiß auch schon, dass das ein Problem mit der relativen Positionierung ist, aber ich habe keine Ahnung wie ich das beheben kann.
Ich hoffe ihr könnt mir weiterhelfen. ^^
Achja! Vielleicht hilf euch das hier beim Verstehen der benutzen Werte:
balken.png : 70x187
bild.png: : 900x600
P.S.: Vielleicht fällt es dem Einen oder Anderen auf, aber ich habe keine genaue Ahnung davon,
was ich da überhaupt mit dem "left:100%" und "margin-top" und so gemacht hab.
Hab das einfach so mit n bischen Logik hingedreht, bis es gepasst hat.
Ich bin gerade dabei eine Homepage zu entwickeln und habe auch sofort ein Problem.
Die Absicht war es, ein Logo mittig im Bild zu platzieren. In diesem Logo ist ein Streifen der an der rechten Seite des Logos endet.
Hieran wollte ich ein weiteres div-Element enfügen, dass diesen Streifen bis zum Rand weiterführt.
Damit das Ganze flüssig aussieht, hab ich also beim rechten div-Element als Position "relative" benutzt.
Wenn ich nun aber bei der Breite ein "auto" verwende funktioniert das beim IE, aber beim Firefox wird der Streifen um die Breite des Logos erweitert.
Ich weiß auch schon, dass das ein Problem mit der relativen Positionierung ist, aber ich habe keine Ahnung wie ich das beheben kann.
Ich hoffe ihr könnt mir weiterhelfen. ^^
Achja! Vielleicht hilf euch das hier beim Verstehen der benutzen Werte:
balken.png : 70x187
bild.png: : 900x600
HTML:
<html>
<head>
<style type="text/css">
body
{background-image: url(bg.png);}
#layout
{background-image: url(bild.png);
position:absolute;
left:50%;
margin-left:-450px;
top:50%;
margin-top:-300px;
width:900px;
height:600px;}
#balkenre
{background-image: url(balken.png);
position:relative;
left:100%;
margin-left:0px;
top:50%;
margin-top:-300px;
height:187px;
width:100px;}
</style>
</head>
<body>
<div id="layout">
<div id="balkenre"></div>
</div>
</body>
</html>P.S.: Vielleicht fällt es dem Einen oder Anderen auf, aber ich habe keine genaue Ahnung davon,
was ich da überhaupt mit dem "left:100%" und "margin-top" und so gemacht hab.
Hab das einfach so mit n bischen Logik hingedreht, bis es gepasst hat.
Zuletzt bearbeitet:
