J'espère ne pas me tromper d'endroit pour poster ce sujet...
Alors après avoir fait le tour des forums d'aide à la création de sites web par HTML et CSS (Alsacréation et autres), personne n'arrive à me résoudre mon problème et j'en viens donc à vous au cas où... Sait-on jamais...
C'est en fait très simple. J'ai créé une page web parmi d'autre pour mon site, une page de liens.
Parmi ces liens, il y a un lien qui ne marche pas du tout et cela uniquement dans mon navigateur. Sur IE ça marche impec et sur mon Firefox 25.0.1 rien à faire, ça ne veut pas marcher.
Le lien qui ne marche pas est le nommé "Archipel sur le Lac", qui donne sur une galerie. Même si je change avec un autre, si je mets un autre lien à la place, c'est toujours ce deuxième en partant de haut à gauche sur la première ligne qui ne veut pas marcher. Toute la bizarrerie est donc là et je n'arrive pas à comprendre cela...
Pour mieux comprendre, je vous joins le code html suivi après le code css. Peut-être que sur vos navigateurs ça marche et alors à ce moment là je désinstalle et réinstalle le mien car il doit y avoir quelque chose qui cloche.
Voici donc le code HTML :
Code : Tout sélectionner
<!DOCTYPE html>
<head>
<meta charset="utf-8" type="text/css" />
<link rel="stylesheet" href="styles/textes.css" />
<link rel="shortcut icon" type="image/x-icon" href="favi120.ico" />
<!--[if lt IE 8]>
<link href="/css/2/ie7_old.css?1331649634" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 7]>
<link href="/css/2/ie6_old.css?1331649634" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE]>
<style type="text/css">
div#page {
height: 100%;
margin-top: 0;
}
</style>
<![endif]-->
<title>Liens</title>
</head>
<body oncontextmenu="return false" id="top"><div class="imgbas2"></div>
<div id="page">
<div id="entete">
<div id="nom"></div>
</div>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="portfolio/page1.html">Portfolio</a></li>
<li><a href="presentation.html">Présentation</a></li>
<li><a href="liens.html">Liens</a></li>
<li><a href="mailto:couleursbleues@hotmail.fr">Contact</a></li>
</ul>
<div id="blocliens">
<div class='partenaires'>
<h2 class='espace1'><a href='http://www.mapra-art.org/' target='_blank'>Mapra</a></h2>
<p class='espace2'>Maison Arts PLastiques Rhône-Alpes</p>
</div>
<div class='partenaires'>
<h2 class='espace1'><a href='http://monarchipel.free.fr/' target='_blank'>Archipel sur le Lac</a></h2>
<p class='espace2'>Galerie</p>
</div>
<div class='partenaires'>
<h2 class='espace1'><a href='http://coelho.artistes-cotes.com/' target='_blank'>Cotation DROUOT</a></h2>
<p class='espace2'>Dictionnaire des Artiste Côtés</p>
</div>
<div class='partenaires'>
<h2 class='espace1'><a href='http://creationmanuel.free.fr/' target='_blank'>Manuel Simon</a></h2>
<p class='espace2'>Sculpteur</p>
</div>
<div class='partenaires'>
<h2 class='espace1'><a href='http://www.irinairimescu.com/' target='_blank'>Irina Irimescu</a></h2>
<p class='espace2'>Artiste Peintre Abstrait</p>
</div>
<div class='partenaires'>
<h2 class='espace1'><a href='http://www.emmane.com/' target='_blank'>Emmane</a></h2>
<p class='espace2'>Sculptrice</p>
</div>
<div class='partenaires'>
<h2 class='espace1'><a href='http://www.acryom.com/' target='_blank'>ACRYOM</a></h2>
<p class='espace2'>Portail d'Arts Plastiques</p>
</div>
<div class='partenaires'>
<h2 class='espace1'><a href='http://www.partagera.org/' target='_blank'>PARTAGE Rhône Alpes</a></h2>
<p class='espace2'>Association</p>
</div>
<div class='partenaires'>
<h2 class='espace1'><a href='http://www.les-amis-42155.com/' target='_blank'>Les Amis de Saint Jean Saint Maurice sur Loire</a></h2>
<p class='espace2'>Association</p>
</div>
<div class="noeud"><img src='img/lien.png' alt='' /></div>
</div>
</div>
<!--<div class="flecheH"><a href="#top" alt="vers le haut de page"><img src="img/flechH2.png" /></a></div>-->
<div id="piedpage">
<p>Copyrigth © www.120nitay.fr - tous droits réservés- toute reproduction interdite</p>
</div>
</body>
</html>Code : Tout sélectionner
html, body {
background: radial-gradient(circle at center -250px, #7d4bcf 13%, #1d093e 70%) no-repeat;
outline: 0px; bottom: 0;
margin: 0 auto; padding: 0 auto;
font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
background-color: #1d093e;
font-size: 0.8em; border; 0px solid #fff;
}
body{ position: realtive; margin-bottom: 0;}
#page {
border: solid 2px #5c49a5;
box-shadow: 5px 5px 35px #000; box-shadow: 0px 0px 35px #000;
width: 800px; margin-left: 15%;
height: 100%;
margin: 0 auto;
margin-bottom: 50px;
}
#nom {
background:url(../img/nom_4.png) no-repeat;
width: 800px; height: 115px;
float: left;
margin-right: 0.7em;
}
#blocprincipal {
background: linear-gradient(to bottom, #5D2EAE, #1d093e);
width: 100%;
height: auto;
position: relative;
border: solid 0px #10f4e8 /*bleu fluo*/;
border: solid 0px #baaaf0;
}
#entete {
border-bottom: double 5px #1d093e;
background-color: #5d2eae;
height: 120px;
}
.blocpresse {
position: relative;
margin-left: 15px;
margin-top: 35px;
margin-bottom: 13px;
width: 750px;
min-height: 1350px;
padding: 10px;
text-align: center;
}
.titext {
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-size: 1.5em; color: #9696cd;
margin-top: -20px; text-align: center;
}
/*page présentation*/
.soulign {
margin: 30px 25px -35px 30px;
padding-bottom: 1px;
background-position: bottom left;
background-image: url('../img/souligne.jpg');
background-repeat: repeat-x; background-color: #9595cd;
}
.titre1 { width: 306px; height: auto; margin-top: 5em; margin-bottom: -30px;}
.titre2 { width: 306px; height: 99px; margin-bottom: -30px; margin-top: -0.2em; }
.bloctexte {
width : 62em; height: auto;
margin-top: 5em; padding-bottom: 3em;
font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font-size: 1.175em; color: #9595cd;
text-align: justify;
margin-left: auto; margin-right: auto;
}
.foto1 { width: 177px; height: 200px; margin: 0px 15px 10px 0px; float: left; box-shadow: 5px 5px 7px #000;}
.txtimportant { font-style: oblique; font-weight: bolder; font-size: 1.2em;}
.vignactu {
width: 50px; height: 50px; text-decoration: none;
margin: 0px 15px 10px 0px; float: left; box-shadow: 5px 5px 7px #000;
}
#actu{
float:left; width: 25em;
}
#actu a{
color:#9595cd;
font-size:13px;
font-family: Arial, Helvetica, sans-serif;
}
#actu a:hover{
color:#fca435;
text-decoration: none;
}
#titreActu{
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-size: 1.7em;
background-image: url(../img/puce3.png);
background-repeat:no-repeat;
color: #9595cd;
padding-top:5px;
padding-bottom:10px;
margin-top:10px;
}
#contenuActu{
font-size: 12px; text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: left; width: 45em;
color: #9595cd;
}
.dates { font-size: 15px; }
#contenuActu a {
text-decoration: none;
color: #9595cd; font-size: 1.2em; font-weight: bolder;
}
#contenuActu a:hover {
text-decoration: none;
color: #fca435;
}
/*fin page présentation*/
hr { width: 500px; height: 2px; color: #ff9909; background-color: #ff9909; border: 0; box-shadow: 3px 5px 8px #000000; margin-top: 2em; margin-bottom: 2em; }
.grtext {
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-size: 2.175em; color: #9696cd;
margin-top: -4px;
}
/*page des liens*/
#blocliens {
position: relative;
margin-top: -250px; border: 1px solid #; width: 800px;
margin-left: 0.2em; padding-bottom: 320px;
/*padding-left:0px;
*/
}
.partenaires {
float:left;
width:238px;
padding:9px;
margin-bottom:5px;
margin-right:5px;
margin-left: 0.3em;
border-left:1px solid #a98ae2;
border-top:1px solid #a98ae2;
border-right:1px solid #a98ae2;
border-bottom: 1px solid #a98ae2;
background-color:#1d083e;
text-decoration: none;
}
.partenaires a{
text-decoration:none;
color:#733ed0;
}
.partenaires a:hover{
text-decoration:none;
color:#fca435;
}
.espace1{ margin-left: 0.5em; }
.espace2{ margin-left: 2em; }
.espace3 { margin-left: 1.5em; }
h2 {
font-size: 16px;
padding-top: 2px;
margin-top: 0;
background-image: url(../img/puce2.png);
background-repeat:no-repeat;
padding-left: 20px;
}
p {font-size: 12px; color: #a98ae2; }
.noeud { position: relative; width: 209px; height: 65px; margin-left: 35%; margin-right: auto; margin-top: 320px; border: 0px solid yellow;}
/*fin page des liens*/
/*menu...*/
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 23px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{ z-index: 13;
position: absolute; border: 0px solid #fff;
font-weight : #; /* on met le texte en gras */
font-family : "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif; /* on note la police à utiliser */
letter-spacing: 0.2em; font-size : 1.175em; /* hauteur du texte : 12 pixels = 1.175em */
margin-top: 10px; margin-left: 0%; margin-right: 0%;
}
#menu a /* Contenu des listes */
{ border: 0px solid #fff;
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #; border: 1px solid #9696cd; /* couleur de fond */
color : #9696cd; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 10.875em; margin: 0px 5px 0px 19px;/* largeur de chaque pavé */
}
#menu li /* Éléments des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 0px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 0.24em solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 11.53em; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 0.12em solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul
{
margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left: 0.1em solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left: 0px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #fca435; /* On change la couleur du texte... */font-weight : 600;
background: #432375; border: 1px solid #fca435;/* ... et au contraire, le fond en couleur */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /*Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
/*fin menu*/
/*bas de page*/
#piedpage{
height: 20px;
position: relative;
margin-top: auto; bottom: 1px;
width: 798px;
left: 50%; margin-left: -399px;
text-align: center;
color: #5c49a5;
}
.imgbas {
background: url('../img/taches.png'); z-index: 21;
position: fixed; bottom: 0;
margin-left: 2em;
width: 140px; height: 140px; border: 0;
}
.flecheH {
background-image: url('../img/flechH2.png'); background-repeat: no-repeat; z-index: 21;
width: 36px; height: 32px;
margin-left: 20em;
position: fixed;
bottom: 30px;
border: 0;
}
a img {border: none;}
.imgbas2 {
background: url('../img/sign.png'); background-repeat: no-repeat; z-index: 21;
width: 117px; height: 200px;
margin-left: 5em;
position: fixed;
bottom: 10px;
border: 0;
}
/*fin bas de page*/
Ainsi renseignés, pouvez-vous svp m'aider à résoudre ce mystérieux problème ???
Merci à vous tous !
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0
[Modération] Message édité : s.v.p., conserver la mise en forme par défaut pour les messages. Le bleu sur bleu est peu lisible. jpj.
Car j'avoue que perso je cale, je ne trouve rien... mais bon... SI... possible!
pour le copier/coller. Malgré que je sais bien que, si on veut vraiment franchir cette barrière on peut le faire facilement, mais bon... 