[Résolu] Image du header centrée mais pas le reste de la page (Twenty Nineteen)

  • WordPress :5.0.3
  • Statut : résolu
6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #2250814
    JohnDoe33
    Participant
    Initié WordPress
    4 contributions

    Bonjour, après avoir testé infructueusement divers sorts chamaniques et vaudou, j’en appelle aux Oracles WordPress pour me donner un coup de main, s’il vous plait, avant que je me mette à faire de la magie noire et à sacrifier des chèvres devant mon clavier pour régler mon problème d’alignement d’image.

    Alors voilà mon problème :

    Je me sers du theme Twenty Nineteen. Je n’affiche pas le logo. J’ai inséré une image dans le Header, ce qui fonctionne très bien :

    .site-header {background-image:url(./wp-admin/images/bandoremix4.jpg); background-repeat:no-repeat;
    background-position:center;
    }

    Mais hélas lorsque je redimensionne la fenêtre du navigateur (sur IE, Chrome ou Android) l’image se déplace, centrée sur l’écran (ce qui, dans l’absolu ne me cause pas de problème) mais le reste de la page ne la suit pas.

    J’ai essayé d’aligner le déplacement de la page par rapport à l’image, j’ai essayé d’aligner le déplacement de l’image par rapport à la page, j’ai essayé de centrer le tout ou encore de le positionner en « fixed » et « absolute », ou encore en « auto », rien n’y fait.

    Je me fiche que mon site soit centré ou non (par défaut ça ne l’est pas, le site est aligné à gauche), tout ce que je veux c’est que mon image de tête suive le reste de la page au redimensionnement de fenêtre.

    Le menu qui se superpose à cette image de background et qui fait partie du Header, est positionné correctement par rapport au reste de la page et « sort » de l’image lorsqu’elle bouge.

    Ça fait un moment que je suis dessus et j’ai exploré infructueusement ca et ca.

    Ma CSS de personnalisation commence à être bien chargée

    body { background: #36465d;
    /*max-width: none;*/
    /*position:fixed;*/
    /*margin-left:auto*/}
    /*.site-content {background-position:center;}*/
    
    /*.entry .entry-content > *,
    .entry .entry-summary > * {
    max-width:100%;
    }*/
    
    .entry-content {background-color: #ffffff;
    border-radius: 14px;
    margin-top: -50px !important;padding-top:0px !important;
    width: 915px;} 
    /*.entry {
    background-color: #ffffff;
    border-radius: 14px;
    }*/
    
    .entry-title {color:#F6EB82;
    	position:absolute;
    }
    /*.site-title {color:#357c26;}*/
    
    .entry-header {
    height: 150px !important;
    	margin-top: -20px !important;
    }
    
    .post-title {
     color:#3CA2A0;}
    
    /*.entry-footer {display:none;}*/
    
    .entry-content p { line-height: 99%;
    font-family:trebuchet, helvetica, sans-serif;
    font-size:0.7em}
    
    .nav-prev-text,
    .nav-next-text,
    .comment-navigation,
    .nav-next,
    .nav-previous,
    .nav-links  {color:#3CA2A0;}
    
    .comments-title {color:#c5c179}
    .main-navigation {font-family: trebuchet MS;
    font-weight: italic;
    font-size: smaller;
    /*position:fixed;*/
    /*margin-left:-6.5em;*/
    }
    .site-header {background-image:url(./wp-admin/images/bandoremix4.jpg); background-repeat:no-repeat;
    background-position:center;
    }
    
    .menu-item a {font-size:0.7em}
    .menu-item a:hover {font-size:0.8em}
    /*.menu-item a:visited {font-size:0.5em}*/
    css de personnalisation

    …et je suis largué. Je ne pense pas avoir fait de modifications irréparables, les essais dont je ne suis pas sûr finissent toujours en commentaires.

    Est-il besoin de préciser que je ne suis pas un pro des CSS ? ^^’

    Hmmm voilà, en gros. Y a t’il un magicien du CSS par ici ?

    Ma configuration WP actuelle

    • Version de PHP/MySQL :
    • Thème utilisé : Twenty Nineteen
    • Extensions en place :
    • Nom de l’hébergeur : WordPress
    • Adresse du site : rurb.fr

    Problème(s) rencontré(s) :  Mauvais oeil.

    • Ce sujet a été modifié le il y a 2 mois et 1 week par  JohnDoe33.
    • Ce sujet a été modifié le il y a 2 mois et 1 week par  JohnDoe33.
    #2250817
    PhiLyon
    Modérateur
    Maître WordPress
    22611 contributions

    Bonjour.

    Essaies comme-ça

    .site-header {
        background-image: url(./wp-admin/images/bandoremix4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    🙂

    #2250818
    JohnDoe33
    Participant
    Initié WordPress
    4 contributions

    Merci pour ta réponse. C’est une bonne approche mais visuellement le redimensionnement de l’image n’est pas très heureux, ce qui est embêtant quand on bosse dans le graphisme. :p

    #2250829
    JohnDoe33
    Participant
    Initié WordPress
    4 contributions

    Ha, j’ai une modif intéressante.

    J’ai déplacé l’image en la mettant en background du menu du site plutôt qu’en background du Header. Ainsi, elle est passée de <Header> à la <div> qui contient le menu et le titre du site, tout deux appartenant à deux balises différentes.

      <li style= »list-style-type: none; »>
      .
    <div class="site-branding-container">
    <div class="site-branding">
    <h1 class="site-title"><a href="http://rurb.fr/" rel="home">.</a></h1>
    			
    <nav id="site-navigation" class="main-navigation" aria-label="Menu supérieur">
    
    <div class="menu-menu-superieur-container">
    <ul id="menu-menu-superieur" class="main-menu">
    <li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-75 is-focused"><a href="http://rurb.fr/">Accueil</a></li>
    <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://rurb.fr/?page_id=65">ArtBook</a></li>
    <li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a href="http://rurb.fr/?page_id=203">Artiste</a></li>
    <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://rurb.fr/?page_id=66">Contact</a></li>
    <li id="menu-item-1053" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1053"><a href="http://rurb.fr/?page_id=1050">Tarifs et prestations</a></li>
    </ul>
    </div>
    
    <div class="main-menu-more">
    blabla/.../
    </div><!-- .site-branding -->
    </div>
    
    
    balises de sous menu...
    </nav><!-- #site-navigation -->
    		</div><!-- .site-branding -->

    L’image se déplace avec le reste du site et si je lui donne la dimension en largeur elle l’adopte. Par contre c’est sur la hauteur que ça pêche et la marge gauche.

    En hauteur je me retrouve avec 2 images, une pour la ligne du <H1> et l’autre pour la <nav>, les deux font partie de la même <div>. Du coup problème.

    Alors j’ai encore déplacé mon background image et il est désormais sur le menu et non plus l’ensemble du header. Et la j’ai mon image en entier et elle se déplace avec le reste de la page. Mais elle reste décalée puisque alignée sur la position du menu. Reste à trouver comment affiner ça… :/

    .site-branding {background-image:url(./wp-admin/images/bandoremix4.jpg);
    background-repeat:no-repeat;
    width:1250px;
    height:100px;}

    • Cette réponse a été modifiée le il y a 2 mois et 1 week par  JohnDoe33.
    #2250910
    pcescato
    Participant
    Initié WordPress
    1 contributions

    Bonjour, avez-vous tenté de jouer sur la taille de l’image en arrière plan avec la propriété background-size ?

    Vous avez plusieurs valeurs possibles, à tester :

    background-size: inherit;
    background-size: initial;
    background-size: unset;
    
    background-size: cover;
    background-size: contain;
    background-size: auto;
    
    background-size: 50%; /* ou 1200px / ou / 48em - il s'agit de la largeur, la hauteur est déterminée automatiquement en fonction de la largeur */
    background-size: 3em 25%; /* largeur puis hauteur */
    background-size

    • Cette réponse a été modifiée le il y a 2 mois et 1 week par  pcescato.
    • Cette réponse a été modifiée le il y a 2 mois et 1 week par  pcescato.
    #2250951
    JohnDoe33
    Participant
    Initié WordPress
    4 contributions

    Bonjour et merci pour toutes ces infos. Il faut que j’apprenne à me servir de ces nouvelles options (la dernière fois que j’ai bidouillé des CSS c’était en 2010…).

    J’ai solutionné mon problème. L’image de mon bandeau suit désormais le menu et le reste de la page, sans décalage excessif. J’ai pu tranquillement positionner le menu par-dessus. En fait l’imbrication des balises a été déterminante, il me fallait « juste » (soit sage, ô ma douleur !)  trouver lesquelles travailler.

    Comme Twenty Nineteen « (Il n’y) n’a pas de possibilité d’ajouter une image d’en-tête comme « bandeau » du carnet depuis l’interface de personnalisation du thème graphique. La seule manière d’obtenir une image en en-tête de la page d’accueil du carnet est de créer une page /../ », je me permet de détailler ma démarche, finalement assez simple, pour ceux qui seraient coincés comme moi.

    Pour avoir un bandeau de tête de page qui suive le corps de la page tout en apparaissant systématiquement sur toutes les pages du site, j’ai uploadé par ftp l’image que je voulais voir en bandeau afin de pouvoir l’appeler par un background-image quelque part dans mon Header.

    ./wp-admin/images/bandoremix4.jpg

    Voici le HTML du Header (allégé de la partie concernant les sous-menus) :

    <header id="masthead" class="site-header">
    
    <div class="site-branding-container">
    <div class="site-branding">
    
    <h1 class="site-title"><a href="http://rurb.fr/" rel="home">.</a></h1>
    			
    <nav id="site-navigation" class="main-navigation" aria-label="Menu supérieur">
    
    <div class="menu-menu-superieur-container">
    <ul id="menu-menu-superieur" class="main-menu">
    <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"></li>
    <li id="menu-item-1053" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1053"></li>
    </ul>
    </div>
    
    <div class="main-menu-more">
    blabla/.../
    </div><!-- .site-branding -->
    
    </div>
    
    
    balises...
    </nav><!-- #site-navigation -->
    		</div><!-- .site-branding -->
    			</div>
    </header>

    Mon image fait 905px de large pour 100px de haut. Ma démarche n’est pas parfaite mais si elle peut aider au moins une personne…

    voilà le bébé :

    .site-branding-container {margin-right:750px;
    }
    
    .site-branding {background-image:url(./wp-admin/images/bandoremix4.jpg);
    background-repeat:no-repeat;
    width: 100em;
    height:100px;
    }

    Problem solved !

    Mon image apparaît en entier, elle n’est pas déformée et elle suit le reste de la page lorsque je redimensionne la fenêtre. Cependant de légers décalages se créent mais je considère qu’ils sont mineurs.

    Ensuite j’ai positionné mon texte par dessus l’image.

    .main-navigation {font-family: trebuchet MS;
    font-weight: italic;
    font-size: smaller;
    padding-left:40px;
    	padding-top:20px;
    }

    Messieurs, merci pour votre aide précieuse qui m’a orienté vers de nouvelles pistes. 🙂

    Que les Dieux des CSS me pardonnent pour mon code tout pourri…^^

    nb : sur mobile c’est un peu plus boiteux puisse l’image ne se redimensionne pas, contrairement au reste de la page. J’imagine que je dois allez voir du côté @média de la css principale pour m’en occuper ?

    • Cette réponse a été modifiée le il y a 2 mois et 1 week par  JohnDoe33.
    • Cette réponse a été modifiée le il y a 2 mois et 1 week par  JohnDoe33.
6 sujets de 1 à 6 (sur un total de 6)
  • Vous devez être connecté pour répondre à ce sujet.