login  Naam:   Wachtwoord: 
Registreer je!
 Forum

DIV/CSS in het midden (Opgelost)

Offline Yourgamecrew - 22/01/2010 19:17 (laatste wijziging 29/01/2010 17:19)
Avatar van YourgamecrewLid hallo,
ik ben een site aan het maken voor iemand en dit is de begin scriptje:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  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?

20 antwoorden

Gesponsorde links
Offline Martijn - 22/01/2010 19:25 (laatste wijziging 22/01/2010 19:26)
Avatar van Martijn Crew PHP door m clear: right te geven (of left ik draai t wel eens om)
Offline Yourgamecrew - 22/01/2010 19:46
Avatar van Yourgamecrew Lid maar hoe kan ik ze egt afzondelijk bewegen?
Offline Martijn - 22/01/2010 19:49 (laatste wijziging 22/01/2010 19:50)
Avatar van Martijn 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
Offline Yourgamecrew - 22/01/2010 20:00
Avatar van Yourgamecrew Lid wat is de code voor clear aan beide kanten ik dacht clear:both; maar vraag het toch voor de zekerheid
Offline Martijn - 22/01/2010 20:05
Avatar van Martijn Crew PHP dat soort dingen kun je zelf wel uitzoeken ofniet ;)
Offline Yourgamecrew - 22/01/2010 20:12 (laatste wijziging 23/01/2010 13:51)
Avatar van Yourgamecrew Lid 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???
Offline Martijn - 23/01/2010 14:21
Avatar van Martijn Crew PHP margin: 0px auto;?
Offline Koen - 23/01/2010 14:22
Avatar van Koen PHP expert
Martijn schreef:
margin: 0px auto;?

en position: relative;
Offline Yourgamecrew - 23/01/2010 16:48
Avatar van Yourgamecrew Lid werkt geen van beide..... iemand anders nog ideeën??
Offline genkstar - 23/01/2010 17:37
Avatar van genkstar 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'});
Offline Yourgamecrew - 23/01/2010 19:20
Avatar van Yourgamecrew Lid moet ik daaraan nog wat veranderen of is het klaar voor gebruik?
Offline genkstar - 23/01/2010 20:09
Avatar van genkstar Nieuw lid var screenWidth = window.innerWidth;
var element = $('VERANDER HIER').width();
var elMargin = (screenWidth/2)-(element/2);

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

Dit is jQuery om dit te kunnen gebruiken moet je ook jquery in je pagina hebben..
Je kan dit ook met normaal Js doen maar jQuery = Write Less, Do More.
Offline Yourgamecrew - 23/01/2010 20:29 (laatste wijziging 23/01/2010 20:30)
Avatar van Yourgamecrew Lid het werkt niet....

weet iemand anders nog iets om ervoor te zorgen dat de kolommen waarin footer text..... en de header staan net zoals menu.. ook in het midden komen?
Offline genkstar - 23/01/2010 21:30
Avatar van genkstar Nieuw lid ' het werkt niet '
Wat werkt niet? Welke foutmelding krijg je?
Offline Yourgamecrew - 24/01/2010 10:18
Avatar van Yourgamecrew Lid er gebeurt niets
Offline che - 24/01/2010 13:05 (laatste wijziging 24/01/2010 13:11)
Avatar van che Nieuw lid beginnen met:
html, body{width: 100%; height: 100%}
Dan alles in een wrapper zetten.
#wrapper{
position: absolute;
left: 50%;
top: 50%;
width: 500px; (dit is een voorbeeld je moet de breedte nemen die je wil)
height: 800px; (zie bij width)
margin-left: -250px; (de helft van je breedte)
margin-top: -400px; (de helft van de hoogte)
overflow: auto;
}
dit zet de wrapper altijd in het midden van de pagina, ongeacht de resolutie, grootte, of welke browser er gebruikt word. Altijd goed.
Al je andere divs komen dan binne de wrapper te staan.
Offline Yourgamecrew - 29/01/2010 17:17 (laatste wijziging 29/01/2010 19:50)
Avatar van Yourgamecrew Lid dat is niet wat ik bedoel kijk naar mn code of dit voorbeeld:
http://yourperfectgame.com/test.htm

Ik wil het logo deel, menu deel, een die 4 footer text... allemaal in het midden en die wrapper werkt niet (er gebeurt niet wat ik bedoel) dus weet iemand anders nog wat????
Offline Kevin - 29/01/2010 20:01
Avatar van Kevin Crew Ajax/REST Nou ik zie hier geen JS in?

TIP: indien je jQuery gebruikt: begin met

$(document).ready(function(){
//code en functies hier
}
Offline Yourgamecrew - 29/01/2010 20:20
Avatar van Yourgamecrew Lid ik wil het liefst Css en GEEN JS dus kan je me vraag nog beantwoorden als je aan CSS denkt??? :


Yourgamecrew schreef:
...... voorbeeld:
http://yourperfectgame.com/test.htm

Ik wil het logo deel, menu deel, een die 4 footer text... allemaal in het midden en die wrapper werkt niet (er gebeurt niet wat ik bedoel) dus weet iemand anders nog wat????
Offline Deloo - 05/02/2010 11:52 (laatste wijziging 06/02/2010 11:08)
Avatar van Deloo Lid Een wrap maken is volgens mij de beste oplossing, en moet normaal wel werken...

Zet eerst al je div's (header, menu, spellen, enzo.) in een overkoepelende div, namelijk #wrap. Dat ziet er dan ongeveer zo uit:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="wrap">
  2.   <div id="header"></div>
  3.   <div id="menu"></div>
  4.   <div id="spellen1"></div>
  5.   <div id="spellen"></div>
  6.   <div id="spellen"></div>
  7.   <div id="add"></div>
  8. </div>

En dan pas je met CSS een bepaalde opmaak toe op de wrap-div. Dus om alles te centreren is dat:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #wrap {
  2.    margin: 0 auto;
  3.    width: 800px;
  4. }

door de margin op auto te zetten zal hij aan beide kanten evenveel marge laten, waardoor alles dus in het midden staat... De width pas je aan naar wens...

Het is trouwens ook makkelijker om met een extern CSS bestand te werken, zo kan je later makelijker dingen aanpassen aan je website.

Zet eerst alle style codes in een bestand en sla het op als style.css of iets in die aard... Daarna roep je dat bestand op in elk html bestand door de volgende regel in je head te zetten

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <link rel="stylesheet" type="text/css" href="jouw_css_bestand" />


Nu moet je maar één bestand aanpassen om een andere lay-out te bekomen...
Bedankt door: Yourgamecrew
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.196s