login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[OPGELOST] xhtml en css-p (Opgelost)

Offline Ontani - 16/06/2005 03:55 (laatste wijziging 16/06/2005 16:28)
Avatar van OntaniGouden medailleGouden medailleGouden medailleGouden medaille

-1		 hey, daar ben ik weer met m'n gezaag .
ik heb iets gemaakt met behulp van css-p.
resultaat te zien op http://ontani.no-ip.com/wlb/preview.html

de code is:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="previewTotal">
  2.  <img src="images/previewLarge_03.gif" class="topMiddlePreview" alt="" />
  3.  <img src="images/previewLarge_06.gif" class="centerLeftPreview" alt="" />
  4.  <img src="images/previewLarge_07.gif" class="centerRightPreview" alt="" /> 
  5.  <img src="images/previewLarge_11.gif" class="bottomMiddlePreview" alt="" /> 
  6.  <img src="images/previewLarge_01.gif" class="topLeftPreview" alt="" />
  7.  <img src="images/previewLarge_02.gif" class="topLeft2Preview" alt="" />
  8.  <img src="images/previewLarge_04.gif" class="topRightPreview" alt="" />
  9.  <img src="images/previewLarge_05.gif" class="topRight2Preview" alt="" />
  10.  <img src="images/previewLarge_09.gif" class="bottomLeftPreview" alt="" />
  11.  <img src="images/previewLarge_10.gif" class="bottomLeft2Preview" alt="" />
  12.  <img src="images/previewLarge_08.gif" class="bottomRightPreview" alt="" />
  13.  <img src="images/previewLarge_12.gif" class="bottomRight2Preview" alt="" />
  14.  <div class="centerMiddlePreview">
  15.  </div>
  16. </div>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body {
  2. 	margin: 0px;
  3. 	padding: 0px;
  4. 	width: 100%;
  5. 	height: 100%;
  6. 	background-color: #000000;
  7. }
  8. .previewTotal {
  9. 	position:relative;
  10. 	height: 100%;
  11. }
  12. .topLeftPreview, .topLeft2Preview, .topMiddlePreview, .topRightPreview, .topRight2Preview, .centerLeftPreview, .centerMiddlePreview, .centerRightPreview, .bottomLeftPreview, .bottomLeft2Preview, .bottomMiddlePreview, .bottomRightPreview, .bottomRight2Preview {
  13. 	position:absolute;
  14. }
  15. .topLeftPreview {
  16. 	top: 0px;
  17. 	left: 0px;
  18. }
  19. .topLeft2Preview {
  20. 	top: 0px;
  21. 	left: 80px;
  22. }
  23. .topMiddlePreview {
  24. 	top: 0px;
  25. 	left: 0px;
  26. 	width: 100%;
  27. 	height: 60px;
  28. }
  29. .topRightPreview {
  30. 	right: 80px;
  31. 	top: 0px;
  32. }
  33. .topRight2Preview {
  34. 	right: 0px;
  35. 	top: 0px;
  36. }
  37. .centerLeftPreview {
  38. 	top: 0px;
  39. 	left: 0px;
  40. 	width: 80px;
  41. 	height: 100%;
  42. }
  43. .centerMiddlePreview {
  44. 	top: 60px;
  45. 	left: 80px;
  46. 	bottom: 60px;
  47. 	right: 80px;
  48. }
  49. .centerRightPreview {
  50. 	top: 0px;
  51. 	right: 0px;
  52. 	width: 80px;
  53. 	height: 100%;
  54. }
  55. .bottomLeftPreview {
  56. 	bottom: 60px;
  57. 	left: 0px;
  58. }
  59. .bottomLeft2Preview {
  60. 	bottom: 0px;
  61. 	left: 0px;
  62. }
  63. .bottomMiddlePreview {
  64. 	left: 0px;
  65. 	bottom: 0px;
  66. 	height: 60px;
  67. 	width: 100%;
  68. }
  69. .bottomRightPreview {
  70. 	bottom: 60px;
  71. 	right: 0px;
  72. }
  73. .bottomRight2Preview {
  74. 	bottom: 0px;
  75. 	right: 0px;
  76. }


het zwarte gebied in het midden is de div: centerMiddlePreview.

nu was het m'n bedoeling om een foto in het middelste gebied te zetten die altijd gecentreerd wordt. zowel horizontaal als verticaal.

iemand een ideetje?

Greetz

2 antwoorden

Gesponsorde links
Offline SvenP - 16/06/2005 09:18
Avatar van SvenP PHP interesse align="center" valign="center" ?
Offline NCube - 16/06/2005 09:56 (laatste wijziging 16/06/2005 09:56)
Avatar van NCube HTML beginner De volgende CSS atributen geven aan de afbeelding die daarin komt
php code - Bekijk de code zonder highlighting - Klap code in 
  1. margin-left: auto;
  2. margin-right: auto;

Dit moet ervoor zorgen dat hij horizontaal in het midden komt te staan.
Misschien werkt
php code - Bekijk de code zonder highlighting - Klap code in 
  1. margin: auto;

wel om de afbeelding zowel horizontaal en verticaal te centreren, maar dat weet ik niet zeker.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.243s