[Résolu] id, comment ne pas le répéter.

id, comment ne pas le répéter. [Résolu] - HTML/CSS - Programmation

Marsh Posté le 20-06-2005 à 20:54:25    

Bonjour tout le monde,
 
comme vous pouvez le voir ci-dessous, j'ai 2 ul qui prennent l'id "sous-li" (en fait c'est pour les li) et ça c'pas bien.
 
HTML :
 <ul>
  <li>Belgique, Bruxelles :</li>
   <ul id="sous_li">
    <li>Bruxelles,</li>
    <li>Grand Place,</li>
    <li>Serres royales de Laeken,</li>
    <li>Jardin botanique.</li>
   </ul>
  <li>Belgique, côte belge.</li>
  <li>France : Lyon.</li>
  <li>France, Charente Maritime :</li>
   <ul id="sous_li">
    <li>Plage et forêt de la Coubre,</li>
    <li><a href="charente_maritime/brouage_00.php">Brouage [GV]</a>,</li>
    <li>Carrelets,</li>
    <li>Autres.</li>
   </ul>
  <li>France : Toulouse.</li>
  <li>France : Calanques...</li>
  <li><a href="flore/index.php">Flore</a>.</li>
  <li><a href="yeux/index.php">Yeux</a>.</li>
  <li>Divers.</li>
 </ul>
 
CSS :
#sous_li li
 {
 background: none;
 padding-left: 10px;
 font-size: 1.2em;
 padding-top: 0px;
 padding-bottom: 0px;
 }
 
Donc en fait c'est pour que mes li à l'intérieur de ces 2 ul héritent de la classe ci-dessus (et donc pour éviter encore plus de répétition du même id sur chaque li).
 
Pourriez-me dire s'il est possible d'éviter cette répétition ?
 
Merci.


Message édité par Beral2 le 20-06-2005 à 21:57:29
Reply

Marsh Posté le 20-06-2005 à 20:54:25   

Reply

Marsh Posté le 20-06-2005 à 20:57:41    

utilise une classe :
<ul class="sous-li">


Message édité par Mjules le 20-06-2005 à 20:57:59

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 20-06-2005 à 20:57:55    


Pourquoi t'en utilises pas une, de classe? [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-06-2005 à 20:59:05    

Merci, je voulais savoir s'il était possible d'éviter les classes, j'ai tout fait avec des id pour l'instant... mais si pas l'choix, pas l'choix.
 
Sinks.

Reply

Marsh Posté le 20-06-2005 à 21:00:12    

pourquoi tu veux les éviter ?


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 20-06-2005 à 21:01:34    

Je n'sais pas, j'trouvais ça plus "classe" les id ;)
 
Mais merci, je vais donc les utiliser.

Reply

Marsh Posté le 20-06-2005 à 21:02:45    

ça sert pas à la même chose :
un id est là pour nommer une partie de façon unique
une classe est là pour montrer l'appartenance à un groupe avec les mêmes caractéristiques.


Message édité par Mjules le 20-06-2005 à 21:02:52

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 20-06-2005 à 21:03:11    

ben les id pour définir un élément à occurence unique dans la page, les classes pour des éléments pouvant être présent plusieurs fois.
 
Donc faut utiliser les id ou les classes quand il faut point.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-06-2005 à 21:03:29    

Beral2 a écrit :

Merci, je voulais savoir s'il était possible d'éviter les classes, j'ai tout fait avec des id pour l'instant... mais si pas l'choix, pas l'choix.
 
Sinks.


Beral2 a écrit :

Je n'sais pas, j'trouvais ça plus "classe" les id ;)
 
Mais merci, je vais donc les utiliser.


C'est pas une question de "choix" ou de "classe", c'est une question d'utiliser les bons outils pour les bons boulots [:petrus75]
 
Tu ne plantes pas tes clous avec un tournevis, si? ben là c'est pareil [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-06-2005 à 21:08:20    

ok, ok je les utilise (.sous_li).
 
Sinks everibaudi.

Reply

Marsh Posté le 20-06-2005 à 21:08:20   

Reply

