[ XHTML / CSS ] j'ai pas de barre de defilement !

j'ai pas de barre de defilement ! [ XHTML / CSS ] - HTML/CSS - Programmation

Marsh Posté le 08-04-2003 à 10:23:28    

:hello:  
 
j'essaie de me mettre au XHTML/CSS afin de produire du code + propre et + standard.
 
Seulement, j'eprouve encore quelques difficultes...
 
J'ai un leger souci : j'ai un ensemble de DIV qui strucurent ma page comme je le voudrais cependant sous Mozilla, je n'ai pas de barre de defilement verticale et mon texte est tronque alors que IE me l'affiche ...
 
j'ai essaye qlq trucs (mais je ne maitrise tjrs pas la chose ;)) mais je n'arrive pas a ce que je veux.
 
voici mon "body" :
 

Code :
  1. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  2. <div id="cadre">
  4. <div id="entete">
  5.  <img src="./rsc/barre-passerelle.jpg" width="775" height="150" />
  6. </div>
  8.  <div id="fastaccess">
  9.  <p> </p>
  10.  <p>> rub 1</p>
  11.  <p>rub 2</p>
  12.  <p>rub 3</p>
  13.  </div>
  14.  
  15.   <div id="corps">
  16.  <span class="noir-sous-titre-light">TITRE</span>
  17.  <p align="justify"><span class="noir-mise-en-valeur">Conseil n°6.</span><br />
  18.    bla bla bla bla bla ...
  19.  </p>
  20.   </div>
  21. </div>
  22. </body>


 
et voici ma CSS :
 

Code :
  1. body,p,div,table{
  2. color: rgb(0,0,0);
  3. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  4. font-size:11px;
  5. padding:0;
  6. }
  8. #cadre {
  9. position: fixed;
  10. width: 775px;
  11. height: 100%;
  12. top: 0;
  13. right: 0;
  14. bottom: 0;
  15. left: 0;
  16. }
  18. #entete {
  19. background-color: rgb(214,220,82);
  20. position: float;
  21. width: 100%;
  22. height: 150px;
  23. top: 0;
  24. right: 0;
  25. bottom: auto;
  26. left: 0;
  27. }
  29. #fastaccess {
  30. background-color: rgb(214,220,82);
  31. text-align: center;
  32. position: fixed;
  33. width: 10em;
  34. height: 100%;
  35. top: 150px;
  36. right: auto;
  37. bottom: 0;
  38. left: 0;
  39. }
  41. #corps {
  42. background-color: rgb(243,244,226);
  43. position: absolute;
  44. padding: 5px;
  45. width: auto;
  46. height: auto;
  47. right: 0;
  48. bottom: 0;
  49. left: 10em;
  50. top: 150px;
  51. }


 
pouvez-vous m'expliquer svp ? :(  
 
 :jap:


---------------
taciturnik maladik systemik
Reply

Marsh Posté le 08-04-2003 à 10:23:28   

Reply

Marsh Posté le 08-04-2003 à 10:42:28    

j'aimerais preciser que je ne veux pas la barre de defilement sur la div "corps" mais bien pour la fenetre du site en general
 
aidez un petit gars en detresse :cry:


---------------
taciturnik maladik systemik
Reply

Marsh Posté le 08-04-2003 à 11:41:22    

Je n'ai pas de barre de défilement avec Mozilla :??: et l'affichage me semble bon. En revanche avec IE il y a des problèmes...
 
 
Enfin quoiqu'il en soit, je ne sais pas ce que tu veux faire mais je trouve ton code très compliqué...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 11:57:13    

oui, il n'y a pas de barre de defilement avec mozilla, c'est bien la le probleme :(
 
en fait, je voudrais "formater" ma page en 3 partie :
 
un bloc horizontal (entete) en haut de page de 775px x 150px
un bloc vertical cale a gauche (fastaccess) de 150px x 100% (collé au bas du bloc du dessus)
un bloc vertical collé au bloc de gauche (corps)allant jusqu'a 775px de largeur
 
mon bloc "corps" contient du texte. Si le texte deborde de la surface visible en bas, il n'y a pas de barre de defilement et donc il ne peut etre lu ...
 
tu vois ce que je veux dire ?
 


---------------
taciturnik maladik systemik
Reply

Marsh Posté le 08-04-2003 à 11:59:51    

je vais essayer de faire un croquis :
 
________________________________________
|                                                              |
|      ENTETE                                              |
|                                                              |
|                                                              |
|_______________________________________|
|                |                                             |
|                |                                             |
|   FAST      |                                            |
|   ACCESS  |                                             |
|                |                                             |
|                |                                             |
|                |                                             |
|                |        CORPS                            |
|                |                                             |
|                |                                             |
|                |                                             |
|                |                                             |
|_______________________________________|


Message édité par onano le 08-04-2003 à 12:06:14

---------------
taciturnik maladik systemik
Reply

Marsh Posté le 08-04-2003 à 12:21:18    

onano a écrit :

oui, il n'y a pas de barre de defilement avec mozilla, c'est bien la le probleme :(


Oui, je voulais dire en fait que je n'en avais pas avec IE aussi.

onano a écrit :

en fait, je voudrais "formater" ma page en 3 partie :
 
un bloc horizontal (entete) en haut de page de 775px x 150px


Là je t'arrête tout de suite car il très très difficile de faire ceci en utilisant le positionnement à l'aide de CSS et de DIV. La faute à IE qui ne supporte pas la déclaration de hauteurs ou de largeurs implicites (top: 150px; bottom: 0px; -> pour faire un bloc qui démarre à 150 px du haut et qui va jusqu'en bas de l'écran).
 
Donc soit tu fais avec des tableaux, à l'ancienne mode. Soit tu abandonne l'idée que tes blocs doivent aller jusqu'en bas de l'écran (éventuellement on peut ruser en mettant une image de fond).


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 12:27:48    

j'ai effectué mes tests avec IE 5.5 et Mozilla 1.0 et 1.2
 
repasser aux tableaux ?? :cry: je passais au XHTML/CSS pour m'en affranchir justement (a force de me faire lincher sur le forum d'ailleurs :whistle: )
 
voila que je vais finir par detester IE alors que je ne developpais quasiement que pour lui ... :( je vais changer de metier ...
 
quid de cette mythique portabilite du XHTML/CSS entre les navigateurs > v4  :??:  :fou:


---------------
taciturnik maladik systemik
Reply

Marsh Posté le 08-04-2003 à 13:43:30    

onano a écrit :

quid de cette mythique portabilite du XHTML/CSS entre les navigateurs > v4  :??:  :fou:  


Bah globalement ça marche pas mal, sauf quelques cas particuliers. Et toi tu es tombé sur un cas particulier [:spamafote]


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 14:49:41    

classe ! :sol:  
 
 :sweat:  
 
tu peux me dire comment tu vois cette page stp ?
 
http://www.ifrance.com/batman-fr/h [...] t-test.htm


---------------
taciturnik maladik systemik
Reply

Marsh Posté le 08-04-2003 à 14:54:26    

Avec Mozilla il y a un problème avec la colonne de gauche : elle n'est pas collée au bandeau du haut et elle ne descend pas jusqu'en bas.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 14:54:26   

Reply

Marsh Posté le 08-04-2003 à 15:10:05    

oui, je viens de tester :
 
IE 5.5 : tout est OK en apparence (mais il y a tricherie avec les couleurs de fond)
 
Netscape 6 et 7 : petit decalage entre la colonne de gauche et l'entete mais avec une image de fond je me debrouillerai
 
Mozilla 1 et 1.2 : idem quasiement
 
Opera 6 et 7 : pas de decalage mais la colonne de gauche ne descend pas jusqu'en bas (idem, je tricherai avec une image de fond)
 
bref, j'arrive a limiter la casse, je suis plutot satisfait ...
 
par contre, avec des tableaux, je serait arrivé à un resultat parfait je pense ...
 
que je conseilles-tu du coup ? je reste avec mes DIV ou je repasse en tableaux ? :heink:


---------------
taciturnik maladik systemik
Reply

Marsh Posté le 08-04-2003 à 16:19:58    

voici mon code si cela peut aider quelqu'un :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0//EN">
  2. <html>
  3. <head>
  4. <title>y'a pas de titretitle>
  5. <STYLE type="text/css">
  6.   body {
  7.   color: rgb(0,0,0);
  8.   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  9.   font-size: 11px;
  10.   margin: 0;
  11.   padding: 0;  
  12.   }
  13.   
  14.   body {
  15.   background-color: rgb(243,244,226);
  16.   }
  18.     .cadre {
  19.     width: 775px;
  20.     height: 100%;
  21.     }
  22.   
  23.    #entete {
  24.   background-color: #C9E1C6;
  25.   float: left;
  26.   width: 100%;
  27.   height: 150px;
  28.    }
  29.    #cote {
  30.   background-color: rgb(214,220,82);
  31.   float: left;
  32.   width: 150px;
  33.   height: 100%;
  34.   text-align: center;
  35.    }
  36.    #corps {
  37.   float: right;
  38.   width: 625px;
  39.   height: 100%;
  40.    }
  42.  </STYLE>
  43. </head>
  44. <body>
  45. <div class="cadre">
  46.     <div id="entete">
  47.  ...
  48.     </div>
  50.     <div id="cote">
  51.          bla bla bla ...
  52.     </div>
  54.     <div id="corps">
  55.          bla bla bla ...
  56.     </div>
  57. </div>
  58. </body>
  59. </html>


---------------
taciturnik maladik systemik
Reply

Marsh Posté le 08-04-2003 à 18:43:45    

> Il manque une balise <meta> pour l'encoding
 
> Tu n'as pas besoin de float: left; et width: 100%; pour l'en-tête
 
> Puisque tu n'utilises pas le positionnement absolu, tous les height: 100% sont sans effet.
 
> A priori on peut se passer du float: right pour le #corps (faut juste ajouter une marge à gauche de la largeur de #cote)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed