Avatar billede phliplip Nybegynder
28. oktober 2005 - 18:40 Der er 9 kommentarer og
1 løsning

Centrering af absolute positioneret div-layer i både IE og FF

Hej Exp!

Er igang med http://www.bipbip.dk/hotel/ og er stødt på et problem!

Jeg har et layer som ligger bag content, som indeholder et billede der skal være skygge! Har fået fix'et så den viser PNG'en korrekt i IE, FF og Opera..

Men problemet er at jeg ikke kan få billedet til at ligge centreret, altså lige bag content, i FF og Opera!

Følgende virker i IE men ikke i FF og O:
#shadow_container {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 776px;
    margin: 0 0 0 -5px;
    height: 100%;
    overflow: hidden;
    text-align: center;
}

Hvis jeg så ændrer det til:
#shadow_container {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%; // Width til 100%
    margin: 0; // Og margin til 0
    height: 100%;
    overflow: hidden;
    text-align: center;
}

Så virker det fint i FF og O.. Men så ikke i IE :S Det er jo til at blive sindsyg af!

Håber der er nogen der kan hjælpe ;)
Avatar billede electricnet Nybegynder
28. oktober 2005 - 22:43 #1
Du kan evt. putte de ting som du tilføjede til FF og O ind i en:

body>#shadow_container {
    width: 100%;
    margin: 0;
}

.. som du så putter bagefter den der er egnet for IE. Men den kode afhænger af hvilket element #shadow_container ligger i, dette element skal så stå før >-tegnet. F.eks. har jeg valgt body her, men hvis det ligger inde i det andet div, f.eks. et div med id "container" skal du skrive #container>#shadow_container. :)

net.
Avatar billede phliplip Nybegynder
29. oktober 2005 - 18:22 #2
Works like a charm ;) Tusind tak! Smider du et svar?
Avatar billede phliplip Nybegynder
29. oktober 2005 - 18:34 #3
Btw. har faktisk endnu et problem...

Hvis jeg indsætter så meget content at der kommer scrollbars, og scroller ned, så er layeret med baggrunden og layeret med skyggen ikke lige så høj som siden... selvom jeg har height 100% på layerene.. og på body, html!

Nogen der har en idé om hvad det kan være?
Avatar billede phliplip Nybegynder
29. oktober 2005 - 18:34 #4
Du kan se eksempel på http://www.bipbip.dk/hotel/... og det er gældende for både IE, FF og O!
Avatar billede electricnet Nybegynder
29. oktober 2005 - 23:12 #5
Her har du et svar. :)

For at rette det andet problem der, bliver main container nok nød til at være inde i shadow container, hvor du så laver billedet med skyggen som baggrundsbillede på shadow container, og ikke som et <img> tag. Så putter du så noget padding på højre og venstre side af shadow container som passer til bredden af skyggen.

Og med hensyn til baggrunds-striberne, hvorfor ikke bare putte dem på body istedet for #global_container? Ville virke lige så godt, og dække det hele.

net.
Avatar billede phliplip Nybegynder
30. oktober 2005 - 19:05 #6
Point til dig!

Grunden til at shadow er et <img> tag og ikke som baggrund er fordi det er et PNG 24bit med alpha og det virker ikke i IE med mindre man laver et lille hack.. eller hvad man kan kalde det!

Striberne.. Jo det kunne jeg jo selvfølgelig!

Nå.. jeg må jo finde på noget ;)
Avatar billede electricnet Nybegynder
30. oktober 2005 - 19:11 #7
Takker. :)

Du kan godt tilføje et smart lille PNG hack i din CSS til baggrunde, som ikke bruger javascript. Det eneste problem er dog at din CSS ikke validerer.

Du starter med at lave et normalt background-image på din shadow_container, og så skriver du sådan her:

* html #shadow_container { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://sti/til/billede.png',sizingMethod='crop'); }

(lav evt. sizingMethod='crop' om til scale hvis baggrundsbilledet skal skalere efter hvor stort div'et er. Dog ikke særlig tit tilfældet ved baggrundsbilleder.)

Så skulle det virke i IE også. :D

net.
Avatar billede phliplip Nybegynder
30. oktober 2005 - 19:14 #8
Ok.. må lige rode lidt med det ;)
Avatar billede electricnet Nybegynder
07. november 2005 - 13:39 #9
Held og lykke, bare skriv hvis der opstår problemer. :)

net.
Avatar billede phliplip Nybegynder
07. november 2005 - 18:16 #10
Det virker nu... det er rigtigt godt! Du kan se resultatet på http://www.bipbip.dk/hotel/
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester