login  Naam:   Wachtwoord: 
Registreer je!
 Forum

3 css probleempjes

Offline viezevis - 25/06/2006 00:27
Avatar van viezevisHTML interesse Ik ben bezig aan de layout van volgende site:
http://www.calamitas.be/V2
Bedoeling is dat het geheel steeds de volledige vensterbreedte inneemt, en de linkse en rechtse kolom de hoogte aannemen van de middenste kolom

In firefox toont hij (bijna) alles zoals ik verwacht en het wil hebben (zoals gewoonlijk), enkel de rand rechts van de middenkolom toont hij om een of andere reden niet.

In IE daarentegen trekt het uiteraard weer op niet veel, er is een witte spatie langs de banner bovenaan en de linkse en rechtse kolom lopen niet mee met het middenvenster.
Iemand een idee hoe ik deze dingen kan oplossen want'k geraak er niet echt uit.

CSS code:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #container
  2. {
  3. position: relative;
  4. border: solid 1px #000000;
  5. margin-left: auto;
  6. margin-right: auto;
  7. width: 100%;
  8. color: #1945c2;
  9. }
  10.  
  11. #banner
  12. {
  13. width: 100%;
  14. margin: 0px auto;
  15. height: 150px;
  16. background-image: url('bannerachtergrond.jpg');
  17. background-repeat: repeat-x;
  18. }
  19.  
  20. #containerBody
  21. {
  22. position: relative;
  23. margin-left: auto;
  24. margin-right: auto;
  25. text-align: center;
  26. width: 100%;
  27. }
  28.  
  29. #menu
  30. {
  31. padding-top: 10px;
  32. position: absolute;
  33. left: 0px;
  34. height: 97.5%;
  35. top: 0px;
  36. margin-left: 0px;
  37. margin-bottom: 10px;
  38. width: 185px;
  39. background-image: url('menu.jpg');
  40. background-repeat:no-repeat;
  41. }
  42.  
  43. #menuRight
  44. {
  45. position: absolute;
  46. top: 0px;
  47. right: 0px;
  48. height: 100%;
  49. margin-right: 0px;
  50. margin-bottom: 0px;
  51. width: 165px;
  52. background-image: url('menu.jpg');
  53. background-repeat:no-repeat;
  54. }
  55.  
  56. #containerMain
  57. {
  58. top: 0px;
  59. margin-left: 185px;
  60. margin-right: 165px;
  61. border-top: solid 1px #000000;
  62. border-right: solid 1px #000000;
  63. border-left: solid 1px #000000;
  64. }
  65.  
  66. #pagePosition
  67. {
  68. text-align: left;
  69. width: 100%;
  70. border-bottom: solid 1px #000000;
  71. height: 26px;
  72. padding-left: 10px;
  73. padding-top: 4px;
  74. overflow: visible;
  75. }
  76.  
  77. #main
  78. {
  79. width: 100%;
  80. padding-left: 10px;
  81. padding-top: 5px;
  82. padding-bottom: 0px;
  83. background-color: #c4d1df;
  84. text-align: left;
  85. }
  86.  
  87. #spacer
  88. {
  89. clear: both;
  90. }


Alvast bedankt!

1 antwoord

Gesponsorde links
Offline Musicman - 25/06/2006 03:20
Avatar van Musicman Nieuw lid Je zet bij width: 100%; terwijl de breedte van #main al vastgelegd is door de marges dat je aan de #containerMain hebt gegeven.
Doe die width:100%; in #main weg. Dan zie je de border-right.
In IE verschijnt die en dan weer niet als je herlaad bijv.

Je gebruik je marges op een verkeerde wijze bij genestelde div's.
In onderstaande linken heb je voorbeelde van wat jij wilt doen (als layout) Vergelijk deze code met die van jou. Leer uit die voorbeelden.

Als je de volledige vensterbreedte wilt voeg volledig bovenaan je toe : body{width:100; margin: 0 ;}

Als je ergens zegt width:100%; dan moet je jezelf afvragen, 100% van wat ? Dus moet je eerst de width van de body aanduiden. Steeds doen.

Doordat er geen gevorderde CSS-tutorials zijn op deze site moet ik wel verwijzen naar andere sites.
http://www.mezzoblue.com/zengarden/resources/
http://www.glish.com/css/

2 linken waar ik veel aan had :
Daar leer je dat IE anders denkt dan een mozilla-engine.
Ook over hacks om fouten op te vangen.
( http://www.glish.com/css/hacks.asp )
Bijv:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. min-height: 550px;
  2. 		height:expression(this.scrollHeight < 550? "550px" : "auto" );

De ene is voor een mozilla-engined browser en de andere voor IE. En ze doen hetzelfde. De ene negeert de code voor de andere. Dus mogen ze bij elkaar geplaatst worden.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.208s