Hej gott folk,
Jag har ett css-problem som lett till att jag har suttit och stångat pannan gul & blå mot skrivbordet hela eftermiddagen.
Jag sitter och pular ihop en ny version av min hemsida; Sidan rullar på wordpress, och jag har därmed gett mig på att ändra default-temat så att allt ska se ut som jag vill (rätt stora ändringar, men orkar inte bygga om allt från scratch). Nu så till mitt problem:
Jag har placerat ut ett antal bilder i ovankant som skall utgöra sidans huvud. Däribland är det tre bilder som går in över varann, och där har jag använt mig av z-index för att de ska lägga sig i rätt ordning. Fungerar problemfritt. Under sidhuvudet vill jag lägga en toning (png-bild), som går från mörk-grå (som huvudet går i typ) till ljusgrå (som är själva huvudbakgrundsfärgen på sidan). Kruxet är att den första blogg-posten kommer lägga sig ovanför denna toning, och därmed vill jag lägga toningen med ett lägre z-värde, och sedan lägga innehållet i ett z-lager ovanpå. Här stöter jag dock på en ENORM patrull, för hur jag än gör så vill inte texten hamna ovanpå toningen, utan hamnar under hela tiden, se skärmdumpar.
CSS'en ser ut som följande (notera att jag har gjort bakgrunden i #wrapper för att jag lätt ska se vart den börjar och slutar. :
#wrapper {
z-index: 3;
margin: 0 auto 0 auto;
width: 1000px;
margin-top: 440px;
background: green;
}
#topshadow {
position:absolute;top:351px;left:0px;
z-index: 0;
width: 100%;
height: 113px;
margin-top: 1px; // skapar den 1px breda avdelaren mellan kritsvart & innehåll;
background: url('images/top_shadow.content.png') repeat;
}
Har det något att göra med att toningen är absolut positionerad, och wrappern inte? Hur gör jag för att få upp texten OVANFÖR toningen?
Bifogar två bilder; i Bild 10 är toningen med och ligger som ett lock över överdelen av #wrapper, och i Bild 11 har jag tagit bort toningen för att ni skall se att #wrapper ligger en bit upp. Jag vill helt enkelt att texten skall gå upp en bit ovanpå toningen.
Hoppas någon kan hjälpa mig en bit på traven.
