Aligner une image a un menu de navigation
beneote
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
Hamid -
Hamid -
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
A voir également:
- Aligner logo et menu css
- Logo .net - Télécharger - Études & Formations
- Menu déroulant excel - Guide
- Logo jeu - Télécharger - Jeux vidéo
- Logo n - Guide
- Canon quick menu - Télécharger - Utilitaires
2 réponses
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 :
Si cette alignement n'est pas ce que tu attends, peux tu stp préciser la mise en page désirée ?
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:
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 -->
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>Wild Circus</title>
<header>Wild Circus</header>
<img src="cirque.jpg" alt="circus tent"/>
<ul id="navigation">
<li>About us</li>
<li>News</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</head>
Merci !
Bénédicte