login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Multiple problems: Niet centreren, height niet willen nemen,...

Offline Maffen - 08/10/2005 13:07 (laatste wijziging 08/10/2005 19:06)
Avatar van MaffenNieuw lid http://maf.hopto.org/~bart/css-test/

In IE gelijkt het een beetje op, maar firefox wil het helemaal niet doen.
Ik heb geprobeert om mijn div.container 100% width the nemen, en 100% heigth, en de divs die er in staan te centreren, maar blijkbaar lukt dit niet, bestaat er een ander alternatief om te centreren?

Ook, ik heb links en rechts shadowl en shadowr, in IE toont hij ze (100% height), maar in firefox toont hij ze helemaal niet.. (nochtans is de css file 100% valid)

pageb wil firefox ook niet tonen, wel als ik -17 zet, dan toont hij hem heel vanboven.. :/

Iemand een idee voor deze problemen?

PS. any comments op css file mag, het is de eerste keer dat ik het probeer in css.. 

style.css
php code - Bekijk de code zonder highlighting - Klap code in 
  1. /* CSS Document */
  2. div {
  3. 	margin: 0px;
  4. 	padding: 0px;
  5. }
  6. div.container {
  7. 	position: relative;
  8. 	margin: 0 auto;
  9. 	height: 100%;
  10. 	width: 700px;
  11. }
  12. div.shadowl {
  13. 	width: 26px;
  14. 	height: 100%;
  15. 	position: absolute;
  16. 	top: 0;
  17. 	left: 0;
  18. 	background-image: url(images/bgleft.png);
  19. }
  20. div.lightningl {
  21. 	width: 26px;
  22. 	height: 56px;
  23. 	position: absolute;
  24. 	top: 160px;
  25. 	left: 0;
  26. 	background-image: url(images/02.png);
  27. }
  28. div.shadowr {
  29. 	width: 34px;
  30. 	height: 100%;
  31. 	position: absolute;
  32. 	top: 0;
  33. 	left: 666px;
  34. 	background-image: url(images/bgright.png);
  35. }
  36. div.lightningr {
  37. 	width: 34px;
  38. 	height: 56px;
  39. 	position: absolute;
  40. 	top: 160px;
  41. 	left: 666px;
  42. 	background-image: url(images/06.png);
  43. }
  44. div.header {
  45. 	width: 640px;
  46. 	height: 176px;
  47. 	position: absolute;
  48. 	left: 26px;
  49. 	top: 0px;
  50. 	background-image: url(images/07.png);
  51. }
  52. div.menu {
  53. 	width: 640px;
  54. 	height: 25px;
  55. 	background-image: url(images/11.png);
  56. 	position: absolute;
  57. 	left: 26px;
  58. 	top: 176px;
  59. }
  60. div.paget {
  61. 	width: 640px;
  62. 	height: 7px;
  63. 	position: absolute;
  64. 	left: 26px;
  65. 	top: 201px;
  66. 	background-image: url(images/08.png);
  67. }
  68. div.page {
  69. 	width: 640px;
  70. 	height: 100%;
  71. 	position: absolute;
  72. 	left: 26px;
  73. 	top: 0px;
  74. 	background-image: url(images/09.png);
  75. 	z-index: -1;
  76. }
  77. .tekst {
  78. 	width: 630px;
  79. 	position: absolute;
  80. 	left: 31px;
  81. 	top: 210px;
  82. 	background: none;
  83. }
  84. div.pageb {
  85. 	width: 640px;
  86. 	height: 0px;
  87. 	position: absolute;
  88. 	left: 26px;
  89. 	bottom: 0px;
  90. 	background-image: url(images/10.png);
  91. }
  92. body, html {
  93. 	margin: 0px;
  94. 	padding: 0px;
  95. 	width: 100%;
  96. 	height: 100%;
  97. 	background-image: url(images/bg.png);
  98. }


index.php:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Untitled Document</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div class="shadowl">&nbsp;</div><div class="shadowr">&nbsp;</div>
  11. <div class="lightningl"></div><div class="lightningr"></div>
  12. <div class="header"></div>
  13. <div class="menu"><center><img src="images/12.png" width="173" height="25" border="0" /><img src="images/13.png" width="118" height="25" border="0" /><img src="images/14.png" width="164" height="25" border="0" /><img src="images/15.png" width="157" height="25" border="0" /></center></div>
  14. <div class="paget"></div>
  15. <div class="page"></div>
  16. <div class="tekst"><?php echo "Hello World!"; ?></div>
  17. <div class="pageb"></div>
  18. </div>
  19. </body>
  20. </html>

2 antwoorden

Gesponsorde links
Offline Ontani - 08/10/2005 13:11 (laatste wijziging 08/10/2005 13:13)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 probeer zo weinig mogelijk met absolute positionering te werken

div.class

mag gewoon

.class

worden

zet in uw stylesheet er nog bij:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. body, html {
  2.  margin: 0px;
  3.  padding: 0px;
  4.  width: 100%;
  5.  height: 100%;
  6. }
Offline Maffen - 08/10/2005 13:22 (laatste wijziging 08/10/2005 19:06)
Avatar van Maffen Nieuw lid Ok, een hele betering nu...
Nu heb ik nog 2 dezelfde fouten in zowel IE als Firefox 
Het staat niet gecentered en de nu krij gje een scrollbar, en als ge verder scrollt, ehb je geen shadows niet meer...

Ontani: hoe kan je dat dan doen? als je geen absolute mag gebruiken (ik heb tutorial gevolgt van hier..)

//edit: ok, ik sta al iets verder...
Heb het gevonden hoe je moet centreren, maar ik heb nog altijd iets raars met die ene div...
En ik denk dat ik het ook al het probleem gevonden heb, maar geen antwoord.
Ik heb in m'n div.page staat height: 100%; en ik denk dat hij de lengte van heel m'n scherm neemt, en pas begint onder div.menu, daardoor hij verder doorgaat..
Iemand een idee?

//edit2: Ok, weer iets opgeschoven...
Nu heb ik die layer die 'uitschoof' onder de header en menu laten gaan, en beginnen via 0px, en dat gaat nu goed, alleen, in IE zie ik 2 streepjes lopen erover (van waar ze komen, geen flauw idee) en in firefox zie je hem niet (raar, want de shadows hebben dezelfde properties, en zij doen het wel... :/)

Startpost gewijzigt met nieuwe files...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.191s