Problème Tp Organiser son CV

Sujet résolu

13 décembre 2017 à 22:57:09

Bonjour,

Je suis rendu à l'étape ou l'on doit utiliser flexbox pour modifier son CV mais j'ai deux problème:

1) La bordure autour de ma photo ne suit pas la photo mais continu sur toute la hauteur de la box header.

2) Je voudrais réduire l'écart entre Mon Nom et m'a "description rapide"( j'ai déjà essayer avec line-height ça ne marche pas).

Merci d'avance pour vos réponse,

Voici mon fichier css

body
{
	color:white;
	background-image: url("fondbois.jpg");
}

@font-face {
    font-family: 'concertone';
    src: url('policeconcert/concertone-regular-webfont.eot');
    src: url('policeconcert/concertone-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('policeconcert/concertone-regular-webfont.woff') format('woff'),
         url('policeconcert/concertone-regular-webfont.ttf') format('truetype'),
         url('policeconcert/concertone-regular-webfont.svg#concertone-regular-webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}
h1,h2
{
text-shadow: -5px  5px 5px rgb(87,60,29);
}


h1
{
	color:rgb(217,152,61);
	font-size: 5em;
	font-family: concertone, Trebuchet MS;
	/*text-align: center;
	margin-bottom: 0.1em;
	border: 5px rgb(219,117,0) outset;
	margin-left:4em;
	margin-right:4em;	*/
}

h2{
	color:rgb(191,131,61);
	font-family: Trebuchet MS;
	/*margin-bottom: 2em;*/
}

.intro
{

	/*text-align: center;
	margin-bottom:2em;*/
}


ul
{
	color:rgb(153,109,58);
}
.texte-liste
{
	color:white;
}
.conteneur
{
	display: flex;
	flex-direction: column;
}
.article
{
	display: flex;
	flex-direction: row;
}
header
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
}
#img
{
	border: 3px red solid;
}
#titre
{
	margin: auto;
}
}
footer
{
	display: flex;
	justify-content: center;
}

Et mon code html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CV en ligne</title>
    <link rel="stylesheet" href="styleCv.css"/>
  </head>
  <body>
    <div class = "conteneur">

      <header>        
         <div id="titre">
            <p id="p"> 
            <h1>Alexis Gaillard</h1>                     
            Etudiant à l'Esir(école d'ingénieur de rennes)
            </p>
        </div>  
        <div id="img">
            <a href="fox.jpg"><img src="fox-petit.jpg" alt="photo d'identité"/>
            </a>
            <p>ma photo</p>
        </div>
      </header>

      <div class="article">
        <section class ="experience">

          <h2>Mon expérience</h2>
          <ul>
          <li> <span class="texte-liste"> <strong>Scolarité</strong> : Obtention du bac S-Si avec mention bien, avec de bons résultats dans les matières scientifiques tout au long de mes études </span> </li>
          <li> <span class="texte-liste"><strong>Etude supérieure</strong> : Actuellement en première année dans la prépa intégrée pour l'école de l'Esir</span></li>
          </ul>
        </section>
        <section class="competence">
          <h2>Mes Compétences</h2>
          <ul>
          <li>
          <span class="texte-liste">Maîtrise des comptétences niveau lycée</span>
          </li>
          <li>
          <span class="texte-liste">Apprentissage du langage de programmation Python au lycée</span></li>
          <li>
          <span class="texte-liste">Formation aux bases de Blender (logiciel d'animation) avec <em>OpenClassroom</em></span></li>
          </ul>
        </section>
        <section class = "formation">
          <h2>Ma Formation</h2>
          <p>J'ai donc fait mes études en secondes aux Lycée René-Cassin de montfort, puis je suis allée a Joliot-Curie pour suivre la filière S-SI. <br>
          Actuellement je suis la formation informatique de l'Esir, j'essaie de dévelloper d'autre compétences en suivant des cours en ligne tel que sur <em>OpenClassroom</em> </p>
        </section>
      </div>
      <footer>
      <p>
      Vive Openclassroom !!! 
      <!-- <a href="mailto:typy35@gmail.com">Mon mail</a> -->
      </p>
      </footer>
    </div>  
  </body>
</html>

Et j'ajoute une capture d'écran du rendu du CV actuellemnt

Antoine_C

13 décembre 2017 à 23:04:52

Bonsoir

Pour la bordure met une class sur ton image :)

Pour l'écart pourquoi pas un padding ?

Mewen_bzh

14 décembre 2017 à 8:50:10

Salut,

Ta bordure ne suit pas la photo parce que tu n’appliques pas la propriété CSS border à ton img mais à ta div #img qui contient l'image et un paragraphe p. Tu dois cibler plus précisément ton image et rien ne t'oblige à lui ajouter une classe pour cela (même si effectivement c'est l'une des possibilités). Par exemple tu peux très bien utiliser :

#img img
{
    border: 3px red solid;
}

ou encore :

#header img
{
    border: 3px red solid;
}

Ce ne sont que des exemples, à toi de voir ce qui est le mieux pour ton travail et le plus optimisé.

En ce qui concerne ta seconde question, je dirais que l'écart vient des marges par défaut de l'élément h1. Tu peux les modifier, les réduire ou même les annuler selon le rendu que tu souhaites obtenir.

Je ne réponds pas aux messages privés.

Xelov35

2 janvier 2018 à 16:37:33

Merci beaucoup,

Je ne pensais que l'on pouvait faire "# img img", mais par contre j'ai essayé juste en enlevant le paragraphe qui était dans mon div et le problème était toujours là. Après la première technique marche donc ça me va mais ce serait juste pour comprendre.

Mewen_bzh

2 janvier 2018 à 16:52:30

#img img
{
    border: 3px red solid;
}

Est une notation tout à fait correcte dans le cas de ton code. En faisant cela tu dis à ton navigateur de chercher l'élément qui porte l'id img et de cibler l'image contenue dans ce dernier.

C'est vrai que cela semble un peu étrange à écrire compte tenu de la façon dont la div est nommée mais cela n'a aucune incidence sur les instructions que tu donnes à ton navigateur : tu as bien une image (entre autres éléments dans ta div #img.

-
Edité par Mewen_bzh 2 janvier 2018 à 16:54:57

Je ne réponds pas aux messages privés.

Xelov35

2 janvier 2018 à 17:22:55

D'accord merci pour l'explication au moins je sais ce que je code