Exercice semaine 3 (Apprendre HTML CSS)

Besoin d'aide je ne m'en sors plus

24 avril 2017 à 16:03:36

Bonjour voici mon problème cela fait quelque jours que je n'arrive pas à faire cette exercice . Display:flex ne fonctionne pas .

Voici mon code :

<!DOCTYPE html>

<head>

<title>CV-Franck Martinez</title>

</head>

<body>

<h1>Franck Martinez</h1>

</div>

<p><h2> Débutant WEB-développeur</h2>

</div>

</div>

<nav>

<ul>

</nav>

</header>

</ul>

</div>

</div>

<div id="expérience"><H3>Mes Expériences</H3>

<p><h4>le web m'a toujours passioné cette façon de naviguer sur des pages colorées et bien structurée me donne l'envie de créer mon propre site web.</h4></p>

</div>

<div id="compétences"><h3>Mes compétences</h3>

<ul>

<p><li><h4>Je suis autodidacte quant à la manipulation d'un ordinateur, la naviagation web... </h4></p></li>

</ul>

</div>

<div id="Maformation"><h3>Ma formation</h3>

<ul>

<p><li><h4> Grâce au site openclassrooms <a href="https://openclassrooms.com">openclassrooms</a>, il m'est possible d’acquérir les compétences indispensables et nécessaires afin de pouvoir intégrer un centre de<br/> formation "Web développeur" dès la rentrée 2017.</h4></p></li>

</div>

</body>

</html>

@font-face {

font-family: 'amblebold_italic';

src: url('fonts/Amble-BoldItalic-webfont.eot');

src: url('fonts/Amble-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),

url('fonts/Amble-BoldItalic-webfont.woff') format('woff'),

url('fonts/Amble-BoldItalic-webfont.ttf') format('truetype'),

url('fonts/Amble-BoldItalic-webfont.svg#amblebold_italic') format('svg');

font-weight: normal;

font-style: normal;

}

{

font-family:"amblebold_italic",Impact,"Arial";

}

#menu-vertical

{

display:flex;

flex-direction:column;

background-color:black;

width:200px;

top:0px;

bottom:0px;

box-shadow:2px 2px 2px silver;

}

.menu-vertical

{

text-align:left;

background-color:black;

}

#bloc-page

{

width:900px

margin:auto;

}

{

list-style-type:none;

}

h1 nav a

{

text-transform: uppercase;

}

#titre-principal

{

text-align:center;

}

#Photo

{

text-align:right;

}

#expérience

{

text-align:right;

height:40px;

}

#compétences

{

text-align:right;

height:30px;

}

#Maformation

{

text-align:right;

height:20px;

}

Lord Morpheus

24 avril 2017 à 16:06:31

Bonjour,

Peux tu éditer ton message en utilisant correctement le forum, à savoir ces fonctions et notamment la mise en forme du code via l'outil </> ?

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

FranckMartinez2

24 avril 2017 à 16:34:27

oui bien-sur mais comment faire ? Je suis désolé je suis novice sur html

exen

24 avril 2017 à 16:56:01

Alors quand tu écrit un message tu vois devant toi une barre dessu il y a un bouton code pour y entrer du code </>

Ca ouvre une fenêtre dans la quelle se trouve une liste déroulante, pour le css tu choisit CSS, et pour le html tu prend xml/xhtml.

Et voila

Compos sui.

FranckMartinez2

24 avril 2017 à 16:57:03

<!DOCTYPE html>

<head>

<title>CV-Franck Martinez</title>

</head>

<body>

<h1>Franck Martinez</h1>

</div>

<p><h2> Débutant WEB-développeur</h2>

</div>

</div>

<nav>

<ul>

</nav>

</header>

</ul>

</div>

</div>

<div id="expérience"><H3>Mes Expériences</H3>

<p><h4>le web m'a toujours passioné cette façon de naviguer sur des pages colorées et bien structurée me donne l'envie de créer mon propre site web.</h4></p>

</div>

<div id="compétences"><h3>Mes compétences</h3>

<ul>

<p><li><h4>Je suis autodidacte quant à la manipulation d'un ordinateur, la naviagation web... </h4></p></li>

</ul>

</div>

<div id="Maformation"><h3>Ma formation</h3>

<ul>

<p><li><h4> Grâce au site openclassrooms <a href="https://openclassrooms.com">openclassrooms</a>, il m'est possible d’acquérir les compétences indispensables

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

}
h3
{
	font-family:"amblebold_italic",Impact,"Arial";
}
#menu-vertical
{
    display:flex;
    flex-direction:column;
    background-color:black;
    width:200px;
    top:0px;
    bottom:0px;
    box-shadow:2px 2px 2px silver;
}
.menu-vertical
{
    text-align:left;
    background-color:black;
}




