login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div positioneren

Offline sanderrebry - 01/02/2013 10:13
Avatar van sanderrebryLid Beste,

Ik heb een header met daarin drie divjes.
het eerste divje komt het logo, het tweede een banner, en het derde de contactgegevens..
Mijn bedoeling is om het divje banner te centreren over het div header..
Dit kan ik doen met margin:auto maar daarmee krijg ik problemen met het derde divje van de contactgegevens.
Even code als duidelijkheid:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="header">
  2.    <div id="headerlogo"></div>
  3.    <div id="banner"></div>
  4. 	<div id="headertekst"><?php echo WEBSITE_HEADER; ?></div>
  5. 	</div>

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #header {
  2. background:#CCC;
  3. border:solid thin black;
  4. height:120px;
  5. position:relative;
  6. text-align:right;
  7. width:100%;
  8.  
  9. }
  10. #headerlogo
  11. {
  12. background:#CCC url(images/DEMUYNCK-logo.jpg) no-repeat 15px;
  13. border:solid thin black;
  14. height:120px;
  15. width:350px;
  16. float:left;
  17. }
  18. #banner
  19. {
  20. float:left;
  21. border:solid thin black;
  22. height:120px;
  23. width:650px;
  24.  
  25. }
  26. #headertekst {
  27. 	color:#000;
  28. 	padding-top:8px;
  29. 	padding-right:-40px;
  30. 	margin-right:25px;
  31. 	width:auto;
  32. 	float:right;
  33. 	text-align:left;
  34. 	border:solid thin black;
  35.  
  36. }

4 antwoorden

Gesponsorde links
Offline marten - 01/02/2013 10:42
Avatar van marten Beheerder Heb je ook een live voorbeeld draaien met wat er fout gaat?
Offline sanderrebry - 01/02/2013 10:57
Avatar van sanderrebry Lid hierbij een live voorbeeld: http://demuynck-printing.be/testomgeving/
Offline Jointjeff - 01/02/2013 12:12 (laatste wijziging 01/02/2013 12:13)
Avatar van Jointjeff HTML interesse
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #banner
  2. {
  3. position:absolute;
  4. left:50%;
  5. top:0;
  6. margin-left:-325px;
  7. border:solid thin black;
  8. height:120px;
  9. width:650px;
  10. }


Bovenstaande CSS kun je doen. Of text-align van #header op center zetten, en vervolgens #banner een display:inline-block geven.
Offline FrankieC - 10/02/2013 10:53 (laatste wijziging 10/02/2013 10:56)
Avatar van FrankieC Lid Je wilt #banner centreren over #header heen ("Mijn bedoeling is om het divje banner te centreren over het div header..") terwijl #banner een kind is van #header?

En wat bedoel je met "het derde divje van de contactgegevens"? Ik zie als derde div de #headertekst, maar die roept <?php echo WEBSITE_HEADER; ?> in?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.209s