A priori, il y a un problème dans la configuration de firefox:
si je fais tourner sous IE mon site : aucun pb a part une erreur de mise en page de ma barre latérale que je vais corriger, sous firefos sur mon ordi perso, les commandes de survol de mes liens sont EXTREMEMENT longues, je veux dique que sur le lien, ma souris ralentit et le survol s'affiche 3 secondes plus tard. Lorsque je retire la souris du lien, ca rame encore et au bout de 3 seconde, l'état initial réapparait. Cependant, avec l'ancienne structure de ma page (j'ai donc simplement bougé l'affichage d'un "div")
J'ai mis un fichier zip contenant ma page entiere avec les deux codes css :
http://lannaen.free.fr/probeme%20css.zip
il y a deux fichiers html, liés à deux css, l'un est les premier css qui fonctionne correctement, l'autre est la modification qui plante.
Je précise que le code html ne change pas entre les deux css.
Pour les autres voici mon code CSS qui plante et le html lié :
Cette page a été faite pour aller avec le systeme de publication Spip, mais j'ai enlevé les balises spip pour qu'on puisse la tester correctement sans Spip et Easy php.
Code : Tout sélectionner
/* --------------------------------- Début --------------------------------- */
/* On fait disparaitre les marges en haut et en bas de la page */
html {
margin-top: 0px;
margin-bottom: 0px;
}
/*Vérification de la disparition des marges haut et bas de page et application du packground*/
body {
background: url(../images/bg2.png);
margin-top: 0px;
margin-bottom: 0px;
}
/*Définition du conteneur, son bg, et mise en place de bordures à droite et a gauche */
#container {
width: 800px;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
border-right: 1px solid #D8A435;
border-left: 1px solid #D8A435;
background-image: url(../images/fondpage.png);
}
/* --------------------------------- Bannière --------------------------------- */
/* Mise en place du header avec son image de fond */
#header {
width: 800px;
height: 213px;
background-image: url(../images/header2.png);
background-repeat: no-repeat;
}
/* --------------------------------- DIV Main --------------------------------- */
/* Flottant à droite, large de 600px, marge de 0px en haut et bg */
#main{
float: right;
width: 600px;
margin-top: px;
background-image: url(../images/fondpage.png);
}
/* --------------------------------- Main: Menu horizontal --------------------------------- */
/*Pas de retrait droit, couleur de bg, texte aligné au centre et bordure en bas */
#menhoriz {
background-image: url(../images/fdmen.png);
text-align: center;
border-bottom: 1px solid #D8A435;
}
/*
Liens du menu horizontal :
pas soulignés, couleur blanche, Verdana taille 0,8, -1px de retrait haut, gras,
marges extérieures et intérieurs pour s'accorder avec l'effet de survol
*/
a.men {
text-decoration: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding-top: -1px;
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
padding-left:3px;
padding-right:3px;
}
/*
Liens survolés :
Background blanc qui descend sur le div suivant,
couleur marron, pas de soulignement, gras...
+bordures
*/
a.men:hover {
background-color: #FFFFFF;
color: #2A1812;
/* Cette partie fait ramer la page */
padding: 0 3px 5px 3px;
margin: 0 4px 0 4px;
border: 1px solid #D8A435;
border-bottom: 0 solid #FFFFFF;
}
/* --------------------------------- Main: Centre de la page --------------------------------- */
#center{
border-top: 1px solid #D8A435;
background: #FFF;
padding: 10px;
margin-top: 1px;
margin-bottom: 1px;
margin-right: 1px;
}
/* --------------------------------- Sidebar --------------------------------- */
#sidebar {
width: 184px;
padding-left: 15px;
background: url(../images/fdsidebar.png);
color: #FFCC66;
border-right: 1px solid #D8A435;
}
/* --------------------------------- Sidebar : liste des rubriques --------------------------------- */
#liste_rubriques{
width: 150px;
padding-top: 10px;
}
#liste_rubriques ul {
margin: 0;
padding: 0;
}
#liste_rubriques li {
list-style-type: none;
padding: 0;
margin-bottom: 0.5em;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.7em;
}
#lselect li {
padding: 3px 3px 3px 16px;
background: transparent url(../images/w2.gif) 3px 3px no-repeat;
}
#liste_rubriques h3 {
padding-left: 0;
background-image: none;
}
#liste_rubriques span {
display: none;
}
#liste_rubriques a, #liste_rubriques a:link {
color: #AF4F0A;
font-weight: bold;
text-decoration: none;
}
#liste_rubriques li a.c:link, #liste_rubriques li a.c:visited {
color: #742500;
font-weight: normal;
display: inline;
text-decoration: none;
}
#liste_rubriques h3.select {
margin-top: 0px;
width: 160px;
height: 12px;
background: transparent url(../images/h-select.gif) top left no-repeat;
margin-bottom: 0.5em;
}
#lselect {
width: 160px;
/* float: left; */
padding-left: 0px;
}
* > #lselect li {
margin-top: -7px;
padding: 5px 5px 5px 18px;
background-position: 5px 5px;
margin-right: 10px;
border: solid 1px transparent;
}
#lselect li:hover {
background: #2A1812;
border-color: #452310;
}
#lselect li:hover a {
color: #FF9D14;
}
#lselect li:hover a.c {
color: #E84900;
}
/* --------------------------------- Sidebar : Zone de recherche --------------------------------- */
#recherche span {
display: none;
}
#recherche h3.select2 {
margin-top: 0px;
padding-left: 0;
width: 100px;
height: 12px;
background: transparent url(../images/h_rech.png) top left no-repeat;
margin-bottom: 5px;
}
.formrecherche {
color: #FFFFFF;
margin: 0px;
padding: 2px;
margin-top: -10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
font-weight: normal;
}
/* --------------------------------- Sidebar : Brèves --------------------------------- */
#lastbrev {
padding-top:10px;
padding-right:10px;
padding-bottom: 10px;
}
#lastbrev h3 span {
display: none;
}
#lastbrev h3 {
margin-top: 0px;
padding-left: 0;
width: 100px;
height: 12px;
background: transparent url(../images/h_lastbrev.png) top left no-repeat;
margin-bottom: 5px;
}
.titlebrv a{
color: #AF4F0A;
margin: 2px;
padding: 3px;
font-weight: bold;
text-decoration: none;
font-size: 0.8em;
}
.titlebrv a:hover{
background-color: #2A1812;
margin: 5px;
padding: 2px;
color: #FF9D14;
font-weight: bold;
text-decoration: none;
font-size: 0.8em;
border: 1px solid #452310;
}
.datbrv {
color: #AF4F0A;
font-size: 0.7em;
}
.textbrev {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 0.7em;
text-align: justify
}
.textbrev:first-letter{
font-variant: small-caps;
}
/* --------------------------------- Footer --------------------------------- */
#footer{
clear: both;
width: 800px;
height: 36px;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
text-align: center;
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
padding-top: 10px;
}
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="#LANG_DIR" lang="#LANG">
<head>
<title>.:: TC-One ::. </title>
<link href="css/lannaen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="main">
<div id="menhoriz">
<a class="men" href="(sommaire.php3)" title="Accueil du Site">Accueil</a>
<a class="men" href="lastarticle.php3" title="Derniers articles">Derniers articles</a>
<a class="men" href="plan.php3" title="Plan du Site">Plan du site</a>
<a class="men" href="ecrire/">Espace rédacteurs</a>
</div>
<div id="center">
Ce site a été créé pour fonctionner sous SPIP (Système de publication pour internet)
J'ai enlevé les balises Spip afin d'y voir plus clair pour résoudre ce problème de CSS, mais je n'en trouve toujours pas la source.
Le problème se situe dans le menu ci-dessus. Avec mon premier code en css, tout ce passe correctement : les liens prennent un autre background, ce bg descend vers le "div" du dessous et il a trois bordures sur les côtés.
Avec mon second code, je me suis contenté de faire monter mon "div" "sidebar" sur le côté, et mon effet sur les liens ralentit énormément la page.
<br/><br/>
J'ai changé la structure du html depuis la version du css qui buggue, (ce qui explique un ou deux détails incorrects entre les deux pages), mais on voit quand même bien le problème qui se pose...
</div>
</div>
<div id="sidebar">
<div id="liste_rubriques">
<div id="linkList2">
<div id="lselect">
<h3 class="select"><span>Rubriques du site:</span></h3>
<ul class="rubriques">
<li>
<div class="menu-titre"><a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>Rubrique 1</a></div>
</li>
<li>
<div class="menu-titre"><a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>Rubrique 2</a></div>
</li>
<li>
<div class="menu-titre"><a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>Rubrique 3</a></div>
</li>
<li>
<div class="menu-titre"><a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>Rubrique 4</a></div>
</li>
</BOUCLE_rubriques>
</ul>
</div>
</div>
</div>
<div id="recherche">
<h3 class="select2"><span>Rechercher:</span></h3><br />[SEARCH FORM]
</div>
<div id="lastbrev">
<h3><span>Dernières brèves:</span></h3>
<BOUCLE_lastbrev (BREVES) {par date} {inverse} {0,3}>
<span class="titlebrv"><a href="#URL_BREVE">Titre</a></span>
<br/><span class="datbrv">Publiée le 00/00/00</span><br />
<span class="textbrev">Texte de la brève affiché dans la sidebar</span><br/><br/>
</BOUCLE_lastbrev>
</div>
</div>
<div id="footer">
TC-One - 2005
</div>
</div>
</body>
</html>