En formation de développeur web, j'ai un soucis avec un exercice. Un truc "tout bête" mais sur lequel je bûche depuis un certain temps sans réussir à résoudre le problème, alors que, j'imagine, ça tient à un détail...
Voilà je dois en fait réaliser cette page de site :
Et j'ai un soucis avec le cadre rouge du haut, contenant la liste en blanc et leur bordure en pointillée...perso ça me donne ça (voir ci-après). Je ne comprends pas pourquoi les lignes pointillées collent à mes mots ! je vous mets mes screenshots de HTML et CSS
J'ai fait comme tu m'as dit, j'ai essayé d'augmenter les valeurs du line-height, mais le problème c'est que ça augmente la hauteur du cadre rouge. Ca étire donc bien les lignes (vers 15px environ) mais ça devient trop grand. Je dois refaire le site à l'identique, et sur l'image que l'on m'a envoyé, le cadre rouge est moins haut que l'image des livre juste en-dessous. Du coup c'est ça qui me bloque :/
C'est bien cela oui ! Par contre, les mots restent assez gros par rapport au cadre, je pense que je vais changer la taille de la police. J'ai reçu aucune indication sur celle-ci dans l'énoncé, mais la mienne m'a l'air plus grosse qu'eux, regarde :
Donc si je comprends bien, du côté HTML, j'avais juste mis le <span> en trop, et du côté CSS,y'avait donc le border à enlever et quelques modifs niveaux px, ok...
J'ai mis des <p> car dans l'exemple à reproduire, il n'y a pas de puce, or dans ma formation jusqu'à maintenant, je n'ai vu que les listes à puces "obligatoires".
Merci palmito, je m'occuperai alors de ça vers la fin, je ne savais pas
Dernière petite chose, je n'arrive pas à centrer les mots entre les pointillés blancs dans le cadre rouge. J'ai réglé plusieurs fois les px dans le CSS mais impossible de faire comme dans l'exemple. Savez-vous où je dois agir pour bien centrer ? Voilà ce que ça me donne actuellement (j'ai réduit la police au passage) :
Quand tu n'as qu'une seule ligne tu peux utiliser line-height.
Si la hauteur de ton container est par ex de 50px tu lui précises un line-height a lui aussi de 50px
Sinon, pour des cas plus "complexe" avec plusieurs ligne,par exemple un container contenant plusieurs ligne de texte tu peux utiliser flexbox (soit avec margin: auto ou align-items: center)
Par contre, j'ai du faire une fausse manip, car si le haut est réglé, ça m'a dérégélé deux autres choses....Je suis dessus depuis plusieurs heures et je m'en sors pas...encore une truc tout bête j'imagine...
Y'a une page ou j'ai créé un tableau et impossible de le mettre à un padding-left: 40px; comme tout le reste de la page (sauf l'encadré rouge du haut). Je sais pas pourquoi il reste collé à gauche !
De plus, mon pied de page gris est venu se planter au milieu, malgré les padding-left:0px également !!
Je comprends donc plus, en réglant le problème pour le cadre rouge, ça me dérègle ces autres choses ! Voici mes codes :
Un grand merci à toi exen ! (excuse-moi pour le retard de la réponse). Par contre, je n'arrive toujours pas à remettre mon pied-de-page gris à gauche (là il est centré), tu aurais un conseil sur ce que je devrai modifier ?
Nouveau problème lol, tous mes Div/cadre sont collés à gauche. Encore un détail tout bête mais je comprends pas comment les mettre plus à droite...
<!Doctype html>
<html>
<head>
<title> COUPS DE COEUR </title>
<link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>
<img id="image1" src="logo.gif" width="200" height="84" alt="code-1" title="code-3"/>
<br>
<br>
<h3><div class="rouge">Coups de coeur</div></h3>
<div class="content-container">
<p><font size="-1"> Accueil </font></p>
<p><font size="-1"> Présentation</font></p>
<p><font size="-1"> Informations pratiques</font></p>
<p><font size="-1"> Evènements</font></p>
<p><font size="-1"> Nos coups de coeur</font></p></div>
<img id="image2" src="bandeau.jpg" width="960" height="150" alt="code-1" title="code-3"/>
<br>
<br>
<br>
<br>
<h2>Lecture du soir : Nietsche</h2>
<font size="-1"><p>Cette semaine, votre libraire vous invite à lire un aphorisme de Nietzsche au moment du coucher.<p></font>
<div class="content-container3"> <i>Si le bonheur était véritablement désirable pour l'être humain,<br>
l'idiot représenterait incontestablement le plus beau spécimen<br>
de la race.</i> </div><br>
<br>
<div class="content-container3"> <i>Plus nous nous élevons et plus nous paraissons petits à ceux qui ne savent pas voler.</i></div>
<h2>Lecture au quotidien : Montaigne</h2>
<p>Chaque jour Montaigne nous démontre que ce qui tient lieu de boussole n'indique pas toujours le nord.</p>
<div class="content-container3"> <i>Qui craint de souffrir souffre déjà de ce qu’il craint.</i></div><br>
<br>
<div class="content-container3"> <i>Les hommes (dit une sentence grecque ancienne) sont <br>
tourmentés par les opinions qu'ils ont des choses, non par les <br>
choses mêmes.</i></div>
<h2>Lecture de saison : Machiavel</h2>
<p>Lorsque la saison est froide, lisons Machiavel en guise de boisson chaude. Lorsque la saison est chaude, relisons-le tout simplement.</p>
<div class="content-container3"> <i> Quand il s'agit d’offenser un homme, il faut le faire de telle <br>
manière qu'on ne puisse redouter sa vengeance. </i></div><br>
<br>
<div class="content-container3"> <i>Un acte de justice et de douceur a souvent plus de pouvoir sur <br>
le coeur des hommes que la violence et la barbarie. homère lisant l'Odyssée une mosaïque représentant l'Odyssée </i></div>
<br>
<br>
<br>
<br>
<br>
<div class="content-container2">
<span style="color:#FF0000;"><font size="-1">Librairie l'indépendante - 26, allée du Sphinx - 45020 Tournepioche</font></span>
</div>
</body>
</html>
Mon petit blog
Mon petit blog
Compos sui.