Des liens hypertextes personnalisée
bipbipburn
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
M@dien Messages postés 437 Date d'inscription Statut Membre Dernière intervention -
M@dien Messages postés 437 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'utilise le logiciel Web Plus 2 pour faire des sites internet.
j'aimerais avoir plusieurs types de liens, par exemple :
- Un lien qui est gris et lorsque qu'on passe la souris dessus il deviens blanc
- Un lien qui est Vert et lorsqu'on passe la souris dessus, il deviens rouge
(je donne des couleurs au hasard)
Web plus ne propose qu'une seule combinaison de couleur, c'est à dire que tous les liens sont fait de la même façon (par exemple tous les liens sont gris et quand on passe la souris, ils sont blanc.... on peut changer les couleurs mais cela s'applique à tous les liens du site !). On ne peux pas personnaliser les liens comme je le voudrais ci dessus.
Donc je voudrais savoir si quelqu'un pouvais résoudre ce problème ou m'aider en me donnant une ligne de code html et css pour crée un menu comme cela :
ACCUEIL | PAGE 1 | PAGE 2 | PAGE 3 | PAGE 4 | PAGE 6
Ça serait un menu horizontale... et comme couleur de base je souhaite avoir du #808080 et du blanc lorsqu'on survole un lien.
Voilà je crois que c'est tout, merci de votre aide :)
J'utilise le logiciel Web Plus 2 pour faire des sites internet.
j'aimerais avoir plusieurs types de liens, par exemple :
- Un lien qui est gris et lorsque qu'on passe la souris dessus il deviens blanc
- Un lien qui est Vert et lorsqu'on passe la souris dessus, il deviens rouge
(je donne des couleurs au hasard)
Web plus ne propose qu'une seule combinaison de couleur, c'est à dire que tous les liens sont fait de la même façon (par exemple tous les liens sont gris et quand on passe la souris, ils sont blanc.... on peut changer les couleurs mais cela s'applique à tous les liens du site !). On ne peux pas personnaliser les liens comme je le voudrais ci dessus.
Donc je voudrais savoir si quelqu'un pouvais résoudre ce problème ou m'aider en me donnant une ligne de code html et css pour crée un menu comme cela :
ACCUEIL | PAGE 1 | PAGE 2 | PAGE 3 | PAGE 4 | PAGE 6
Ça serait un menu horizontale... et comme couleur de base je souhaite avoir du #808080 et du blanc lorsqu'on survole un lien.
Voilà je crois que c'est tout, merci de votre aide :)
A voir également:
- Des liens hypertextes personnalisée
- Créer un lien pour partager des photos - Guide
- Sonnerie personnalisée android - Guide
- Vérificateur de liens - Guide
- Liste personnalisée amis facebook - Guide
- Comment faire une bordure de page personnalisée sur word - Guide
7 réponses
Bonjour,
Halala la limitation des logiciels de création de sites
Le code HTML de ton menu
Et le css qui va bien avec
Bon courage pour customiser tout ça =)
Halala la limitation des logiciels de création de sites
Le code HTML de ton menu
<ul id="menuHorizontal">
<li><a href="accueil.html" title="Retour à l'accueil">ACCUEIL</a></li>
<li><a href="page1.html" title="Description de la page1">PAGE1</a></li>
<li><a href="page2.html" title="Description de la page2">PAGE2</a></li>
<li><a href="page3.html" title="Description de la page3">PAGE3</a></li>
<li><a href="page4.html" title="Description de la page4">PAGE4</a></li>
</ul>
Et le css qui va bien avec
ul#menuHorizontal { /* Style du conteneur du menu */
margin:0px; /* pas de marge extérieure */
padding:0px; /* pas de marge intérieure */
list-style:none; /* pas de puces à la liste */
background:lightgrey; /* en gris clair pour mieux le voir */
}
ul#menuHorizontal li { /* Style des éléments de la liste */
float:left; /* Pour qu'ils soient tous côtes à côtes */
margin:0px; /* pas de marge extérieure */
padding:0px; /* pas de marge intérieure */
}
ul#menuHorizontal a,
ul#menuHorizontal a:link { /* style des liens du menu */
display:block; /* Pour que les liens soient plus gros que le texte, on les transforme en boîte */
margin:0px; /* pas de marge extérieure */
padding:3px 10px; /* une marge intérieure de 3px en haut et bas et 10px sur les côtés */
text-decoration:none; /* pour pas que ça soit souligné */
color:#808080; /* et la couleur */
}
ul#menuHorizontal a:hover { /* Style du lien survolé */
background:grey;
text-decoration:none;
color:#FFFFFF;}
ul#menuHorizontal a:active { /* Style du lien cliqué */
border:1px solid #000000;
background:grey;
text-decoration:none;
color:#FFFFFF;}
ul#menuHorizontal a:visited { /* Style du lien visité */
text-decoration:none;
color:#808080;}
Bon courage pour customiser tout ça =)
Hum... "les limitations des logiciels de création de site"
Je ne peux rentrer que du code html dans l'editeur de site et je ne sais pas comment indiquer au code html qu'il doit utiliser le code css qui va avec.
Je sais qu'on peut intégrer le code css au code html, c'est compliquer ?
Je ne peux rentrer que du code html dans l'editeur de site et je ne sais pas comment indiquer au code html qu'il doit utiliser le code css qui va avec.
Je sais qu'on peut intégrer le code css au code html, c'est compliquer ?
Alors... désolé de poster plusieurs fois :/
J'ai réussi à faire en sorte que le code html utilise le code css, maintenant je vois si ça fonctionne sur l''éditeur.
Ps : Mon éditeur n'est pas si bête, je lui ai indiqué le css et c'est bon ça fonctionne nickel, merci infiniment ;)
Mais j'aurai quand même besoin d'un peu d'aide pour le menu, il apparait comme ça :
ACCUEIL PAGE1 PAGE2 PAGE4 PAGE5
et je voudrais qu'il y ai les "|" entre chaque lien comme ça :
ACCUEIL | PAGE1 | PAGE2 | PAGE3 | PAGE 4
Ou est ce qu'il faut que je les mettent dans le html ? je n'arrive pas a faire en sorte qu'ils apparaissent :/
J'ai réussi à faire en sorte que le code html utilise le code css, maintenant je vois si ça fonctionne sur l''éditeur.
Ps : Mon éditeur n'est pas si bête, je lui ai indiqué le css et c'est bon ça fonctionne nickel, merci infiniment ;)
Mais j'aurai quand même besoin d'un peu d'aide pour le menu, il apparait comme ça :
ACCUEIL PAGE1 PAGE2 PAGE4 PAGE5
et je voudrais qu'il y ai les "|" entre chaque lien comme ça :
ACCUEIL | PAGE1 | PAGE2 | PAGE3 | PAGE 4
Ou est ce qu'il faut que je les mettent dans le html ? je n'arrive pas a faire en sorte qu'ils apparaissent :/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Pour le css, il peut être intégré au site de plusieurs manières. mais la meilleure est de faire un fichier externe (style.css par exemple), et de lier chaque page du site au css avec cette balise, à placer entre les balises <head> du site:
Sinon, pour afficher les '|', 2 solutions:
Soit on rajoute le pipe dans le code:
Soit on rajoute une bordure aux éléments:
et le css:
L'avantage de le faire par css est de pouvoir personnalisé l'affichage: épaisseur du trait, style du trait, couleur...
<link rel="stylesheet" href="style.css" type="text/css" />
Sinon, pour afficher les '|', 2 solutions:
Soit on rajoute le pipe dans le code:
<ul id="menuHorizontal">
<li><a href="accueil.html" title="Retour à l'accueil">ACCUEIL</a></li>
<li>|<a href="page1.html" title="Description de la page1">PAGE1</a></li>
<li>|<a href="page2.html" title="Description de la page2">PAGE2</a></li>
<li>|<a href="page3.html" title="Description de la page3">PAGE3</a></li>
<li>|<a href="page4.html" title="Description de la page4">PAGE4</a></li>
</ul>
Soit on rajoute une bordure aux éléments:
<ul id="menuHorizontal">
<li class="accueil"><a href="accueil.html" title="Retour à l'accueil">ACCUEIL</a></li>
<li><a href="page1.html" title="Description de la page1">PAGE1</a></li>
<li><a href="page2.html" title="Description de la page2">PAGE2</a></li>
<li><a href="page3.html" title="Description de la page3">PAGE3</a></li>
<li><a href="page4.html" title="Description de la page4">PAGE4</a></li>
</ul>
et le css:
ul#menuHorizontal { /* Style du conteneur du menu */
margin:0px; /* pas de marge extérieure */
padding:0px; /* pas de marge intérieure */
list-style:none; /* pas de puces à la liste */
background:lightgrey; /* en gris clair pour mieux le voir */
}
ul#menuHorizontal li { /* Style des éléments de la liste */
float:left; /* Pour qu'ils soient tous côtes à côtes */
margin:0px; /* pas de marge extérieure */
padding:0px; /* pas de marge intérieure */
border-left:2px groove #AAAAAA; /* on rajoute une bordure personnalisée à gauche des éléments
}
ul#menuHorizontal li.accueil { /* style du premier élément */
border-left:0px; /* on supprime la bordure pour le premier élément */}
ul#menuHorizontal a,
ul#menuHorizontal a:link { /* style des liens du menu */
display:block; /* Pour que les liens soient plus gros que le texte, on les transforme en boîte */
margin:0px; /* pas de marge extérieure */
padding:3px 10px; /* une marge intérieure de 3px en haut et bas et 10px sur les côtés */
text-decoration:none; /* pour pas que ça soit souligné */
color:#808080; /* et la couleur */
}
ul#menuHorizontal a:hover { /* Style du lien survolé */
background:grey;
text-decoration:none;
color:#FFFFFF;}
ul#menuHorizontal a:active { /* Style du lien cliqué */
border:1px solid #000000;
background:grey;
text-decoration:none;
color:#FFFFFF;}
ul#menuHorizontal a:visited { /* Style du lien visité */
text-decoration:none;
color:#808080;}
L'avantage de le faire par css est de pouvoir personnalisé l'affichage: épaisseur du trait, style du trait, couleur...
Okay, merci j'ai mis les barres verticales et ça rend bien comme je voulais.
Nouveau problème, c'est que mon éditeur applique automatiquement sa combinaison de couleur sur les liens, même si ils ont paramètres que j'ai mis avec le .css !
Et cela seulement avec internet explorer, en effet, sous firefox ça fonctionne bien.
Et les barres verticales ne s'affichent qu'en noire avec internet explorer, le souci c'est que mon fond est noir donc on ne les voit pas...
Alors qu'avec firefox, elles s'affichent correctement en gris clair comme je l'ai dis dans le .css
Alala c'est galère quand on a 2 moteurs de recherche qui n'affichent rien de la même façon !
Je vais voir ce que ça donne en metant des border.
...
Le problème c'est que lorsque je met le code dans mon editeur, ça ne rend pas pareil que lorsque je lance le fichier html seul...
Le resultat est bon avec firefox mais la encore avec explorer, c'est l'horreur ! il me met colle tous les elements les uns apres les autres sans espaces et sans border...
Bon, je vais changer de méthode, j'ai 2 menu sur mon site, un vertical et un horizontal.
Je vais faire l'horizontal avec mon editeur et tenter de faire le vertical avec en code avec ul et li... on verra ce que ça donne.
Nouveau problème, c'est que mon éditeur applique automatiquement sa combinaison de couleur sur les liens, même si ils ont paramètres que j'ai mis avec le .css !
Et cela seulement avec internet explorer, en effet, sous firefox ça fonctionne bien.
Et les barres verticales ne s'affichent qu'en noire avec internet explorer, le souci c'est que mon fond est noir donc on ne les voit pas...
Alors qu'avec firefox, elles s'affichent correctement en gris clair comme je l'ai dis dans le .css
Alala c'est galère quand on a 2 moteurs de recherche qui n'affichent rien de la même façon !
Je vais voir ce que ça donne en metant des border.
...
Le problème c'est que lorsque je met le code dans mon editeur, ça ne rend pas pareil que lorsque je lance le fichier html seul...
Le resultat est bon avec firefox mais la encore avec explorer, c'est l'horreur ! il me met colle tous les elements les uns apres les autres sans espaces et sans border...
Bon, je vais changer de méthode, j'ai 2 menu sur mon site, un vertical et un horizontal.
Je vais faire l'horizontal avec mon editeur et tenter de faire le vertical avec en code avec ul et li... on verra ce que ça donne.
Bienvenue dans le monde de la programmation web ^^'
Pour que les sites soient visibles de la même manière sur tous les navigateurs, il n'y a pas de secret, il faut de la rigueur!
Déjà ne pas développer sans doctype.
Il y en existe plusieurs, je te donne celui que j'utilise:
Ceci à placer au tout début du fichier (attention à ne pas répéter la balise <html>)
Ca permet d'indiquer aux navigateurs comment ils doivent réagir pour afficher la page. ça règle certains problèmes, notamment avec IE.
il faut aussi avoir un code bien propre, et le style TOTALEMENT séparé du contenu (tout le style dans le css, le fichier html ne contient pas de balise <font> ni de balise du type <span style="...">
Au final, tout le fichier html doit être constitué de balises de ce type: <balise id="identifiant"> ou <balise class="classe">
C'est compliqué, mais ça simplifie la vie au final, et améliore la clarté du site.
Le mieux est de lire le tuto du site du zéro, qui est très bien fait: https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Je ne veux surtout pas te traiter de débutant ni t'offusquer, je te donne un conseil qui peut te faciliter la vie. ^^
Bon courage
Pour que les sites soient visibles de la même manière sur tous les navigateurs, il n'y a pas de secret, il faut de la rigueur!
Déjà ne pas développer sans doctype.
Il y en existe plusieurs, je te donne celui que j'utilise:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
Ceci à placer au tout début du fichier (attention à ne pas répéter la balise <html>)
Ca permet d'indiquer aux navigateurs comment ils doivent réagir pour afficher la page. ça règle certains problèmes, notamment avec IE.
il faut aussi avoir un code bien propre, et le style TOTALEMENT séparé du contenu (tout le style dans le css, le fichier html ne contient pas de balise <font> ni de balise du type <span style="...">
Au final, tout le fichier html doit être constitué de balises de ce type: <balise id="identifiant"> ou <balise class="classe">
C'est compliqué, mais ça simplifie la vie au final, et améliore la clarté du site.
Le mieux est de lire le tuto du site du zéro, qui est très bien fait: https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Je ne veux surtout pas te traiter de débutant ni t'offusquer, je te donne un conseil qui peut te faciliter la vie. ^^
Bon courage