Partage

La dernier CV

1 2 >>

Sujet résolu

Aekys

19 septembre 2017 à 16:59:38

Bonjour,j'aimerais si possible d'avoir vos conseil pour le dernier CV ;

Merci

MrChampy

19 septembre 2017 à 17:15:29

Moi je peux te donner des conseils de recette pour préparer à la perfection du navarin d'agneau déglacé au sirop d'érable.

Après sans plus de précisions de ta part c'est à peu près tout ce que je peux faire.

Aekys

19 septembre 2017 à 17:23:48

Pourquoi pas ! Envoie

exen

19 septembre 2017 à 18:44:51

Tiens un premier conseille piqué sur un post.

Mais en fait un très bon conseil

Vois déjà comment tu va placer tes éléments,

Après je te dirais bien

liserè

ensemble1

photo

titre

sous-titre

ensemble2

section1

section2

section3

C'est déjà un bon début, pour le coté responsive, tu as le choix flex ou @media

Compos sui.

Anonyme

19 septembre 2017 à 19:18:35

Hello Aekys,

De mémoire cet exercice porte sur les @media afin d'avoir un site visible sur des écrans à la "définition moins généreuse".

Donc de base il faut bien prévoir le positionnement des blocs (comme sur image) de sorte qu'une fois sur les @media le plus gros du travail soit fait.

Si je me rappelle bien du mien, il y avait peu de @media. Juste le liseré et les articles/section c'est tout.

exen

19 septembre 2017 à 19:35:35

@4N42K1

T'a vu j'ai repiqué ton image

Après cet exo tu peut entièrement le faire en @media si tu te cale sur ce système :

Mais ca demande plus de codes que d'utiliser flex et@media pour le liserè

Compos sui.

Anonyme

19 septembre 2017 à 19:44:59

Oui et tu as bien fait

Ca y est je deviens célèbre

Vaut mieux qu'elle circule même si ce n'est pas la seule méthode !

exen

19 septembre 2017 à 20:11:47

C'est claire va falloir faire gaffe dans la rue sinon tu va finir script à l'air dans Voici

C'est vrais que ce n'est pas la seule méthode, mais cette image à l'avantage de bien résumer les ensembles, c'est bien plus claire quand tu débute.

Et là Aekys doit pas se rater sur ce dernier exo, vu qu'elle à déjà subit un petit rouge à celui d'avant.

Mais bon on va l'aider du mieux possible

Compos sui.

Aekys

19 septembre 2017 à 20:32:28

Merci a tous pour votre aide.Je vais déja reprendre et étudier mon dernier code ,je vous recontacte demain

J'ai réussi a faire mon code qui correspond a la consigne ,je pense a le donner .Je vous le montre avant?

Car je suis vraiment impatient d'avoir mon certificat xD

-
Edité par Aekys 19 septembre 2017 à 20:46:14

exen

19 septembre 2017 à 20:58:58

Oui ce serrais mieux de nous le poser ici avant

Compos sui.

Anonyme

19 septembre 2017 à 21:22:13

@exen ^^ script à l'air

@Aekys Oui on regardera à ça pas de soucis

MrChampy

20 septembre 2017 à 9:53:39

Du coup, tu le coupe en morceaux pas trop gros, ensuite tu le fais mariner dans un truc style huile d'olive / sel / poivre / herbes de provence. Ensuite, tu le mets à cuire à feu doux (après l'avoir fait revenir très rapidement à feu vif), puis, en fin de cuisson, tu déglace à feu très vif avec du sirop d'érable. Une tuerie tu verra !

Bonne chance pour ton CV

Aekys

20 septembre 2017 à 13:29:09

@MrChampy Merci ; je vous l'envoie comment ?

exen

20 septembre 2017 à 13:37:31

Ton code sois tu clique sur nos nom et tu verra une petite enveloppe et de la tu pourras y coller ton code. mais franchement c'est pas terrible.

Sois tu colle ton code ici,

tu clique sur l'onglet </> qui se trouve sur la fenêtre de messages, dans la liste déroulante tu sélectionne XML/XHTML et tu colle ton HTML et tu fait insérer.

Après tu re-clique sur </> et tu sélectionne CSS, et là tu colle ton CSS.

Compos sui.

MrChampy

20 septembre 2017 à 14:12:25

Le CV ou le navarin d'agneau ?

Aekys

