Positionnement d'éléments en responsive

Résolu
AmWin67_15 Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   -  
AmWin67_15 Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour, je suis vraiment débutant en CSSet j'ai du mal à bien saisir l'aspect positionnement des éléments. J'ai un exercice à faire et je pense que si j'arrive à comprendre cet exercice je ferais un pas significatif en avant.

L'exo consiste en un CV composé :

1) d'un <header> pour le titre,
2) d'un <div> contenant :
<img> (la photo) et les données personnelles (<h1> (le nom) et des <p> pour l'adresse, téléphone etc ..)
3) un <div> pour la formation et l’expérience professionnelle
4) un <div> pour les divers.

L'exo demande que la photo, les données personnelles et les divers doivent être à droite l'un au dessous de l'autre pour des écran de taille "normale". Et lorsqu'on réduit la taille de l'écran (en utilisant les media query) la photo reste au niveau du titre du CV mais les données personnelles viennent glisser au dessous du titre et les divers viennent glisser tout en bas c'est-à-dire après l'expérience professionnelle.

J'ai fait des choses (sans conviction) mais je n'ai pas vraiment réussi à bien placer les différents éléments.

Je n'arrive pas à dissocier la photo du reste des informations personnelles (tél, adresse etc..) alors qu'ils sont tous dans la même div ? et même si je les mets dans des div differentes j'arrive pas à faire glisser les données perso. sous le titre tout en laissant la photo conserver sa posotion par rapport au titre.

Et d'une manière générale j'aimerais savoir s'il y a des règles qui gerent le comportent des enfants par rapport à celui des parents et vice versa et qui mettre en absolue et qui en relatif pour qu'ils aient telle ou telle position ? et si on change pour l'un que doit on changer pour l'autre ? etc .....

Si je dois poster mon fichier html et css pas de soucis

Merci d'avance pour votre aide
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,


Si je dois poster mon fichier html et css pas de soucis

Oui, en utilisant les BALISES DE CODE.
Explications disponibles ici ( à lire ENTIEREMENT ) : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code


qui mettre en absolue et qui en relatif pour qu'ils aient telle ou telle position ?

Oui, en utilisant les media queries
https://www.alsacreations.com/article/lire/930-css3-media-queries.html

0
Réponse 2 / 3
AmWin67_15 Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
Mon fichier HTML : 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CV</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <header id="titre_cv"> Responsable Point de Vente Prêt à Porter</header>
    
    <img id="photo" src="photo_cv.png" alt="Photo identité"/>
    <div id="perso">
        <h1>Alexandra Billu</h1>
        <p>12, rue Saint-Rome - 31000 Toulouse</p>
        <input type="tel" id="fixe"/>
        <input type="tel" id="mobile"/>
        <input type="email" id="mail"/>
    </div>
    
    <section>
        <h2>FORMATION</h2>
        <table>
            <tr>
                <td>Sept 2012 - Juin 2014</td>
                <td><strong>BTS Commerce</strong></td>
            </tr>
            <tr>
                <td>Sept 2012 - Juin 2014</td>
                <td><strong>Baccalauréat STMG</strong></td>
            </tr>
        </table>
        <div id="exp">
            <h2>EXPERIENCES PROFESSIONNELLES</h2>
                <h3>Jan 2014 - Juin 2014   Desigual - Responsable Point de Vente</h3> 
                    <ul>
                        <li>Encadrement de 6 vendeuses</li>
                        <li>Gestion de l'espace de vente</li>
                        <li>Mise en valeur des nouvelles collections</li>
                        <li>Interface avec le Siège</li>
                    </ul>
                <h3>Sep 2011 - Juin 2012   Zara - Vendeuse Prêt à Porter</h3>
                    <ul>
                        <li>Accueil clientèle</li>
                        <li>Conseils et ventes</li>
                        <li>Gestion de caisse</li>
                        <li>Merchandising et mise en rayon</li>
                    </ul>
                <h3>2008 - 2010                 Boulangerie du Soleil - Vendeuse</h3>
                    <ul>
                        <li>Mise en rayon</li>
                        <li>Vente</li>
                        <li>Gestion de caisse</li>
                    </ul>
        </div>
    </section>
    
    <div id="divers">
            <h2>ETAT CIVIL</h2><img src="triangle.png" alt="triangle" class="triangle"/> 
                <ul id="civil">
                    <li>24 ans</li>
                    <li>Nationalité Francaise</li>
                    <li>Permis B</li>
                </ul>
            <h2>INFORMATIQUE</h2><img src="triangle.png" alt="triangle" class="triangle"/>
                <ul id="informatique">
                    <li>Word</li>
                    <li>Excel</li>
                    <li>Internet</li>
                </ul>
            <h2>SPORTS</h2><img src="triangle.png" alt="triangle" class="triangle"/>
                <ul id="sport">
                    <li>Tennis</li>
                    <li>Golf</li>
                </ul>
            <h2>LOISIRS</h2><img src="triangle.png" alt="triangle" class="triangle"/>
                <ul id="loisir">
                    <li>Théâtre</li>
                    <li>Cinéma</li>
                </ul>
            <h2>VOYAGES</h2><img src="triangle.png" alt="triangle" class="triangle"/>
                <ul id="voyage">
                    <li>Brésil</li>
                    <li>Australie</li>
                    <li>Argentine</li>
                </ul>
    </div> 
    <script src="resp_cv.js"></script>
