Activité :Mettre son CV en responsive par AngéliqueTremouilloux - page 1

Bonjour,

Après plusieurs tentative et plusieurs jours bloquer, j'aimerais comprendre mon erreur.

J'essaie de mettre mon cv en responsive mais rien ne change.

Voici mon code html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Mon CV</title>
</head>

<body>
  <div id="bloc_page">
  <div class="barre"> barre </div>
  <header>
    <aside>
      <figure>
        <a href= "identite.jpg"><img src= "identite_mini.jpg" class="imageflottante" alt= "Photo d'identité de moi" title= "Cliquez pour agrandir"/></a>
      </figure>
    </aside>

    <h1>TREMOUILLOUX Angélique</h1>

    <p>Adresse postale<br />
       Date de naissance<br/>
      Mail<br/>
      Téléphone portable<br/>
      Permis de conduire</p>
  </header>

  <section id="container">
    <div class="block1">
      <h2>Mon expérience</h2>
    
      <p>
        <ul>
          <li><strong>Juin 2015 à aujourd'hui: </strong> <em> Bénévole à la commission PACA de patinage artistique et à la FFSG </em> <br/>ETR en handisport, montage de projet pour le sport santé et handisport - Marseille</li>
          <li><strong>Juin 2016 à aujourd’hui: </strong> <em> Siel bleu </em><br/> Professeur en Activité Physique Adapté pour les personnes âgées, Gestion administrative - Marseille</li>
          <li><strong>Septembre 2015/Février 2016 Employé libre-service:</strong> <em> Auchan </em> <br/>Préparatrice- livreuse, accueil et gestion des conflits des clients par téléphone – Marseille</li>
          <li><strong>Octobre 2014/Juin 2015 Educatrice sportive:</strong> <em> Association sésame </em><br/> Professeur en Activité Physique Adapté en baby sport, Gestion administrative - Marseille</li>
        </ul>
      </p>
    </div>

      <div class="block2">
        <h2>Mes compétences</h2>
   
        <p>
          <ul>
            <li>Maîtrise de l’outil informatique</li>
            <li>Traitement de texte (Word), tableur (Excel)</li>
            <li>Utilisation d'internet</li>
            <li>Obtention du B2i et du C2i</li>
            <li>HTML5</li>
          </ul>
         </p>
      </div>

      <div class="block3">
        <h2>Ma formation</h2>
          <p>
            <ul>
              <li>Open class room</li>
              <li>Master STAPS option activité physique adapté et santé</li>
              <li>Licence STAPS option activité physique adapté et santé</li>
              <li>Baccaulérat Scientifique</li>
            </ul>
          </p>
      </div>
    </section>
  </div>
</body>
</html>

Voici mon code css

html, body 
{
    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
	background-image: url("patin.jpg");
	background-repeat: no-repeat;
}

#bloc_page
{
	width:900px;
	margin:auto;
}
@font-face
{
	font-family: 'FantasticReasonPersonalUse';
	src: url('Fantastic_Reason_Personal_Use.ttf');
}

h1
{
	text-align: center;
}
p
{
	text-align: center;
}
.imageflottante
{
	float: right;
	border: 3px blue solid;
	border-radius: 10px;
	box-shadow: 6px 6px 10px black;
}
h2
{
	color: blue;
	font-weight: bold;
}
em
{
	font-family: 'FantasticReasonPersonalUse';
	color: red;
	font-size: 20px;
}

.barre
{
	width: 5%;
	background-color:black;
	border-radius: 10px;
	position:relative;
	top: 0px;
	left:0px;
	bottom:0px;
	float: left;
}

#container
{
	margin-left: 5%;
	position:relative;
}
.block1, .block2, .block3
{
	display: flex;
	flex-direction: row;
    position:relative;
	width: 28%;
	height: 100%;
}

@media all and (max-width: 1024px)
{
	#bloc_page
	{
		width:auto;
	}
    .barre
    {
       display: none;
    }

	.block1, .block2, .block3
    {
      width: auto;
      display: flex;
      flex-direction: column;
    }
}

Est-il possible de m'aider, svp?

Merci par avance

Cordialement

AngéliqueTremouilloux

20 mars 2018 à 19:32:39

Lamecarlate

20 mars 2018 à 20:17:36

Bonsoir,

vide le cache de ton navigateur. Ton code est parfaitement fonctionnel

Pas d'aide concernant le code par MP, le forum est là pour ça :)

20 mars 2018 à 20:22:15

ok merci beaucoup

Mewen_bzh

21 mars 2018 à 8:58:24

Le code fonctionne mais il n'est pas valide : les <p> ne peuvent pas contenir les éléments <ul>. Et d'une manière générale, les <p> ne peuvent pas inclure d'éléments de type block.

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

21 mars 2018 à 9:12:16

Mewen_bzh > oh bon sang. Comment j'ai pu ne pas voir ça. D'habitude ça me saute aux yeux. Merci

(par contre, "éléments de type block" ça n'existe plus en HTML5)

Activité :Mettre son CV en responsive

Activité :Mettre son CV en responsive

Supprimer

Modérer

Signaler le message aux modérateurs