login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div in midden van pagina (Opgelost)

Offline TriX - 30/05/2007 17:23
Avatar van TriXHTML interesse Ik wil mijn div mooi in het midden van de pagina... hoe doe ik dat? :S

Ik heb nu:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <STYLE>
  2. #test
  3. {
  4. 	left: 0px;
  5. 	top: 0px;
  6. 	width: 775px;
  7. 	height: 40px;
  8. 	position: absolute;
  9. 	display: block;
  10. 	padding: 0px;
  11. 	margin: 0px;
  12. }
  13. </STYLE>
  14.  
  15. <div id="test">
  16. <IMG SRC="images/header.jpg" WIDTH="775" HEIGHT="40" BORDER="0" ALT="">
  17. </div>


Maar ik heb geen idee hoe ik nu die in het midden krijg :S
Of moet je er iets omheen zetten?

6 antwoorden

Gesponsorde links
Offline Orves - 30/05/2007 17:49 (laatste wijziging 30/05/2007 17:50)
Avatar van Orves Nieuw lid Zet het volgende in je CSS:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <STYLE>
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5. }
  6.  
  7. #test {
  8.   position: absolute;
  9.   left: 50%;
  10.   top: 50%;
  11.   height: 40px;
  12.   width: 780px;
  13.   margin-top: -20px;
  14.   margin-left: -390px;
  15. }
  16. </STYLE>


Door de positie absoluut te maken komt je 'center point in het midden van je pagina. Je content is natuurlijk geen 1 x 1 pixels dus geven we een breedte en hoogte op. Dat gedeeld door de negatieve marge voor top en left zorgt er voor dat je content div #test ten allen tijden in het midden gepositioneerd is.

Succes er mee!
Offline Dolfje - 30/05/2007 17:49 (laatste wijziging 30/05/2007 17:52)
Avatar van Dolfje Gouden medailleGouden medailleGouden medaille

PHP ver gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <STYLE>
  2. body
  3. {
  4.   height:100px;
  5. }
  6. html
  7. {
  8.   height:100px;
  9. }
  10. #test
  11. {
  12.   height:100px;
  13.   width:100px;
  14.   text-align:center;
  15.   vertical-align:middle;
  16. }
  17. </STYLE>

Orves was me voor en geeft een betere style
Offline kickasgamer - 30/05/2007 17:52
Avatar van kickasgamer PHP ver gevorderde of ge kunt ook dit gebruiken denk ik

margin-left:auto;
margin-right:auto;
Offline JBke - 30/05/2007 18:06
Avatar van JBke PHP gevorderde @kickasgame: dat zal zo niet werken. Dan moet je al op zijn minst met een 2de div werken en "center" blijft het probleem voor de valign.
Offline CHIR - 01/06/2007 00:09
Avatar van CHIR Nieuw lid Volgende code is goed te gebruiken voor midden centreren:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body { margin: 0; padding: 0; text-align: center; }
  2.  
  3. html>body { text-align: left; }
  4.  
  5. /*en dan je divjes*/
  6. #box { width: 800px; height: 600px; margin: 0 auto; text-align: center; }

Succes met je website!
Offline citroen - 01/06/2007 00:12 (laatste wijziging 01/06/2007 00:12)
Avatar van citroen Onbekend de methode van Orves is dé enige methode die zonder gebruik te maken van kleine hacks je element centreerd. Zowel horizontaal als verticaal. Het enige probleem bij deze methode is de hoogte van uw element, indien de hoogte groter is als het browser venster zal een gedeelte opgevangen worden door een scrollbar naar beneden. Maar ook een gedeelte zal naar boven onder de menubalk wegvallen.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.253s