login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div centreren waarvan content verandert

Offline brechtjah - 26/04/2008 12:39 (laatste wijziging 26/04/2008 12:40)
Avatar van brechtjahNieuw lid Ik heb het volgende probleem: ik wil een afbeelding op het scherm vertonen en deze centreren, dit lukt helaas niet, ik heb al op vele sites gekeken. Dit is mijn code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="divcenter" class="onzichtbaar" style="top: 30%; right: 25%; position: absolute;">
  2. 					<img id="groot" src="" border="15px" border-color="#000000" />
  3. 					</div>
  4.  
  5. 					<p class="tekst"><a href="#" onclick="change('zichtbaar', 'afbeeldingen/tomwindo.png');">Thomas Becket</a></p>
  6. 					<p class="tekst"><a href="#" onclick="change('zichtbaar', 'afbeeldingen/canterbury-cathedral.jpg');">dqsfsfdqsfqdfqsgqdgqdfgqdfgqdfhqdfhgqdhqeftest</a></p>


de javascript die ik gebruik is:
<script type="text/javascript">
function change(newClass, path) {
divcenter.className=newClass;
groot.src=path;
}
</script>

ik heb het al geprobeerd met breedte 50% en hoogte 50% maar dat lukt niet 

10 antwoorden

Gesponsorde links
Offline zointer - 26/04/2008 13:18
Avatar van zointer HTML gevorderde je div centeren doe je zo top: 50%; left: 50%;

css code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="divcenter" class="onzichtbaar" style="top: 50%; left: 50%; position: absolute;">
Offline Martijn - 26/04/2008 13:22
Avatar van Martijn Crew PHP ik gebruik
margin: 0 auto;
werkt ook.
Dan moet je wel in je body zetten
text-align:center;, anders snapt IE t weer niet
Offline brechtjah - 26/04/2008 13:23
Avatar van brechtjah Nieuw lid het werkt niet, mijn afstand moet eigenlijk ervoor zorgen dat de afbeelding de hele tijd in het midden staat, maar dat lukt niet, gewoon omdat ik de rand van de div centreer...
Offline zointer - 26/04/2008 13:28 (laatste wijziging 26/04/2008 13:29)
Avatar van zointer HTML gevorderde
brechtjah schreef:
het werkt niet, mijn afstand moet eigenlijk ervoor zorgen dat de afbeelding de hele tijd in het midden staat, maar dat lukt niet, gewoon omdat ik de rand van de div centreer...

Dan moet je van top: 50%; left: 50%; een aantal % aftrekken hé, zodat exact midden is 





Even zelf uitvogelen
Offline brechtjah - 26/04/2008 13:33 (laatste wijziging 26/04/2008 13:35)
Avatar van brechtjah Nieuw lid jah dat probeer ik met javascript .width en .height, maar dan krijg ik undefined -_- anyway, als ik ze zelf ingeef, de top kan moeilijk 50% - image.height / 2 zijn want dan krijg ik iets van -150% ofzo...
is er een mogelijkheid om de image.height / 2 om te zetten in % relatief tegenover de grootte van het browservenster?
Offline zointer - 26/04/2008 13:39 (laatste wijziging 26/04/2008 15:35)
Avatar van zointer HTML gevorderde
brechtjah schreef:
jah dat probeer ik met javascript

Moet dus niet, is css niks js.
Van die ander uitleg versta ik nada van.





Oja ik kan je niet zeggen hoeveel % je van top en left moet blijven omdat ik niet weet hoe groot de afbeelding is om die in het midden te zetten, dat moet je maar zelf uivogelen (met margin kan je dat ook)

edit: reactie op hieronder;
Zonder js en in het midden.
Trouwens jouw js werkt enkel voor het wisselen van image en dit met IE niet eens in FF.
Maar vragen over js is dit dan de verkeerde fora; Categorieën > HTML & CSS > div centreren.....
Offline brechtjah - 26/04/2008 13:46
Avatar van brechtjah Nieuw lid sigh
als je naar mijn code kijkt zie ja dat ik de afbeelding verander via links,
en aangezien ik werk met verschillende groottes zorgt dat ervoor dat mijn afbeelding niet altijd gecentreerd staat. dat wil ik wel, dus moet ik werken met de hoogte en breedte van die figuur, de rest staat in mijn vorige post
Offline SilVeX - 27/04/2008 10:57
Avatar van SilVeX HTML beginner css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .jouContainer {
  2.   position:absolute;
  3.   width:800px; /*gewoon willekeurige breedte*/
  4.   height:900px; /* noem is wat */
  5.   left:50%; /*de helft van je scherm */
  6.   margin-left:-400px; /* de helft van je container zodat hij exact in het midden staat */
  7.   border:1px solid #000; /*kan je het ook zien */
  8. }


html:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3.  <!-- hier je css -->
  4. </head>
  5. <body>
  6. <div class="jouContainer ">hier alles ingooien</div>
  7. </body>
Offline zointer - 27/04/2008 11:26
Avatar van zointer HTML gevorderde @SilVeX dat is het dus niet.
Offline SilVeX - 27/04/2008 14:36
Avatar van SilVeX HTML beginner
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #main {
  5.   position:absolute;
  6.   top:50%;
  7.   left:50%;
  8.   margin-left:-75px;
  9.   margin-top:-75px;
  10. }
  11. </style>
  12. <script language="javascript">
  13. function js(id, src, width, height) {
  14.   document.getElementById("main").style.marginLeft='-25px';
  15.   document.getElementById("main").style.marginTop='-25px';
  16.   document.getElementById("main").src=src;
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. <!-- een plaatje moet je dit meegeven -->
  22. <img src="" id="main" width="150" height="150" border="0">
  23. <img src="bestand" id="1" width="50" height="50" border="0" onclick="js(this,id, this.src, this.width, this.height)">
  24. </body>
  25. </html>


Javascript moet je even een reken functie inbouwen die de helft van de meegestuurde width/height uitrekent. Nu geef ik het dus mee door op een ander plaatje te klikken. Maar je kan deze gegevens ook in een andere textlink meegeven. Zal je dus alleen vooraf de maten etc moeten invoeren bij de onClick
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.213s