Marsh Posté le 20-06-2005 à 21:33:26    

Je vais vous embêter encore un peu, les ul à l'intérieur de li (pas le contraire), c'est non-conforme ?
J'ai l'impression que http://validator.w3.org/ n'aime pas ça :
Line 63, column 6: document type does not allow element "UL" here; assuming missing "LI" start-tag
 
Line 72, column 6: document type does not allow element "UL" here; assuming missing "LI" start-tag

Reply

Marsh Posté le 20-06-2005 à 21:46:38    

Ton ul est une liste qui est élément de la liste mère.
 
Donc ton <ul> doit etre dans un <li>
 
Edit : comme la : http://www.pompage.net/pompe/deroulants/


Message édité par plainsofpain le 20-06-2005 à 21:48:37

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-06-2005 à 21:56:47    

Merci plainsofpain, c'est nickel, avec les class et les li comme il faut :
 
<ul>
  <li>Belgique, Bruxelles :
   <ul>
    <li class="sous_li">Bruxelles,</li>
    <li class="sous_li">Grand Place,</li>
    <li class="sous_li">Serres royales de Laeken,</li>
    <li class="sous_li">Jardin botanique.</li>
   </ul>
  </li>
  <li>Belgique, côte belge.</li>
  <li>France : Lyon.</li>
  <li>France, Charente Maritime :
   <ul>
    <li class="sous_li">Plage et forêt de la Coubre,</li>
    <li class="sous_li"><a href="charente_maritime/brouage_00.php">Brouage [GV]</a>,</li>
    <li class="sous_li">Carrelets,</li>
    <li class="sous_li">Autres.</li>
   </ul>
  </li>
  <li>France : Toulouse.</li>
  <li>France : Calanques...</li>
  <li><a href="flore/index.php">Flore</a>.</li>
  <li><a href="yeux/index.php">Yeux</a>.</li>
  <li>Divers.</li>
 </ul>

Reply

Marsh Posté le 20-06-2005 à 21:58:44    

Reply

Marsh Posté le 20-06-2005 à 22:10:48    

par contre les classes... [:pingouino]
 
1- Donnes un nom utile, "sous-li" ça veut strictement rien dire [:petrus75]
2- Donnes une classe au "ul" parent, pas à chaque "li", ça permet de simplifier lourdement le markup et de réduire sa taille


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-06-2005 à 22:17:41    

Je vais regarder mais je crois que je ne peux pas parce que pour mes sous_li j'ai un "background: none;" (les li "normales" ont une image de fond, en fait un GIF 7x7 2 couleurs pour faire une "bullet" plus jolie).
Mais je regarde qd-même.

Reply

Marsh Posté le 20-06-2005 à 22:19:20    

Beral2 a écrit :

Je vais regarder mais je crois que je ne peux pas parce que pour mes sous_li j'ai un "background: none;" (les li "normales" ont une image de fond, en fait un GIF 7x7 2 couleurs pour faire une "bullet" plus jolie).


Et alors? [:gratgrat]  
 
Faut utiliser l'héritage gamin :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-06-2005 à 22:21:51    

Merci m'sieur, nickel, c'est la bonne ce coup là.

Reply

Marsh Posté le 20-06-2005 à 22:24:44    

Poste le code, qu'on puisse encore te taper dessus :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-06-2005 à 22:27:42    

C'est parti :
 
