Partage

blocage a l'exercice 3 HTML5 CSS3 help me please

Sujet résolu

Machou16

17 octobre 2017 à 20:43:53

Bonsoir,

comme le titre l'indique j'ai un GROS bug (du cervelet) :lol:

je suis bloquée je n'arrive pas à mettre mes colonnes en forme....

pouvez-vous m'aider svp?

il s'agit de cet exercice :

et à force d'effacer, revenir, réessayer, je suis perdue...

voici mon 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">
						
						<nav><img src="liseré_bleu.jpg" class="imageflottante" alt="Liseré bleu"/> </nav>
					
					<header>
						<a href="moi.jpg"><img src="moi_miniature.jpg" class="imageflottante" alt="Photo de moi"/></a>
						<h1>Mon NOM</h1>
						<h3>Manager, Responsable de service</h3>	
			
					</header>

				<section>
					<div><h2>Mon expérience</h2>
					<ul>
						<li> <strong>De 2001 à 2015 : </strong> Manager, Responsable de service </li>
						<li> <strong>De 2015 à aujourd'hui : </strong> Gestion de la Relation Clients dans l'automobile </li>
						<li> <strong>D'aujourd'hui à demain : </strong> Développeuse de sites internet </li>
					</ul></div>
			
					<div><h2>Mes compétences</h2>
					<ul>
						<li> Gestion de service </li>
						<li> Management </li>
						<li> Gestion budgétaire </li>
					</ul></div>
			
					<div><h2>Ma formation</h2>
					<ul>
						<li> Apprentissage <a href="https://openclassrooms.com/" target="_blank"> OpenClassrooms </li> </a>
						<li> Sur le terrain </li>
					</div>
				</section>
				</div>
			</body>
	</html>

et voici mon CSS :

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

#bloc_page
{
    margin: auto;
}

html, body 
{
    height:100%
}

body
	{
		font-family: ambleregular, Arial, Arial black;
		background-image: url("ocean.jpg");
		background-attachment: fixed;
	}

nav
	{
	float: left;
	width: 22px;
	}


header
	{
		height: 115px;
	}

.imageflottante
	{
		float: right;
		box-shadow: 2px 2px 0px black;
	}

h1
	{
		text-shadow: 1.5px 1.5px 0.5px black
	}

h1, h3
	{
		text-align: center;
	}

h2
	{
		display: flex;
		font-size: 20px;
		justify-content: center;
		color: blue;

	}

section, li
	{		
		display: flex;
		justify-content: center;


	}

ul
	{
		display: flex;
		justify-content: center;
	}

Avant de m'arracher les derniers cheveux je vous remercie de votre aide

Bonne soirée

-
Edité par Machou16 19 octobre 2017 à 8:40:36

KFoxLDG

17 octobre 2017 à 21:01:51

OOOOooooohhhhhhhhh, bon je viens te redonner un peu de force

(l.38 HTML) ta balise <a> qui est ouverte après <li> se ferme après </li> :

<li> Apprentissage <a href="https://openclassrooms.com/" target="_blank"> OpenClassrooms </li> </a>

(l.37 HTML) tu ouvres un <ul> mais tu ne le ferme pas avec </ul>:

<ul>
                        <li> Apprentissage <a href="https://openclassrooms.com/" target="_blank"> OpenClassrooms </li> </a>
                        <li> Sur le terrain </li>
                    </div>
                </section>
                </div>
            </body>
    </html>

(l.26 HTML) tu écris "D'aujourd'hui" et d'autres mots sans faire attention (utilise D\'aujourd\'hui):

<li> <strong>D'aujourd'hui à demain : </strong> Développeuse de sites internet </li>

Voilà, c'est tout ce que j'ai vu sur le moment. Je te laisse corriger pour voir si ça te change des choses. N'hésite pas à poster ton résultat final pour que je puisse localiser les autres erreurs si il y a.

-
Edité par KFoxLDG 17 octobre 2017 à 21:02:17

Shivan666

18 octobre 2017 à 0:01:50

Bonsoir,

