• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem in Safari: Div-Box-Grafik überdeckt Menü

M

mas82

Neues Mitglied
GELÖST: Problem in Safari: Div-Box-Grafik überdeckt Menü

Hallo Leute!

Ich habe da ein kleines Problem mit meiner neuen Website: Home
Sie funktioniert in IE und Firefox einwandfrei. Bloß im Safari funktioniert das Menü rechts oben nicht.
Ich vermute das liegt daran, dass die Div-Box "Company-Name", in der die Header-Grafik enthalten ist,
das Menü rechts überlappt.
Echt frustrierend, überall gehts nur in Safari nicht.

Hab es schon über CSS versucht, nur da muss ich die Box auf volle Größe aufpumpen
und das Menü wird nach unten verdrängt.
Als letztes wüsste ich nur, dem Menü die gleiche Grafik zuzuweisen und zurechtzuschneiden,
damit beide nahtlos ineinader übergehen - was sich nach meinem jetzigen Bauchgefühl nach
einer endlosen Frimmelei anhört.

Gibt es eine einfache Lösung für mein Problem?

Danke für jede Hilfe!!!
Michael
 
Zuletzt bearbeitet:
Willkommen im Forum.

Ein 1000x100 Pixel großes Bild in einem 400x57 Pixel großen Container ist jedenfalls keine gute Idee.

Du könntest vielleicht mit z-index und/oder absoluter Positonierung tricksen, aber besser wäre es wohl, die grafischen Verzierungen einem weiteren Rahmenelement um die beiden Floats als Background zu setzen.
 
Hey danke! Gute Idee!
Also anders ausgedrückt: ich umschließe die beiden Div-Boxen mit einer weiteren, großen Box und verpasse dieser die Grafik als Hintergrund.
z-index ist auch ein guter Einfall. Ich werd's auch ausprobieren.

Ja, das Bild-Hineinquetsch-Schlamassel war mehr oder minder so nicht geplant und ist mir auch erst jetzt aufgefallen.

Danke nochmals!
 
Es hat schließlich mit dem z-index geklappt! Nun ist auch Safari glücklich!

DANKE!!!!!! DANKE !!!!! DANKE !!!!!!!!!!!
 
mas82 schrieb:
ich umschließe die beiden Div-Boxen mit einer weiteren, großen Box und verpasse dieser die Grafik als Hintergrund.
Zum Vergrößern anklicken....

Genau. Das wäre meines Erachtens die beste Lösung.

Edit: Hier noch kurz das „problematische“ Verhalten zum Nachvollziehen. (Allerdings nicht mehr im Safari getestet.)

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

            .wrapper {
                width: 800px;
                border-top: 3px solid red;
            }

            .left {
                float: left;
                width: 500px;
                background: antiquewhite;
            }

            .right {
                float: right;
                width: 300px;
                background: greenyellow;
            }

        </style>
    </head>

    <body>

        <div class="wrapper">
            <div class="left">
                <img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Wikipedia-logo-v2-de.png" width="700px" height="100px" />
            </div>

            <div class="right">
                <a href="http://de.wikipedia.org/">Wikipedia</a>
            </div>
        </div>

    </body>

</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben