✔ Positionieren eines DIV-Tags

[PasiXXL]

Guten Morgen,

wie ich schon im Thema geschrieben habe, möchte ich einen DIV-Tag positionieren. Jedoch ist das nicht mein Problem. Ich habe das hier für die Seite übernommen. Der Wrapper zentriert also alles immer in die Mitte des Bildschrimes.

Mein Problem ist nun, dass sich ein DIV-Tag nicht ganz zentrieren soll, sondern wie ein Schatten unter den Rest der Homepage soll. Sobald ich jedoch per CSS position absolut zuweise, verschwindet der komplette DIV-Tag.

#wrapper{
    position: absolute;
    left: 50%;
    width: 1013px;
    margin-left: -507px; /* negative Hälfte von width */
    top: 50%;
    height: 625px;
    margin-top: -312.5px; /* negative Hälfte von height */
    z-index:1;
    background:#CCC;
}

#schatten{
    background:#000;
    width:800px;
    height:842px;
    z-index:-100;
 
}

Die Seite findet man hier. Was jetzt schwarz am Rand klebt, soll der Schatten werden. Den Schatten wird man jedoch eh erst ab einer höheren Auflösung als 1024x768 sehen.

Danke für die Hilfe

 

[Maik]

Hi,

auf der verlinkten Seite sieht man zwar nichts von den Formatierungen für die beiden Boxen, aber egal.

Hier mein Vorschlag für einen Schlagschatten mit einer Breite von 10px:

#wrapper{
    position: absolute;
    left: 50%;
    width: 1013px;
    margin-left: -506.5px; /* negative Hälfte von width */
    top: 50%;
    height: 625px;
    margin-top: -312.5px; /* negative Hälfte von height */
    z-index:2;
    background:#CCC;
}

#schatten {
    position: absolute;
    left: 50%;
    width: 1013px;
    margin-left: -496.5px;
    top: 50%;
    height: 625px;
    margin-top: -302.5px;
    z-index:1;
    background:#000;
}

<div id="wrapper"><!-- Hier folgt der Inhalt --></div>
<div id="schatten"></div>

 

[PasiXXL]

Hallo,

es läuft perfekt. Ich musste in meinem Fall nur noch den z-index ändern.

Nachdem du mir ja so perfekt helfen konntest, habe ich noch eine weitere Frage zum gleichem Themengebiet. Über dem Banner und dem Log soll ein grauer Rand.
Kannst du mir erklären wie ich das schaffe? Warum sind ausgerechnet die Zahlen zur Positionierung negativ?

Danke

 

[Maik]

Wenn du im HTML-Dokument den Pfad zur CSS-Datei korrigierst, kann ich mir das Layout auch in voller Blüte betrachten, denn derzeit verlinkst du alle eingebundenen Dateien auf "localhost", auf den ich keinen Zugriff habe:

<style type="text/css" media="screen">@import "http://localhost/w1/wp-content/plugins/nextgen-gallery/css/nggallery.css";</style>

Die negativen margin-Werte sind erforderlich, um die Box in der Fenstermitte auszurichten, da left:50% für den linken Elementrand, sowie top:50% für den oberen Elementrand gilt, und somit die Box zunächst mal aussermittig sitzt.

 

[PasiXXL]

Hallo Maik,

es tut mir Leid, dass es mir vorher schon nicht aufgefallen ist. Es sollte nun funktionieren(?).

Von welchem Punkt wird denn ausgegangen, wenn ein negativer Wert genommen wird. Von der Seitenmitte oder was meinst du mit "aussermittig"?

Gruß

 

[Maik]

Ich hab jetzt extra den Browsercache geleert, aber von dem Stylesheet ist noch immer nichts zu sehen:

<link rel="stylesheet" href="http://localhost/w1/wp-content/themes/kerb/style.css" type="text/css" media="screen" />

Nimm doch mal in meinem Beispiel-Code die margin-left- und margin-top-Deklaration komplett heraus und betrachte anschliessend das Layout, dann siehst bzw. verstehst du, was ich mit "aussermittig" meine.

 

[PasiXXL]

Der dritte Versuch sollte geklappt haben. Ich habe ein Problem mit dem CMS in dieser Hinsicht.

Jetzt ist mir auch der Begriff "außermittig" klar

Danke für deine Hilfe.

 

[Maik]

Um noch auf deine offene Frage bzgl. des "grauen Rahmens" für den Banner und das Logo zurückzukommen

#banner{
        background: #CCC url(images/banner.jpg) no-repeat;
        width:676px;
        height:244px;
        float:left;
        border-left:2px solid #000;
        margin-left:42px;
        z-index:2;
        margin-top:10px;
}


#logo{
        background: #CCC url(images/logo.jpg) no-repeat;
        width:244px;
        height:244px;
        float:left;
        z-index:0;
        border-left:2px solid #000;
        margin-top:10px;
}

Der Wert "10px" ist von mir exemplarisch frei gewählt.

 

[PasiXXL]

Hallo Maik,

nach der Hilfe im letzten Post habe ich es alleine geschafft.

#schatten {
    position: absolute;
    left: 50%;
    width: 1013px;
    margin-left: -496.5px;
    top: 50%;
    height: 655px;
    margin-top: -332.5px;
    z-index:1;
    background:#666;
}

Ergebnis kann man wieder hier sehen. Welche der Lösungen ist denn in meinem Fall besser? Bei meiner Lösung würde es wahrscheinlich bald in einer DIV-Suppe enden? Mich würden außerdem noch die Ladezeit interessieren. Dauert es sehr lange? Die Größe der Bilder schwankt zwischen 30-50 kb.

Danke
Kann es sein, dass der Server gerade ziemlich langsam ist?

 

[Maik]

Klar, wenn du für den oberen Rahmen extra ein neues DIV #rand anlegst, anstelle für die beiden DIVs #banner und #logo einen oberen Außenabstand zu definieren, und dies an anderen Stellen so weiterführst, erkrankt das Seitenkonzept über kurz oder lang an "Divitis".

Da ich mit "DSL6000" unterwegs bin, lädt sich deine Seite bei mir im "null-komma-nichts".

Und ja, der tutorials.de-Server gönnt sich in letzter Zeit desöfteren am Tag eine Verschnaufpause.