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
Canon quick menu - Télécharger - Utilitaires
Réinitialiser menu démarrer windows 10 - Guide

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é

Bonjour, j aimerais accéder au menu caché de mon téléviseur Brand B2418HDled , pouvez vous m aider

Par avance merci

les entrées et les sortées

je vous demande les informations sur les entrée et les sortée

Comment faire ce symbole dans Word ?

Bonjour,

http://www.monash.edu.au/lls/llonline/assets/images/symbols/17.gif

Il s'agit d'un C majuscule avec un chiffre à l'intérieur, c'est l'abréviation de siècle en anglais !

Merci :)

Configuration: Windows 7 / Chrome 36.0.1985.143

symbole arrêt marche

Je cherche désespèrement le symbole arrêt/marche à insérer dans un texte et je ne l'ai pas trouvé dans les caractères spéciaux merci pour votre aide

sigle attention

Bonjour,

Je voudrais trouver le signe "attention" le delta avec un point d'exclamation dedans
Je ne le trouve nulle part.
Qui l'a déjà trouvé ?
merci par avance

Configuration: Windows XP / Internet Explorer 8.0