login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Absoluut centreren

Offline Dlol - 27/11/2010 17:56
Avatar van DlolLid Hallo,

Om absoluut gepositioneerde divs te centreren gebruik ik volgende code:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #centereddiv {
  2.  
  3.             width: 400px;
  4.             height: 20px;
  5.             position: absolute;
  6.             top: 400px;
  7.             left: 50%;
  8.             margin-left: -200px;
  9.  
  10. }


Deze code werkt zeer goed, maar ik vroeg mij af of het er geen alternatief voor was. Ik zou namelijk willen dat ik niet telkens wanneer ik de width van mijn div verander, dat ik ook mijn margin-left zou moeten aanpassen.
Ik heb al gezocht in de trend van:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. margin-left: -50%;


Dit werkt echter niet.
Is er dus in css een manier om de margin-left automatisch aan te passen aan de witdh? Of is er eventueel een andere manier om absoluut gepositioneerde divs te centreren?

Alvast bedankt! : )

8 antwoorden

Gesponsorde links
Offline Kevin - 27/11/2010 18:42
Avatar van Kevin Crew Ajax/REST Je zou dit kunnen oplossen met JavaScript.

Stapjes:
- Je hoogte/breedte ophalen van je actief venster (bv variabele X);
- Bij X moet je de vaste breedte van je div nog afhouden (X - breedte Div)
- X delen door 2 (want je hebt een linker- en rechterkant)

Nu weet je wat je met JS in je CSS kan wegschrijven als waarde.
Zo past die zich ook automatisch aan ipv met percenten te werken etc..
Offline WouterJ - 28/11/2010 11:49
Avatar van WouterJ HTML gevorderde Centreren kan je veel beter op deze manier doen:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #box {
  2.  width: 500px;
  3.  margin: 0 auto; /* Auto zorgt ervoor dat de breedte tussen links en rechts wordt verdeelt en die 0 staat voor het aantal pixels van boven. */
  4. }


Want verklein je scherm nu maar eens, je zult zien dat je site links verdwijnt (door die absolute). Met deze methode is dat niet het geval. Daarnaast wordt dit nu automatisch gedaan (vandaar die auto ). Dus wat je ook doet met de width, hij zal blijven bestaan.
Offline Dlol - 29/11/2010 12:50
Avatar van Dlol Lid Dit:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #box {
  2.  
  3. 	width: 500px;
  4. 	margin: 0 auto;
  5.  
  6. }

doet het inderdaad, maar ik positioneer hem als absolute, wat dit geeft:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #box {
  2.  
  3. 	width: 500px;
  4. 	margin: 0 auto;
  5.  	position: absolute;
  6.  
  7. }


En dat werkt niet, dan staat-ie gewoon links vanboven...
Offline Ontani - 29/11/2010 13:01
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 position: absolute moet weg.
Offline Dlol - 29/11/2010 13:26
Avatar van Dlol Lid Het is nu net dat ik hem absolute wil positioneren 
Offline WouterJ - 29/11/2010 13:41
Avatar van WouterJ HTML gevorderde Maak van absolute relatieve. Met left/right/top/bottom werkt dit gewoon het zelfde.

Even een vraagje: Waarom zou je het absolute positioneren? Je kan beter met margin/padding aan de gang gaan.
Offline Dlol - 29/11/2010 14:03
Avatar van Dlol Lid Ik dacht dat relative gewoon positioneerde tov van zijn positie waar hij normaal zou staan?
Ik wil hem absolute positioneren zodat ik geen rekening moet houden met code die ik eventueel nog boven die div zet. Dan zou ik hem opnieuw moeten positioneren. Met absolute hoef ik daar geen rekening mee te houden.
Offline Kevin - 29/11/2010 17:05 (laatste wijziging 29/11/2010 17:05)
Avatar van Kevin Crew Ajax/REST Je zou kunnen relatief centreren zoals als gezegt, maar dan als child van je body tag.

Het voordeel van absoluut hier tegenover is dat je bv ook verticaal kan centreren etc..

Ik denk trouwens dat je best ook met een z-index gaat werken omdat je ook iets vermelde van

Dlol schreef:
geen rekening moet houden met code die ik eventueel nog boven die div zet.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.236s