Bonjour à vous, j'aimerai vraiment avoir votre aide concernant l'exercice N°3 du cours HTML5 qui demande de structurer une page html comme ceci:
A gauche, un liseré (purement décoratif, mais vous pouvez aussi mettre des informations à l'intérieur)
A droite, le contenu de votre CV, qui contiendra à l'intérieur, de gauche à droite les sections suivantes :
Mon expérience
Mes compétences
Ma formation
Si la hauteur du liseré peut être définie en valeur absolue (en pixels), tout le reste de la mise en page doit être en valeur relative (pourcentages). Le contenu doit occuper tout l'espace en largeur, quelle que soit la largeur de la fenêtre.
N'oubliez pas d'utiliser des balises sémantiques, comme nous l'avons vu dans le cours.
et voila mon code pour l'instant
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Le CV de Steve Jobs</title>
<link rel="stylesheet" type="text/css" href="CV.css">
</head>
<body>
<header>
<div class="presentation">
<h1>Steve Jobs</h1>
<p>Entrepreneur,innovateur,et créateur d'Apple</p>
</div>
<img src="images/steve_jobs.jpg">
</header>
<div id="tout">
<div class="mon_expérience">
<h1>Mon expérience</h1>
<ul>
<li><span class="important"> De 1976 à 1985</span>: co-fondateur d'Apple, une entreprise innovante dans le domaine de la manufacture high-tech</li>
<li><span class="important">De 1985 à 1997</span>: créateur de NeXt, une compagnie dédiée à la production d'ordinateurs</br>
créateur de PIXAR, une entreprise de production de films d'animations</li>
<li><span class="important">De 1997 à 2011</span>: le PDG d'Apple</li>
</ul>
</div>
<div class="mes_compétences">
<h1>Mes compétences</h1>
<ul>
<li>Leadership</li>
<li>Innovation</li>
<li>Créativité</li>
<li>Visionnaire</li>
</ul>
</div>
<div class="ma_formation">
<h1>Ma formation</h1>
<ul>
<li>Autodictate</li>
</ul>
</div>
</div>
</body>
</html>
je suis concerné par le fait que ma page web à toujours une scroll bar en dessous comme si je prends plus que la largeur de mon écran et je dois zigzaguer à droite et à gauche pour voir l'entité de la page, ce qui m’inquiète concernant les valeurs absolues/relatives mentionnées dans l'exercice + j'ai un problème avec le liseré ( qui est le premier background ) que j'arrive pas à régler sa largeur + si vous avez des recommandations et potentielles améliorations je suis preneur , merci beaucoup pour votre aide
position: relative + une valeur de top/right/bottom/left, ça sert à déplacer un élément sans modifier son emplacement d'origine. C'est rarement utilisé pour ça, et ça n'est pas une bonne idée de le faire aussi fréquemment que dans ton code, surtout avec de si grandes valeurs. Enlève déjà tout ça.
Ensuite, body { width: 100% } c'est inutile : par défaut body a un rendu block, et les éléments à rendu block prennent toute la largeur disponible.
Une fois que ces modifications seront faites, on verra plus sereinement ton problème.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
bon j'ai fait ce que vous m'avez dit, et il faut dire que c'est plus beau et élégant, par contre le bloc de "ma formation" est à mon gout beaucoup plus éloigné des 2 autres ( mes compétences + mon expérience) alors j'aimerai le rapprocher un peu des autres + l'image de steve jobs est un peu grande , serait il acceptable que je mets une height et width en px sachant que l'exercice demande des valeurs relatives + j'ai toujours le problème de liséré qui est trop large + comment est ce que je fais pour que toute la page occupe une certaine valeur, soit 60% par example , en toute circonstance. MERCI BEAUCOUP , je sais que je demande trop et je m'excuse mais je suis seulement un débutant.
pour "ma formation", c'est déjà réglé et c'est comme vous avez dit des marges trop importantes, pour l'image dans mon code, elle existe seulement dans mon CSS comme background ( le premier), le but étant de la placer à gauche en dessus de l'autre background, et ça marche mais la largeur est trop grande ce qui fait qu'elle y va jusqu'au moitié de "mon expérience" , c'est pour cela que j'aimerai réduire ça largeur. Concernant la largeur de la page html j'ai bien compris qu'elle occupe par nature et à cause du fait que <body> est de type block toute la largeur possible , par contre je parle de quand le navigateur n'est pas agrandit a fond, j'aimerai qu'on puisse comme même regarder le plus possible de ma page même quand le navigateur n'occupe pas la totalité de l'affichage ( quand il n'est pas agrandit), je pense que la je parle principalement de "min-width". Merci encore
( une petite question hors du sujet qui m'intrigue , je vois de plus en plus des " container" et "sidebar" dans les codes CSS , pourrais je avoir une explication concernant ces deux attributs ?)
Pour l'image, je pensais que tu parlais de celle qui est dans le header, dans la balise "img". Ce n'est pas le cas ? (ceci dit, de toute façon, mieux vaut toujours mettre les images à la taille qu'on veut leur faire afficher, histoire d'éviter de charger de gros fichiers pour des miniatures)
La largeur de la page : je crois que je ne comprends pas très bien ce que tu veux.
> pour que toute la page occupe une certaine valeur, soit 60% par example , en toute circonstance
Cette phrase, pour moi, signifie "je veux une largeur de 60% tout le temps". Ce n'est pas ça ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
je voudrai prendre la largeur entière de l’écran du visiteur , donc normalement je ne touche à rien du moment que le block <body> prends par défaut tout la largeur possible , mais si vous avez vu la video du chapitre, on parle de quand le navigateur n'est pas en plein écran, n'est pas totalement agrandi, on montre même un example concernant les balisent <p> qui reçoivent une "min-width "
Besoin d'aide concernant exercice html/css
× 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.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)