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:
  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>


  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
  1. margin-left: auto;
  2. margin-right: auto;

Dit moet ervoor zorgen dat hij horizontaal in het midden komt te staan.
Misschien werkt
  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.214s