css Image à cheval sur deux blocs

DaCode

Membre
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 :unsure:
Merci pour votre éclairage
 
Solution
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
HTML
<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
CSS
#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.

Anthony

Membre
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 ?
 

Nicolas

Membre
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
HTML
<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
CSS
#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.
 

Jack

Membre
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 ?
 

DaCode

Membre
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.
 

Ces discussions pourraient vous intéresser...

Bonjour à tous, J'essaie de déployer une application sur mon serveur live via Docker mais j'ai du faire une mauvaise configuration car l'application s'est installé en local. Il y a un fichier à configurer : docker-compose.yml notamment cette section server: image...
Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous...
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Haut