Partage
  • Partager sur Facebook
  • Partager sur Twitter

Exercice CV

Résolution de la page web

Sujet résolu
Zen_Zen
15 mai 2019 à 19:48:15

Bonjour, je sollicite votre aide car je n'arrive pas à modifier la taille de mon CV.

Je voudrais avoir un rendu similaire à l'exercice du CV proposé par Mathieu Nebra.

Voici ci-dessous mon code HTML et CSS.

Par ailleurs si vous avez des conseils à me donner concernant mon code, je suis preneur.

Quand j'essai de modifier la taille, rien ne change...

Merci d'avance.

-
Edité par Zen_Zen 15 mai 2019 à 19:51:11

  • Partager sur Facebook
  • Partager sur Twitter
palmito_
16 mai 2019 à 0:27:06

Bonsoir

Copie/colle tes codes directement sur le forum...ca nous permet de les copier/coller a notre tour et ainsi de pouvoir aider plus facilement :)

++

  • Partager sur Facebook
  • Partager sur Twitter

Mon petit blog

Zen_Zen
16 mai 2019 à 8:45:06

OK :)

Voici le code HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css.css">
<title>Cv</title>
</head>
<body>
<div id="pdg">
<p><img src="img/pp.jpg" alt="bordure" id="bor"></p>
<header>
<h1 class="np">Henry Dupont</h1>
<p class="profil">Developpeur web et web mobile. HTML, CSS et Javascript.</p>
</header>
<p><img src="img/pd.jpg" alt="photo d'identité" id="pd"></p>
<section>
<div id="ex">
<h1>Mon expérience</h1>
<ul>
<li><p>de 2350 a 2600 :</p><p>Sauveteur en mer</p></li>
<li><p>de 2300 a 2350 :</p><p>Président de France et roi du Maroc</p></li>
<li><p>de 2150 a 2300 :</p><p>Developpeur futuriste</p></li>
</ul>
</div>
<div id="comp">
<h1>Mes compétences</h1>
<ul>
<li><p>HTML</p></li>
<li><p>CSS</p></li>
<li><p>Javascript</p></li>
<li><p>Maîtrise du kung-fu</p></li>
</ul>
</div>
<div id="form">
<h1>Ma formation</h1>
<p>3 jours de formation chez LIDL</p>
</div>
</section>
</div>
</body>
</html>

<!-- maintenant le code CSS -->
#pdg
{
height: 300px;
border: 2px black solid;
}
#bor
{
border-radius: 10px;
height: 970px;
width: 10%;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
}
/* HEADER */
#pd
{
position: relative;
left: 1800px;
bottom: 130px;
}
.np
{
position: relative;
left: 900px;
width: 200px;
}
.profil
{
position: relative;
left: 800px;
}
/* FIN HEADER */
/*SECTION : EX, COMP, FORM */

section
{
border: 2px black solid;
position: relative;
left: 250px;
display: flex;
}

-
Edité par Zen_Zen 16 mai 2019 à 8:46:25

  • Partager sur Facebook
  • Partager sur Twitter
palmito_
16 mai 2019 à 11:13:25

Bonjour

Je viens de refaire le découpage que j'avais fais pour l'exercice...un block container (en violet sur lequel tu peux utiliser flex) qui contient deux gros block en rouge (tu peux aussi utiliser flex column dessus pour les blocks enfant vert et bleu) etc...

Une fois le decoupage bien fait, il suffit de bien adapter tes sections / div et avec flexbox en css ca se met en place assez facilement...juste pour la photo ou j'avais (si je me souviens bien) utilisé un float.

Je suis au boulot mais tente déjà comme cela, je pourrais plus t'aider dans la soirée si tu n'y arrives pas :)

  • Partager sur Facebook
  • Partager sur Twitter

Mon petit blog

AlexandreThore4
9 août 2023 à 13:47:40

je m'entraine sur le bouquin de mathieu nebra je n'arrive a l'ouvrir est ce que quelqu'un peut m'envoyer l'exercice ?
  • Partager sur Facebook
  • Partager sur Twitter
AbcAbc6
9 août 2023 à 13:56:12

@AlexandreThore4 Bonjour, merci de ne pas déterrer d'ancien sujet pour un nouvelle question. Créer votre propre sujet.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Pour vous répondre, dans le livre vous avez des codeweb  à introduire ici https://openclassrooms.com/fr/codeweb vous aurez accès aux code source du livre si celui-ci est toujours  disponible.

Je ferme ici.

  • Partager sur Facebook
  • Partager sur Twitter