Hi,
der Titel ist etwas blöd, aber mir will kein besserer einfallen, sorry dafür :/
Zu meinem Problem: Ich habe einen Wrapper-DIV, welcher relative positioniert ist. Darin befindet sich ein IMG (fürs Logo), welcher absolute positioniert ist. Diesen schiebe ich mittels top und left und negativen Werten aus den Wrapper-DIV ein Stück raus, damit diese überlappen. Wie ich gesehen habe ist die heute bevorzugte Auflösung bei vielen immer noch bei 1024px in der Breite. Daher habe ich die Wrapper größe so gewählt, dass inklusive vertikaler Scrollbar keine horizontale Scrollbar auftaucht. Nun schiebt es mir allerdings den Logo-DIV aus dem sichtbaren Browserbereich - super!...
Gibt es eine Möglichkeit, wie ich diesen Seitenaufbau dennoch beibehalten kann, aber das Logo weiter in den Wrapper DIV rein wandert, anstatt aus dem Browserfenster zu verschwinden?
Hier mal ein Ausschnitt aus meinem Template:
Hier ist zwar noch ein DIV mehr (für den Header), aber das sollte für die Problembeschreiben irrelevant sein.
Ich hoffe ihr habt eine Idee. Ich bin mit meinem Latein am Ende und wüsste auch nicht wonach ich suchen sollte...
Gruß
grubi
der Titel ist etwas blöd, aber mir will kein besserer einfallen, sorry dafür :/
Zu meinem Problem: Ich habe einen Wrapper-DIV, welcher relative positioniert ist. Darin befindet sich ein IMG (fürs Logo), welcher absolute positioniert ist. Diesen schiebe ich mittels top und left und negativen Werten aus den Wrapper-DIV ein Stück raus, damit diese überlappen. Wie ich gesehen habe ist die heute bevorzugte Auflösung bei vielen immer noch bei 1024px in der Breite. Daher habe ich die Wrapper größe so gewählt, dass inklusive vertikaler Scrollbar keine horizontale Scrollbar auftaucht. Nun schiebt es mir allerdings den Logo-DIV aus dem sichtbaren Browserbereich - super!...
Gibt es eine Möglichkeit, wie ich diesen Seitenaufbau dennoch beibehalten kann, aber das Logo weiter in den Wrapper DIV rein wandert, anstatt aus dem Browserfenster zu verschwinden?
Hier mal ein Ausschnitt aus meinem Template:
HTML:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FFW</title>
<style type="text/css">
#wrapper {
width: 990px;
margin: 62px auto 20px;
padding: 4px;
position: relative;
}
.page {
background-color: #FFF;
}
#header {
background-color: red;
height: 200px;
position: relative;
}
#header #logo {
position: absolute;
left: -55px;
top: -62px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="page">
<div id="header">
<img src="images/logo.png" id="logo" />
</div>
</div>
</div>
</body>
</html>Hier ist zwar noch ein DIV mehr (für den Header), aber das sollte für die Problembeschreiben irrelevant sein.
Ich hoffe ihr habt eine Idee. Ich bin mit meinem Latein am Ende und wüsste auch nicht wonach ich suchen sollte...
Gruß
grubi
Ich habe einfach noch nen DIV drum herum gepackt, welcher eine Maximalbreite hat. Der kann sich entsprechend zusammenschieben und schon passt es. So sitzt das Logo bei 1024 bisschen weiter rechts, als es normal sollte. Auf den aktuelleren Auflösungen passt dafür das Design.