</body>
</html>
0
Réponse 3 / 3
AmWin67_15 Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
Mon fichier CSS : 
#titre_cv{
    font-size: 3em; font-weight:bold; color:blue; margin-bottom: 0.5em; display:block; float: left;
}

section>h2, #exp>h2{
        font-size: 2em; font-weight:bold; color:white; margin-bottom: 50px; background-color: blue; margin-top: 20px; margin-bottom: 32px; padding:5px;
}
#divers>h2{
    font-size: 2em; font-weight:bold; color:blue; margin-bottom: 50px; background-color: white;  margin-top: 20px; margin-bottom: 32px; padding:8px;
}

#photo{
    display: inline-block; width:35%; border:3px solid white; border-radius: 10px; margin-right: 0px; position:relative;
   
}

input{
    display: block;
}
.triangle{
    width:20px;
}

h3{
    font-weight: normal; background-color:skyblue; margin-bottom: 30px; margin-top: 30px; padding:5px; 
}

body>header, section{
    display:block; float:left; margin-top: 80px; width:60%;
}

#divers, #perso{
   /* width:250px;*/
    background-color: blue;
    padding:8px;
    color: white;
  display:inline-block;*/
      width:35%;  
    position:relative;
}
td{
    padding:10px;
}
h2>ul{
    margin-left:50%;
}
#divers ul{
        list-style: none;
        padding-left: opx;
}

// media queries
/*grand écran*/
@media screen and (min-width:1050px){
    body{
        font-size:16px;
    }
    #photo{
    display: inline-block; width:35%; border:3px solid white; border-radius: 10px; margin-right: 0px; position:relative;
    }
        #divers, #perso{
   /* width:250px;*/
    background-color: blue;
    padding:8px;
    color: white;
  display:inline-block;*/
      width:100%;  
}
        
/*écran std*/
@media screen and (min-width:640px) and(max-width:1049px){
    body{
        font-size:14px;
    }
}

/*petit écran et tablette */
@media screen and(min-width:400px) and(max-width:639px){
    body{
        font-size:12px;
        position: relative;
    }
    
     #perso{
        position: relative; display:inline-block; width:100%; border:3px solid white;
    }
    #photo{
    position:relative; display: block;  
    top: -3px; left: -3px; bottom: -3px; right: -3px;
   
}
   
    
    #titre_cv, #perso>h1{
        font-size: 1.5em;
        display: block;
    }
    
    #divers{
    width:auto;
    background-color: blue;
    padding:8px;
    color: white;
    display:inline-block;
}
    #divers>h2{
    width:auto;
    font-size: 15px;
}
    section>h2, #exp>h2 {
0
AmWin67_15 Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
plutôt celui ci (je ne sais pas comment supprimer ou modifier un ancien message, désolé) 

