[Résolu]Bug avec mon menu HTML/CSS!!!
Fermé
blop18
Messages postés
25
Date d'inscription
mercredi 22 décembre 2010
Statut
Membre
Dernière intervention
25 novembre 2015
-
Modifié par blop18 le 9/09/2011 à 10:38
blop18 Messages postés 25 Date d'inscription mercredi 22 décembre 2010 Statut Membre Dernière intervention 25 novembre 2015 - 11 janv. 2011 à 13:16
blop18 Messages postés 25 Date d'inscription mercredi 22 décembre 2010 Statut Membre Dernière intervention 25 novembre 2015 - 11 janv. 2011 à 13:16
A voir également:
- [Résolu]Bug avec mon menu HTML/CSS!!!
- Bug yahoo mail - Accueil - Mail
- Menu déroulant excel - Guide
- Editeur html - Télécharger - HTML
- Windows 11 menu démarrer classique - Guide
- Canon quick menu - Télécharger - Utilitaires
2 réponses
Mebooweb
Messages postés
7
Date d'inscription
mercredi 29 décembre 2010
Statut
Membre
Dernière intervention
30 décembre 2010
5
29 déc. 2010 à 19:33
29 déc. 2010 à 19:33
Si j'ai bien compris, tu souhaites faire un menu horizontale, mais il y a un espace entre les différents boutons ...
Je pense que les espaces viennent d'ici :
CSS : " width: 100%; "
HTML : " width="200" "
Tes 4 images font 800 px, mais tu utilises 100% de la fenêtre de l'utilisateur. Je pense que si la fenêtre est plus grande que 800px, les images vont s'espacer pour prendre toute la ligne.
Ce que tu peux faire, c'est mettre tes boutons dans une liste comme ceci :
HTML :
CSS :
#menu {
width: 100%;
height: 38px;
margin: auto;
padding-top:15px;
}
#liste li {
display:inline; // c'est ce qui permet d'afficher la liste sur une seule ligne
padding: 10px; // Ainsi tu peux gérer l'espace entre chaque image
}
Je pense que les espaces viennent d'ici :
CSS : " width: 100%; "
HTML : " width="200" "
Tes 4 images font 800 px, mais tu utilises 100% de la fenêtre de l'utilisateur. Je pense que si la fenêtre est plus grande que 800px, les images vont s'espacer pour prendre toute la ligne.
Ce que tu peux faire, c'est mettre tes boutons dans une liste comme ceci :
HTML :
<div id="menu">
<ul id="liste">
<li>
<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('accueil','','img/bouton/accueil2.png',1)"><img src="img/bouton/accueil.png" alt="accueil" name="accueil" width="200" height="30" border="0" id="accueil" />
</a>
</li>
<li>
<a href="cv.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cv','','img/bouton/cv2.png',1)"><img src="img/bouton/cv.png" alt="CV" name="cv" width="200" height="38" border="0" id="cv" />
</a>
</li>
<li>
<a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','img/bouton/bportfolio2.png',1)"><img src="img/bouton/portfolio.png" alt="portfolio" name="portfolio" width="200" height="38" border="0" id="portfolio" />
</a>
</li>
<li>
<a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','img/bouton/contact2.png',1)"><img src="img/bouton/contact.png" name="contact" width="200" height="38" border="0" id="contact" />
</a>
</li>
</ul>
</div>
CSS :
#menu {
width: 100%;
height: 38px;
margin: auto;
padding-top:15px;
}
#liste li {
display:inline; // c'est ce qui permet d'afficher la liste sur une seule ligne
padding: 10px; // Ainsi tu peux gérer l'espace entre chaque image
}
maaat80
Messages postés
18
Date d'inscription
vendredi 31 décembre 2010
Statut
Membre
Dernière intervention
14 février 2011
1
31 déc. 2010 à 09:36
31 déc. 2010 à 09:36
hmmm,
là je ne vois que le css de l'ID menu, pour les autre id ( acceuil, cv, portfolio, contact), je ne vois rien et pourtant c'est là qu'il faut viser.
la div menu ne s'occupe pas des boutons de ton menu lesquels sont des enfants de cette div.
le plus simple donc et puisque tu utilise DW est tu rentre dans tes css:
#acceuil, #cv, #portfolio, #contact {
float: left;
}
comme ca y'aura plus d'espace entre les boutons.
et tu reprend ton premier element de la liste "acceuil" tt seul est tu lui donne une marge gauche de X pixels pour que ton menu soit bien positionné horizontalement.
là je ne vois que le css de l'ID menu, pour les autre id ( acceuil, cv, portfolio, contact), je ne vois rien et pourtant c'est là qu'il faut viser.
la div menu ne s'occupe pas des boutons de ton menu lesquels sont des enfants de cette div.
le plus simple donc et puisque tu utilise DW est tu rentre dans tes css:
#acceuil, #cv, #portfolio, #contact {
float: left;
}
comme ca y'aura plus d'espace entre les boutons.
et tu reprend ton premier element de la liste "acceuil" tt seul est tu lui donne une marge gauche de X pixels pour que ton menu soit bien positionné horizontalement.
blop18
Messages postés
25
Date d'inscription
mercredi 22 décembre 2010
Statut
Membre
Dernière intervention
25 novembre 2015
1
11 janv. 2011 à 13:16
11 janv. 2011 à 13:16
Okey merci je vais aller voir sa !!!^^ je vous en donnerai des nouvelles ;)
++
++
11 janv. 2011 à 13:14
a+