20 septembre 2017 à 14:24:51

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Mon premier CV en ligne</title>
		<link rel="stylesheet" href="style.css"/>
		<link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />
	</head>

	<body>
		<header>
			<p class=sidebar><img src="fondgris.jpg" alt=liseret/></p>
			<h1>Henri Plourt</h1>
			<p class=lignesousnom>Développeur web</p><p class=photoprofil><a href="photoprofil.png"><img src="photoprofilmini.png" alt="Photo de profil"></a></p>
		</header>

		<div id="conteneur">

		<section>
		<div class=monexperience>
			<h3>Mon expérience</h3>
				<p><ul>
					<li>2010: Créateur d'un site web<em>ZeSite</em></li>
					<li>2016-Aujourd'hui: 1 er Développeur de France</li>
					<li>2017-2018: Auto-Entrepreneur</li>
				</ul></p>
		</div>
		</section>

		<section>
		<div class=mescompetences>
			<h3>Mes compétences</h3>
				<p><ul>
					<li>Word</li>
					<li>HTML</li>
					<li>CSS</li>
					<li>JS</li>
					<li>Anglais</li>
				</ul></p>
		</div>
		</section>

		<section>
		<div class=maformation>
			<h3>Ma formation</h3>
				<p><ul>
					<li>2010: J'ai obtenu le Bac</li>
					<li>2012: J'ai fait des études poussés</li>
					<li>2014: Encore +</li>
				</ul></p>
		</div>
		</section>
		</div>

	</body>
</html>

CSS :

body
{
    background-color: blueviolet;
background-repeat: no-repeat;
}

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

}

.sidebar
{
    height:20%;
    width:20%;
    display:inline-block;
    vertical-align:top;
    margin-top:-10%;
    margin-left:-5%;
    margin-bottom: -20%;
    float: left;
}

/* liseret gris noir à gauche */

h1
{
    text-align: center;
    text-decoration: underline;

}

/* Nom et Prenom centre souligne */

.lignesousnom, .photoprofil
{
    text-align: center;
}

h1, h3
{
	font-family: 'caviar_dreamsregular', arial, verdana, sans-serif;
}

h3
{color: #124382;}

/* Titres parties en bleu fonce */

#conteneur
{
    display: flex;
}

.monexperience
{
    width: 70%;
    height: 70%;
    margin-left: 25%;
}

.mescompetences
{
    width: 70%;
    height: 70%;
    margin-left: 25%;
}

.maformation
{
    width: 70%;
    height: 70%;
    margin-left: 25%;
}


/* 3 colonnes */

CSS Petite Résolution :

@media all and (max-width: 1024px)
{
    
    .sidebar {
        display: none;
    }

    section {
        flex-direction: column;
    
    }

    .mescompetences, .maformation {
        flex-direction: column;
    }

}

Voila merci

exen

20 septembre 2017 à 14:30:48

Et bien y a du boulo, donc là il te manque déjà le liseré et pleins d'autres truc. Pourquoi ??? regarde ton html il ne manquerais pas des " " sur certaines de tes class ?

Compos sui.

Aekys

20 septembre 2017 à 14:33:34

le liseret y estnjuste j'arrive pas a mettre en collone les catégories,pour le media queries

-
Edité par Aekys 20 septembre 2017 à 14:37:58

exen

20 septembre 2017 à 14:42:25

Oui mais il ne fonctionne pas en fait si tu ne déclare pas ainsi tes class ça ne fonctionneras pas

<div class="la-class" >

On regarde vite fait ton header

<header>
 
    <p class=sidebar><img src="fondgris.jpg" alt=liseret/></p> <!-- pas de guillemets "", la class ne marchera pas -->
    <h1>Henri Plourt</h1>
    <p class=lignesousnom>Développeur web</p><p class=photoprofil><a href="photoprofil.png"><img src="photoprofilmini.png" alt="Photo de profil"></a></p> <!-- ici regarder bien class=lignesousnom> et revois ou il manque des "" -->
</header>

Au passage <p>, c'est pour paragraphe, si tu veut poser un élément non textuel préfère lui <div> comme divers ce n'est pas ce que veut dire le nom mais ca permet de s'en souvenir

-
Edité par exen 20 septembre 2017 à 14:58:57

Compos sui.

Aekys

20 septembre 2017 à 14:58:10

J'ai corrigé mes erreurs ,je n'arrive juste pas a mettre en colonne les catégories en media queries ,peut-tu m'aider?

-
Edité par Aekys 20 septembre 2017 à 15:01:14

exen

20 septembre 2017 à 15:00:56

Oui je l'ai exécuté des le depart lol

et oui il y en à pas mal, <p> n'est pas une balise fourre tout, ca c'est le rôle de <div> je vais prendre deux seconde pour te montrer comment je verrais le header

Compos sui.

Aekys

20 septembre 2017 à 15:12:44

exen

20 septembre 2017 à 15:23:50

Peut être un truc plus comme çà

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Mon premier CV en ligne</title>
        <link rel="stylesheet" href="t8.css"/>
        <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />
    </head>
 
    <body>
        <div id="liseret">    
        </div>
        <header>
            <div class="photoprofil"><a href="photoprofil.png"><img src="photoprofilmini.png" alt="Photo de profil"></a>
            </div>
            <div class="titre">
            <h1>Henri Plourt</h1>
            <p class="lignesousnom">Développeur web</p>
            </div>

        </header>
 
        <div id="conteneur">
 
        <section>
        <div class="monexperience">
            <h3>Mon expérience</h3>
                <p><ul>
                    <li>2010: Créateur d'un site web<em>ZeSite</em></li>
                    <li>2016-Aujourd'hui: 1 er Développeur de France</li>
                    <li>2017-2018: Auto-Entrepreneur</li>
                </ul></p>
        </div>
        </section>
 
        <section>
        <div class="mescompetences">
            <h3>Mes compétences</h3>
                <p><ul>
                    <li>Word</li>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JS</li>
                    <li>Anglais</li>
                </ul></p>
        </div>
        </section>
 
        <section>
        <div class="maformation">
            <h3>Ma formation</h3>
                <p><ul>
                    <li>2010: J'ai obtenu le Bac</li>
                    <li>2012: J'ai fait des études poussés</li>
                    <li>2014: Encore +</li>
                </ul></p>
        </div>
        </section>
        </div>




 
    </body>
</html>

img{
    max-width: 150px;
        border: 1px solid black;
    box-shadow: 2px 2px 2px black;
}

.photoprofil {
      position: relative;
      float: right;
}
.titre{
text-align: center;

}
#liseret {

  position: relative;
  top: 0px;
  height: 100vh;
  width: 10vw;
  float: left;
  display: block;
  clear: both;
  border-radius: 0% 25% 25% 0% / 0% 5% 5% 0%;
  background: #353d46; /* Old browsers */

} 

