[CSS] Problème d'alignement d'un H6 dans un LI

Problème d'alignement d'un H6 dans un LI [CSS] - HTML/CSS - Programmation

Marsh Posté le 29-11-2004 à 16:27:46    

Salut, j'ai un petit problème con de positionnement CSS :
 
Voilà la CSS : (après 25000 modifs :))

Code :
  1. #listart2
  2. {
  3. font-size:12px;
  4. color: Black;
  5. }
  7. #listart2 ul
  8. {
  9. border: 0px solid #00000;
  10. list-style-type: none;
  11. }
  13. #listart2 li
  14. {
  15. padding: 5px;
  16. margin-bottom: 2px;
  17. background-color: #F2F2F4;
  18. }
  21. #listart2 a
  22. {
  23. font-size:12px;
  24. color: Black;
  25. display: block;
  26. }
  28. #listart2 h6
  29. {
  30. width: 75px;
  31. display: block;
  32. float: left;
  33. }


 
Le HTML :

Code :
  1. <DIV id="listart2">
  2.    <UL>
  3.     <LI><H6>27/01/2004</H6><A   href="/elysee/site/francais/interventions_du_president/discours/2004/janvier/discours_de_monsieur_jacques_chirac_president_de_la_republique_a_l_occasion_de_la_reunion_des_entreprises_signataires_du_pacte_mondial.1929.html">Discours   de Monsieur Jacques CHIRAC Président de la République à l'occasion de la   réunion des entreprises signataires du Pacte Mondial</A> </li>
  4.     <LI><H6>26/01/2004</H6><A  href="/elysee/site/francais/interventions_du_president/discours/2004/janvier/allocution_de_monsieur_jacques_chirac_president_de_la_republique_lors_du_dîner_d_etat_offert_en_l_honneur_de_monsieur_hu_jintao_president_de_la_republique_populaire_de_chine_et_de_madame_liu_yongqing.183.html">Allocution   de Monsieur Jacques CHIRAC, Président de la République, lors du dîner d'Etat   offert en l'honneur de Monsieur HU Jintao Président de la République populaire   de Chine et de Madame LIU Yongqing </A></li>
  5.    </UL>
  6.   </DIV>


 
Le but du jeu, c'est de mettre le texte à droite de la date, qu'il passe en dessous. (date dans une marge si vous préférez).
J'ai tout essayé et je n'y arrive pas.
Le HTML ne peut pas être modifié, il est généré automatiquement par un CMS dont nous n'avons pas les sources.


Message édité par Arjuna le 29-11-2004 à 16:28:22
Reply

Marsh Posté le 29-11-2004 à 16:27:46   

Reply

Marsh Posté le 29-11-2004 à 16:37:17    

