pas d’attribut align pour centrer , obsolète en html5, c'est de la mise en forme donc en css. (et cet attribut n'est pas dans le cours de M.Nebra /!\ à la date de vos sources)
Mauvaise imbrication de balise, soit vous entourez tout le paragraphe d'un lien, soit vous entourez l'image d'un lien. (comme l'image seras centrée j'utiliserais la seconde solution)
cette troisième erreur devrais disparaitre à la correction de la précédente.(les erreurs suivantes sont ignorées)
Pas de <br /> après un block, un br à comme sens sémantique un retour ligne point. Un block tel que les item de liste (li) crée un retour ligne automatiquement, de leur propriété de block. Si vous désirez un espace plus grand jouer sur les marges intérieurs et/ou extérieurs
PS : plutôt que d'utiliser <cite> pour la citation j'aurais utiliser <q> ( et augmenter un poil la taille de cette police)
PS2 : attention à la sémantique des balise <b> et <u> la signification est différente en html4 ou html5. Si c'est un style de mise en forme que vous recherchez utilisez les css.
Je reste un peu sur "ma faim" concernant la balise <br/> qui me semble bien plus simple et rapide à utiliser, en tout cas à mon niveau (j'ai commencer les cours il y a deux semaines ) et cela m'évite d'avoir à inserer des marges interieurs et/ou extérieurs.
Je prend par contre bien note de la réponse a tacherais d'éviter cette balise derrière des blocks.
Je sais que vous avez eu cette histoire de liseret de l'activité 3 un certains nombre de fois, mais je suis désolée je n'y arrive toujours pas, j'ai fait validé mon html sur validator w3 et il ne trouve pas d'erreur, ce doit donc être dans le css. Malgré tout après avoir revu le cours et épluchez l'exercice que Matthieu Nebra nous fait parvenir je ne trouve pas l'erreur vous voulez bien m'aider ?
le html
<!DOCTYPE html>
<html>
<head>
<meta charset="ulf-8"/>
<link rel="stylesheet" href="CV.css"/>
<title>Mon CV</title>
</head>
<body>
<div id="liseret.jpg"></div>
<div id="corps_de_page">
<a href="Funhouse.jpg"><img src="pi.jpg" alt="pink"/></a>
<h1> <span class= "nom">Pascale Limare</span></h1>
<p class= "fonction"> Responsable Hébergement en Hôtellerie</p>
<section>
<h2>Mon expérience</h2>
<ul>
<li>De 1986 à 1988 : plusieurs petits boulot : </li>
<li>Vendeuse en station service</li>
<li>Saisie sur micro-ordinateur au Centre Nucléaire de Paluel</li>
<li>manutentionnaire en peinture</li>
<li>De 1989 jusqu'à ce jour : Responsable Hébergement en Hôtellerie</li>
</ul>
</section>
<section>
<h2>Mes compétences</h2>
<ul>
<li>Commerciale</li>
<li>Saisie des factures</li>
<li>Organisation de séminaire et de groupe touristique</li>
<li>Mise à jour blog site et réseau sociaux</li>
</ul>
</section>
<section>
<h2>Ma formation</h2>
<ul>
<li>Secrétaire administrative</li>
<li>Langage HTML et CSS en cours...</li>
</ul>
</section>
</div>
</body>
</html>
bonjour, vous avez une erreur css ligne 18, ce n'est pas une url qu'il faut indiquer mais le nom de la police soit « almendraregular » et pas entre parenthèse.
Comment voulez vous que cela fonctionne vous n'avez pas dans votre html un identifient nommé « liseret » ce que vous déclarez dans votre css. Supprimer le « .jpg » ligne 13 de votre html.
Si vous utiliser le height: 100%; sur un élément, la hauteur est calculée sur la hauteur du parent, si cette hauteur est elle même en pourcentage, elle est calculée en fonction de la hauteur de sont parent donc le grand parent de l’élément auquel vous désirez indiquer une hauteur. Et cela jusqu'au plus haut niveau de du document soit la balise html.Vous devez donc indiquer une hauteur à ses éléments.
Si vous indiquer un flottant cet élément sort du flux, il ne peux donc être en inline block avec son frère.
#corps_de_page #liseret Cette règle est inopérante car il n'y a pas d’identifiant liseret dans l'élément corps_de_page ; c'est son frère. (vous avez certainement oublier une virgule entre les deux. )
J'ai corrigé le meta charset effectivement j'ai du faire une erreur de frappe, j'ai rajouté la virgule entre #corps_de_page et #liseret un oubli oui, j'ai retiré le .jpg de liseret dans le html "j'ai fait n'importe quoi là désolée" et du coup j'ai retiré le height de #liseret, j'ai retiré également le float dans le #liseret. J'ai suivi vos liens et je comprends mieux l'importance du texte alternatif, j'ai modifié mon alt par (la chanteuse Pink)
Ce que je ne comprends pas par contre, c'est pour la ligne 18 du css, l'url c'est pour l'image de fond et si je retire mes parenthèses du font-family la page se met en arial !!
Le liseret n'est toujours pas visible, je n'arrive pas à comprendre pourquoi, je sais que pour vous ce doit être évident mais là je ne vois vraiment pas. Sinon je relirai le cours entièrement pour éviter de vous ennuyer avec ça vu que vous l'avez déjà expliqué.
PS: c'est bon je viens de réussir en jouant avec les marges, il devait être perdu hors écran j'imagine.. merci pour votre aide, je vais néanmoins relire tout ça encore une fois
Bonjour a tous, j'ai aussi un probleme avec ce liseret ainsi que l'article. Je ne comprends pas pourquoi certains lettres se noient dans le liseret, aussi, je pense que mon css est pas bon car je joue avec la taille du liseret mais je pense qu'il y'a une facon a ce qu'il s'adapte au texte directement. merci d'avance.
mon code html (j'ai essayer</> mais ca ne propose pas le html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="CV3test3.css" />
<title>CV</title>
</head>
<body>
<div class="bloc_page">
<div class="liseret"> </div>
<header>
<a href="caro.jpg"><img src="tn_caro.jpg" class="photo" alt="Photo de Caroline Jonas"/></a>
<h1>Caroline Jonas</h1>
<p class="citation">"Toute vérité passe par trois stades :<br />
en premier lieu on la ridiculise ;<br />
en deuxième lieu on s'y oppose violemment ;<br />
enfin on l'accepte comme si elle allait de soi."<br />
Schopenhauer</p>
</header>
<section>
<article>
<h2>Mon expérience</h2>
<ul class="experience">
<li><strong>De 2010 à 2015 :</strong> Militante en charge de la communication numérique du syndicat CGT d'Air France.</li>
<li><strong>De 1997 à 2015 :</strong> Hôtesse de l'air long courrier à Air France.</li>
<li><strong>De 1990 à 1997 :</strong> Les journalistes appellent ça la précarité.</li>
</ul>
</article>
<article>
<h2>Mes compétences</h2>
<ul class="competence">
<li>Gestion de site internet</li>
<li>Reine du plateau repas</li>
<li>Reine de la débrouille</li>
</ul>
</article>
<article>
<h2>Ma formation</h2>
<ul class="formation">
<li><strong>A partir de 2015 :</strong> En cours via le <a href="http://www.siteduzero.com">Site du Zéro</a>.</li>
bonjour, ligne 47 de ta css il manque un point virgule.
Certains lettres se noient dans le liseret, car tu y appliques une propriété de positionnement absolut, ce qui à pour effet de sortir cet élément du flux, il ce positionne par rapport aux valeurs right, top, left, et bottom. Les autres éléments ne tiennent pas compte de cette sortie de flux car eux sont dans le flux justement. De par cette sortie de flux, la propriété display:inline-block n'est pas appliquée, si tu comptais l'utiliser pour l'alignement de son frère section et header d’où display:inline-block inutile pour .liseret .
Tu appliques un padding: 160px à section, préfère un padding-left seulement.
Pour la citation il existe la balise <q> pour les citations courte et <blockquote> pour les citations plus longues.
bonjour et merci pour la reponse rapide. je n'ai pas reussi a changer la forme malgré tes conseils, je retourne au cours 2. j'ai du aller trop vite. merci quand meme.
Alors pour moi le liseret me fait un probleme tout simple. Il apparait mais ne fait pas la longueur de la page.
En lisant le forum, je l'ai placé assez haut dans le code, hors de <header>etc juste après <body>
Résultat... le liseret s'arrête la où commence le header. Alors j'ai tenté le <float>, et du coup l'union avec la partie <header> se passe bien, mais il veut rien entendre quant au reste de la page...
Enfin, (c'est la question bonus) j'ai pas bien compris l'histoire des %ages et des parents... C'est à dire qu'à un moment donné, il faudra mettre une valeur en pixel pour pouvoir utiliser le %tage par la suite ?
<body>
<div id="liseret">
/*le liseret*/
</div>
<header>
<p><a href=images/cv_html.png><img src="images/cv_html_mini.png" alt="Quentin Fortier" title ="Cliquez pour voir comment je suis beau gosse" class="myface"></a></p>
<h1>Quentin FORTIER</h1>
<q>Le meilleur savoir-faire n’est pas de gagner cent victoires dans cent batailles, mais plutôt de vaincre l’ennemi sans combattre </q><cite>Sun Tzu</cite>
</header>
<section>
et un screen shot du résultat
Mais on doit mettre quoi dans une signature au juste ? Mon nom est déjà au dessus !
Enfin, (c'est la question bonus) j'ai pas bien compris l'histoire des %ages et des parents... C'est à dire qu'à un moment donné, il faudra mettre une valeur en pixel pour pouvoir utiliser le %tage par la suite ?
bonjour désolé pour la réponse tardive, oui et non, pour que la taille d'un élément soit prise en compte en pourcentage, il faut que la taille du parent soit connue pour servir de base au calcul des pourcentages. si tu ne comprend pas bien ce serais peut être plus clair avec ceci :
Je viens de trouver ce fil et je pensais y trouver la solution à mon problème pour ce même exercice, mais je ne l'ai malheureusement pas trouvée.
Je me permet donc de crier au secours à mon tour.
Donc, j'ai bien réussi à placer les éléments comme demandé dans l'exercice, mais je rencontre un autre problème que personne n'a eu semble-t'il.
J'ai déclaré une police de caractère dans mon CSS que je veux appliquer au titre de niveau 1 de mon entête, mais elle ne s'applique pas.
J'ai beau chercher et chercher encore et je ne trouve vraiment pas mon erreur.
Si quelqu'un a le temps d'examiner cela et de m'éclairer, il aura la reconnaissance éternelle d'un apprenti.
Voici mon code html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style2.css" type="text/css"/>
<title>CV de Eric Herregods</title>
</head>
<body>
<div id="liseret">
</div>
<div id="page">
<header>
<a href="images/photo.jpg"><img src="images/thumbphoto.jpg" alt="Ma photo" id="maphoto"/></a>
<h1>Eric Herregods</h1>
<p class="description">Technicien IT, passionné par l'informatique depuis mon plus jeune âge.</p>
</header>
<section id="contenu">
<article>
<h2>Mon expérience</h2>
<ul>
<li><strong>De 1996 à 2009 :</strong> Responsable adjoint du service maladie/invalidité de la MutSoc BW</li>
<li><strong>De 2010 à 2014 :</strong> Technicien IT pour la société MycoMicro</li>
<li><strong>De 2014 à aujourd'hui :</strong> Technicien IT freelance</li>
</ul>
</article>
<article>
<h2>Mes compétences</h2>
<ul>
<li>Windows - installation et configuration</li>
<li>Linux - installation et configuration</li>
<li>Guild Wars 2 - Guide touristique en Tyrie et fondateur de la guilde Legendary Tyrian Knights</li>
</ul>
</article>
<article>
<h2>Ma formation</h2>
<p>Formation auto-didacte en IT et je complete celle-ci sur OpenClassrooms !</p>
</article>
</section>
</div>
</body>
</html>
Ma page est affichée comme je le souhaite mais si j'utilise pour la balise #corps une valeur en %, tout mon bloc #section passe en dessous du bloc #liseret. Pourquoi ?
je suis en train de faire le cours html5 et css3 et j'ai également un problème avec le liseret. En fait il me laisse une marge en haut et à gauche. mon erreur est surement stupide mais je n'arrive pas à la trouver.
avez vous une idée svp?
voici mon code:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>KingMyers</title>
</head>
<body>
<section>
<aside> </aside>
</section>
<div>
<h1>Elias Myers</h1>
<p class="presentation">Etudiant en première année au Collège Rousseau, Genève </p>
<p> <a href="images/Elias Myers.jpg"><img src="images/Elias Myersminiature.jpg" class="image" alt="Photo de Elias Myers" title="Cliquez pour agrandir"/></a>
<h2>Mon Expérience</h2> <p>Pour l'instant, aucune expérience car je n'ai pas encore fini mes études.</p></p>
<h2>Mes compétences</h2> <ul> <li>Maîtrise quasi parfaite de l'anglais et bien sûr du français</li><li>Allemand scolaire</li><li>Connaissance de niveau bon collégien de science fondamentales et appliqués</li><li>Interêt pour l'économie et le droit</li><li>Et bien sûr, une très grande curiosité</li></ul>
<h2>Ma formation</h2> <ul> <li>De 2000 à 2015: école primaire et cycle d'orientation </li><li>2015: échanges linguistique au Canada </li><li>2015-2016: première année au collège Rousseau </li></ul/>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="author" content="Camille Bourget">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Je vous présente mon CV" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Présentation du CV de Camille Bourget</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sidebar">
<p>
Mes Coordonées :<br /><br />
8 rue du verger<br />
49070 St Lambert La Potherie<br />
06 04 41 90 11<br />
camillebourgetsen@gmail.com<br />
16 ans, né le 04/02/1999 <br />
</p>
</div>
<section class="container">
<h1>Camille Bourget</h1>
<aside class="experience">
<h2>Expérience Professionnelle</h2>
<ul>
<li>
<p>
<b>
Stage d’un mois au service informatique au sein d’Acer à Angers (Du 25 mai au 19 juin 2015)
</b>
<br />
<i>
Principales Activités réalisées : Dépannage de smartphone, réparation de poste, résolution des problèmes de différents employés, création d’un script de sauvegarde en .bat, recherche et mise en place d’une solution de routage d’un smartphone avec backup
</i>
</p>
</li>
<li>
<p>
<b>
Stage de 15 jours au service de maintenance informatique au Collège Saint Charles Angers (Du 23 février au 06 Mars 2015)
</b>
<br />
<i>
Principales Activités réalisées : restauration d’un pc + installation des logiciels + mis à jour du système et création d’une image, copie de l’image sur 4 autres pc, installation d’une imprimante, réparation d’un pc dans la salle de physique, nettoyage de pc
</i>
</p>
</li>
<li>
<p>
<b>
Stage d'observation de deux jours au centre de réparation à l'entreprise Acer (en 3ème) (Du 24 au 26 avril 2014)
</b>
</p>
</li>
</ul>
</aside>
<aside class="formation">
<h2 id="h2-1">Formation</h2>
<ul>
<li>Brevet des collèges (Obtenu en 2014)</li>
<li>ASSR 2 (Attestation Scolaire Sécurité Routière)</li>
<li>PSC 1 (Prévention Secours civique)</li>
</ul>
</aside>
<aside class="competences">
<h2 id="h2-2">Compétences</h2>
<ul>
<li>Montage et démontage d'un PC</li>
<li>Installation de l’OS (operating système)</li>
<li>Installation et configuration de camera IP sur un réseau</li>
<li>Cablage en boucle équilibré</li>
<li>configuration d'un routeur, d'un parefeu Ipcop, de windows home server 2000</li>
</ul>
</aside>
</section>
</body>
</html>
je suis également sur cet exercice, j'ai utilisé flexbox pour mettre mes trois blocs à coté les uns des autres mais je ne comprends pas pourquoi mon liseret n'apparait pas. J'ai modifié et bidouillé des dizaines de trucs, vérifié mon code HTML dans W3 qui ne trouve aucune erreur, la je sèche... Quelqu'un peut il m'aider?
Ok, j'ai pas trop l'habitude d'utiliser des forums et je savais pas si ouvrir un nouveau sujet alors que d'autres existaient déjà sur le même problème était mieux justement. Mais je le saurais pour la prochaine fois
Bonjour. Bien que j'ai répété le liseret, il ne prend pas toute la longueur.
Et la photo, n'est pas complètement placée en haut à droite. J'ai vérifié mon code sur http://validator.w3.org, qui m'indique des erreurs, sur mon code html, mais il refuse de véridier mon CSS, dont je fais appel à votre bienveillance. Merci d'avance.
Voici le code html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CV</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="lisere">
<img src="images/lisere.PNG" alt=""/>
</div>
<div class="infophoto">
<div id="info">
<h1>Hatice AKCALI</h1>
<!--phrase courte qui me décrit-->
<p>Chef de projet Multimedia développeur</p>
</div>
<!--Positionner la photo en haut à droite-->
<!--<img src="image/photo.jpg" alt = "photo CV Hatice Akcali" id="maphoto"></a>-->
<div id="maphoto">
<img src="images/photo.jpg" alt="ma photo"/>
</div>
</div>
<div class="container">
<section id="conteneur">
<div id="experience" class="sous_section">
<h3>Mon expérience</h3>
<ul>
<li><span class="gras">04/2015-05/2015</span> : Maintenance informatique, CMBM (Nemours 77), stage.<br>
Intégrer l'UC, configurer GPT/MBR, Watercooling, Monterles ordinateurs portables(notions), installer en RAID0/RAID1, mises à jour, flasher le bios, créer restaurer sauvegarder depuis Recovery, optimiser Windows SSD/HDD, dépanner avec Teamviewer.
</li>
<li><span class="gras">10/2013/-12/2013</span> : Maintenance informatique, Caserne de pompiers (Vesoul 70), stage.<br/>
Renommer/Ajouter/Déplacer dans Active Directory, installer les périphériques d'impression en réseau, configurer intégrer le domaine, déployer créer l'image sur plusieurs postes avec Ghost.
</li>
<li><span class="gras">06/2013-07/2013</span> : Maintenance informatique, Hopital Paul Morel (Vesoul 70), stage.<br/>
Transférer, sauvegarder les données, changer les pièces défectueuses.
</li>
<li><span class="gras">03/2013-05/2013</span> : Maintenance informatique, Lycée Louis Armand, Mulhouse - stage.<br/>
Déployer créer des images, connexion à distance, sauvergarder avec Acronis, Gimagex.
</li>
<li><span class="gras">01/2013-03/2013</span>: Maintenance informatique, Facil'Ordi, Cernay - stage.<br/>
Installer configuer les systèmes d'exploitation, dépanner.
<li><span class="gras">03/2013-04/2012</span> : Maintenance informatique, Mairie (Vesoul 70), stage.<br/>
Installer et configurer le système d'exploitation.
</li>
</ul>
</div>
<div id="compétence" class="sous_section">
<h3>Mes compétences</h3>
<ul>
<li>HTML</li>
<li>CSS3</li>
<li>VBA</li>
<li>Microsoft Office Avancé</li>
<li>Introduction à JavaScript</li>
<li>SQL/MysSQL</li>
<li>PHP</li>
<li>SQL server</li>
</ul>
</div>
<div id="formation" class="sous_section">
<h3>Mes formations</h3>
<li>
chef de projet multimedia développeuse, e-learning avec OpenClassrooms :<br />
Alors c'est simple... J'ai tout misé sur eux pour bénéficier de leurs enseignements mondiaux !<br />
Tech. Sup. en développement Informatique (Analyste - Developpeur), CCI-Colmar :<br/>
Gestion de projet, introduction à JavaScript, Concepts Base de Données SQL/MySQL, technologies Web (HTML-PHP-MySQL), SQL server avec Bases de Données, technologie Visual Basic, Sécurité informatique, Windows serveurs/clients, Linux, gestion de parc informatique, virtualisation, Microsoft Office Avancé, droit informatique, vendre un projet.<br />
Agent de Maintenance En Bureautique et Informatique (Centre de Réadaptation, Mulhouse) :<br />
</div>
</section>
</div>
</body>
</html>
je m'excuse, j'ai essayé de comprendre comment faire le liseret mais j'ai pas compris s'il vous plait aider moi voici mon code html
<!DOCTYPE html>
<html>
<head>
<title> Mon CV </title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<h1>ZIAD EL KHATTABI</h1>
<p id="center">un étudiant,sportif et nouveau developpeur </p>
<span><a href="jeune-homme-4.jpg"><img src="jeune-homme-4-mini.jpg" alt="ma photo"/></a></span>
<nav>
<img src="image.jpg" alt="background" />
</nav>
<section>
<h2>Mon expérience </h2>
<ul>
<li><strong>De 2010 à 2013 </strong>:pratiquant de taekwondo chez Anas club </li>
<li><strong>De 2013 à 2014 </strong>:étudiant chez EMERGENCE high school </li>
<li><strong>De 2014 à 2016 </strong>:étudiant chez Anisse high school </li>
</ul>
<h2>Mes compétences </h2>
<ul>
<li>HTML et CSS</li>
<li>php(<a href="https://openclassrooms.com">openclassrooms</a>)</li>
<li>world,excel,powerpoint...etc</li>
</ul>
<h2>Ma formation </h2>
<p> Ma formation est une formation online </p>
</section>
</body>
</html>
Mais on doit mettre quoi dans une signature au juste ? Mon nom est déjà au dessus !
Mais on doit mettre quoi dans une signature au juste ? Mon nom est déjà au dessus !