css Image à cheval sur deux blocs

[DaCode]

Bonjour,

J'ai un petit souci pour afficher une image (un logo).
Il y a un bloc header et un bloc body, je voudrais que le le logo, qui est assez grand soit à cheval sur les deux blocs, le header étant assez fin.

SI je place l'image dans le header soit elle est rétrécie pour s'adapter aux dimensions du bloc soit elle est coupée de ce qui dépasse
Merci pour votre éclairage

 

[Hamza]

Tu devrais essayer de donner une position relative à ton image, tu la case avec une classe img par exemple,

.img {
    position: relative;
    top: 100px;
}

 

[Anthony]

Ah intéressant ça, à ce propos @DaCode je ne connais pas l'adresse de ton site mais est-ce qu'il est adapté aux différents appareils de type smartphones ou tablettes ? Responsif quoi... Parce qu'avec une position relative que se passe t-il sur un petit écran ?

Comment gérer ce type de problème ?

 

[Hamza]

Comment gérer ce type de problème ?

En ce qui concerne les problèmes de "responsif" il faut gérer au cas par cas à mon avis, il y a des fonctions qui permettent de réduire les éléments si l'écran d'affichage est de moindre résolution. Bootsrap par exemple gère nativement le responsif.

 

[Wazz9]

Bonsoir, la solution proposée par Hamza a t-elle fonctionné ? J'ai à peu près le même problème sur mon site WordPress je voudrais placer une image qui chevauche sur deux blocs de texte.

Merci

 

[Nicolas]

En tout cas ça doit fonctionner. Quelle est ta situation exactement Wazz ?
Si tu as 2 blocs, tu peux placer la première image dans le premier bloc

<div class="bloc_1">
    <img src="/images.jpg" id="image-a">
</div>

ensuite avec CSS tu déplaces l'image par rapport à sa position initiale avec la propriété position: relative

#image-a {
    position: relative;
    top: 100px;
    left: 50px;
}

Par rapport à son emplacement de base l'image sera décalée de 50 pixels vers la droite et 100 pixels vers le bas. Si ton bloc_2 est juste en dessous de ton bloc_1 alors l'image chevauchera ce bloc.

 

[Cascadeur]

https://openweb.eu.org/articles/initiation_flux

 

[Jack]

Il y a un bloc header et un bloc body, je voudrais que le le logo, qui est assez grand soit à cheval sur les deux blocs, le header étant assez fin.

Le bloc header étant généralement fait pour accueillir le titre du site et le logo, dans ton cas soit le logo est trop gros soit le bloc est trop étroit.
Pourquoi ne pas définir un height plus grand pour le bloc header ?

 

[Nicolas]

c'est cohérent si sous le bloc header il y a un bloc nav par exemple, l'effet peut être pas mal avec le logo qui merge sur les 2 blocs. Par contre si sous le header il y a direct le body ça peut être bizarre.

Dis nous tout @DaCode !!

 

[DaCode]

En fait ça n'allait pas je me suis embarqué dans un truc trop alambiqué qui allait être compliqué à gérer surtout en mode smartphone.
J'ai réduit le logo, en fait j'ai changé de logo, et tout est plus simple.

En attendant le position:relative fonctionnait très bien.

 

[Nicolas]

Au moins on aura parlé de position: relative;