login  Naam:   Wachtwoord: 
Registreer je!
 Forum
Zoeken  Regels  Help
Categorieën > HTML & CSS

DIV/CSS in het midden (Opgelost)

Yourgamecrew – 22/01/2010 19:17 (Laatst gewijzigd op 29/01/2010 17:19)
Offline offline




PHP interesse
 hallo,
ik ben een site aan het maken voor iemand en dit is de begin scriptje:

  3. <style type="text/css">
  4. body {
  5.     background: blue;
  6.     margin: 0px;
  7.     padding: 0px;
  8. 		text-align: center;
  9.  
  10. }
  11. div#header {
  12.     clear: both;
  13.     height: 208px;
  14.     padding: 0px;
  15. }
  16.  
  17. div#spellen1 {
  18. 	width: 173px;
  19. 	margin-right:9px;
  20. 	margin-left:10px;
  21. 	background:#eee;
  22. 	margin-bottom: 10px;
  23. 	float: left;
  24. 	clear: left;
  25. }
  26.  
  27. div#spellen {
  28. 	width: 173px;
  29. 	margin-right:9px;
  30. 	margin-left:10px;
  31. 	background:#eee;
  32. 	margin-bottom: 10px;
  33. 	float: left;
  34.  
  35. }
  36.  
  37.  
  38. div#add {
  39. 	width: 225px;
  40. 	margin-right:9px;
  41. 	margin-left:10px;
  42. 	background:#eee;
  43. 	margin-bottom: 10px;
  44. 	float:left;
  45. 	clear: right;
  46. }
  47.  
  48. div#menu {
  49. 				 width: 225px;
  50.     padding: 0px 160px 5px 160px;
  51.     margin-bottom: 10px;
  52.     background-color: silver;
  53. }
  55. </head>
  56. <body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
  57.  
  58. <div id="header" style="background: white url(http://yourperfectgame.com/images/ypglogo.jpg) no-repeat;">
  59.  
  60. </div>
  61.  
  62. <div id="menu">
  63.     menu........
  64. </div>
  65.  
  66. <div id="spellen1">
  67.     Footer text...
  68. </div>
  69.  
  70. <div id="spellen">
  71.     Footer text...
  72. </div>
  73.  
  74. <div id="spellen">
  75.     Footer text...
  76. </div>
  77.  
  78.  
  79. <div id="add">
  80.     Footer text...
  81. </div>
  82.  
  83. </body>
  84. </html>



nou is mijn vraag: hoe zorg ik ervoor dat de kolommen waarin footer text..... en de header staan net zoals menu.. ook in het midden komen?


Pagina:

20 antwoorden

Gesponsorde links
Daisycon - Verdien geld met uw website

Martijn – 22/01/2010 19:25 (Laatst gewijzigd op 22/01/2010 19:26)
Offline offline



Crew PHP
door m clear: right te geven (of left ik draai t wel eens om)

Yourgamecrew – 22/01/2010 19:46
Offline offline



PHP interesse
maar hoe kan ik ze egt afzondelijk bewegen?

Martijn – 22/01/2010 19:49 (Laatst gewijzigd op 22/01/2010 19:50)
Offline offline



Crew PHP
met clear kun je er een block van maken, dat betekent dat ervoor/erna/beide kanten een 'enter' word geplaatst. Met floatr is het normal een inline element.

Met margin(-top/-bottom/-left/-right) kun je lege ruimte aan de betreffende kanten toevoegen

edit: Als je position absolute geeft kun je ze allemaal vanaf x,y 0,0 een top een left(of right) meegeveb

Yourgamecrew – 22/01/2010 20:00
Offline offline



PHP interesse
wat is de code voor clear aan beide kanten ik dacht clear:both; maar vraag het toch voor de zekerheid

Martijn – 22/01/2010 20:05
Offline offline



Crew PHP
dat soort dingen kun je zelf wel uitzoeken ofniet ;)

Yourgamecrew – 22/01/2010 20:12 (Laatst gewijzigd op 23/01/2010 13:51)
Offline offline



PHP interesse
ik heb trouwens nog een vraagje: Hoe zorg ik ervoor dat de kolommen waarin footer text..... staat net zoals menu.. en de header ook in het midden komen???

Martijn – 23/01/2010 14:21
Offline offline



Crew PHP
margin: 0px auto;?

Koen – 23/01/2010 14:22
Offline offline



Community Manager
Martijn schreef:
margin: 0px auto;?

en position: relative;

Yourgamecrew – 23/01/2010 16:48
Offline offline



PHP interesse
werkt geen van beide..... iemand anders nog ideeën??

genkstar – 23/01/2010 17:37
Offline offline



Nieuw lid
Als ik een element of iets anders juist in het midden van mijn webpagina wil zetten gebruik ik dit JS

var screenWidth = window.innerWidth;
var element = $('#panel').width();
var elMargin = (screenWidth/2)-(element/2);

$('#panel').css({'padding-left':elMargin+'px'});

Gesponsorde links


Pagina:

Dit onderwerp is gesloten.
Actieve forumberichten:

© 2002-2012 Sitemasters.be - Regels - Gehost door: Vircon - Laadtijd: 0.033s