Beste leden,
Ik wil graag een div van 958*585 in het midden van mijn pagina. Deze div zit in een andere div van 100%*100%. Ik krijg hem wel horizontaal in het midden door margin: 0 auto;
Maar hoe moet ik het verticaal regelen?
Hoop dat jullie mij kunnen helpen.
Met vriendelijke groet,
Tom Giesbergen
- Css div midden van de pagina
-
29-12-2010, 15:23 #1
- Berichten
- 878
- Lid sinds
- 15 Jaar
Css div midden van de pagina
-
In de schijnwerper
Jouw artikel op inderegioamsterdam.nl? Vandaag maar €20!AdvertentieruimteErvaren freelance PHP/Javascript ontwikkelaar beschikbaarFreelance / WerkComplete Webhosting incl. verhuisservice: slechts €3,99 per maandHostingLinkbuilding uitbesteden - 25 jaar ervaring - Zie behaalde resultatenAdvertentieruimte -
29-12-2010, 15:28 #2
- Berichten
- 316
- Lid sinds
- 15 Jaar
Re: Css div midden van de pagina
position: absolute;
top: 50%;
left: 50%;
-
29-12-2010, 15:35 #3
- Berichten
- 878
- Lid sinds
- 15 Jaar
Re: Css div midden van de pagina
@ leone,
Dit is niet de oplossing bij mij, hij springt nu wel in op 50%. Maar de div zelf moet op de helft zitten
-
29-12-2010, 15:42 #4
- Berichten
- 316
- Lid sinds
- 15 Jaar
Re: Css div midden van de pagina
#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* helft van de containers hoogte */
float:left;
}
.container{
position:relative;
clear:left;
margin:0 auto; /*horizontale centrering. Werkt niet in IE quircksmode. Dan text-align:center aan body toevoegen*/
width:1000px;
height:600px;
}
<body>
<div id="distance"></div>
<div class="container">
content
</div>
</body>
-
29-12-2010, 15:53 #5
- Berichten
- 878
- Lid sinds
- 15 Jaar
Re: Css div midden van de pagina
@ leone,
Ik heb precies uw code overgenomen. helaas hij zet hen nog niet in het midden...
-
29-12-2010, 15:55 #6
- Berichten
- 59
- Lid sinds
- 16 Jaar
Re: Css div midden van de pagina
Wat is mis met de volgende oplossing?
Code:#container{ width:958px; height:585px; position:absolute; top:50%; left:50%; margin-left:-479px; /* helft van width */ margin-top:-292px; /* helft van height */ }
-
29-12-2010, 15:56 #7
- Berichten
- 293
- Lid sinds
- 16 Jaar
Re: Css div midden van de pagina
Stel we noemen jou div container dus die gene die in het midden van het midden moet. (958*585)
Je hebt dan al margin:0 auto; waardoor die horizontaal in het midden komt.
Om het verticaal in het midden te krijgen geven we het volgende mee
PHP Code:top:50%;
margin: -292 auto 0 auto;
Je kan voor de zekerheid ook nog dit in je css toevoegen
PHP Code:
html, body{
width:100%;
height:100%;
}
-
29-12-2010, 15:57 #8
- Berichten
- 316
- Lid sinds
- 15 Jaar
Re: Css div midden van de pagina
Hmm, oké dan proberen we weer wat anders:
vertical-align: middle;
Kijk eens of dat werkt.
En anders een iets ingewikkeldere versie:
http://www.jakpsatweb.cz/css/css-ver...-solution.html
-
29-12-2010, 16:06 #9
- Berichten
- 293
- Lid sinds
- 16 Jaar
Re: Css div midden van de pagina
@Leone,
Wat stel je allemaal moeilijk oplossingen voor terwijl er door mij en Michel en werkende oplossing is gegeven.
-
29-12-2010, 16:14 #10
- Berichten
- 316
- Lid sinds
- 15 Jaar
Re: Css div midden van de pagina
2 van mijn oplossingen zijn makkelijker dan de gene die jullie hebben gegeven.
Mocht TS er niet aan uitkomen dan geef ik hem gewoon een linkje naar een site waar keurig staat uitgelegd hoe hij het voor elkaar zou kunnen krijgen mochten de oplossingen in het topic niet werken.
Verder snap ik niet bepaald wat je nu precies wil bereiken met je reactie? moet ik mijn reacties weghalen omdat deze in jouw ogen niet goed genoeg zijn? Ik denk dat dit toch echt aan de TS om te bepalen.
-
29-12-2010, 16:16 #11
- Berichten
- 59
- Lid sinds
- 16 Jaar
Re: Css div midden van de pagina
@leone Jouw oplossingen zijn sowieso niet makkelijker. Er is maar 1 goede en heldere oplossing, en die is door 2 man gegeven.
Succes
-
29-12-2010, 16:31 #12
- Berichten
- 878
- Lid sinds
- 15 Jaar
Re: Css div midden van de pagina
Bedankt voor jullie reacties, het is inmiddels opgelost
Dit is nu mijn code:
#container{
width:958px;
height:590px;
position:absolute;
background-color:#A9B9C5;
top:50%;
left:50%;
margin-left:-479px; /* helft van width */
margin-top:-295px; /* helft van height */
}
-
29-12-2010, 16:32 #13
- Berichten
- 293
- Lid sinds
- 16 Jaar
Re: Css div midden van de pagina
@Leone,
Jouw oplossingen zijn makkelijker? De TS geeft aan dat die het element als horizontaal in het midden krijgt maar verticaal nog niet. Michel en Ik geven in 2 regels aan hoe die dit werkend kan krijgen terwijl jij er allemaal element aan toe gaat voegen en zelfs in je voorbeeld als zegt dat het in quircksmode niet werkt.
Dan snap ik jouw definitie van makkelijker niet.
En mijn reactie was bedoelt dat jij naar dit probleem moeilijk kijkt. Terwijl het zeer simpel is. En nee je hoeft je reactie niet weg te halen want er is bijna geen goud of fout in HTML alleen makkelijk en ingewikkeld.
-
29-12-2010, 17:07 #14
- Berichten
- 59
- Lid sinds
- 16 Jaar
Re: Css div midden van de pagina
Als voorbeeld
margin-left:-479px; /* helft van width */
margin-top:-295px; /* helft van height */
Dit kun je dus nog eenvoudiger schrijven als
margin:-295px 0px 0px -479px;
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic