Menu html
Bonjour,
je suis en trein de créer un site web, et étant débutant j'ai un petit soucis.
Tout d'abord concernant le menu j'ai créer un "bandeau" :
div#contenu {
width:auto;
height:80px;
background-color: #525c65;
dans lequel j'ai pour l'instant placer 3 icônes, deux à gauche et une a droite avec :
li.bouton_gauche {
float : left;
}
li.bouton_droite {
float : right;
}
le soucis est que je remarque que je ne vais pas beaucoup mettre d icônes, donc je voudrais les centrer, mais je n'y arrive pas... j'ai essayé d'enlever dansle html classe=bouton gauche/droite, mais la menu part dans tous les sens et tout se déforme, quelqu'un aurait il un conseil svp ?
Ensuite dans ce menu, j'ai mis le nom de l icone avec une image au dessus, lorsque l on clique sur le nom ça surligne celui-ci et ouvre un nouveau lien, mais je voudrais que ça sélectionné ce nom avec l'image en même temps, comment faire svp ? j'ai utilisé ce code :
#menu li a:hover, #menu li a:focus, #menu li a:active {
background: #1293D8 ;
text-decoration: underline ;
Merci d'avance pour votre aide, j'espère avoir été clair.
je suis en trein de créer un site web, et étant débutant j'ai un petit soucis.
Tout d'abord concernant le menu j'ai créer un "bandeau" :
div#contenu {
width:auto;
height:80px;
background-color: #525c65;
dans lequel j'ai pour l'instant placer 3 icônes, deux à gauche et une a droite avec :
li.bouton_gauche {
float : left;
}
li.bouton_droite {
float : right;
}
le soucis est que je remarque que je ne vais pas beaucoup mettre d icônes, donc je voudrais les centrer, mais je n'y arrive pas... j'ai essayé d'enlever dansle html classe=bouton gauche/droite, mais la menu part dans tous les sens et tout se déforme, quelqu'un aurait il un conseil svp ?
Ensuite dans ce menu, j'ai mis le nom de l icone avec une image au dessus, lorsque l on clique sur le nom ça surligne celui-ci et ouvre un nouveau lien, mais je voudrais que ça sélectionné ce nom avec l'image en même temps, comment faire svp ? j'ai utilisé ce code :
#menu li a:hover, #menu li a:focus, #menu li a:active {
background: #1293D8 ;
text-decoration: underline ;
Merci d'avance pour votre aide, j'espère avoir été clair.
3 réponses
-
essaie ceci:
voici le code CSS que tu mets dans un fichier "style.css"
/*tu defini ton "bandeau"*/
header {
/* propriétés (height: ; width: ; background-color: ; etc...*/
}
/*ton menu de navigation... voici un exemple à toi d'ajuster*/
nav {
text-align:right;
width:85%;
}
nav ul{
list-style:none;
}
nav li{
display:inline;
padding-left:15px;
padding-right:15px;
text-decoration:none;
}
nav a{
font-size:1.6em;
text-decoration:none;
}
nav a:hover{
color: red;
}
.image{
/* tu définis les propriétés de l'image hauteur et largeur pour qu'elles soient toutes du même gabarit*/
et voici le code html que tu mets dans un fichier.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
<title>ma page test</title>
</head>
où tu remplace les textes (titres) par
<img src="../image.jpg" alt="image" class="image">
<body>
<header>
<nav>
<ul>
<li><a href="#">accueil</a>
<li><a href="#">titre1</a>
<li><a href="#">titre 2</a>
<li><a href="#">titre 3</a>
<!-- tu peux ajouter autant de liens que tu veux...-->
</ul>
</nav>
</header>
...
</body>
</html>
ca devrait marché si je n'ai rien oublié, à toi de chipoter pour la mise en page
Bonne chance ! -
J'ai déjà regarder sur le site du zéro mais j'ai toujours le même soucis =/
-
Bonsoir, il me semble que tu te compliques la vie...
Si tu allais un peu voir par exemple le MOOC du site du Zero HTML/CSS les menus de navigations "nav" tu y apprendrais beaucoup de choses.
bonne chance
