IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Mettre une image en background d'un menu


Sujet :

CSS

  1. #1
    Candidat au Club
    Homme Profil pro
    Consultant E-Learning
    Inscrit en
    octobre 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Burkina Faso

    Informations professionnelles :
    Activité : Consultant E-Learning

    Informations forums :
    Inscription : octobre 2018
    Messages : 3
    Points : 3
    Points
    3
    Par défaut Mettre une image en background d'un menu
    Bonjour, j'ai trouvé un joli menu que j'aimerais utiliser sur la page d'accueil de mon site. Cependant, je tente de placer une image d'arrière-plan, mais cela ne fonctionne pas bien. Lorsque je fais l'overlay, le menu ne se place pas bien et en vue adaptative, l'image se réduit et le menu se retrouve en dehors en dessous. J'aimerais avoir votre aide pour bien placer l'image pour que le menu reste toujours bien centré autant horizontalement que verticalement. Aussi je voudrais que l'image occupe toujours la hauteur de la fenêtre en vue adaptative sans que sans hauteur ne diminue.

    Merci d'avance pour votre soutien.

    Voici le code du menu d'origine.

    le html

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="fontawesome-free-5.10.2-web/css/all.css" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
    <div class="principal">
    	<div class="second">
    		<img src="../accueilp.jpg" alt="école">
    		<div class="texte">
            <div class="menu">
                <ul>
                    <li class="item" id="profile">
                        <a href="#profile" class="btn"><i class="fa fa-user"></i> Profile</a>
                        <div class="smenu">
                            <a href="">Post</a>
                            <a href="">Picture</a>
                        </div>
                    </li>
     
                    <li class="item" id="messages">
                        <a href="#messages" class="btn"><i class="fa fa-envelope"></i> Messages</a>
                        <div class="smenu">
                            <a href="">New</a>
                            <a href="">Sent</a>
                            <a href="">Spam</a>
                        </div>
                    </li>
     
                    <li class="item" id="settings">
                        <a href="#settings" class="btn"><i class="fa fa-cog"></i> Settings</a>
                        <div class="smenu">
                            <a href="">Password</a>
                            <a href="">Language</a>
                        </div>
                    </li>
     
                    <li class="item">
                        <a href="#" class="btn"><i class="fa fa-sign-out-alt"></i> Logout</a>
                    </li>
                </ul>
            </div>
    		</div>
    	</div>
    </div>
    </body>
    </html>

    Le CSS

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    .second img{
    	width: 100%;
    }
    .principal {
    	width: 100%;
    }
    .second {
    	width: 100%;
    	position: relative;
    }
    .texte {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0px;
    	font-size: 14px;
    	font-family: agency fb;
    	background:linear-gradient(rgba(255,0,0,.4));
    }
    .menu {
        width: 300px;
        border-radius: 8px;
        overflow: hidden;
    }
     
    .item {
        border-top: 1px solid #18dcff;
        overflow: hidden;
    }
     
    .btn {
        display: block;
        padding: 16px 20px;
        background: #17c0eb;
        color: white;
        position: relative;
    }
     
    .btn::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        background: #17c0eb;
        left: 20px;
        bottom: -7px;
        transform: rotate(45deg);
    }
     
    .btn i {
        margin-right: 10px;
    }
     
    .smenu {
        background: #333;
        overflow: hidden;
        transition: max-height 0.3s;
        max-height: 0;
    }
     
    .smenu a {
        display: block;
        padding: 16px 26px;
        color: white;
        margin: 4px 0;
        position: relative;
    }
     
    .smenu a::before {
        content: "";
        position: absolute;
        width: 6px;
        height: 100%;
        background: #18dcff;
        left: 0;
        top: 0;
        transition: .3s;
        opacity: 0;
    }
     
    .smenu a:hover::before {
        opacity: 1;
    }
     
    .item:target .smenu {
        max-height: 10em;
    }

  2. #2
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 674
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 674
    Points : 2 376
    Points
    2 376
    Par défaut
    Bonjour,

    Pourriez-vous être plus précis quand vous dites "bien placer l'image" ?

    Actuellement vous dites des choses qui ne sont pas possibles : que l'image prenne toute la hauteur de la fenêtre mais qu'elle ne se réduise pas quand on réduit la taille de la fenêtre.
    De plus, cette image doit se placer par rapport à quoi ? Le menu ou la page ? Ca porte à confusion entre ce que vous faites et ce que vous voulez obtenir je pense.

    Je vous conseille de retirer la balise <img> que vous avez mise et d'utiliser plutôt les propriétés CSS background qui sont plus indiquées pour ce que vous souhaitez faire je pense.

    Habituellement, on met une image de fond et on met sa taille de type cover afin de dire qu'on souhaite que le navigateur se débrouiller pour que tout le bloc soit recouvert (le bloc ici est <body>)
    Voici un exemple : https://codepen.io/DarkStar123456/pen/RwgLOwL

    NB : On ajoute min-height: 100vh; sur body pour être certain de la hauteur minimum et que notre image recouvrira tout l'écran
    NB : Si vous souhaitez que l'image s'affiche dans une proportion définie, vous pouvez utiliser background-size et soit y définir une largeur ou hauteur fixe ou en pourcentage. Par exemple background-size: auto 100%; pour 100% de la hauteur de l'écran.

  3. #3
    Candidat au Club
    Homme Profil pro
    Consultant E-Learning
    Inscrit en
    octobre 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Burkina Faso

    Informations professionnelles :
    Activité : Consultant E-Learning

    Informations forums :
    Inscription : octobre 2018
    Messages : 3
    Points : 3
    Points
    3
    Par défaut
    Bonjour Monsieur darkstar123456
    Enormément merci pour votre prompte réaction et surtout pour code exemple qui me permettent d'avancer. Pour être précis, je dirai que votre exemple répond à mon besoin d'image de fond qui garde sa hauteur même sur des écrans mobiles. La préoccupation qui me reste actuellemnt est de pouvoir placer le menu au centre de l'écran autant verticalement que horizontalement. Pour cela j'ai mis margin-left: auto; et margin-right: auto; pour centrer horizontalement. ensuite j'ai mis margin-top : 20vh; pour avoir le menu un peu décalé du haut. J'aurais aimé qu'il soit toujours centré verticalement.
    Encore merci pour votre aide et vos remarques pertinentes qui m'ont beaucoup permis d'arriver à là. Si je peux avoir un dernier coup de pouce pour le centrage vertical je suis preneur.
    Une fois de plus merci.

  4. #4
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 674
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 674
    Points : 2 376
    Points
    2 376
    Par défaut
    Bonjour,

    OK pour l'image de fond.

    Pour le centrage c'est bizarre comme volonté.
    En effet, le centrage vertical va forcément provoqué le déplacement vertical du menu dès qu'on va ouvrir/fermer un élément.

    Mais bon, pour ce faire il existe 2 méthodes :

    1. Position absloute
    Attention, ça veut dire que tous les contenus vont "sortir du flux" donc si vous ajoutez du contenu, il se trouvera par-dessus ou par-dessous le menu.
    Je vois d'ailleurs qu'il y a déjà du position absolute dans votre code.
    Pour faire simple, supprimez position: relative de .second, supprimez le width & height 100% de .texte (assez mauvais nom de classe ) ensuite il suffit de positionner votre bloc au centre verticalement (top: 50%; et horizontalement (left: 50%;) .
    Enfin, vu que le positionnement se fait par le point super gauche du bloc, il faut donc déplacer vers la gauche et le haut de la moitié : transform: translate(-50%, -50%);.
    Exemple : https://codepen.io/DarkStar123456/pen/gORGNmg
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /*
    on vire tout ça qui sert à rien
    .second img{
    	width: 100%;
    }
    .principal {
    	width: 100%;
    }
    .second {
    	width: 100%;
    	position: relative;
    }
    */
    .texte {
    	position: absolute;
    	font-size: 14px;
    	font-family: agency fb;
    	background:linear-gradient(rgba(255,0,0,.4));
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }


    2. Utiliser Flexbox
    Grâce à Flexbox, il suffit de définir un parent en tant que display: flex; et lui définir une hauteur (height: 100vh;) après on a qu'à écrire : justify-content: center; align-items: center.
    Exemple : https://codepen.io/DarkStar123456/pen/QWgqXMm
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .texte {
    	font-size: 14px;
    	font-family: agency fb;
    	background:linear-gradient(rgba(255,0,0,.4));
      display: flex;
      height: 100vh;
      width: 100%;
      align-items: center;
      justify-content: center;
    }

  5. #5
    Candidat au Club
    Homme Profil pro
    Consultant E-Learning
    Inscrit en
    octobre 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Burkina Faso

    Informations professionnelles :
    Activité : Consultant E-Learning

    Informations forums :
    Inscription : octobre 2018
    Messages : 3
    Points : 3
    Points
    3
    Par défaut
    Salut, merci à vous pour les bonnes observations et les rappels de cours. Vraiment merci pour les codes et les exemples, merci de m'avoir permis d'arriver à ce que je veux faire. Vos contributions sont toujours très bonnes.
    Grandement merci à vous.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Mettre une image en Background d'un JPanel et d'une JList
    Par diabli73 dans le forum Composants
    Réponses: 8
    Dernier message: 29/01/2010, 15h35
  2. mettre une image en background d'une jsp
    Par john_wili dans le forum Struts 1
    Réponses: 7
    Dernier message: 27/10/2009, 16h02
  3. [XSL-FO]Mettre une image en background
    Par Little_flower dans le forum XSL/XSLT/XPATH
    Réponses: 16
    Dernier message: 29/05/2007, 10h06
  4. [FTP] Code pour mettre une image en background
    Par Link14 dans le forum Langage
    Réponses: 2
    Dernier message: 24/02/2006, 21h10
  5. code HTML pour mettre une image en background dans un menu
    Par Link14 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 16/10/2005, 12h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo