Aller au contenu

scroll (Mozilla) et espace (IE) ?

nizouille

Par nizouille
dans (X)HTML et CSS

 Partager

Sujets conseillés

nizouille

nizouille

Posté
Posté

Hello,

J'ai deux problèmes :

J'ai une scrollbar verticale sous Mozilla, et sous IE j'ai un grand espace transparent alors que le width est à 100 %

Et voici ce que ça donne ..

J'ai consulté le forum pour trouver une réponse à ces deux (petits mais ennuyeux graphiquement) soucis ... mais ce que j'ai essayé n'a pas fonctionné ... Il doit y avoir une incompatibilité quelque part dans mon code mais je ne vois pas où ...

Voici mon code 

 :nono: 
/***** menu CSS *****/ 
html, body, #holder { min-height: 100%; height: 100%;} 
html>body, html>body #holder { height: auto;} 
body { margin: 0; padding:0; } 
#holder { position: absolute; top: 0; left: 0;} 
#content {margin-left: 160px; margin-top: 134px; height: auto; margin-bottom: 10px; background-color:#FFF} 
.haut {        /* bloc haut : hauteur définie et image de fond */ 
   height: 46px; 
   background-image: url(images/cadre/haut.gif); 
} 
.hautd {        /* bloc haut droit: tailles, image de fond et alignement */ 
   height: 46px; 
   width: 80px; 
   background-image: url(images/cadre/hautd.gif); 
   float: right; 
   } 
.bas {        /* bloc bas : hauteur définie et image de fond */ 
   height: 68px; 
   background-image: url(images/cadre/bas.gif); 
   font-size: 0; 
} 
.basd {        /* bloc bas droit: tailles, image de fond et alignement */ 
   height: 68px; 
   width: 80px; 
   background-image: url(images/cadre/basd.gif); 
   float: right; 
   font-size: 0; 
   } 
.centre {  /* bloc centre : bord gauche qui ne se répète qu'en hauteur */ 
   background-image: url(images/cadre/gauche.gif); 
   background-repeat: repeat-y; 
   } 
.contenu {   /* bloc contenu : bord droit qui ne se répète qu'en hauteur */ 
      font-size: 0.9em; 
   text-align:justify; 
   background-image:  url(images/cadre/droite.gif); 
   background-repeat: repeat-y; 
   background-position: right; 
   padding: 5px 55px 1px 30px;   /* marges internes pour que le texte ne colle pas aux bords */ 
   } 
#footer {clear: both; height: 1.1em; position: absolute; bottom: 0; left: 0; background:#006699; text-align:right; color: #F2E7DB;  border: none; width: 100%;} 

_AT_media print { 

/*A l'impression on cache le menu, marche au moins pour IE, Moz et Opéra.*/ 

   .menu, .ssmenu { 
      visibility:hidden; 
   } 
} 
.ssmenu { 
   background-color:#B6C5D6; 
   color:black; 
   font-size:12px; 
   font-weight:bold; 
   padding:1px; 
/* following is not valid CSS */ 
   filter:alpha(opacity=75); 
   -moz-opacity:0.75; 
   opacity: 0.75; 
/* width et margin sont au cas où le javascript est désactivé. */ 
   width:15em; 
   margin:1em; 
} 
/* .menu = les cases toujours visibles (comme Fichier, Edition... dans un logiciel) */ 
.menu { 
   text-align:left; 
} 
.menu span, .ssmenu span { 
/* Ne pas toucher 
   C'est pour cacher les; en fin de <li>, ce qui permet aux synthèse vocales de prendre une 
   pause dans l'élocution */ 
   display:none; 
} 
.ssmenu ul, .ssmenu li { 
/* Ne pas trop toucher. 
   Les items (les <li>) des sous-menus, notamment pour enlever les puces des liste */ 
   padding:0; 
   margin:0; 
   list-style-type:none; 
} 
/* Les liens qui ne sont pas sous le curseur. */ 
.ssmenu a, .ssmenu a:visited { 
   font-family: sans-serif, Verdana, Arial; 
   text-decoration:none; 
   color:black; 
   padding:2px 1px; 
/* Ne pas modifier le block */ 
   display:block; 
/*   Un width:100% fait planter Mozilla, sans le width:100% c'est IE et Opera... La combinaison 
   aucun width et height:100% marche sur tous, donc ne pas toucher ces 2 lignes */ 
/*   height:100%; 
   margin:0px;*/ 
   margin:0px; 
   width:100%; 
} 
.menu a,  .menu a:visited { 
   display: block; 
   line-height: 26px; 
   text-align: left; 
   font-size: 0.9em;  
   font-weight: bold; 
   height: 100%; 
   width: 136px; 
   color: #006699; 
   text-decoration: none; 
   background:  url(images/bouton.gif) no-repeat 0 0; 
   background-position: 20px 0px; 
} 
html>body .menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited { 
   width:136px; 
} 
.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus{ 
/* Les liens sous le curseur. 
   On change les couleurs du texte et de fond, et on enlève le soulignement. 
   */ 
   background-color:#859FBB; 
   color: #FECB33; 
   text-decoration:none; 
} 
.menu a:hover, .menu a:focus { 
   background:  url(images/bouton.gif) no-repeat 20px -26px; 
   color: #006699; 
} 

a { 
     color: #FECB33; 
     text-decoration: none; 
} 

a:hover { 
     color: #F2E7DB; 
} 

