1486 sujets

Web Mobile et responsive web design

[Résolu] Superposer une image sur 2 box

Bonjour,
Je rencontre un problème pour un exercice.
L'exercice consiste à reproduire un CV mis à disposition mais avec mes infos.
Lien du CV à reprendre : https://cms-assets.tutsplus.com/uploads/users/1223/posts/33877/image/Decent.jpg

Le problème que je rencontre est pour positionner ma photo de profil. Pour la positionner entre les 2 box du haut je n'ai trouver qu'à utiliser une 
position : absolute
qui place l'image comme il faut mais le problème est qu'en position absolute l'image va très mal se déplacer en fonction de la résolution de l'écran.

Je vois comme solution d'utiliser des 
max-width
pour chaque résolution et je me demandais donc s'il y avais une autre solution que 
absolute
pour la rendre responsive autrement.

Voici le container comprenant mon image et mes box :
<header>
                <div class="bande_noir">
                    <div class="burger_menu">
                        <p>
                            &#9776;
                        </p>
                    </div>
                </div>

                <div class="profile">
                    <div class="intro">
                        <h2> JM Mo</h2>
                        <p> Developer to become</p>
                    </div>
                    
                    <div class="photo">
                        <img src = "image/imgCV.jpg" alt = "photo du CV" height="175px" width="175px">
                    </div>

                    <div class="presentation">
                        <div class="social_network">
                            <a href="blabla" target=_blank> <img src = "image/icon_gmail.png" alt = "icone mail">
                            <a href ="blabla" target=_blank> <img src = "image/icon_linkedin.png" alt = "icone linkedin"> </a>
                        </div>

                        <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
                        </p>
                        <div class="button">
                            <input type="button" value="Download CV" onclick="index.html"></input>
                        </div>
                    </div>
                </div>
            </header>




Et voici le CSS qui va avec : 

header{
    width: 100%;
    background-color:rgb(230, 230, 230);
    box-shadow : 3;
}
.bande_noir{
    width: 100%;
    background-color: rgb(66, 66, 66);
    font-size : xx-large;
    height: 5%;
    color : white;  
    padding-bottom: 1px;
}
.burger_menu:hover



.profile {
    position: absolute;
    width : 80%;
    
    
}
.intro{
    
    text-align: center;
    background-color: rgb(139, 133, 133);
    padding : 15px;
    padding-bottom: 6%;
    color : white;
    font-family :  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: large;
    
    
}
.photo {
    position: absolute;
    z-index: 1;
    text-align: center;
    left : 45%;
    top : 28%;
    
    
     
}
.photo img{
    border-radius: 200px;
    
}

.presentation {
    position: relative;
    text-align: center;;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 2%;
    padding : 1%;
    border: ridge rgb(224, 224, 224);
    box-shadow : 6px 6px 3px rgb(219, 217, 217);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: rgb(240, 240, 240);
}
.social_network img {
    margin-top : 50px;
    margin-right: 25px;
    margin-left: 25px;
} 
.social_network a {
        text-decoration: none;
    }


Je n'arrive pas à mettre de capture d'écran de ce que ça donne mais j'espère avoir été clair.
Je précise que je n'ai le droit que d'utiliser du code HTML et CSS
Modifié par JMMO (08 May 2022 - 10:16)
Modérateur
Bonjour,

1) La plupart de tes <div> ne servent à rien.

2) Si l'on suppose qu'on conserve malgré tout ce html :

2a) ton élément de classe profile n'a pas besoin d'être en position:absolute, mais plutôt en position:relative (de manière à ce que le positionnement des éléments qu'il contient puisse de faire par rapport à lui). Il suffit de faire (pas besoin de préciser une valeur pour la propriété width) :
.profile {
    position: relative;
}

2b) l'élément contenant l'image, lui, doit bien être en position absolute. Mais ensuite, pour le centrer et le remonter de la moitié de sa propre hauteur, le plus simple me parait d'utiliser la propriété transform (pas besoin de préciser une valeur pour la propriété top). Par exemple :
.photo {
    position: absolute;
    z-index: 1;
    left : 50%;
    transform: translate(-50%,-50%);
}

Amicalement,
Modifié par parsimonhi (17 Jan 2021 - 18:29)
Meilleure solution
Oui je me doute que mon code a encore besoin d'être amélioré.
Merci pour ta réponse je vais changer mon code.
Sujet clos
Aller à