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

afbeelding centreren (Opgelost)

chth – 12/11/2011 17:33
Offline offline




Lid
 hallo,

graag zou ik een afbeelding in het midden van een pagina hebben, maar dit wringt een beetje. de afbeelding heb ik in een div gezet en ik gebruik volgende css-code

  1. #afb {
  2. 	margin: auto;
  3. 	display: block;
  4.  
  5. }

8 antwoorden

Gesponsorde links
Daisycon - Verdien geld met uw website

pijke – 12/11/2011 19:59
Offline offline



Gouden medaille

Lid
 zou je de gehele broncode kunnen posten?

chth – 12/11/2011 20:34
Offline offline



Lid
geen probleem.

dit is de html code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="stylesheet" type="text/css" href="layout.css" />
  6. <title></title>
  7. </head>
  8.  
  9. <body>
  10. <div id="afb"><img src="under-construction.jpg" alt="under construction" width="347" height="346" /></div>
  11. </body>
  12. </html>



met volgende css-code

  1. html 	{
  2. 	height: 100%;
  3. 	width:100%;
  4. }
  5. body	{
  6. 	height: 100%;
  7. 	width:100%;
  8. 	padding: 0;
  9. 	margin: 0;
  10. }
  11. img	{
  12. 	padding: 0;
  13. 	margin: 10px;
  14. }
  15.  
  16. #afb {
  17. 	margin-top:auto;
  18. 	border:dotted;
  19. 	border-color:red;
  20. 	margin-left:auto;
  21. 	margin-right:auto;
  22. 	/*display: block;*/
  23. 	padding:0px;
  24. 	width: 367px;
  25. 	height: 366px;
  26. 	position:relative;
  27. }

larssy1 – 12/11/2011 21:54 (Laatst gewijzigd op 12/11/2011 21:59)
Offline offline



MySQL beginner
werkt normaal in Internet Explorer en Google Chrome.

http://www.unrealxs.com/beta/test
---
Voor zekerheid in Dreamweaver even gekeken, beide kanten hebben exact 632px ruimte bij mij 

chth – 13/11/2011 08:50
Offline offline



Lid
inderdaad, horizontaal centreren is geen probleem. het is echter bij het verticaal centreren dat het niet lukt 

icemar – 13/11/2011 09:31
Offline offline



Lid
Met dit werkt het wel suc6 er mee

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css">
  6. html     {
  7.     height: 100%;
  8.     width:100%;
  9. }
  10. body    {
  11.     height: 100%;
  12.     width:100%;
  13.     padding: 0;
  14.     margin: 0;
  15. }
  16. img    {
  17.     padding: 0;
  18.     margin: 10px;
  19. }
  20.  
  21. #afb {
  22.     border:dotted;
  23.     border-color:red;  
  24.     /*display: block;*/    
  25.     width: 368px;
  26.     height: 366px;
  27.     position:absolute;
  28.     top:50%;
  29.     margin-top:-183px;
  30.     left:50%;
  31.     margin-left:-184px;
  32. }
  33.  
  34.  
  37. </head>
  38.  
  40. <div id="afb">
  41.     <img src="http://www.aandeknoppen.org/blog/wp-content/uploads/2011/03/Under-Construction.gif" alt="under construction" width="347" height="346" />
  42. </div>
  43. </body>
  44. </html>

chth – 13/11/2011 09:41
Offline offline



Lid
zeer tof, maar waarom die -183px en -184px?

icemar – 13/11/2011 09:56
Offline offline



Lid
dat is de helft afmeting van de afbeelding door deze negatief te zetten komt deze op de juiste plaats.
Anders zal dat niet mogelijk zijn zonder javascript te gebruiken.

chth – 13/11/2011 11:35
Offline offline



Lid
owke, thanks ;)

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten:

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