kostenloser Webspace werbefrei: lima-city

z-index bei verschachtelten divs

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   w******s

   0:22, 23.6.2008

   Hej,
   ich habe ein Problem bei der Gestaltung einer Webseite. Zuerst einmal der allgemeine Aufbau
   
   

   <div id=\"main\"> <!--Um alle anderen divs herum mit Postionierung, hat ein hintergrundbild mit   
                       positon:bottom  -->
      <div id=\"header\"> <!-- Headergrafik, Beginn eines Rahmens -->
      </div>
      <div id=\"blog\"> <!-- Ein Hintergrundbild, das in y Richtung wiederholt wird -->
           <div class=\"text\">
           Text
           </div>
      </div>
      <div id=\"footer\"> <!-- Ende mit Bild des Rahmens -->
      </div>
   </div>

   
   
   Der grundlegende Aufbau funktionert. Man erhält einen fertigen Rahmen, der sich variabel an die Textlänge in #blog .text anpasst. Jetzt möchte ich aber am Ende noch einen Verlauf erzielen. Diesen habe ich als PNG gespeichert und bei #main angegeben, dass die postion:bottom ist ohne Wiederholung. Jedoch wird dies nicht angezeigt, da es von den Bildern von #blog und #footer überdeckt wird. Wenn ich die Bilder da rausnehme seh ichs ja, nur brauch ich diese Bilder um den vollständigen Rahmen zu bekommen.
   Also hab ich auf selfhtml nachgeschaut, wie das mit dem z-index funktioniert- werd aber nicht schlau daraus.
   
   Kann man mir jemand sagen wie ich das bei den verschachtelten divs mit dem z-index machen müsste?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. ryanblack

   

   ryanblack hat kostenlosen Webspace.

   10:01, 23.6.2008

   Das hat jetzt mit `z-index` gar nichts zu tun.
   
   Wenn du \"hintergrundbild mit positon:bottom\" sagst, meinst du \"Hintergrundbild mit background-position: bottom\"?
   
   Wie soll der Verlauf hin? Wieso tust du den Verlauf nicht einfach ins `#footer`? Oder definierst einen `padding-bottom` in `#main`? Oder willst du [so was hier](http://css-tricks.com/examples/FadeOutBottom/) hinbekommen?
   
   Ryan
4. Autor dieses Themas

   w******s

   10:42, 23.6.2008

   ryanblack schrieb:
   Wenn du \\\'hintergrundbild mit positon:bottom\\\' sagst, meinst du \\\'Hintergrundbild mit background-position: bottom\\\'?
   

   
   Ja, das meinte ich damit.
   
   Ich male mal grad, damit mans besser versteht: http://download.lima-city.de/werktags/problem.JPG
   
   Also der Verlauf soll sozusagen als Abschluss dahin und immer an das Ende des main divs. Ich kann den Verlauf nicht in der footer packen, da dieser größer ist als das footer-bild und ich nicht zwei Bilder in den footer packen kann. Das mit dem padding-bottom versteh ich nicht, weiß auch nicht was es bewirken soll. Und es soll nicht so ein Fade-out effekt werden, der verlauf geht nur von weiß ins grau;)
   
   Mein Grundproblem ist sozusagen, dass die beiden divs (blog und footer) mit ihren hintergrundbildern den verlauf des main-divs verdecken. Darum dachte ich, es müsste mit z-index gehen. Damit kann man doch festlegen, welche divs im vordergrund/hintergrund liegen?
   
   lg

5. m******s

   11:50, 23.6.2008

   Gib für deine Verlaufs-box doch mal
   z-index: 100;
   oder so ein, müsste das Problem lösen.
   z-index bedeutet einfach nur: je höher der Wert, desto \"weiter vorn\", d.h. eine div mit index 10 überlappt eine mit index 2 und eine mit 2 überlappt eine mit index 1, verschwindet aber hinter einer mit index 3....
   
   Verstehste? ;)
6. Autor dieses Themas

   w******s

   12:21, 23.6.2008

   Hm. Schade, hats leider auch nicht gelöst. Hier kommt jetzt mal der CSS Teil, vielleicht sieht ja jemand was man machen könnte:
   
   

   #main {
   position: absolute;
   left:25px;
   top: 25px;
   width: 700px;
   padding: 0px;
   margin: 0px;
   border: #000 1px dotted;
   background-image: url(img/verlauf.png);
   background-position: bottom;
   background-repeat: no-repeat;
   z-index: 100;
   }
   
   #header {
   background-image: url(img/header.png);
   margin:0px;
   padding: 0px;
   width: 700px;
   height: 147px;
   }
   
   #blog {
   background-image: url(img/bg.jpg);
   background-repeat: repeat-y;
   margin: 0px;
   padding: 0px;
   width: 700px;
   z-index: 1; 
   }
   
   #blog .text {
   margin: 0px;
   padding: 20px;
   width: 660px;
   text-align: justify;
   }
   
   #footer {
   background-image: url(img/footer.png); 
   margin: 0px;
   padding: 0px;
   width: 700px;
   height: 15px;
   z-index: 2;
   }

   
   
   Ich hab gelesen, das z-index hat irgendwas mit dem position attribut zu tun. allerdings weiß ich nicht genau was.

7. m******s

   12:50, 23.6.2008

   Kannstu vielleicht mal einen Link zur betreffenden Page senden, würde mir das gerne mal anschauen (Hab firebug und kann dann, bevor ich Vorschläge poste, mal erst einmal selber schauen, ob die gehen).
8. Autor dieses Themas

   w******s

   13:11, 23.6.2008

   Ja, kann ich=)
   Nett, dass sich jm. so um mein Problem kümmert. Hier die adresse:
   http://werktags.lima-city.de/project/index.html

9. m******s

   14:14, 23.6.2008

   
   
   Kein Wunder, dass das mit z-index nicht funktioniert, wenn deine überdeckenden Elemente Tochterelemente von #main sind
   
   Also, z-index kannstu vergessen. Du musst die Hintergründe von #footer und #blog durch teilweise transparente (also, alles, was nicht Rahmen ist, muss transparent sein) PNGs ersetzen. Dann sollte das gehen.
   
   
   Beitrag geändert: 23.6.2008 14:14:33 von merovius
10. Autor dieses Themas

    w******s

    14:23, 23.6.2008

    Schade, dachte das könnte so auch gehn. Naja. Ich probiers dann mal mit Transparenz. Danke!

11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?