#titre_cv{
    font-size: 3em; font-weight:bold; color:blue; margin-bottom: 0.5em; display:block; float: left;
}

section>h2, #exp>h2{
        font-size: 2em; font-weight:bold; color:white; margin-bottom: 50px; background-color: blue; margin-top: 20px; margin-bottom: 32px; padding:5px;
}
#divers>h2{
    font-size: 2em; font-weight:bold; color:blue; margin-bottom: 50px; background-color: white;  margin-top: 20px; margin-bottom: 32px; padding:8px;
}

#photo{
    display: inline-block; width:35%; border:3px solid white; border-radius: 10px; margin-right: 0px; position:relative;
   
}

input{
    display: block;
}
.triangle{
    width:20px;
}

h3{
    font-weight: normal; background-color:skyblue; margin-bottom: 30px; margin-top: 30px; padding:5px; 
}

body>header, section{
    display:block; float:left; margin-top: 80px; width:60%;
}

#divers, #perso{
   /* width:250px;*/
    background-color: blue;
    padding:8px;
    color: white;
    display:inline-block;*/
    width:35%;  
    position:relative;
}
td{
    padding:10px;
}
h2>ul{
    margin-left:50%;
}
#divers ul{
        list-style: none;
        padding-left: opx;
}

// media queries
/*grand écran*/
@media screen and (min-width:1050px){
    body{
        font-size:16px;
    }
    #photo{
    display: inline-block; width:35%; border:3px solid white; border-radius: 10px; margin-right: 0px; position:relative;
    }
    #divers, #perso{
   /* width:250px;*/
    background-color: blue;
    padding:8px;
    color: white;
    display:inline-block;*/
    width:100%;  
    }
}
    
    
    
/*écran std*/
@media screen and (min-width:640px) and (max-width:1049px){
    body{
        font-size:14px;
    }
}

/*petit écran et tablette */
@media screen and(min-width:400px) and (max-width:1049){
    body{
        font-size:12px;
        position: relative;
    }
     #perso{
        position: relative; display:inline-block; width:100%; border:3px solid white;
    }
    #photo{
    position:relative; display: block;  
    top: -3px; left: -3px; bottom: -3px; right: -3px;
    }
    #titre_cv, #perso>h1{
        font-size: 1.5em;
        display: block;
    }
    #divers{
    width:auto;
    background-color: blue;
    padding:8px;
    color: white;
    display:inline-block;
    }
    #divers>h2{
    font-size: 10px;
    }
    section>h2, #exp>h2 {
        font-size: 10px;
    }
}
    
    
/* smartphone */
@media screen and (max-width:399px){
    body{
        font-size:10px;
        position: relative;
    }
    #perso{
        right: 0px; top: 0px; width:50%; display:block; max-width: 130px; border:3px solid white; border-radius: 10px; margin:auto;
    }
    #titre_cv, #perso>h1{
        display: block; float: left; width:60% font-size: 1em; font-weight:bold; color:blue; margin-bottom: 50px;
    }
    #perso>h1{
        font-size: 2em; font-weight:bold; color:white; margin-bottom: 50px; background-color: blue; margin-top: 20px; margin-bottom: 32px; padding:5px;
    }
    #divers>h2{
    font-size: 15px;
    }
    ul{
        display:none;
    }
    ul li{
        display:inline;
    }
     ul li:after{
        content:'-';
    }
     ul li:last-of-type:after{
        content:'.';
    }
     #exp h3, #divers h2{
        position:relative;
    } 
    #exp h1 img, #divers h2 img{
        position:absolute;
        right:0px;
        bottom:0px;
    }
    .triangle{
    width:20px;
    }
    
}
0

Discussions similaires

tests du greta
yass -
yassir -

9 réponses
Xiaomi/Redmi - problème de réseau et SMS de positionnement
Bashiok -
Bashiok -

1 réponse
test greta
nyla123 -
nyla123 -

2 réponses
Formation secrétaire comptable niveau IV
Anaisb06 -
Chris 94 -

3 réponses
Partage google drive
The sr5 -
regcal -

1 réponse