Aligner une image a un menu de navigation

Fermé

beneote Messages postés 3 Date d'inscription jeudi 12 mai 2016 Statut Membre Dernière intervention 12 mai 2016 - 12 mai 2016 à 15:53
Hamid - 12 mai 2016 à 19:56

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

A voir également:

Aligner logo et menu css
Menu déroulant excel - Guide
Logo jeu - Télécharger - Jeux vidéo
Windows 11 menu démarrer classique - Guide
Réinitialiser menu démarrer windows 10 - Guide
Canon quick menu - Télécharger - Utilitaires

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
12 mai 2016 à 16:11

Salut,

Peux t-on voir le code html correspondant au css ?

Bonne journée,

beneote Messages postés 3 Date d'inscription jeudi 12 mai 2016 Statut Membre Dernière intervention 12 mai 2016
12 mai 2016 à 16:16

Le voici :

<!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

Réponse 2 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
Modifié par Pitet le 12/05/2016 à 17:02

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 ?

beneote Messages postés 3 Date d'inscription jeudi 12 mai 2016 Statut Membre Dernière intervention 12 mai 2016
12 mai 2016 à 17:25

Je souhaite que mon menu soit de la même largeur que mon image et le tout centré. Comme si mon menu était une prolongation de mon image. C'est difficile à expliquer, je ne sais pas si tu vois ce que je veux dire...

En tout cas merci pour ton aide précédente !

Bénédicte

Hamid
Modifié par Hamid le 12/05/2016 à 19:57

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 -->
            }

Discussions similaires

menu caché

Comment faire ce symbole dans Word ?

Arrêt/démarrage via Bouton ON/OFF de l'alim

symbole arrêt marche

sigle attention