Kan man använda absolut positionering med centrerade boxar?

Tråden skapades och har fått 9 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Trollhättan
  • 2007-11-10 17:57

Hej!

Jag är helny på webbdesign. Men om jag har fattat det rätt, så är det klurigt/omöjligt att använda absolut positionering på boxar och bilder som ska vara helt centrerade?

när man har absolut, så måste man ju ange ett visst antal enheter från vänster och höger kant... men i olika upplösningar håller det sig inte i mitten. Finns det inget sätt att använda absolut, fast ha mittenpunkten som utgångspunkt?

Jag har kommit fram till att denna koden:

margin-right: auto;
margin-left: auto;

... gör saker centrerade. Men när ja knappar in position: absolute; så blir den tokig!

Så, frågan är väl; Går det inte göra mitten till utgångspunkt?

\\Dana

Men varför ska du ha position: absolute; om du redan har fått saken centrerad med margin?

  • Medlem
  • Trollhättan
  • 2007-11-11 14:49

Hej, och tack för svaret!

Det är så att jag vill ha en bild centrerad, som ligger ovanpå en annan centrerad bild. dom hamnar ovanpå varann när ja kör absolut, men då är den inte centrerad längre... tar jag bort absolut, så blir den centrerad, men då ligger dom inte på varann... då ligger den andra under den ena.

Krångligt!

  • Medlem
  • Trollhättan
  • 2007-11-11 14:58

ninjamac: Tack!

men det funkade inte så bra... jag testade, och bilden hamnade ändå under den andra..

Det måste finnas nåt bra sätt o lösa dehär!

Principen du kan använda är att du har en relativt positionerad container (centrerad med margin:auto) med absolut positionerade containers inuti. Du kan faktiskt centrera en absolut positionerad container (i mitt exempel både i höjd- och sidled):

#container{position:absolute; left:50%; top:50%; width:780px; height:500px; margin-top:-250px; margin-left:-390px;}

Dock har det den nackdelen att när du minskar fönstret stannar containern inte vid 0,0. Testa!

Att bilden hamnar under den andra kan man rätta till genom att sätta z-index till något lagom högt värde. Högre värde = "högre" upp. (närmare dig, klumpigt uttryckt)

  • Medlem
  • Trollhättan
  • 2007-11-12 11:43

Det har jag gjort...

  • Medlem
  • Trollhättan
  • 2007-11-12 13:28

Det är ju ändå ganska simpelt...

Det enda jag vill göra är att ha två centrerade bilder ovanpå varann.

Det är inte såå simpelt, men om du använder en relativt positionerad container för att åstadkomma centreringen och sedan två stycken absolut positionerade containers som håller bilderna. Jag får dock intrycket av att du går över ån efter vatten..

Kodexempel och beskrivning av syftet tack!

  • Medlem
  • Trollhättan
  • 2007-11-13 13:19

Tack, ninjamac!:)

Jag löste det... Jag gjorde den bakre bilden till relative och margin-left/right: auto;

Sen gjorde jag den övre bilden till absolute och margin-left/right: auto;

Nu funkar det fint!

1
Bevaka tråden