#bloc-page
{
    width:900px
    margin:auto;

}
ul
{
    list-style-type:none;
}
h1 nav a
{
    text-transform: uppercase;
}
#titre-principal
{
    text-align:center;

}
#Photo
{
    text-align:right;
  
    
}
#expérience
{
    text-align:right;
    height:40px;
    
   
    
}
#compétences
{
    text-align:right;
    height:30px;
}
#Maformation
{
    text-align:right;
    height:20px;
}

et nécessaires afin de pouvoir intégrer un centre de<br/> formation "Web développeur" dès la rentrée 2017.</h4></p></li>

</div>

</body>

</html>

-
Edité par FranckMartinez2 24 avril 2017 à 17:05:18

Benzouye

24 avril 2017 à 17:01:54

Bonjour,

Rien ne va dans ce code ...

Les balises sont mal imbriquées : on ne ferme pas une balise de type block (div, p, nav, header, etc.) au sein d'une autre balise de type block
Tu ouvres des balises sans les refermer
Tu empiles des balises inutilement (<div id="navi"> puis <nav> ???)
Tu utilises h2 sans h1 alors qu'il y a une hiérarchie des titres normalement

Bref ... beaucoup de boulot de base avant de t'attaquer à flexbox ...

Je ne sais quel cours tu suis, mais recommence celui-ci du début : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Cela ne te fera vraiment pas de mal ...

PS : Pour éditer ton message, cliques sur le bouton "Modifier en haut à droite de celui-ci, puis coupe ton code HTML, cliques sur l'icône "code" (bouton </> dans la barre d'outil du message) et colles-y ton code HTML en précisant HTML dans la liste déroulante disponible. Fais de même avec ton code CSS en précisant CSS ...

Cela t'évitera de polluer ton sujet avec plusieurs messages successifs ...

-
Edité par Benzouye 24 avril 2017 à 17:02:54

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

FranckMartinez2

24 avril 2017 à 17:09:36

aie aie les ordi c'est pas mon truc bon merci du conseil je débute c'est assez difficile de se retrouver avec toute ces formules mais bon aller au boulot Merci à vous ! si d'autre peuvent me donner des conseils pas de soucis

Je suis actuellement sur ce cours je suis à l'exercice 3 mais depuis flexbox je suis totalement perdu

-
Edité par FranckMartinez2 24 avril 2017 à 17:13:08

exen

24 avril 2017 à 17:26:02

flex c'est pas compliqué en fait, tu devrais déjà tester avec des éléments de couleurs, pour voir comment il se comporte, pour ton exercice là, c'est vrais il manque pleins de petit truc comme le dit Benzouye. amuse toi par exemple à faire comme il est fait dans le cour, ajoute un

backgroud-color

à chacun de tes éléments dans le css, çà va te permettre de voir un peut ou s'en va ton code.

Mais bon à première vu, l'exercice 3 c'est trop fort pour toi à ton niveau, prend bien le temps de revoir les bases, joue avec des cube, c'est pas un sprint c'est une course de fond.
Ca va venir graduellement.

P.S. Utilise des maintenant les deux derniers chapitres du cours

-
Edité par exen 24 avril 2017 à 17:27:12

Compos sui.

FranckMartinez2

24 avril 2017 à 17:31:36

d'accord merci beaucoup de ton aide oui c'est vrai je veux aller trop vite mais bon j'aime ça le web donc bon je vais réussir c'est sur il me faut juste du temps comme tu dis :)

Merci à vous tous en tout cas