Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
743 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°910399
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 16:27:46  profilanswer
 

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
mood
Publicité
Posté le 29-11-2004 à 16:27:46  profilanswer
 

n°910408
masklinn
í dag viðrar vel til loftárása
Posté le 29-11-2004 à 16:37:17  profilanswer
 

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
n°910414
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 16:40:15  profilanswer
 

-- Edit : Je teste --


Message édité par Arjuna le 29-11-2004 à 16:42:48
n°910416
masklinn
í dag viðrar vel til loftárása
Posté le 29-11-2004 à 16:42:17  profilanswer
 

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
n°910417
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 16:43:13  profilanswer
 

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.

n°910418
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 16:44:22  profilanswer
 

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
n°910425
masklinn
í dag viðrar vel til loftárása
Posté le 29-11-2004 à 16:49:26  profilanswer
 

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
n°910433
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 16:53:54  profilanswer
 

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
n°910437
masklinn
í dag viðrar vel til loftárása
Posté le 29-11-2004 à 16:55:14  profilanswer
 

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
n°910441
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 16:56:06  profilanswer
 

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

mood
Publicité
Posté le 29-11-2004 à 16:56:06  profilanswer
 

n°910443
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 16:57:48  profilanswer
 

Voilà, l'image est à jour

n°910447
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 17:00:30  profilanswer
 

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

n°910453
masklinn
í dag viðrar vel til loftárása
Posté le 29-11-2004 à 17:04:07  profilanswer
 

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
n°910474
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 17:16:57  profilanswer
 

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

n°910478
masklinn
í dag viðrar vel til loftárása
Posté le 29-11-2004 à 17:21:31  profilanswer
 

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
n°910484
Arjuna
Aircraft Ident.: F-MBSD
Posté le 29-11-2004 à 17:26:16  profilanswer
 

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
n°910730
Mjules
Parle dans le vide
Posté le 29-11-2004 à 22:01:02  profilanswer
 

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.
n°910847
masklinn
í dag viðrar vel til loftárása
Posté le 29-11-2004 à 22:38:34  profilanswer
 

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
n°910969
Arjuna
Aircraft Ident.: F-MBSD
Posté le 30-11-2004 à 00:18:35  profilanswer
 

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

n°910971
Arjuna
Aircraft Ident.: F-MBSD
Posté le 30-11-2004 à 00:18:52  profilanswer
 

Je vous poste le code demain matin.

n°911268
Mjules
Parle dans le vide
Posté le 30-11-2004 à 15:07:14  profilanswer
 

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.
n°911304
Arjuna
Aircraft Ident.: F-MBSD
Posté le 30-11-2004 à 15:40:43  profilanswer
 

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

n°911309
Arjuna
Aircraft Ident.: F-MBSD
Posté le 30-11-2004 à 15:45:07  profilanswer
 

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">

n°911310
Arjuna
Aircraft Ident.: F-MBSD
Posté le 30-11-2004 à 15:45:33  profilanswer
 

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

n°911314
Mjules
Parle dans le vide
Posté le 30-11-2004 à 15:47:48  profilanswer
 

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.
n°911315
Mjules
Parle dans le vide
Posté le 30-11-2004 à 15:48:40  profilanswer
 

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.
n°911637
Arjuna
Aircraft Ident.: F-MBSD
Posté le 30-11-2004 à 22:43:04  profilanswer
 

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:

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Probleme de switch et variable contenant du texteproblème de date
Bords arrondis avec CSS 2.1Problème de lien avec dreamweaver
probleme balise <div>[delphi] probleme de mise à jour d'un edit
Probléme de calques[CSS]calque relatif aligné en bas de la page
Probleme de sérialisationProbleme class java + windows xp
Plus de sujets relatifs à : [CSS] Problème d'alignement d'un H6 dans un LI

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.095 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR