Version complète: sur le forum Webmaster Hub : probleme d'affichage des liens
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
oxerrois
Voila,
j'ai crée deux sites amateurs sur le meme modele, en utilisant le css.
1er
2eme
Et les liens, dans la barre de navigation ne marche pas. Pour l'instant, il n'y a pas d'url pour les liens. Mais il devrait quand même actualiser la page.

Edit : il s'affiche sous IE mais pas FF

Mon css 1ere page
CODE

a {
color: #ffffff;
font-size: 10pt;
}


.header {
background-image: url(images/titre.JPG);
width: 750;
height: 147;
left: 50%;
margin-left: 125px;
margin-bottom: 15px;
}


div.page {
width: 750
left: 50%;
margin-left: -375px;
}

#gauche {
position: absolute;
left:0;
width: 190;
}

#centre {
position: absolute;
}

.hautmenu {
background-image: url(images/Menu/haut_menu.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

list-style-type: none;
margin-left: 125;
padding:0;

width: 190;
height: 26;
}

.fondmenu {
background-image: url(images/Menu/fond_menu.bmp);

font-family: Arial;
font-size: 10pt;
color: #ffffff;

list-style-type: none;
margin-left: 125;

width: 190;
}

.basmenu {
background-image: url(images/Menu/bas_menu.bmp);

margin-left: 125px;

width: 190;
height: 26;
}


.hautcentre {
background-image: url(images/Centre/haut_menu.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

margin-left: 320px;

width: 560;
height: 27;
}

.fondcentre {
background-image: url(images/Centre/fond_menu.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

list-style-type: none;
margin-left: 320px;

width: 560;
}

.fondcentre li {
font-size: 10pt;
}


.bascentre {
background-image: url(images/Centre/bas_menu.bmp);

margin-left: 320px;

width: 560;
height: 27;
}


contenu 1ere page
CODE

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>

<body>

<div class="header">
</div>


<div id="gauche">

<div class="hautmenu">
<li>&nbsp;&nbsp;Resultats</li>
</div>

<div class="fondmenu">
<li>&nbsp;&nbsp;<a href="#">Ligue 1</a></li>
<li>&nbsp;&nbsp;<a href="#">Coupes Nationales</a></li>
<li>&nbsp;&nbsp;<a href="#">Coupes d'Europe</a></li>
<li>&nbsp;&nbsp;<a href="#">Amateurs</a></li>
</div>

<div class="hautmenu">
<li>&nbsp;&nbsp;Le Club</li>
</div>

<div class="fondmenu">
<li>&nbsp;&nbsp;<a href="#">Effectif</a></li>
</div>

<div class="hautmenu">
<li>&nbsp;&nbsp;Media</li>
</div>

<div class="fondmenu">
<li>&nbsp;&nbsp;<a href="#">Resumés Video</a></li>
<li>&nbsp;&nbsp;<a href="#">Buts Audio</a></li>
<li>&nbsp;&nbsp;<a href="#">Chants de Supporters</a></li>

</div>

<div class="basmenu">
</div>

</div>

<div id="centre">

<div class="hautcentre">
<center>Accueil</center>
</div>

<div class="fondcentre">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>Dernières Brèves</u>

<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=>08/01/2006 - Le groupe contre Noisy-le-Sec</a>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=>05/01/2006 - Victoire face à monaco</a>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=>04/01/2006 - Le match aura lieu à Noisy-le-Sec</a>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=>04/01/2006 - Le Groupe Contre Monaco</a>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=>03/01/2006 - Le CNOSF fait pression.</a>
<hr width=50% color=#ffffff>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>08/01/2006 - Le groupe contre Noisy-le-Sec</u>

<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jacques Santini a convoqué une liste de 16 joueurs pour affronter Noisy Le Sec :</li><br/>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dans les buts : Cool, Hamel</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;En D&eacute;fense : Radet, Jaurès, Grichting, Coulibaly, Martin</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;En milieu : Violeau, Cheyrou, Lachuer, Kahlenberg, Berson, Mathis</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;En attaque : Pieroni, Luyindula, Genest</li>
</div>

<div class="bascentre">
</div>

</div>

</body>

</html>


Css 2eme page
CODE

a {
color: #ffffff;
font-size: 10pt;
}


.header {
background-image: url(images/titre.bmp);
width: 700;
height: 130;
left: 50%;
margin-left: 150px;
margin-top: 5px;
}


div.page {
width: 750
left: 50%;
margin-left: -375px;
}

#gauche {
position: absolute;
left:0;
width: 190;

margin-top: 10px;
}

#centre {
position: absolute;

margin-top: 10px;
}

.hautmenu {
background-image: url(images/Menu2/haut_menu.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

list-style-type: none;
margin-left: 125;
padding:0;

width: 190;
height: 26;
}

.fondmenu {
background-image: url(images/Menu2/fond_menu.bmp);

font-family: Arial;
font-size: 10pt;
color: #ffffff;

list-style-type: none;
margin-left: 125;

width: 190;
}

.fondmenu li {
font-size: 10pt;
}

.basmenu {
background-image: url(images/Menu2/bas_menu.bmp);

margin-left: 125px;

width: 190;
height: 26;
}


.hautcentre {
background-image: url(images/Centre2/haut_centre.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

margin-left: 320px;

width: 560;
height: 27;
}

.fondcentre {
background-image: url(images/Centre2/fond_centre.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

list-style-type: none;
margin-left: 320px;

width: 560;
}

.fondcentre li {
font-size: 10pt;
}


.bascentre {
background-image: url(images/Centre2/bas_centre.bmp);

margin-left: 320px;

width: 560;
height: 27;
}


contenu 2eme page
CODE

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css"/>
</head>

<body>

<div class="header">
</div>


<div id="gauche">

<div class="hautmenu">
<li>&nbsp;&nbsp;Le Groupe</li>
</div>

<div class="fondmenu">
<li>&nbsp;&nbsp;<a href="#">Actu</a></li>
<li>&nbsp;&nbsp;<a href="photos.html">Photos</a></li>
</div>

<div class="hautmenu">
<li>&nbsp;&nbsp;Media</li>
</div>

<div class="fondmenu">
<li>&nbsp;&nbsp;<a href="#">Chansons</a></li>
<li>&nbsp;&nbsp;<a href="#">Paroles de Chansons</a></li>

</div>


<div class="hautmenu">
<li>&nbsp;&nbsp;Partenaires</li>
</div>


<div class="fondmenu">
<li><a href="http://emerdeurpro.skyblog.com">&nbsp;&nbsp;emerdeurpro</a></li>
</div>


<div class="hautmenu">
<li>&nbsp;&nbsp;Photo de la semaine</li>

</div>


<div class="fondmenu">
<li><a href="java script: var tt=window.open('images/photo%20ordimessen/logo.jpg','','scrollbars=no,width=400,height=262,resizable=no');">
&nbsp;<img src=images/photo%20ordimessen/logo_small.jpg></a></li>
</div>

<div class="basmenu">
</div>

</div>

<div id="centre">

<div class="hautcentre">
<center>Accueil</center>

</div>

<div class="fondcentre">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>Dernières Brèves</u>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=>09/01/2006 - Un nouveau DJ.</a>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=>08/01/2006 - Un nouveau pianiste electrique.</a>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=>07/01/2006 - Creation du Groupe Ordimessen</a>

<hr width=50% color=#ffffff>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>08/01/2006 - Le groupe contre Noisy-le-Sec</u>

<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Nous avons un nouveau DJ. Il s'appelle Mohamed.
</div>

<div class="bascentre">
</div>

</div>

</body>

</html>
[/COLOR]
v4np13
Salut,
ça s'actualise mais on ne voit pas bien que ce sont des liens wink.gif

N'oublie pas de mettre un doctype sur tes pages, c'est primordial:
si tu fais du HTML:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">


Si tu fais du XHTML 1.0:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />


Ensuite, pour tes liens, il faut utiliser les propriétés a:link, a:hover, a:visited :
CODE
a { //Prorpiétés des liens tels qu'ils apparaissent dans la page
color: #17397A;
text-decoration: none;  //pas de soulignement
}
a:hover { //propriété des liens quand on les survole
color: #17397A;
text-decoration: underline; //quand on survole les lien, ils se soulignent
}
a:visited { //Propriétés des liens déjà visités
color: #17397A;
text-decoration: none;
}


Bonne continuation smile.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.