Forums des Zéros

26 novembre 2014 à 20:31:08

<!DOCTYPE html>

<html>

<head>

<title>CV de Loris Bollengier</title>

</head>

<h1>Loris Bollengier</h1>

<p class="citation">Collègien en 3ème à Eugènes Delacroix Paris 16ème</p></header>

<h2>Mon expérience</h2>

<p><ul>

<li>Étant donné que je ne suis qu'en 3ème je n'ai pas d'expérience professionnelle.</li>

</ul></p>

</a>

<h2>Mes compétences</h2>

<p><ul>

<li>Informatique</li>

<li>Bonne culture générale</li>

<li>Bonne qualité relationnelle</li>

</ul></p>

</a>

<h2>Ma formation</h2>

<p>J'ai tout appris à l'école (pour l'instant).</p>

</a>

</body>

</html>

Ca c'est le CV minimal et j'aimerais faire le liseret stp...

26 novembre 2014 à 20:33:58

css j'ai rien mis du tout pour l'instant

26 novembre 2014 à 20:59:33

Bonjour, tu n'as pas de balise <body> après </head>

pas besoin de placer tes listes dans un paragraphe, et cela n'a pas de sens d'avoir une liste avec un seul item.

tu as des fermeture de lien sans ouverture. Idem pour header .

Tu peux vérifier tes erreurs avec le validateur HTML, CSS

Pour ce qui est de liseret (si c'est la bande noir à gauche) tu peux créé un block et soit le faire flotter soit le placer en inline block avec le block du contenu.

PS : pour la prochaine fois que tu postes du code sur le forum, utilise le bouton code </>, merci

-
Edité par casperweb 26 novembre 2014 à 21:00:53

26 novembre 2014 à 21:02:44

Ok merci pour cette réponse rapide mais je n'ai pas bien compris comment faire le lisserai peux-tu détailler stp?

26 novembre 2014 à 21:05:48

lisreret dsl c'est le correcteur auto du mac

26 novembre 2014 à 21:06:10

liseret décidément lol

26 novembre 2014 à 21:35:53

re, voici un exemple avec float:( ici en bleu )

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>titre</title>
        <style type="text/css"> 
html, body {
	height: 100%;
    margin: 0;
}
 
.sidebar {
   float: left; 
	width: 200px;
	height: 100%;
    background: blue;
}
 
.container {
    margin-left: 250px;
    background: yellow;
}	
		
		</style>
    </head>
    <body>
        <div class="sidebar">
			sidebar
        </div>
        <div class="container">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
			</p>
			
        </div>
    </body>
</html>

27 novembre 2014 à 7:31:50

Merci mais il y a encore un pb le liseret laisse une marge en haut et page à encore la possibilité de descendre as-tu une autre idée?

27 novembre 2014 à 12:11:42

dans mon code ce n'est pas sidebar qui crée une marge en haut mais la marge du paragraphe de container . pour la supprimer

.container  p:first-child { margin-top: 0; }

27 novembre 2014 à 17:31:36

Merci bcp

27 novembre 2014 à 22:24:28

de rien

bonne continuation à toi dans ton apprentissage.

Galiiann

6 décembre 2014 à 17:09:39

Une petite explication sur : comment avoir un liseret d'une hauteur maximale ? (100%) sans avoir de texte à l'intérieur ?

Voilà, une bonne chose de faite !

6 décembre 2014 à 17:39:02

Tout d’abord bonjour,

pour qu'un élément puisse avoir une taille relative en %, il faut que la taille du parent soit définie. et ainsi de suite jusque au plus haut nœud du dom soit l’élément html.

dans l'exemple donner ici j'ai utiliser le float qui sort l'élément du flux, le fait qu'il y aie du texte dedans ou non, n’influence en rien.

tu comprendras peux être mieux avec ce tuto http://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/

9 décembre 2014 à 19:45:11

Bonsoir,

Quelqu'un peut-il m'aider , je ne vois vraiment pas comment insérer un liseret , j'aimerais aussi mettre ma photo tout à fait à droite .

D'avance merci à tous .

9 décembre 2014 à 21:46:55

@Kheddoumi bonsoir, avez vous tester les flottants ? sinon avec display inline-block , table, flex c'est aussi possible....

12 décembre 2014 à 22:05:44

Quelqu'un peut-il m'aider , le liseret ne se met j'ai suivi toutes les instructions mais je n'arrive pas à le mettre .

D'avance merci

12 décembre 2014 à 22:48:43

@Kheddoumi bonsoir, quels instructions as-tu suivis? j'ai fais le MOOC html/css mais il y a bien longtemps (2013) et depuis il y a eu des changements donc je ne connais pas les instructions dont tu parles.

attend peut être qu'en frottant ma boule de cristal je vais pouvoir lire ton code. Ha non désolé, tu aurais un chiffon doux? non? alors ton code svp . :magicien:

12 décembre 2014 à 23:04:43

Voici , lorsque je fais le .sidebar sur CSS j'ai une petite barre bleue .

Merci superman

<!DOCTYPE html>

<html>

<head>

<!--{if It IE 9}>

<!{endif}-->

</head>

<body>

<div class="sidebar"> sidebar</div>

<h1>Kheddoumi Said</h1>

<h2>Shop Manager</h2>

<h3>Mon Expérience</h3>

<ul>

<li> <strong>De 1995 à 2003</strong> :Agent administratif</li> <br/>

<li> <strong>De 2003 à Aujourd'hui</strong> :District Manager</li> <br/>

</ul>

<h3> Mes Compétences </h3>

<ul>

<li> Excell Approfondi</li> <br/>

<li> Comprendre le Web</li> <br/>

<li> Technologie Réseaux</li> <br/>

<li> Systèmes d'Exploitations</li> <br/>

<h3>Ma formation</h3>

<p>Rendez-vous sur OpenClassroom <a href="http://fr.openclassroom.com">Openclassroom</a> !</p>

</body>

</html>

12 décembre 2014 à 23:06:47

Aussi pour mettre ma photo totalement à droite avec les flottants ça ne marche pas je ne trouve pas mon erreur .

Déjà essayé un tas de choses mais rien trouvé .

Merci Casperweb

13 décembre 2014 à 4:37:27

bonjour, je n'ai que la moitié du code, ou est le css? merci d'utiliser le bouton code </> pour inséré du code sur le forum.

je vois que tu n'as pas compris le principe des boites, en fait le but est d'afficher une zone à gauche (le liseret) et le contenu dans une zone à droite, pour ce faire il faut délimité ses zone par des balises et de préférence en respectant la sémantique. j'utilise div et section. (ou 2 section si la sidebare devrais contenir des informations. )

pas de <br> après un block, le block crée de part sa propriété de block un retour ligne après lui.

alt="maphoto" n'est pas opportun, ce texte s'affiche si l'image n'est pas téléchargée (pour raison x) , dans un navigateur texte, est lu par un lecteur d’écran ET par les moteurs de recherches. indique donc un texte qui a du sens et qui est compréhensible. par ex "Photo de [ton nom]" c'est plus explicite. lire http://www.pompage.net/traduction/Bien-utiliser-le-texte-alternatif

Pour voir vos erreurs vous prouvez utiliser le validateur HTML, CSS

réfléchis à l'utilisation de <strong> . Que vas tu accentué (donner de l'importance) comme information ? Est -ce les dates qui sont importantes ou les fonctions ?

Pour ta photo soit tu la fait flotter, soit ,comme une image et inline, tu indiques un text-align à son parent.

Comme j'ai donnée plus haut l’exemple avec float, je donne ici avec le inline-block, si une des 2 parties devais être plus grande que la hauteur de la page, utilise float. (Ou display table)

PS1 J'ai ajouté l’attribut lang à la balise html pour la langue du document
PS2 corriger « Mon Expérience » en « Mes Expériences »
PS3 le prénom avant le nom.

<!DOCTYPE html>
<html lang="fr">
    <head>
         <meta charset="utf-8" />
         <!--{if It IE 9}>
             <script src="http://html5shiv.googlecode.com/svn/trunk/html5.
         <!{endif}-->    
         <style type="text/css"> 
html, body , #wrapper {
    height: 100%;
    margin: 0;
    padding: 0;
}


