Bonsoir, je me permet de venir vers vous car je suis le cous gratuit de développeur web, dans ce dernier on doit refaire une page web.
Une fois l'exercice terminé je me rend compte que le titre h2 de ma bannière est placé en haut a gauche alors qu'il devrait être placé en bas à gauche dans une barre gris-noir légèrement opacifié qui n’apparaît pas elle non plu, donc je vous met mon code html et mon code ss pour que vous puissiez m'aider et me dire ou est l'erreur car j'ai bau regarder je ne vois pas ou je me suis trompé.
je vous remercie de votre aide.
Thierry.
Mes codes :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="utf-8">
<title>Zozor - Carnets de voyage</title>
</head>
<body>
<div id="bloc-page">
<header>
<div id="titre-principal">
<div id="logo">
<img src="images/zozor_logo.png" alt="Logo de zozor">
<h1>Zozor</h1>
</div>
<h2>Carnets de voyage</h2>
</div>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="banniere_image">
<div id="bannière_description">
Retour sur mes vacances aux États-Unis...
<a href="#" class="bouton_rouge"> Voir l'article
<img src="images/flecheblanchedroite.png" alt=""/></a>
</div>
</div>
<section>
<article>
<h1>
<img src="images/ico_epingle.png" alt="catégorie voyage" class="ico_categorie"/> je suis un grand voyageur
</h1>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse et augue risus. Cras pretium nibh eget feugiat dictum. Morbi faucibus id elit in lobortis. Curabitur imperdiet ligula eu vehicula tincidunt. Maecenas sed nulla viverra risus consectetur viverra non nec ligula. Nulla facilisi. Nam auctor tortor ac lacus pellentesque ultrices. Vivamus metus dui, bibendum sed sagittis et, posuere eu dolor. Vestibulum pellentesque dictum nisi, in varius orci hendrerit et. Curabitur vestibulum bibendum aliquet. Ut id commodo risus.
Nam lacinia mauris vel commodo ultricies. Ut elementum auctor ligula eget tempus. Curabitur et posuere nisl. Integer convallis imperdiet urna ac pretium. Phasellus porta leo ac hendrerit posuere. Nulla pharetra non nunc nec bibendum. Proin at ornare justo. Etiam mattis orci eu congue faucibus.
</p>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse et augue risus. Cras pretium nibh eget feugiat dictum. Morbi faucibus id elit in lobortis. Curabitur imperdiet ligula eu vehicula tincidunt. Maecenas sed nulla viverra risus consectetur viverra non nec ligula. Nulla facilisi. Nam auctor tortor ac lacus pellentesque ultrices. Vivamus metus dui, bibendum sed sagittis et, posuere eu dolor. Vestibulum pellentesque dictum nisi, in varius orci hendrerit et. Curabitur vestibulum bibendum aliquet. Ut id commodo risus.
Nam lacinia mauris vel commodo ultricies. Ut elementum auctor ligula eget tempus. Curabitur et posuere nisl. Integer convallis imperdiet urna ac pretium. Phasellus porta leo ac hendrerit posuere. Nulla pharetra non nunc nec bibendum. Proin at ornare justo. Etiam mattis orci eu congue faucibus.</p>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse et augue risus. Cras pretium nibh eget feugiat dictum. Morbi faucibus id elit in lobortis. Curabitur imperdiet ligula eu vehicula tincidunt. Maecenas sed nulla viverra risus consectetur viverra non nec ligula. Nulla facilisi. Nam auctor tortor ac lacus pellentesque ultrices. Vivamus metus dui, bibendum sed sagittis et, posuere eu dolor. Vestibulum pellentesque dictum nisi, in varius orci hendrerit et. Curabitur vestibulum bibendum aliquet. Ut id commodo risus.
Nam lacinia mauris vel commodo ultricies. Ut elementum auctor ligula eget tempus. Curabitur et posuere nisl. Integer convallis imperdiet urna ac pretium. Phasellus porta leo ac hendrerit posuere. Nulla pharetra non nunc nec bibendum. Proin at ornare justo. Etiam mattis orci eu congue faucibus.</p>
</article>
<aside>
<h1>Á propos de l'auteur</h1>
<img src="images/bulle.png" alt="" id="fleche_bulle"/>
<p id="photo_zozor"><img src="images/zozor_classe.png" alt="Photo de zozor"/></p>
<p>Laisse-moi le temps de me présenter : je m'appelle zozor, je suis né un 23 novembre 2005.</p>
<p>Bien maigre, n'est-ce pas? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.</p>
<p><img src="images/facebook.png" alt="Facebook"/><img src="images/twitter.png" alt="Twitter"/><img src="images/vimeo.png" alt="Vimeo"/><img src="images/flickr.png" alt="Flickr"/><img src="images/rss.png" alt="RSS"/></p>
</aside>
</section>
<footer>
<div id="tweet">
<h1>Mon dernier tweet</h1>
<p>Hii haaaaan !</p>
<p>Le 12 mai à 23h12</p>
</div>
<div id="mes_photos">
<h1>Mes photos</h1>
<p><img src="images/photo1.jpg" alt="Photographie"/> <img src="images/photo2.jpg" alt="Photographie"/> <img src="images/photo3.jpg" alt="Photographie"/> <img src="images/photo4.jpg" alt="Photographie"/></p>
</div>
<div id="mes_amis">
<h1>Mes amis</h1>
<div id="listes_amis">
<ul>
<li><a href="#">Pupi le lapin</a></li>
<li><a href="#">Mr Baobab</a></li>
<li><a href="#">Kaiwaii</a></li>
<li><a href="#">Perceval.eu</a></li>
</ul>
<ul>
<li><a href="#">Belette</a></li>
<li><a href="#">le concombre masqué</a></li>
<li><a href="#">Pti prince</a></li>
<li><a href="#">Mr Fan</a></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>
Merci de colorer votre code à l'aide du bouton Code
Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.
Merci de modifier votre message d'origine en fonction.
Bonjour, on n'est pas notifié lors des édits des messages. Vous faite bien de remonter le sujet.
Pour #bannière_description elle doit être positionnée comme vous avez positionner .bouton_rouge (je dirais même que c'est cet élément qui prend la hauteur souhaitées et non pas .bouton_rouge)
C'est également #bannière_description qui prend une couleur de fond transparente noir => regarder du coté de rgba().
Pour #banniere_image donner une largeur maximal avec max-width de la largeur de l'image de fond, car le bouton rouge sort de la zone de l'image de fond pour les écrans plus grand.
J'ai tout coder de nouveau pour ne pas faire d'erreurs, alors concernant ma bannière_description c'est bon tout as'affiche bien mais j'ai un autre problème maintenant, dans le footer la liste des amis devrait se trouver a côté du dernier tweet et des photos et ben pour moi ma liste d'amis se retrouve en dessous, si vous voulez je vous remet le code.
Bonjour voici les codes, je vous remercie de votre aide et votre patience.
une capture qui vous montre le souci :
le html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Zozor - carnets de voyage</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre_principal">
<div id="logo">
<img src="images/zozor_logo.png" alt="Logo de Zozor"/>
<h1>Zozor
</h1>
</div>
<h2>Carnets de voyage
</h2>
</div>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Blog</li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="banniere_image">
<div id="banniere_description">
Retour sur mes vacances aux États-Unis...
<a href="#" class="bouton_rouge"> Voir l'article <img src="images/flecheblanchedroite.png" alt=""/></a>
</div>
</div>
<section>
<article>
<h1>
<img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie"/> Je suis un grand voyageur
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.
</p>
<p>
Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.
</p>
<p>
Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.
</p>
</article>
<aside>
<h1>
À propos de l'auteur
</h1>
<img src="images/bulle.png" alt="" id="fleche_bulle"/>
<p id="photo_zozor">
<img src="images/zozor_classe.png" alt="Photo de Zozor"/>
</p>
<p>
Laisse-moi le temps de me présenter : je m'appelle zozor, je suis né un 23 novembre 2005.
</p>
<p>
Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.
</p>
<p>
<img src="images/facebook.png" alt="Facebook"/>
<img src="images/twitter.png" alt="Twitter"/>
<img src="images/vimeo.png" alt="Vimeo"/>
<img src="images/flickr.png" alt="Flickr"/>
<img src="images/rss.png" alt="RSS"/>
</p>
</aside>
</section>
<footer>
<div id="tweet">
<h1>Mon dernier tweet</h1>
<p>Hii haaaaaan !</p>
<p>le 12 mai à 23h12</p>
</div>
<div id="mes_photos">
<h1>Mes photos</h1>
<p><img src="images/photo1.jpg" alt="Photographie" /><img src="images/photo2.jpg" alt="Photographie" /><img src="images/photo3.jpg" alt="Photographie" /><img src="images/photo4.jpg" alt="Photographie" /></p>
</div>
<div id="mes_amis">
<h1>Mes amis</h1>
<div id="listes_amis">
<ul>
<li><a href="#">Pupi le lapin</a></li>
<li><a href="#">Mr Baobab</a></li>
<li><a href="#">Kaiwaii</a></li>
<li><a href="#">Perceval.eu</a></li>
</ul>
<ul>
<li><a href="#">Belette</a></li>
<li><a href="#">Le concombre masqué</a></li>
<li><a href="#">Ptit prince</a></li>
<li><a href="#">Mr Fan</a></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>
Il me semble que le problème vient simplement du fait que vous avez oublié de fermer l'accolade à la ligne 205, ce qui a pour effet d'annuler le code qui suit. Pour moi, tout fonctionne lorsque l'on ferme cette accolade. Essayez donc et dites-moi si cela solutionne le problème.
Dans la vie, il y a deux certitudes. 1: on va tous mourir, et 2: les pizzas, c'est bon!
Bonsoir john Willians et AbcAbc6 merci a vous deux pour votre aide précieuse et en effet en corrigeant la ligne 205 plus de problème et le validateur je l'ai mis en favoris pour l'avoir toujours sous la main je met le sujet en résolu encore merci a vous deux.
Page web qui ne s'affiche pas correctement
× 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.
Dans la vie, il y a deux certitudes. 1: on va tous mourir, et 2: les pizzas, c'est bon!