HTML:
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html lang="fr">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <link rel="stylesheet" type="text/css" href="../css/css.css">
  6. <link rel="stylesheet" type="text/css" href="../css/css_pages_principales.css">
  7. <title>Section photographies.</title>
  8. <meta name="description" content="Site présentant des travaux autour de la photographie et de l'image 3D. Des reportages photographiques y sont publiés : Nouvelle-Calédonie, Berlin, Suisse, Espagne... il contient également un Curriculum Vitae.">
  9. <meta name="keywords" content="photographie, image, 3d, synthèse, reportage, curriculum, vitae, nouvelle-calédonie, berlin, suisse, cursus, formation">
  10. <meta name="robots" content="index, follow, all">
  11. </head>
  12. <body>
  13. <?php readfile('../include/include.txt'); ?>
  14. <div id="contenu">
  15. <div id="contenu_taille">
  16. <h1>...&nbsp;SECTION PHOTOGRAPHIES&nbsp;...</h1>
  17. <h2>Index des sets de photographies.</h2>
  18. <p>Ceux-ci sont classés en 2 catégories :</p>
  19. <ul>
  20.  <li>La catégorie “indépendante” répertorie des photographies classées par thème. Celles-ci peuvent avoir été prises à des endroits et des moments différents, ce à l'intérieur d'un même thème.</li>
  21.  <li>La catégorie “chronologique” répertorie des photographies prises en un seul et même endroit, dans un laps de temps défini et fini : séjour. Les photographies seront alors classées par ordre chronologique, un peu à la manière d"un “carnet de route”.</li>
  22. </ul>
  23. <br>
  24. <p>Les photographies seront souvent accompagnées de commentaires.</p>
  25. <ul>
  26.  <li>Mention [GV], commentaires issus ou inspirés des <em>“Guides Verts”</em>, éditions Michelin.</li>
  27.  <li>Mention [DC], commentaires issus ou inspirés des <em>“Découvertes Calédonniennes”</em>, éditions Planète Mémo.</li>
  28. </ul>
  29. <br>
  30. <p>Les photographies présentes sur ce site ne sont pas libres de droit et ne peuvent donc pas être réutilisées sans autorisation.</p>
  31. <br>
  32. <br>
  33. <div id="colonne_b">
  34. <h3>Chronologique</h3>
  35. <ul>
  36.  <li>Nouvelle-Calédonie.</li>
  37.  <li>Berlin.</li>
  38.  <li>Suisse.</li>
  39.  <li>Roumanie.</li>
  40.  <li>France, Bretagne - Espagne, Galice en bateau.</li>
  41. </ul>
  42. </div>
  43. <div id="colonne_a">
  44. <h3>Indépendante</h3>
  45. <ul>
  46.  <li>Belgique, Bruxelles :
  47.   <ul class="sous_li">
  48.    <li>Bruxelles,</li>
  49.    <li>Grand Place,</li>
  50.    <li>Serres royales de Laeken,</li>
  51.    <li>Jardin botanique.</li>
  52.   </ul>
  53.  </li>
  54.  <li>Belgique, côte belge.</li>
  55.  <li>France : Lyon.</li>
  56.  <li>France, Charente Maritime :
  57.   <ul class="sous_li">
  58.    <li>Plage et forêt de la Coubre,</li>
  59.    <li><a href="charente_maritime/brouage_00.php">Brouage [GV]</a>,</li>
  60.    <li>Carrelets,</li>
  61.    <li>Autres.</li>
  62.   </ul>
  63.  </li>
  64.  <li>France : Toulouse.</li>
  65.  <li>France : Calanques...</li>
  66.  <li><a href="flore/index.php">Flore</a>.</li>
  67.  <li><a href="yeux/index.php">Yeux</a>.</li>
  68.  <li>Divers.</li>
  69. </ul>
  70. <br>
  71. <ul>
  72.  <li>Les amis : partie privée.</li>
  73. </ul>
  74. </div>
  75. </div>
  76. </div>
  77. </body>
  78. </html>


Message édité par Beral2 le 20-06-2005 à 22:28:40
Reply

Marsh Posté le 20-06-2005 à 22:42:18    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Doctype strict mieux, pas de raison de laisser le transitional :o
 
le head est pas indenté, il est puni?

<br>


inutile

 <li>Mention [GV], commentaires issus ou inspirés des <em>“Guides Verts”</em>, éditions Michelin.</li>
  <li>Mention [DC], commentaires issus ou inspirés des <em>“Découvertes Calédonniennes”</em>, éditions Planète Mémo.</li>


Les <em> sont mal utilisés. Ici tu ne mets pas l'accent sur quelque chose, tu cites des noms. <cite> serait probablement plus approprié

<br>
[...]
 <br>
 <br>


toujours inutile