.maphoto {
	text-align:  right;
}		 

.sidebar {
	background: blue;
	width: 100px; 
	 height: 100%;
}	 

#content, #sidebar { /* J'utilise les identifient pour ciblé l'élément unique dans la page.
						Vous pouvez avoir plusieurs sidebar, mais il n'y en à qu'une qui est à coté du contenu.  */
	display: inline-block; 
	vertical-align: top; 
}		 


		 </style>
         <title> CV de Said Kheddoumi </title>
    </head>  
    <body>
	<div id="wrapper">
   <div class="sidebar" id="sidebar"> 
   <p>sidebar</p>
   </div><!-- commentaire qui supprime l'espace indésirable du au inline-block
   --><section id="content"> 
              <h1>Said Kheddoumi </h1>
              <h2>Shop Manager</h2>
					<p class="maphoto"><img src="img/maphoto_mini.jpg" alt="maphoto"  /></p>
              <h3>Mes Expériences</h3>
				  <ul>
					  <li> <strong>De 1995 à 2003</strong> :Agent administratif</li> 
					  <li> <strong>De 2003 à Aujourd'hui</strong> :District Manager</li> 
				  </ul>
              <h3> Mes Compétences </h3>
				<ul>
					 <li> Excell Approfondi</li> 
					 <li> Comprendre le Web</li> 
					 <li> Technologie Réseaux</li> 
					 <li> Systèmes d'Exploitations</li>
				</ul>
				<h3>Ma formation</h3>   
					<p>Rendez-vous sur OpenClassroom <a href="http://fr.openclassroom.com">Openclassroom</a> !</p>
					
	</section>
	</div> <!-- fin du wrapper -->
    </body>     