pour ma part, j'ai vu quelques petites erreurs dans le CSS (qui pose problème pour ton affichage des colonnes...)

J'ai le corrigé sur mon ordi, mais on ne va pas tout de donner comme ça hein !

Tu as des flex un peu partout (trop en fait)

Indice:

1/le flex doit se mettre sur les "blocs principaux" pas sur ce qu'il y a à l'intérieur (en tout cas par rapport au travail demandé ici)

2/tu peux aussi rajouter des class sur tes articles (expérience, formation...) afin de mieux contrôler la largeur de chaque colonne.

Hate de voir le résultat, bon courage !

et bonne nuit...

-
Edité par Shivan666 18 octobre 2017 à 7:51:16

Lire nuit gravement à l'ignorance...

Machou16

18 octobre 2017 à 10:41:35

Merci pour votre aide. Effectivement à force de faire des modifs etc je n'avais même pas remarqué qu'il manquait les </ul> ou autres </>. (erreur de débutante)

Qu'appelles-tu des flexs (ouais je sais à ce niveau c'est chaud )

Pour ce qui est "d'aujourd'hui" si je mets d'\aujourd\'hui, les slash se voient sur ma page web :/

Pour le CSS je recommence tout! En espérant que ça fonctionne.

Shivan666

18 octobre 2017 à 11:28:00

Flex = Flex-box dans le css

Tu en avais mis dans plusieurs sélecteurs (à mon avis dans trop de sélecteurs)

un seul "display: flex" dans le selecteur section devrait suffire

Lire nuit gravement à l'ignorance...

Machou16

18 octobre 2017 à 13:37:49

Bon bah je bug toujours GRRRRRRRRRRRRRRRRRRR !!!! :colere:

J'ai modifié plusieurs trucs dans html et css mais maintenant il ne se passe plus rien dans mes colonnes experiences competences et formation...

en fait, je pense que j'ai besoin d'un exemple concret pour comprendre o_O

voici mon rendu (booooooooouuuuuuuuuuuuuuh que c'est vilain!)

En plus mon liseré (que j'ai mis en <nav> ne fait pas toute la page en hauteur ... ) promis je suis pas blonde (j'ai rien contre les blondes j'vous jure chef!)

Voici mon html modifié :

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

			<body>
				<div id="bloc_page">
						
						<nav><img src="liseré_bleu.jpg" class="imageflottante" alt="Liseré bleu"/> </nav>
					
					<header>
						<a href="moi.jpg"><img src="moi_miniature.jpg" class="imageflottante" alt="Photo de moi"/></a>
						<h1>Mon NOM</h1>
						<h3>Manager, Responsable de service</h3>	
			
					</header>

				<section>
					<div class="expérience"><h2>Mon expérience</h2>
					<ul>
						<li> <strong>De 2001 à 2015 : </strong> Manager, Responsable de service </li>
						<li> <strong>De 2015 à aujourd'hui : </strong> Gestion de la Relation Clients dans l'automobile </li>
						<li> <strong>D'aujourd'hui à demain : </strong> Développeuse de sites internet </li>
					</ul></div>
			
					<div class="compétences"><h2>Mes compétences</h2>
					<ul>
						<li> Gestion de service </li>
						<li> Management </li>
						<li> Gestion budgétaire </li>
					</ul></div>
			
					<div class="formation"><h2>Ma formation</h2>
					<ul>
						<li> Apprentissage <a href="https://openclassrooms.com/" target="_blank"> OpenClassrooms </a> </li> 
						<li> Sur le terrain </li>
					</ul>
					</div>
				</section>
				</div>
			</body>
	</html>

et revoici mon CSS modifié lui aussi :

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

#bloc_page
{
    margin: auto;
}

html, body 
{
    height:100%
}

body
	{
		font-family: ambleregular, Arial, Arial black;
		background-image: url("ocean.jpg");
		background-attachment: fixed;
	}

header
	{
		height: 115px;
		text-align: center;
	}

section
	{
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

nav
	{
		float: left;
		width: 22px;
	}

.imageflottante
	{
		float: right;
		box-shadow: 2px 2px 0px black;
	}

.experience
	{
		height: 200px;
		vertical-align: baseline;
	}

.competences
	{
		height: 200px;
		text-align: center;
	}

.formation
	{
		height: 200px;
		text-align: center;
	}

(ca y est j'ai plus que 87 cheveux sur le crane....).

Avec un prof en présentiel ou avec possibilité de discution instantannée pendant le cours c'est quand même top. La je galère un peu j'avouuuuuuuuuuuuuuuuuuuuuuuuuuue!

Merci en tous cas Shivan666 et KFoxLDG.

-
Edité par Machou16 19 octobre 2017 à 8:39:30

KFoxLDG

18 octobre 2017 à 14:17:29

"J'ai modifié plusieurs trucs dans html et css mais maintenant il ne se passe plus rien dans mes colonnes experiences competences et formation..."

Peut être que ton problème c'est ça:

https://openclassrooms.com/forum/sujet/le-css-ne-sapplique-pas-toujours

Machou16

18 octobre 2017 à 14:22:37

non en fait mon probleme vient d'une modif que j'ai faite et qui me bloque tout maintenant (enfin sur les colonnes parce pour le reste quand je fais une modif ca marche) ... je ne me souviens plus de la modif, c'est pour ca que j'ai envoyé mon nouveau html et css :/

Shivan666

18 octobre 2017 à 17:24:25

Alors je reviens avec d'autres idées

(message édité 2 fois déjà ...

)

- D'un point de vue sémantique j'ai mis un aside au lieu d'un nav pour le liseré... mais cela ne change en rien ta mise en page

- Utilise plutôt une position: absolute pour ton liseré plutôt qu'un float... ca marchera beaucoup mieux.

j'ai bien inséré différentes "class" dans tes h2 et les ul et en ajustant les marges j'obtiens cela:

bon il ne faut pas faire attention au liseré (c'est celui que j'ai utilisé dans mon CV )

et la couleur du fond (c'est pour voir si tout marchait bien...

Selon moi le résultat n'est pas trop "pourri" hihi

-
Edité par Shivan666 18 octobre 2017 à 21:00:40

Lire nuit gravement à l'ignorance...

Machou16

18 octobre 2017 à 21:12:42

<!Doctype html>

-
Edité par Machou16 19 octobre 2017 à 8:38:45

Shivan666

18 octobre 2017 à 21:29:30

Ah mince... il va falloir faire vite... tu ne dois plus vraiment ressembler à la photo... :waw:

oui désolé des modifs mais mes idées arrivent un peu dans le désordre aujourd'hui !!

Par contre moi j'ai mis mon "aside" (liseré) intégré à ma "section" pour qu'il soit flex aussi.

Mais tente déjà comme ça, on verra après hein !?

--Modif (21h50)--

Oui j'avais vu le coup de la page réduite... o_O

Eh ben pour être honnête, j'ai le même problème sur formation (je n'ai jamais réussi à le régler... pfff)

J'ai codé un truc comme çi comme ça pour améliorer le truc mais bon.

voila pour moi...

En tout cas c'est pas mal maintenant non ?

Bouges un peu les marges intérieures à gauche de "compétences" et ca devrait le faire

-
Edité par Shivan666 18 octobre 2017 à 21:55:14

Lire nuit gravement à l'ignorance...

Machou16

18 octobre 2017 à 21:42:43

...

-
Edité par Machou16 19 octobre 2017 à 8:39:52

Shivan666

18 octobre 2017 à 23:58:23

Ah bravo !! GW !

le fameux "vertical-align" ... pfff je l'avais oublié celui-là !! :colere:

Merci à toi, correction faite...

N'oublie pas de mettre en résolu ton post

Bonne soirée à toi aussi, content d'avoir pu t'aider

Lire nuit gravement à l'ignorance...

blocage a l'exercice 3 HTML5 CSS3 help me please

Supprimer

Modérer

Signaler le message aux modérateurs