ul, li { 
   margin: 0; 
   padding: 0; 
   font-weight: bold; 
   list-style-type: none; 
} 
/* les 3 boutons du header*/ 
.bt1 { 
   position: absolute; 
   top: 20px; 
   left: 480px; 
} 
.bt2 { 
   position: absolute; 
   top: 40px; 
   left: 450px; 
} 
.bt3 { 
   position: absolute; 
   top: 60px; 
   left: 425px; 
} 
body, html { 
   margin: 0; 
   padding: 0; 
   background: #F2E7DB; 
   font-family: verdana, sans-serif; 
   font-size: 0.9em; 
} 
#header { 
position : absolute; 
    left: 0px; 
    right: 0px; 
   height: 115px; 
   width: 100%; 
   border: none; 
   background:  url(images/fond-header.gif) repeat-x 0 0; 
} 

#plan { 
   position: absolute; 
   right: 0px; 
   top: 0px; 
   color: #F2E7DB; 
} 
#plan a { 
   margin: 0; 
   padding: 0;  
     color: #F2E7DB; 
     text-decoration: none; 
} 
#plan a:hover { 
     color: #FECB33; 

} 

/*cadre arrondi */ 
#background { 
   position: absolute; 
   left: 25px; 
   top: 149px; 
   height: 339px; 
   width: 138px; 
   background:  url(images/cadretitre/cadre.gif) no-repeat; 
   } 
.identification{ 
font-weight: bold; 
font-size: 1.0em; 
text-align: center; 
margin-top: 200px; 
margin-left : 5px;  
color: #006699; 
} 
/*formulaire*/ 
form { 
  width: 80%; 
  font-family: Verdana, Arial, sans-serif; 
  font-size: 1.1em; 
  margin-left: 10%; 
  } 
    form fieldset       { border: 1px dashed #79C; padding: 10px; background-color: #FFF;} 
    form legend         { background-color: white; padding: 1px 4px; color: #B6C5D6; font-weight:bold;} 
    form div            { padding: 6px 8px; } 
    form div.bloc label { display: block; float: left; width: 30%; } 
    form div.center     { text-align: center; } 
    p.message  { text-align: center; } 
    
label { 
font-family: Verdana, Arial, sans-serif; 
font-weight:bold 
} 
input { 
background-color: #DEE6EE; 
color:#000; 
  font-size:12px; 
} 
select, option { 
background-color: #DEE6EE; 
} 
textarea { 
border:1px solid black; 
font-size: 1.1em; 
} 
input.bouton { 
border:2px outset #DEE6EE; 
font-weight:bold; 
cursor:pointer; 
} 
input.bouton:hover { 
background-color:white; 
color: #000; 
} 
/*fin du formulaire */ 
/* différentes mises en forme de texte*/ 

span.gras { 
   font-weight : bold; 
} 
span.gch { 
display: block; 
float: left; 
text-align: left; 
} 
span.dte { 
display: block; 
float: right; 
text-align: right; 
} 
.liens { 
     color: #006699; 
     font-weight : bold; 
   background: none; 
   } 
.liens:hover { 
     color: #FECB33; 
   background: none; 
} 
/* titres */ 
h1, h2, h3 { 
   padding-left: 2em;    
} 
h2 { 
   margin-left: 1em; 
   background:  url(images/puce.gif) 0px 50% no-repeat; 
} 
h3 { 
   margin-left: 2em; 
   background:  url(images/puce2.gif) 0px 50% no-repeat; 
} 
p { 
   text-indent: 2em; 
} 
.titre {   /* placement de l'image titre */ 
   margin-left: 30px; 
   margin-top: 20px; 
   }

Le voici :)

Je comprends pas cet espace sous IE ... (ni la scrollbar sous Mo vu que j'ai appliqué le hack pour la supprimer) ...

Merci beaucoup ...

J'ai pas encore eu le temps d'installer d'autres navigateurs, donc si vous reportez d'autres problèmes, faites le moi savoir ..

Nizouille

Voulf

Voulf

Posté
Posté

Salut,

Le problème vient de l'utilisation des positionnements absolus.

Essaye ceci pour le header : 

#header {
	height: 115px;
	border: none;
	background:  url(images/fond-header.gif) repeat-x 0 0;
}

et fait de même sur le footer.

Et pour le pied de page si tu veux une compatibilité maximale une bonne traduction de chez pompage : Les pieds de page dans le plat.

nizouille

nizouille

Posté
  • Auteur
Posté

beuh j'avais essayé l'article de pompage, mais ça ne fonctionnait pas ...

Etait-ce à nouveau à cause du positionnement absolu ??

Et la scrollbar sous Mo vient-elle de là également ?

Merci de ta réponse ..

Nizouille

Voulf

Voulf

Posté
Posté

Salut,

Excuse moi j'ai du oublié qq chose car cela semblait fonctionner hier soir depuis chez moi.

Et pour être hônnete je pense que c'est l'ensemble de la page qu'il faut revoir, les positions abolues à outrance n'est pas une bonne voie pour afficher une page.

nizouille

nizouille

Posté
  • Auteur
Posté

OK,

mais peux-tu me guider "online" pcq g toujours utilisé ça depuis mes débuts ..

et je dois rendre le prjet dans quelques jours ...

Ce serait vraiment sympa de ta part ...

Peut-être aussi n'ai-je pas fait les bons correctifs ??

Merci

nizouille

nizouille

Posté
  • Auteur
Posté

g résolu le prb de la scrollbar sous Mo ... il suffisait de mettre une height de 1.3 em ... bizarrement ..

Pour IE et l'espace blanc, j'ai toujours pas trouvé ..

Des amateurs ? :)

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...