</html>

si tu as des questions?

13 décembre 2014 à 23:45:47

Bonsoir Casperweb,

Voici le code Css , j'ai essayé votre code , mais c'est la photo qui se met en liseret sur le côté gauche hors si tu vois le travail à faire pour demain avant minuit si tu regardes il faut après le liseret mettre les sous forme de 3 paragraphe sur une même ligne avec le liseret à gauche comme l'a mis tout au début de son message "lorisbollangier" hors pourtant je suis toutes les étapes mais sans succès , et pourtant je ne suis pas blonde

si tu ne sais pas m'aider aucun soucis j'y passerais la journée de demain si il faut pour me débiner à trouver mes erreurs.

{

text-align : center;

border: 2px black solid;

box-shadow: 5px 5px 3px black;

color: blue;

}

{

text-align : center;

}

body

{

background-image: url("img/neige.jpg") ;

font-family: Arial

}

p:hover

{

backround-color: black;

color: white

}

{

height: 100%;

margin: 0;

}

.sidebar

{

backround: blue;

width: 100px;

height: 100%;

}

14 décembre 2014 à 2:30:55

Kheddoumi a écrit:

j'ai essayé votre code , mais c'est la photo qui se met en liseret sur le côté gauche

bonsoir, ha bizarre. pour moi le texte de l'image est bien à droite.

si tu regardes il faut après le liseret mettre les sous forme de 3 paragraphe sur une même ligne avec le liseret à gauche comme l'a mis tout au début de son message "lorisbollangier"

