28172 sujets

CSS et mise en forme, CSS3

Mise en page css

Bonjour,

1) je pense que l'utilisation de la balise <pre> (qui met en forme le texte tel qu'il est dans le code de la page) doit beaucoup au fait que ton texte déborde, puisqu'elle ne retourne à la ligne que lorsque tu es vraisemblablement retourné à la ligne dans ton code... soit tu gère ton texte de sorte que ça ne déborde pas (bidouillage), soit tu peux utiliser une ou plusieurs balises <p> (paragraphe) qui elles, prendrons toute la largeur du conteneur dans lesquelles elle se trouvent.

2) Sans vouloir avancer de bêtises, la balise <pre> ne doit pas contenir de balise de type "titre" <h1>, <h2>,... et <ol>, <ul>... tu devrais déjà commencer par mettre les titres et listes avant et non dans <pre></pre>.
Je pense que tu n'as pas besoin des balises <pre> à chaque fois, pense plutôt à mettre en forme tes titres et listes...
Ensuite, je pense que tu pourras gérer plus facilement les margin et padding, des différents éléments.

En espérant ne pas avancer de bêtises, mais je pense que tu devrais y voir plus clair
Bonjour,

Comme l'a souligné Caporal, tu utilise des balises pour leur rendu graphique et non pour leur sens sémantique, et c'est pas bien.

Utilise des <p> à la place des <pre>.

Pour l'espacement avec tes textes bleus, tu l'as toi même défini : 
h4, h5, h6 {
	margin: 1em 0 .5em 0; 
	color: #0000FF;	
}

ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0; 
}


D'ailleurs, là encore tu utilise des balises pour leur rendu à l'écran et non pour leur sens sémantique (dans ta page tu as h3, puis h5 et h6).


Pour éviter tout problème, je te conseille fortement de corriger les 43 erreurs de ton code.

Un autre conseil en passant, essaye d'externaliser tes styles CSS en les mettants dans un fichier css dédié, cela diminuera le poids de ta page, permettra de mettre ces styles en caches et de les réutiliser pour une autre page.
Modifié par Laurie-Anne (10 Jun 2009 - 08:37)
Bonjour Marie-anne, Bonjour Caporal,

Merci pour votre aide.

Pour régler le problème du débordement j'ai remplacé pre par une classe .texte
est-ce correct comme solution ?

J'ai mis des ancres pour passer de l'énoncé à la solution et vice versa
est-ce aussi correct comme solution ?

Comment mettre les ancres sur la même ligne que les titres avec une police plus petite ?

Pour la sémantique et la correction des erreurs je vais m'y atteler.

Pour la page css c'est prevue, la page que j'édite est une page d'essai.

Je joins le lien de ma page.
http://arsf.free.fr/Informations/Groupe-Reflexion/Groupe-Reflexion-3.html


Salutations
Bonjour,

