Discussion :

[Markos22]

Bonjour à tous,

Sur la page d'accueil de mon site, j'ai un carrousel (Bootstrap), par-dessus lequel j'ai mis le logo de l'entreprise. Le tout s'affiche assez bien avec Firefox et Internet Explorer, mais ô surprise, sur Google Chrome (et certainement sur tous les navigateurs Webkit), le logo n'apparaît pas. En fait, si on utilise les outils de développements, on s'aperçoit que le logo se trouve caché par la <div> qui contient l'accroche et le texte, c'est à dire plus bas que le carrousel, comme si le positionnement relatif du logo n'était pas interprété de la même façon par Chrome, qui se contenterait de mettre le logo à la suite (donc en dessous) du carrousel.

Voici le lien vers mon site : www.rubin-immo.com

Comment réparer ce défaut de mise en page ?

Merci d'avance pour vos conseils.

[vttman]

Sans doute un rajout de la propriété z-index au bon endroit fera en sorte que ça marche sur tous les navigateurs ?

[Markos22]

Bonjour, vttman,

Le problème du logo n'est pas qu'il est dessous (caché par) la <div>, mais qu'il est sous le carrousel, au sens ou il se trouve plus bas. La propriété z-index ne ferait que le placer par-dessus le texte. D'ailleurs, j'ai essayé, et, étrangement, ça n'a aucun effet. Je ne sais pas si je suis très clair : sous Google Chrome, le logo se retrouve sous le texte d'accroche, alors qu'il devrait se superposer au carrousel, à la même hauteur.

Le problème est donc le suivant : comment faire en sorte que le logo soit à la même hauteur que le carrousel ?

[vttman]

Sinon ...
Pour #logo, passer en position absolute ?

Essayer ceci et ajuster les paramètres ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#logo {
    position: absolute;
    top: 10%;
    left: 10%;
}

[Markos22]

Merci @vttman,

Ouais, sur écran large ça fonctionne (même si left 10% place le logo un peu trop à gauche), mais si tu réduis la largeur de la fenêtre, tu constates que ça pose un problème de responsive. Mais tu as raison, j'aurais dû y penser avant : le bon positionnement pour ce genre de situation est en absolute et non en relative. Le problème c'est le texte en, <h1> qui av avec, et devrait se positionner sous le logo, et qui a tendance à se barrer n'importe où : j'ai trouvé la solution, j'ai regroupé les deux dans une <figcaption>, que j'ai mis en absolute.

Pour ce qui est du responsive, le cadrage n'est pas top quand on réduit la fenêtre, mais au moins, le logo et son sous-titre apparaissent dans tous les navigateurs. Je vais faire comme ça en attendant de trouver mieux...

Merci encore

[vttman]

Oui l'idée était le positionnement en absolute
après le cadrage en responsive ... ça il faut peaufiner ...
mais de ce coté (cadrage) je bricole bien ce que je veux, mais je ne maitrise pas ...