enlève les display: block sur ton <a> et ton <h6> (les h sont en block par défaut de toute façon), display:inline sur le h6 et ajoutes un margin-right (tes h6 sont des dates, dont taille fixe, dans l'idéal utilise une font monospace pour être sur)
 
en tout cas j'ai tout testé avec le float, impossible d'en faire un truc utilisable

Code :
  1. #listart2
  2. {
  3.     font-size:12px;
  4.     color: Black;
  5. }
  7. #listart2 ul
  8. {
  9.     border: 0px solid #00000;
  10.     list-style-type: none;
  11. }
  13. #listart2 li
  14. {
  15.     padding: 5px;
  16.     margin-bottom: 2px;
  17.     background-color: #F2F2F4;
  18.     display: block;
  19. }
  22. #listart2 a
  23. {
  24.     font-size:12px;
  25.     color: Black;
  26.     margin-left: 60px;
  27. }
  29. #listart2 h6
  30. {
  31.     display: inline;
  32. }


je pense que ca rend à peu près comme tu le veux


Message édité par masklinn le 29-11-2004 à 16:40:51

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

Marsh Posté le 29-11-2004 à 16:40:15    

-- Edit : Je teste --


Message édité par Arjuna le 29-11-2004 à 16:42:48
Reply

Marsh Posté le 29-11-2004 à 16:42:17    

Arjuna a écrit :

Actuellement, ça donne ça :
 
http://magicbuzz.multimania.com/elysee.png


le but c'est de retrouver cet effet?


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

Marsh Posté le 29-11-2004 à 16:43:13    

Masklinn a écrit :

le but c'est de retrouver cet effet?


Non, justement, le texte, quand il passe à la ligne, doit rester à droite de la date.

Reply

Marsh Posté le 29-11-2004 à 16:44:22    

Avec ce que tu m'as dit, c'est pareil mais en pire : le premier retraît est plus grand, mais le retour à la ligne passe en dessous de la date.
 
Il faudrait que ça fasse comme si j'avais un tableau avec deux TD dans mon LI en fait.


Message édité par Arjuna le 29-11-2004 à 16:44:57
Reply

Marsh Posté le 29-11-2004 à 16:49:26    

Arjuna a écrit :

Avec ce que tu m'as dit, c'est pareil mais en pire : le premier retraît est plus grand, mais le retour à la ligne passe en dessous de la date.
 
Il faudrait que ça fasse comme si j'avais un tableau avec deux TD dans mon LI en fait.


ok, je vois mieux...
 
bon ben je me remet à chercher [:nik166]
 
display: run-in ca pourrait servir.
Pas de bol, ni Firefox ni IE ne le gèrent (par contre Opera oui [:ddr555] )


Message édité par masklinn le 29-11-2004 à 16:54:40

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

Marsh Posté le 29-11-2004 à 16:53:54    

Arf ! Je suis reparti de ton truc, en modifiant un peu.
 

Code :
  1. #listart2
  2. {
  3.     font-size:12px;
  4.     color: Black;
  5. }
  7. #listart2 ul
  8. {
  9.     border: 0px solid #00000;
  10.     list-style-type: none;
  11. }
  13. #listart2 li
  14. {
  15.     padding: 5px;
  16.     margin-bottom: 2px;
  17.     background-color: #F2F2F4;
  18.     display: block;
  19. }
  22. #listart2 a
  23. {
  24.     font-size:12px;
  25.     color: Black;
  26.     display: block;
  27.     margin-left: 70px;
  28. }
  30. #listart2 h6
  31. {
  32.     display: inline;
  33.     float: left;
  34. }


 
Et c'est presque bon, j'ai juste un petit retrait à la con :D
 
Par contre je sais pas d'où il vient :/
 
http://magicbuzz.multimania.com/elysee2.png
 
-- edit : image changée, je m'étais planté :D --


Message édité par Arjuna le 29-11-2004 à 16:55:44
Reply

Marsh Posté le 29-11-2004 à 16:55:14    

quel retrait? entre la date et le texte?


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

Marsh Posté le 29-11-2004 à 16:56:06    

T'ain, mais il est con mon IE ou alors c'est mon FTP, je vois pas l'image que j'ai envoyé :o

Reply

Marsh Posté le 29-11-2004 à 16:56:06   

Reply

Marsh Posté le 29-11-2004 à 16:57:48    

Voilà, l'image est à jour

Reply

Marsh Posté le 29-11-2004 à 17:00:30    

Bon, c'est relou, j'ai mis :
 

Code :
  1. text-indent: -4px;


 
Dans le " #listart2 a " et c'est bon [:spamafote]
 
Je cherche plus à comprendre :D

Reply

Marsh Posté le 29-11-2004 à 17:04:07    

url de la page que je teste kthxstp :o


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

Marsh Posté le 29-11-2004 à 17:16:57    

Sinon, on a un gros problème (qui n'a rien à voir)
 
Sur mon bureau, lorsque j'ai fait mes modifs de CSS, mon éditeur a généré une ligne "<?xml version="1.0" encoding="UTF-8"?>"
Seulement, l'outils de CMS qu'on utilise la vire à chaque fois.
 
Et du coup, ma moitié des styles marchent pas ! :cry:
 
Je dirais juste que je pète les plombs.
Une idée de comment corriger le problème ?
 
Si vous voulez, je peux vous poster une page complète avec un style complet, mais ça risqued'être un peu incompréhensible :D

Reply

Marsh Posté le 29-11-2004 à 17:21:31    

Arjuna a écrit :

Sinon, on a un gros problème (qui n'a rien à voir)
 
Sur mon bureau, lorsque j'ai fait mes modifs de CSS, mon éditeur a généré une ligne "<?xml version="1.0" encoding="UTF-8"?>"
Seulement, l'outils de CMS qu'on utilise la vire à chaque fois.
 
Et du coup, ma moitié des styles marchent pas ! :cry:
 
Je dirais juste que je pète les plombs.
Une idée de comment corriger le problème ?
 
Si vous voulez, je peux vous poster une page complète avec un style complet, mais ça risqued'être un peu incompréhensible :D


hahaha pwned
le prologue XML fait passer IE en mode quirk (et il a souvent besoin de ca pour rendre une page [:cupra] ), si il y est pas et que t'as un DOCTYPE qui fait passer MSIE en Strict, DTC [:itm]  
 
Pour plus d'infos sur les modes Quirks/Stricts


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

Marsh Posté le 29-11-2004 à 17:26:16    

Moi sur mon PC j'ai ça :
 

Code :
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  3. <!-- saved from url=(0127)/elysee/site/francais/interventions_du_president/discours/2004/janvier/sommaire_janvier.12337.html -->
  4. <HTML>


 
Et sur le serveur, il vire la première ligne :/


Message édité par Arjuna le 29-11-2004 à 17:27:13
Reply

Marsh Posté le 29-11-2004 à 22:01:02    

je vais surement dire une connerie mais quel est l'intérêt d'un prologue XML avec un doctype HTML ?


---------------
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 29-11-2004 à 22:38:34    

Mjules a écrit :

je vais surement dire une connerie mais quel est l'intérêt d'un prologue XML avec un doctype HTML ?


 [:figti]  
c'est effectivement... pas une connerie (j'ai pas vu, l'habitude de doctyper en xhtml).
 
Aucun je dirais [:cupra]


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

Marsh Posté le 30-11-2004 à 00:18:35    

Ben avec ça marche, et sans ça marche pas [:spamafote]

Reply

Marsh Posté le 30-11-2004 à 00:18:52    

Je vous poste le code demain matin.

Reply

Marsh Posté le 30-11-2004 à 15:07:14    

Arjuna a écrit :

Ben avec ça marche, et sans ça marche pas [:spamafote]


c'est bizarre, IE est pourtant censé appliquer le modèle de boite Microsoft dans le cas d'un doctype transitionnal  
c'est comme un doctype strict ou là, quand tu as ce prologue, IE passe en mode de rendu Quirk au lieu d'appliquer le mode strict (c'est un bug de IE et en mode Quirk, IE utilise le modèle de boite Microsoft au lieu du modèle de boite standard)
http://openweb.eu.org/articles/dimensions_boites_css/


---------------
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 30-11-2004 à 15:40:43    

Ouais mais ça n'a pas de rapport, c'est carrément des border qui zappent...

Reply

Marsh Posté le 30-11-2004 à 15:45:07    

PS: Maintenant, j'ai posté le problème ici (mieu expliqué)
 
http://forum.hardware.fr/hardwaref [...] 0702-1.htm
 
Là, je suis en train de bosser sur une autre page (même template) et là, IE, avec ou sans le commentaire en en-tête, affiche correctement, alors que Moz fait un grand total n'importe quoi.
 
Seule différence, cette fois j'ai ce doctype :
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
Alors que l'autre c'est :
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

Reply

Marsh Posté le 30-11-2004 à 15:45:33    

PS: c'est quoi ce dtd "loose" ?

Reply

Marsh Posté le 30-11-2004 à 15:47:48    

en fait, là je sais même plus quel est le problème
 
 en tout cas, un prologue xml sur un document HTML  c'est AMHA  au mieux inutile, au pire, générateur de problèmes


---------------
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 30-11-2004 à 15:48:40    

Arjuna a écrit :

PS: c'est quoi ce dtd "loose" ?

c'est la DTD qui correspond au type HTML 4.01 transitionnal ; si je ne m'abuse, les 2 sont équivalents


---------------
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 30-11-2004 à 22:43:04    

Mjules a écrit :

en fait, là je sais même plus quel est le problème
 
 en tout cas, un prologue xml sur un document HTML  c'est AMHA  au mieux inutile, au pire, générateur de problèmes


Ca avait l'avantage de faire croire à IE qu'il n'y avait pas de doctype, et du coup ma CSS marchait.
 
Vous l'aurez compris, j'ai fini par comptre la raison du porquoi du comment, et je suis passé en strict ou chais plus quoi. Ca marche bien maintenant : j'ai entre les mains le premier site web 100% W3C compliant qui ne fonctionne qu'avec IE [:alphat]
 
J'ai tenté de rémédier au problème, et au bout d'une heure sous IE ça merdait autant que sous Moz, et Moz marchait pas mieu (voir pire), du coup je laisse comme c'était. Tant pis.
 
Le je pars en clientèle, jusqu'à la fin de la semaine prochaine, et ce sera mis en ligne à la fin de la semaine, trop tard pour changer [:spamafote]
 
Le client est ravi, c'est le principal : (véridique)

Citation :

Ah bon ? On peut mettre des couleurs sur un site web ???"


:pt1cable:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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