J'ai regardé rapidement, je prendrai le temps de regarder plus amplement plus tard...
Mais déjà je peux dire que c'est mieux avec les balises <p>, que tu peux également leur appliquer la classe .texte si tu veux pour la même mise en forme que tes <div>...
Par contre, les titres <h1>, <h2>,... n'ont pas besoin d'être dans une <div> titre, il en faut pas en mettre partout! tu as déjà de quoi mettre en forme les balises <Hx> sans en rajouter
La mise en place de signet est très bien, mais faut pas que ça devienne brouillon et que l'on ne sache plus où l'on est... peut être changer le code couleur entre les énigmes et solutions (c'est juste un point de vue). Côté technique, tu n'as pas besoin de tout ça pour ton signet, pas de <div> signet, par 36 liens... juste une balise auquel tu appliques une id et un lien #signet
ce qui donne

<a id="sig3" href="#sig8" class="signet">Solution Enigme n° 2</a>

au lieu de ça:

<div class="signet">
	<a name="sig3" id="sig3"></a><a href="#sig8">Solution Enigme n° 2</a>
</div>


Et pour l'envoi vers la réponse, je te suggère de glisser l'id sigx plutôt sur le titre ou sur le div qui comprends tout le block si tu en as un (comme ci-dessous) et non sur le lien, donc le code que je t'ai donné plus haut aura une erreur, et donnera donc par exemple pour une énigme 1 et sa réponse:

<div class="texte" id="sign2">
    <h3>Enigme 1</h3>
<a href="#sig2">Solution</a>
<h5>...</h5>
<ul>	
<li>...</li>
<li>...</li>
</ul>
</div>

<div class="reponse" id="sign2">
    <h3>Solution de l’énigme n° 2</h3>
<a href="#sig1">Enoncé de l’énigme n° 2</a>
<p>...</p>
<p>.../p>
</div>


Qui est beaucoup plus clair que ça:


<div class="titre">
    <h3>Enigme 1</h3>
</div>
    <div class="signet">
	<a name="sig1" id="sig1"></a><a href="#sig2">Solution</a>
</div>
<div class="texte">
<h5>...</h5>
<ul>	
<li>...</li>
<li>...</li>
</ul>
</div>

<div class="titre">
    <h3>Solution de l’énigme n° 1</h3>
</div>
<div class="signet">
<a name="sig2" id="sig2"></a><a href="#sig1">Enoncé de l’énigme n° 1</a>
</div>
<div class="reponse">
<p>...</p>
<p>.../p>
</div>
Bonsoir Caporal,

Merci pour tes explications.

J'ai mis une div au titre car je voudrais avoir le lien réponse et énoncé a droite du titre
et dans la zone de couleur jaune.

Comment faire autrement ?

Pour les signet est-ce que chaque signet doit avoir un nom différent ?

Salutations
Bien le bonjour,

Je suis retourné voir...
Alors comment faire autrement... ça marche aussi en glissant ton titre et ton texte (solution ou réponse) dans une seule <div> afin de ne pas les multiplier... puis à ton lien tu appliques un "float: right;" et tu devrais avoir sensiblement le même rendu en réglant les marges...
Je ne pense pas que tu aies corrigé tes signets de la façon expliqué plus haut par contre...

Oui, il faut que chaque signet ait un nom différent, ça serait compliqué si en voulant la réponse à l'énigme 1, je me retrouve à la réponse 6...?
Mais à ces signets (ces lien du coup si tu fais ça bien), tu peux leur appliquer la même classe avec les "float: right;" qui vont bien, le tout dans une seule <div> qui englobe titre et texte...

Tu me dis si je ne suis pas clair.
Bonsoir Caporal,

Merci pour tes explications et ta patience, mais je n’arrive pas mettre le lien sur la même ligne
que le titre.

Quand au lien je ne sais pas si c’est correct ce que j’ai fait ?

Salutations
Bonjour,

En attendant la réponse de caporal pour l'alignement des ancres,
je voudrais continuer le post en corrigeant les erreurs que ma signalé
Laurie-Anne et je commence par ces deux lignes que je n'arrive pas à corriger:

Line 360, Column 7: document type does not allow element "ul" here; assuming missing "li" start-tag 
   <ul>&#9993; 
 Line 364, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag 
<li>LBC002 	523 :</li>  &#9993; 
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. 

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").


Merci pour votre aide.

Salutations
Le problème viens de ce genre de lignes : 
<ul>
<li>LBC001	432 :</li>
   <ul>
      <li>75/25=3 ;  5+3=8 ;  100+8=108:5–1=4 ; 108*4=432</li>
   </ul>

Ici ton premier <ul> contient un <li> et un <ul> alors qu'il ne peux contenir QUE des <li>.
Tout comme les éléments <li> doivent obligatoirement être contenu dans un élément <ul>.
Bonsoir Laurie-Anne,

Merci pour ton aide pour la correction de mes erreurs.

Il ne me reste plus que 12 erreurs à traiter.

Pour la balise marquée je crois savoir que les validateurs ne l’acceptent pas,
mais comment faire autrement ?

Pour les autres « lignes 250, 251, 520 » a-tu quelques explications à me donner ?

Par ailleurs est-ce que mon Doc-Type est correct ?

Salutations.
Sujet clos
Aller à