[Résolu]Bug avec mon menu HTML/CSS!!!
blop18
Messages postés
29
Statut
Membre
-
blop18 Messages postés 29 Statut Membre -
blop18 Messages postés 29 Statut Membre -
Bonjour,
Alors mon problème est que j' ai fait mon menu depuis mon HTML que j'ai formater depuis mon fichier style.css jusque là tout va bien mais le problème est que des espaces se placent entre mes 4 images qui me servent de boutons menu.
Le but est donc de pouvoir supprimer ces espaces pour que mes images se trouvent cote à cote.
Mon CSS:
#menu {
width: 100%;
height: 38px;
margin: auto;
padding-top:15px;
}
Mon HTMl(j'utilise dreamweaver pour faire des boutons survolé donc normal le gros chantier^^):
<div id="menu">
<!-- boutons accueil -->
<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>
<!-- boutons CV -->
<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>
<!-- boutons portfolio -->
<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>
<!-- boutons contact -->
<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>
</div>
Merci pour vos reponse...
Alors mon problème est que j' ai fait mon menu depuis mon HTML que j'ai formater depuis mon fichier style.css jusque là tout va bien mais le problème est que des espaces se placent entre mes 4 images qui me servent de boutons menu.
Le but est donc de pouvoir supprimer ces espaces pour que mes images se trouvent cote à cote.
Mon CSS:
#menu {
width: 100%;
height: 38px;
margin: auto;
padding-top:15px;
}
Mon HTMl(j'utilise dreamweaver pour faire des boutons survolé donc normal le gros chantier^^):
<div id="menu">
<!-- boutons accueil -->
<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>
<!-- boutons CV -->
<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>
<!-- boutons portfolio -->
<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>
<!-- boutons contact -->
<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>
</div>
Merci pour vos reponse...
A voir également:
- [Résolu]Bug avec mon menu HTML/CSS!!!
- Menu déroulant excel - Guide
- Editeur html - Télécharger - HTML
- Bug chromecast - Guide
- Canon quick menu - Télécharger - Utilitaires
- Html br ✓ - Forum Webmastering
2 réponses
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
}
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.
a+