Pb affichage Firefow et Safari - HTML/CSS - Programmation
Marsh Posté le 31-01-2012 à 11:57:58
hello, commence déjà par agrandir la largeur de ta div "menu". l'onglet contact va s'aligner avec les autres.
Marsh Posté le 31-01-2012 à 12:00:23
et sur le span "bgi" réduis le padding-top à 4px;
(comme ça, ça marche sur firefox mais je n'ai pas IE pour tester)
Marsh Posté le 31-01-2012 à 13:59:11
_Pinkette_ a écrit : et sur le span "bgi" réduis le padding-top à 4px; |
Merci beaucoup Pinkette de te pencher sur mon pb, je teste cela et te tient au courant .
Marsh Posté le 31-01-2012 à 14:08:39
Je viens de tester cela reste identique , j avais deja tester le probleme d'agrandissement, mais c est idem , je seche grave , je comprends pas , voici ce que cela donne sur mon css :
/* menu */
.menu {
padding:0;
width:550px;
float: right;
margin-top: 30px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.menu ul { padding:3px 0; margin:0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0 3px; border:0;}
.menu ul li a {
display:block;
float:left;
color:#fff;
font:normal 14px Arial, Helvetica, sans-serif;
text-decoration:none;
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: 0;
padding-top: 12px;
padding-right: 0;
padding-bottom: 12px;
padding-left: 0;
}
.menu ul li a span.bgi { padding:17px 15px 31px 15px !important; padding:24px 15px; background:none;}
.menu ul li a:hover {
color:#ff994e;
background-repeat: no-repeat;
background-position: right;
background-image: url(images/r_menu.gif);
padding-top: 4px;
}
.menu ul li a:hover span.bgi {color:#ff994e; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active {color:#ff994e; background:url(images/r_menu.gif) no-repeat right ;}
.menu ul li a.active span.bgi {color:#ff994e; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a span.bgi span { color:#CCC; font:normal 11px Arial, Helvetica, sans-serif; display:block; text-align:center;}
Merci de ton aide tres apprecié
Marsh Posté le 31-01-2012 à 10:44:05
Bonjour ,
je finaissais un site web , et lorsque surprise je le met en ligne , sur IE9 , ca fonctionne super , par contre sur safari et firefox 9 , decalage du menu , le "contact" se met en dessous et les slides des pages secondaires sont decalés aussi , j ai tout essayé les mises a jours JS , c est encore pire . sur firefox 6 cela etait super. Là j ai la tete a lenvers , a trop chercher des fois on en perd son latin , le site www.cash94.fr ,
Voici mon deut de code pour mon Style.css
@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#fff;}
html { padding:0; margin:0;}
/* main */
.main {width:100%; padding:0; margin:0 auto; }
.resize { width:955px; margin:0 auto;}
/********** header **********/
.header {
height:176px;
background:url(images/header_bg.gif) top repeat-x;
}
.block_header {
width:995px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.top_menu { float:right; padding:4px 10px; font:normal 11px Tahoma, Geneva, sans-serif; color:#4e4e4e; line-height:1.6em;}
.top_menu a { font:normal 11px Tahoma, Geneva, sans-serif; color:#4e4e4e; text-decoration:none;}
.top_menu a:hover {text-decoration:underline;}
/*******Twitter**********/
.RSS { width:180px; height:24px; float:right; padding:10px 0 0 30px; margin:0; background: url(images/RSS.gif) left no-repeat; font:normal 11px Arial, Helvetica, sans-serif; color:#575757;}
/* logo */
.logo { float:left; padding:0; margin:0; width:422px;}
/* menu */
.menu {
padding:0;
width:510px;
float: right;
margin-top: 30px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.menu ul { padding:3px 0; margin:0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0 3px; border:0;}
.menu ul li a {
display:block;
float:left;
color:#fff;
font:normal 14px Arial, Helvetica, sans-serif;
text-decoration:none;
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: 0;
padding-top: 12px;
padding-right: 0;
padding-bottom: 12px;
padding-left: 0;
}
.menu ul li a span.bgi { padding:17px 15px 31px 15px !important; padding:24px 15px; background:none;}
.menu ul li a:hover {
color:#ff994e;
background-repeat: no-repeat;
background-position: right;
background-image: url(images/r_menu.gif);
}
.menu ul li a:hover span.bgi {color:#ff994e; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active {color:#ff994e; background:url(images/r_menu.gif) no-repeat right ;}
.menu ul li a.active span.bgi {color:#ff994e; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a span.bgi span { color:#CCC; font:normal 11px Arial, Helvetica, sans-serif; display:block; text-align:center;}
En esperant que vou spuissiez m'aider .
Merci d'avance
---------------
Merci a ceux qui m'aide , et j espere avoir aidé les autes