@media all and (max-width: 850px)

{
#liseret {

display: none;
}
}

c'est juste une idée de départ

-
Edité par exen 20 septembre 2017 à 15:51:41

Compos sui.

Aekys

20 septembre 2017 à 15:34:29

ca d'accord ,mais mon problème est de mettre mes catégories en colonne

et je ne trouve pas

exen

20 septembre 2017 à 15:41:06

#conteneur
{
    display: flex;
    flex-wrap: wrap;
}

Compos sui.

Aekys

20 septembre 2017 à 15:49:59

Merci beaucoup cela marche ,j'ai modifié les erreurs ; Je poste mon exercice ?

exen

20 septembre 2017 à 16:02:04

Franchement là tel qu'il est au niveau sémantique pas trop lol

Vois si tu ne peut pas alléger le truc par exemple virer la class .photoprofil

lui préférer :

img {
    max-width: 150px;
    border: 1px solid black;
    box-shadow: 2px 2px 2px black;
    position: relative;
    float: right;
}

oublie ta règle @media sur une feuille de style différente, place tout sur la même.

Demande toi si ceci est bien utile

background-repeat: no-repeat;

Après moi pour les article j'aurais peut-être fait 3 sections plutôt que de jouer avec des marges et des % de façon à ce que les bloc se colle en colonne proprement.

et c'est qu'un début.

Attend plutôt aussi ce soir l'avis des autres

Compos sui.

Aekys

20 septembre 2017 à 16:06:03

Après je pense que l'éxigence de mes correcteurs va pas etre non plus ouf ;

Ce n'est qu'un cours HTML.

Je poste mon exercice .

Merci pour ton aide

Lamecarlate

20 septembre 2017 à 16:07:25

Bonjour,

> Vois si tu ne peut pas alléger le truc par exemple virer la class .photoprofil

exen > bah euh non, ton exemple lui fait mettre plein de trucs spécifiques sur "img", qui va donc concerner *toutes les images* du site. Alors oui, j'ai conscience qu'on parle ici d'une unique page, mais hey, si on peut éviter de donner de mauvaises habitudes aux débutant⋅e⋅s, ce serait chouette

Aekys > attention, les listes (ul) ne peuvent pas être dans des paragraphes (p). Et fais attention à ton indentation : tu as refermé tes titres (h3), nul besoin d'indenter la ligne suivante. D'ailleurs, lesdits h3 devraient être des h2 : on ne doit pas avoir de trous dans la hiérarchie de titres. On met un h1, puis un ou des h2, puis un ou des h3, puis on peut remonter au h2, redescendre, remonter au h1, etc. Mais toujours note à note, sans sauter de type de titre. Pense la liste de tes titres comme une table des matières : dans un livre, on ne passe pas du chapitre à la sous-partie sans passer par la partie, ici c'est pareil.

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

exen

20 septembre 2017 à 16:15:05

LOL oui je sais mais bon la je parlais dans le contexte de l'exo il n'y a qu'une image

PFFF Puis je connais un patron qu'en a fait autant pour cet exo

si si Mathieu il a fait pareil et toc, je viens de vérifier... en je cafte

Mais c'est vrais que ce n'est pas bien de tout coller sur l'img

-
Edité par exen 20 septembre 2017 à 16:19:52

Compos sui.

1 2 >>

La dernier CV

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

La dernier CV

La dernier CV

Supprimer

Modérer

Signaler le message aux modérateurs