<div id="colonne_b">
[...]
 <div id="colonne_a">


nommage non significatif:  

  • Eviter les données de présentation dans le markup (colonne n'est qu'une manière d'afficher la chose)
  • Quand tu reprendras ce site dans quelques mois, te souviendras tu du sens sémantique et logique de ces zones?

  <ul class="sous_li">
   <ul class="sous_li">


mauvais nommage, non informatif, non sémantique, inutile

<br>


 http://rulzofpunk.free.fr/smileys/batte_fou.gif
 
vala vala


Message édité par masklinn le 20-06-2005 à 22:42:34

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-06-2005 à 22:51:48    

on a le droit de fermer un li en html ? il me semblait que c'était juste en xhtml


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 20-06-2005 à 22:55:49    

je corrige tout ça, par contre, pour sauter une ligne dans du texte, <br> ça ne va pas ? <p>&nbsp;</p> ?

Reply

Marsh Posté le 20-06-2005 à 22:58:13    

Mjules a écrit :

on a le droit de fermer un li en html ? il me semblait que c'était juste en xhtml


genre <li></li>?
 
Bien sûr qu'on a le droit [:mlc]  
 
La différence c'est qu'en XHTML, dans la mesure où c'est du XML, on est obligé de le faire.
 
En HTML tu peux ne pas le fermer, et le navigateur va essayer de le fermer à ta place, mais ça peut mener à des trucs bizarres et le gain n'est pas bien grand. Autant fermer tous les éléments non vides (éléments vides = éléments n'ayant pas d'enfants, les <meta> et les <link> sont des éléments vides par exemple).
 
En HTML
Elements non vides => Mieux vaut les fermer (<elm>blabla</elm> ), peuvent ne pas être fermés le navigateur doit les fermer lui même
Elements vides => ne pas les fermer (<elm> )
 
En XHTML
Elements non vides => Doivent être fermés (<elm>blabla</elm> )
Elements vides => Doivent également être fermés (<elm/> )
Pour les éléments vides en XHTML, on laisse habituellement un espace avant la fermeture (<elm /> ): ce n'est pas incompatibles avec la norme XML et ça permet aux navigateurs ne comprenant pas le XML/XHTML de les reconnaître comme des balises HTML classique (c'est un hack/bug issu des propriétés des éléments SGML, les navigateurs HTML étant des parsers SGML)
 
Attention, cas particulier pour la balise <script>: elle est définie uniquement comme un élément non vide, donc on doit utiliser <script type="text/javascript" src="blabla"></script> et non pas <script type="text/javascript" src="blabla"> (HTML) ou <script type="text/javascript" src="blabla"/> (XHTML)

Beral2 a écrit :

je corrige tout ça, par contre, pour sauter une ligne dans du texte, <br> ça ne va pas ? <p>&nbsp;</p> ?


C'est pire [:spamafote]  
 
T'as pas à "sauter des lignes" (sauf, là encore, dans certains cas bien précis type poésie où la fin de ligne a un sens et est importante dans le cadre du contenu), si tu veux mettre de l'espace entre tes éléments c'est du présentationel, joue avec les marges (margin) et/ou les paddings


Message édité par masklinn le 20-06-2005 à 22:59:45

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-06-2005 à 00:01:59    

Hum, comme je veux remplacer mes "Transitional" et mes "em" dans plusieurs pages (et oui, j'en ai fait plein de pas bien), connaissez-vous un bon remplaceur de chaînes de caractères (type "Search and Replace" ) svp ?

Reply

Marsh Posté le 21-06-2005 à 08:07:45    

notepad++ -> rechercher/remplacer :p
 
Edit adresse : http://notepad-plus.sourceforge.net/fr/site.htm


Message édité par plainsofpain le 21-06-2005 à 08:08:42

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 21-06-2005 à 10:39:13    

Excuse-moi, il permet le remplacement de chaînes dans plusieurs fichiers à la fois ?
De plusieurs lignes de code à la fois ?

Reply

Marsh Posté le 21-06-2005 à 11:59:16    

bah, via une expression régulière alors :p


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed