Sujet Précédent Sujet Suivant

Positionnement d'éléments en responsive

Résolu/Fermé
AmWin67_15 Messages postés 11 Date d'inscription jeudi 4 juin 2020 Statut Membre Dernière intervention 12 juin 2020 - 11 juin 2020 à 15:11
AmWin67_15 Messages postés 11 Date d'inscription jeudi 4 juin 2020 Statut Membre Dernière intervention 12 juin 2020 - 12 juin 2020 à 12:27
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 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
11 juin 2020 à 21:07
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 jeudi 4 juin 2020 Statut Membre Dernière intervention 12 juin 2020
12 juin 2020 à 01:39
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 jeudi 4 juin 2020 Statut Membre Dernière intervention 12 juin 2020
12 juin 2020 à 01:40
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 jeudi 4 juin 2020 Statut Membre Dernière intervention 12 juin 2020
12 juin 2020 à 12:27
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

Partage google drive
The sr5 -
regcal -

1 réponse
tests du greta
yass -
yassir -

9 réponses
le test d'entrée pour le cesi en alternance
sab08600 -
sab08600 -

2 réponses
Virus Dr Guard sur mon PC
Mike -
Mike -

78 réponses
Connexion internet Gigaset elements
nico403 -
Sbor -

4 réponses