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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Problème d'alignement d'un H6 dans un LI

Arjuna

Aircraft Ident.: F-MBSD

Salut, j'ai un petit problème con de positionnement CSS :

Voilà la CSS : (après 25000 modifs )

Code :

#listart2
{
font-size:12px;
color: Black;
}
#listart2 ul
{
border: 0px solid #00000;
list-style-type: none;
}
#listart2 li
{
padding: 5px;
margin-bottom: 2px;
background-color: #F2F2F4;
}
#listart2 a
{
font-size:12px;
color: Black;
display: block;
}
#listart2 h6
{
width: 75px;
display: block;
float: left;
}

Le HTML :

Code :

<DIV id="listart2">
<UL>
<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>
<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>
</UL>
</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

Publicité

masklinn

í dag viðrar vel til loftárása

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 :

#listart2
{
font-size:12px;
color: Black;
}
#listart2 ul
{
border: 0px solid #00000;
list-style-type: none;
}
#listart2 li
{
padding: 5px;
margin-bottom: 2px;
background-color: #F2F2F4;
display: block;
}
#listart2 a
{
font-size:12px;
color: Black;
margin-left: 60px;
}
#listart2 h6
{
display: inline;
}

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

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?

Arjuna

Aircraft Ident.: F-MBSD

-- Edit : Je teste --

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

masklinn

í dag viðrar vel til loftárása

Arjuna a écrit :

Actuellement, ça donne ça :

http://magicbuzz.multimania.com/elysee.png

le but c'est de retrouver cet effet?

Arjuna

Aircraft Ident.: F-MBSD

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.

Arjuna

Aircraft Ident.: F-MBSD

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

masklinn

í dag viðrar vel til loftárása

Arjuna a écrit :

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

Arjuna

Aircraft Ident.: F-MBSD

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

Code :

#listart2
{
font-size:12px;
color: Black;
}
#listart2 ul
{
border: 0px solid #00000;
list-style-type: none;
}
#listart2 li
{
padding: 5px;
margin-bottom: 2px;
background-color: #F2F2F4;
display: block;
}
#listart2 a
{
font-size:12px;
color: Black;
display: block;
margin-left: 70px;
}
#listart2 h6
{
display: inline;
float: left;
}

Et c'est presque bon, j'ai juste un petit retrait à la con

Par contre je sais pas d'où il vient

-- edit : image changée, je m'étais planté --

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

masklinn

í dag viðrar vel til loftárása

quel retrait? entre la date et le texte?

Arjuna

Aircraft Ident.: F-MBSD

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

Publicité

Arjuna

Aircraft Ident.: F-MBSD

Voilà, l'image est à jour

Arjuna

Aircraft Ident.: F-MBSD

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

Code :

text-indent: -4px;

Dans le " #listart2 a " et c'est bon [:spamafote]

Je cherche plus à comprendre

masklinn

í dag viðrar vel til loftárása

url de la page que je teste kthxstp

Arjuna

Aircraft Ident.: F-MBSD

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

masklinn

í dag viðrar vel til loftárása

Arjuna a écrit :

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

Arjuna

Aircraft Ident.: F-MBSD

Moi sur mon PC j'ai ça :

Code :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>

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

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

Mjules

Parle dans le vide

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.

masklinn

í dag viðrar vel til loftárása

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]

Arjuna

Aircraft Ident.: F-MBSD

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

Arjuna

Aircraft Ident.: F-MBSD

Je vous poste le code demain matin.

Mjules

Parle dans le vide

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.

Arjuna

Aircraft Ident.: F-MBSD

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

Arjuna

Aircraft Ident.: F-MBSD

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

Arjuna

Aircraft Ident.: F-MBSD

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

Mjules

Parle dans le vide

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.

Mjules

Parle dans le vide

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.

Arjuna

Aircraft Ident.: F-MBSD

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:

Publicité

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 texte	problème de date
Bords arrondis avec CSS 2.1	Problè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érialisation	Probleme class java + windows xp
Plus de sujets relatifs à : [CSS] Problème d'alignement d'un H6 dans un LI

Page générée en 0.127 secondes