Bonjour à toutes et tous,

Je suis en train de tenter (péniblement car je n'y connais rien) de faire un petit site avec Dreamweaver 8, et parmi les très nombreux ennuis que je rencontre, je cale complétement sur la personnalisation des liens.

Quand j'en crée un, celui-ci s'affiche automatiquement en bleu souligné et je n'arrive pas à changer ce paramètre.

Dans l’idéal, je souhaiterais qu'il reste de la même couleur que le texte initial (#008040) mais change de couleur et apparaisse souligné lorsque l'on positionne le curseur dessus. En faisant des recherches j'ai cru comprendre que c'était possible, mais je n'arrive pas du tout à appliquer les conseils trouvés.

Désolé, je sais que c'est un peu rébarbatif, mais je joins ci-dessous les codes de la page d'index, au cas ou quelqu'un aurait la gentillesse de m'expliquer exactement ce qu'il faut faire, et ou placer les codes. Je suis par ailleurs bien entendu preneur de tout autre conseil, car je ne vous cache pas que je rame pas mal ....

Un grand merci d'avance pour le coup de main !

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#logo {
position:absolute;
left:475px;
top:53px;
width:800px;
height:100px;
z-index:1;
background-image: url(Images/beige021.gif);
}
#navigation {
position:absolute;
left:0px;
top:386px;
width:273px;
height:267px;
z-index:3;
background-image: url(Images/fond%20de%20page%20beige021.gif);
}
#accueil {
position:absolute;
left:475px;
top:155px;
width:800px;
height:714px;
z-index:3;
}
body {
background-image: url(Images/beige021.gif);
}
.Style6 {font-family: Georgia, "Times New Roman", Times, serif; color: #15641A; }
.Style26 {
color: #008040;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
.Style31 {font-family: "Old English Text MT"; font-style: italic; color: #008040;}
.Style35 {
color: #008040;
font-family: "Old English Text MT";
font-weight: bold;
}
#Layer1 {
position:absolute;
left:37px;
top:287px;
width:180px;
height:373px;
z-index:4;
background-image: url(Images/fond%20de%20page%20beige021.gif);
}
#Layer2 {
position:absolute;
left:44px;
top:265px;
width:169px;
height:345px;
z-index:5;
}
#Layer3 {
position:absolute;
left:417px;
top:191px;
width:91px;
height:44px;
z-index:5;
background-image: url(Images/ARBRE%203.jpg);
}
#Layer4 {
position:absolute;
left:1056px;
top:189px;
width:89px;
height:42px;
z-index:6;
background-image: url(Images/ARBRE%203.jpg);
}
#Layer5 {
position:absolute;
left:30px;
top:147px;
width:213px;
height:115px;
z-index:5;
background-image: url(Images/ARBRE%203.jpg);
}
#Layer6 {
position:absolute;
left:24px;
top:230px;
width:235px;
height:151px;
z-index:5;
background-image: url(Images/ARBRE%203.jpg);
}
.Style36 {font-family: "Times New Roman", Times, serif}
-->
</style>
</head>

<body>
<div id="logo"><img src="Images/Test banni&egrave;re gris plus clair avec &eacute;criture.jpg" width="800" height="100" /></div>
<div class="Style6" id="accueil">
<h2 align="center">&nbsp;</h2>
<h2 align="center" class="Style31">Bienvenue sur le site Fab' G&eacute;n&eacute;alogie <br />
<br />
<span class="Style36">La G&eacute;n&eacute;alogie vous int&eacute;resse mais le temps vous manque ou l'&eacute;loignement met un frein &agrave; vos recherches. <br />
</span></h2>
<h2 align="center" class="Style26">Vous &ecirc;tes bloqu&eacute; et un petit coup de pouce serait le bienvenue. <br />
</h2>
<h2 align="center" class="Style26">Vous venez d'acqu&eacute;rir une maison ancienne et vous souhaitez connaitre son histoire.<br />
<br />
<span class="Style35"> Faites appel &agrave; un g&eacute;n&eacute;alogiste </span> <span class="Style31"><br />
<br />
</span>Je suis sp&eacute;cialis&eacute;e, entre autre, dans les recherches sur Paris - Archives D&eacute;partementales, Archives Nationales, Service Historique de la D&eacute;fense - ainsi que les d&eacute;partements limitrophes. </h2>
</div>
<div id="navigation">
<h2 align="center" class="Style26">Accueil<br />
Prestations et services<br />

Honoraires<br />
Conditions g&eacute;n&eacute;rales<br />
Id&eacute;es cadeaux<br />
Contact<br />
Liens</h2>
</div>
<div id="Layer6"></div>
<p>&nbsp;</p>
</body>
</html>


----------------------------------------------------------------
Modifié par filorio (07 Nov 2011 - 07:00)
Salut et bienvenue,

