Aligner une image a un menu de navigation
Bonjour,
Je suis débutante, je tente de créer mon premier site. Je rencontre une difficulté : je voudrais aligner mon image à mon menu de navigation. Comment puis-je faire ?
Voici mon code CSS :
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 1190px;
vertical-align: middle;
}
#navigation li {
display: inline;
background: #c00;
color: #fff;
list-style: none;
padding: 4px 20px;
border: 1px solid #600;
line-height: 1em;
font-size: 40px;
margin: auto;
}
</style>
Quelqu'un peut-il m'aider ?
Je vous remercie,
Bénédicte
Je suis débutante, je tente de créer mon premier site. Je rencontre une difficulté : je voudrais aligner mon image à mon menu de navigation. Comment puis-je faire ?
Voici mon code CSS :
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 1190px;
vertical-align: middle;
}
#navigation li {
display: inline;
background: #c00;
color: #fff;
list-style: none;
padding: 4px 20px;
border: 1px solid #600;
line-height: 1em;
font-size: 40px;
margin: auto;
}
</style>
Quelqu'un peut-il m'aider ?
Je vous remercie,
Bénédicte
2 réponses
-
Salut,
Peux t-on voir le code html correspondant au css ?
Bonne journée, -
L'image a une largeur de 1190px, je suppose donc que tu souhaites centrer horizontalement l'image et le menu.
Une solution possible est de déclarer le menu en inline-block afin que sa largeur s'adapte à son contenu et d'appliquer un text-align: center; sur son parent afin de le centrer :<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Wild Circus</title> <style> img { display: block; margin-left: auto; margin-right: auto; height: 400px; width: 1190px; vertical-align: middle; } .navigation-container { text-align: center; } #navigation { display: inline-block; } #navigation li { display: inline; background: #c00; color: #fff; list-style: none; padding: 4px 20px; border: 1px solid #600; line-height: 1em; font-size: 40px; } </style> </head> <body> <header>Wild Circus</header> <img src="https://placehold.it/350x150" alt="circus tent"/> <div class="navigation-container"> <ul id="navigation"> <li>About us</li> <li>News</li> <li>Booking</li> <li>Contact</li> </ul> </div> </body> </html>
Si cette alignement n'est pas ce que tu attends, peux tu stp préciser la mise en page désirée ?-
-
Bonjour, plusieurs façons de faire pour un simple alignement en CSS.
Pourquoi pas comme ceci:<article class="navigation-container" style="border:1px solid red;"> <img id="navigationimage" src="https://placehold.it/350x150" alt="circus tent"/> <ul id="navigation"> <li>About us</li> <li>News</li> <li>Booking</li> <li>Contact</li> </ul> </article> Pour le css .navigation-container { text-align: left; } #navigation { text-align-center; float:right; background: #c00; color: #fff; list-style: none; padding: 4px 20px; border: 1px solid #600; line-height: 1em;<!-- ah bon--> font-size: 40px;<!-- pas très beau des pixels comme unité, surtout pas recommandé, il existe d'autres unités qui resteront adapté à la taille de l'écran et au choix de zoom de l'utilisateur comme em, à la limite utilisez pt --> }
-