non ce ne sont pas des paragraphes ce sont des <section> ou <article> dans lesquelles il y a un titre (j'écrirais un <h3> ) avec une liste <ul> et <li>

ces sections ou article sont à placer en inline-block ou en float que vous avez vu dans le cours. Si vous ne voyez pas relisez le cours ou voir sur alsacreations. (display table est aussi possible mais vous ne l'avez pas encore vu.)

vous devez IMPÉRATIVEMENT vous documenter sur la sémantique des balises affin de comprendre les enjeux du choix de ces balises.

voici la liste des balises existantes

bien toujours en fonction de l'image du premier message de ce sujet, le dessus est le <header> . celui -ci ce compose de un titre <h1> et d'un titre <h2> ou div mais pas un paragraphe car ce n'est pas une subdivision d'un texte.

Pour la photo, je ne vois pas d'autre possibilité (peut-être que si mais plus compliqué à implémenté pour un débutant) que d'utiliser le float ; attention pour utiliser le float sur un élément html celui ci DOIT ce placer en premier dans le code html.

Je résume (voici la réflexion que vous devez avoir) :

2 block principaux un « sidebar » un « contenu »
dans le contenu, 2 zones distincte le « header » et le reste
dans le reste 3 zones « article » ou « section »
dans chaque une de ses zone un titre et une liste (excepter pour celle de droite car peu de données.)

J'ai indiquer du texte entre guillemet c'est pour que vous les utilisiez (balise ou ID). JE NE PEUX PAS ÊTRE PLUS CLAIR (sinon je fais le code à votre place :lol: ) .

Je vous ai expliquer les principes fondamentaux de ce travail en l'html, il ne reste plus qu'à refaire cet exercice . La pratique et toujours la pratique. (cent fois sur le métier tu remettras ton ouvrage. )

ensuite quand vous aurez un code html bien structurer et valide ET PAS AVANT, vous pourrez écrire le css.

Respecté bien toutes les étapes, html puis css, sans quoi vous devriez recommencer une nouvelle fois.

ASTUCES : utiliser les identifient pour identifier les zones unique de cette page.

Bon travail.

le code css que vous donnez la, il correspond à votre html plus haut? si oui cela ne fonctionnera jamais car le html est mal construit. => A refaire.

dans ce css vous avez oublier d'indiquer les sélecteurs html , body pour la règle qui ne possède pas de sélecteur.

et pour la prochaine fois que vous poster du code sur le forum, utiliser le bouton code </> car c'est difficilement lisible et il faut tout sélectionner pour le copier, donc pas du tout pratique.

(je parts en promenade ce dimanche, je vous lirais après 18h si vous avez des questions. )

-
Edité par casperweb 14 décembre 2014 à 2:33:43

14 décembre 2014 à 18:49:34

Bonjour ,

Si quelqu'un sait me venir en aide avant 23h59 que je puisse remettre mon travail ce serait coll , j'ai refait mon code html, css suivi toutew les vidéos et étapes et rien ne se passe comme sur le site .

D'avance merci pour votre aide , je vais poster via le boyton code min html et css si quelqu'un peut me corriger svp

14 décembre 2014 à 18:53:03

Le liseret je n'y arrive pas non plus, j'essaie de déplacer comme le travail demandé , ça se déplace à gauche et mais ça reste décalé

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8" />
         <!--{if It IE 9}>
             <script src="http://html5shiv.googlecode.com/svn/trunk/html5.
         <!{endif}-->    
         <link rel="stylesheet" href="style.css" />
         <title>Kheddoumi Said</title>
    </head>  
    <body>
        <header>    		 
              <h1>Kheddoumi Said</h1>
              <h2>Shop Manager</h2>              
        </header>                  
                                    
    <p><img src="img/maphoto_mini.jpg" alt="maphoto" class="maphoto" /></p>
    	
    	    		                   
               <h3>Mon Expérience</h3>                        
         	    
              <ul>
                  <li> <strong>De 1995 à 2003</strong> :Agent administratif</li> 
                  <li> <strong>De 2003 à Aujourd'hui</strong> :District Manager</li> 
              </ul> 
                           
        <section>                 
              <h3> Mes Compétences </h3>    
    
              <ul>
                 <li> Excell Approfondi</li>
                 <li> Comprendre le Web</li> 
                 <li> Technologie Réseaux</li> 
                 <li> Systèmes d'Exploitations</li>              
         </section>        
               
           <nav>
                 <p>Rendez-vous sur OpenClassroom <a href="http://fr.openclassroom.com">Openclassroom</a> !</p>
           </nav>                           
                                           
    </body>     
</html>

et Css

h1
{
	text-align : center;
	border: 2px black solid;
	box-shadow: 5px 5px 3px black;	
	color: blue;
}			

h2
{
	text-align : center;
}	
body
{	
	background-image: url("img/neige.jpg") ;
	font-family: Arial  
}

p:hover
{
	backround-color: black;
	color: white
}

https://developer.mozilla.org/fr/docs/Web/HTML/Element

14 décembre 2014 à 23:21:41

Bonsoir, vous ne prenez même pas la peine de vérifier votre code au validateur pour connaître vos erreur http://validator.w3.org

et rien ne presse, l’important n'est pas de rendre un travail absolument avant 23h59 mais que vous compreniez ce que vous faite. Et ce n'est pas le cas.

Si la certification est pour vous importante à obtenir, vous pouvez toujours vous désinscrire du cours, et vous réinscrire quand vous aurez compris le principe d'une construction de document web.

Le header est OK mais vous quitter une section pour ne pas en créer un autre. Pourquoi ?

Il vous manque des block vous permettant de séparer vos information.

ASTUCE pour voir les block indiquer une bordure ou un background de couleur.

Ligne 37 et 39 ce n'est pas la balise nav qu'il faut utiliser ici. Ce n'est pas parce qu'il y a un lien dans un texte que c'est une navigation. Je déplacerais la ligne 35 en ligne 40 et suppression des lignes 37 et39.

Coté css

ligne 21 c'est background-color pas backround-color

utiliser ces 2 liens pour vous documenter.

https://developer.mozilla.org/fr/docs/Web/CSS/Reference

p:hover veux dire : pour tout les paragraphes applique le style au passage de la souris. Cela s’applique également à la ligne 38. pour évité cela utiliser les class ou ID pour ciblé vos éléments de façon plus précise.

cet exercice est d'une simplicité, pourriez -vous exprimer avec des mots ce que vous ne comprenez pas et ou sont vos difficulté. Peux être que je comprendrais mieux et pourrais vous expliquer avec d'autre mots que ceux utiliser dans le cours.

19 décembre 2014 à 19:34:11

Bonsoir,

Quelqu'un peut-il me venir en aide pour la dernière partie , j'arrive à utiliser le @media screen and mais le liseret disparait bien comme qu'il faut mais le reste pas les paragraphes sont censés se mettre l'un en-dessous de l'autre .

@media screen and (max-width: 1024px)
{
	article
	{
		display: none;
	}					
}							
.bloc
{
	display: inline-block;
	width: 20%;
	vertical-align: top;
	margin-left: 10px;
	margin-right: 40px;
}
@media screen and (max:width: 1024px)
{
	.bloc
	{
		width: auto;
		display: block;
	}
}		
		
article
{
	background: rgb(0,0,100);
	height: 100%;
	width: 100px;
	position: fixed;
	top: 0;
	left: 0;
}
section
{
	margin: 20px 100px 20px 100px;
	padding: 0;
}			
img
{
	margin: 10px;
	box-shadow: 10px 10px 0 grey;
}
#said
{
	text-align: right;
	position: relative;
}
h1
{
	text-align: center;
	border: 1px black solid;
	box-shadow: 5px 5px 3px black;
	color: blue;
}
h2
{
	text-align: center;
}
h3
{
	text-decoration: underline;
}
aside
{
	width: 300px;
	position: absolute;
	right: 110px;	
}
body
{
	background-image: url("img/neige.jpg");
	font-family: Arial
}
aside p
{
	backround-color: blue;
	color: white;
}