Tu trouveras tout ce qu'il faut pour mettre en forme tes liens hypertextes sur cet article. Pense à consulter la rubrique Apprendre d'Alsacréations qui est riche en articles et tutoriaux de niveau débutant Smiley smile
Salut,
Merci beaucoup pour ta réponse.
Malheureusement, j'avais déjà lu cette page en faisant mes recherches mais comme je le disais, malgré pas mal d'essais Je n'arrive pas à appliquer correctement ce qui est expliqué. Je crois qu'en plus d'être néophyte en la matière, je suis une vraie quiche ..... Smiley decu
Modifié par filorio (05 Nov 2011 - 16:33)
Ben c'est pourtant vraiment très bien expliqué et très détaillé dans cet article.
Il faut utiliser le sélecteur de balise a (liens hypertextes) et ses pseudos-classes permettant de mettre en forme ses différents états.

Liens «au repos» et liens déjà visités :

a, a:visited {
color: #008040;
text-decoration: none; 
}

Liens au survol :

a:hover, a:focus, a:active {
color: green; // ou la couleur de ton choix
text-decoration: underline; 
}

Modifié par audrasjb (05 Nov 2011 - 16:40)
Salut,

Un coup d'œil rapide au code HTML tel que tu le présentes me fait craindre que tu n'aies utilisé le mode création de Dreamweaver. Sache que le recours au WYSIWYG n'est pas la meilleure solution pour apprendre et progresser.

Si tu n'y arrives pas, c'est qu'il doit sûrement te manquer les bases. Dans ce cas, en plus des conseils d'audrasjb, je te conseille de lire le livre Réussir son site Web avec XHTML et CSS.
Merci beaucoup à vous deux.

@ audrasjb : les explications sont effectivement très claires et je te remercie pour ces codes personnalisés. Je crois que je ne dois pas les mettre au bon endroits car malgré tous mes essais, cela ne fonctionne pas ....

@ Victor BRITO ; oui je te confirme que j'utilise le mode création, compte tenu de mon manque de connaissance en la matière, je n'ai vraiment pas d'autre choix. Je sais que je devrais commencer par apprendre les bases et te remercie pour le livre indiqué pour cela. Toutefois, je suis un peu dans l'urgence car ce petit site est censé être prêt à la fin du mois, même si il n'est pas parfait
Je commence sérieusement à douter des délais mais n'ai aucun doute sur l'imperfection Smiley lol

Encore mille mercis pour votre aide, je vais continuer à chercher ou mettre ces satanées balises ....
filorio a écrit :
Je crois que je ne dois pas les mettre au bon endroits car malgré tous mes essais, cela ne fonctionne pas ....
je vais continuer à chercher ou mettre ces satanées balises ....

Ce ne sont pas des balises mais des règles CSS. Il faut donc les mettre dans ta feuille de styles CSS (normalement un fichier .CSS externe à tes fichiers .HTML). A priori ici tu ne semble pas utiliser de feuille de style externe (problème : tu devras faire les modifs pour chacune des pages de ton site Smiley ohwell ) donc il faut les mettre à l'intérieur de la balise <style>…</style>.
Je n'utilisais effectivement pas de feuille de style externe. Grâce à toi je regarde ça depuis ce matin, et commence à comprendre plus ou moins comment cela fonctionne.

Bien qu'ils soient bien entendu très utiles, le meilleurs tutos ne remplaceront décidément jamais une discussion avec des connaisseurs pour mettre sur la voie ceux qui débutent dans un domaine !

Encore un grand merci à vous pour votre aide précieuse Smiley biggrin
Utiliser le mode création est la plus mauvaise idée pour un débutant en la matière, il génère du code vraiment sâle... de plus, sache que l'aperçu du mode création Dreamweaver est totalement faussé, ce que tu auras dans le mode création ne ressemblera pas à ce que tu auras sur un navigateur. Presse donc F12 qui chargera ta page dans ton navigateur par défaut.

Mais attention, pour les liens, il est préférable d'utiliser cet ordre dans le CSS:

a {
	/* Ton code */
}

a:visited {
	/* Ton code */
}

a:hover {
	/* Ton code */
}

a:active {
	/* Ton code */
}


N'hésite pas à demander si tu as encore des soucis et ne t'inquiète pas, l'apprentissage du HTML/CSS vient rapidement si tu t'y met sérieusement Smiley cligne
Spharian a écrit :
Mais attention, pour les liens, il est préférable d'utiliser cet ordre dans le CSS […]

Attention de ne pas omettre la pseudo-classe :focus nécessaire pour la navigation au clavier. Comme on lui donne généralement les mêmes déclarations qu'à :hover, on regroupe le tout dans une seule règle :
a:hover, a:focus {
…
}
Bonjour filorio et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît dans le menu du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour Laurie-Anne,
Merci pour ton accueil, et désolé pour la mise en page des codes.
Voilà qui est corrigé.
Bonne journée