Alignement contenu liste <li> et div float: left

[NesheK]

Bonjour tout le monde,

Voici mon problème, j'ai besoin de faire une liste de type <li> et qu'au bout de chaque ligne de cette liste s'affiche un petit texte tout à droite et ce sans passer par un tableau, donc avec float: right.

Dans la théorie, j'y arrive en créant une classe que j'applique à un div mais le problème est que je me retrouve avec un décalage vertical entre le texte de la liste et le contenu du div en float. Pour un exemple concret, regardez la position du mot "test" en cliquant ici.

J'utilise une feuille de style, voici la portion qui nous intéresse :

/* Style général */

p, li { font-family: Verdana, Arial, Helvetica, sans-serif; color:#82919A; font-size:1em; line-height: 19px; }

/* Aligement des éléments par float */

.mp3-right {font-family: Verdana, Arial, Helvetica, sans-serif; color:#82919A; font-size:1em; line-height: 19px; float: right; }

et la façon dont j'appelle dans la page :

<li>Texte</li><div class="mp3-right">test</div>

Est-ce que quelqu'un aurait la solution pour corriger mon problème sachant que je dois conserver les attributs CSS de li ?

Grand merci pour votre aide,

Amicalement,

Robin.

Modifié 17 Novembre 2008 par NesheK

[Dan]

Je suis loin d'être une "pointure" en CSS, mais tu pourrais mettre la partie droite dans une <div> et jouer sur le "padding-top" de celle-ci (ou sur le margin-top).

My 2 cents Dudu pourra probablement être plus "propre"...

Dan

[NesheK]

Merci pour ta réponse !

Mais quand on joue sur le padding-top ou le margin-top, la valeur que l'on entre est relative à quoi ?

[Dan]

Relatives par rapport au bord supérieur de la <div> sans margin ou padding.

Essaie déjà avec un margin-top:0px et padding-top:0px ... tu pourras ensuite augmenter le margin-top jusqu'à aligner les 2 blocs.

C'est ce que je ferais, mais je t'ai dit que ce n'était pas ma spécialité !

http://www.aidenet.com/css/css40a.htm

[NesheK]

Ok je vais essayer ça, merci ! Je vous tiens au courant !

EDIT : Avec le margin-top et padding-top à 0px, rien ne change ! Et si je leur attributs de "vraies" valeurs (> 0) c'est encore pire, logique...

Je tourne en rond depuis le début de l'aprem et ce n'est pas faute d'avoir cherché !

Modifié 17 Novembre 2008 par NesheK

[Dan]

Essaie avec "margin-top:-15px" ... cela devrait te donner à peu de chose près un alignement correct. (moins 15 px)

[NesheK]

Oui, effectivement en ajustant un peu ça le fera je pense !

Merci pour le tuyaux !

Il doit y avoir plus "propre", nan ? :S

Et encore une question : Si je veux rajouter un deuxième div en float à droite, comment gérer l'espacement entre les deux ?

Réponse : en mettant un margin-left !

Modifié 17 Novembre 2008 par NesheK

[NesheK]

Par contre, ce qui devait se produire, se produit ! Les div sont décalés en fonction de la longueur de leur contenu avec le margin-left ! Voir ici. Et sous FireFox ça se chevauche carrément !

Comment faire ?

Modifié 17 Novembre 2008 par NesheK

[NesheK]

Ils se chevauchent aussi sous IE8 mais pas avec IE7...

Voici les codes visibles sur la page de test

.mp3-date {font-family: Verdana, Arial, Helvetica, sans-serif; color:#82919A; font-size:1em; text-align: right; line-height: 19px; float: right; width: 70px; margin-top:-19px; margin-left:30px;}
.mp3-artiste {font-family: Verdana, Arial, Helvetica, sans-serif; color:#82919A; font-size:1em; text-align: left; line-height: 19px; float: right; margin-top:-19px;}

<div class=\"mp3-date\">$date_affich</div><div class=\"mp3-artiste\">$resultat->artiste</div>

A noter également que tous les navigateurs se foutent de mon "text-align : left" spécifié pour le div contenant le nom de l'artiste...

Merci pour vos réponse !

[pif_125]

Tu as essayé avec une structure comme ca :

<ul style="float:left;">

<li>sqd</li>

<li>qsd</li>

</ul>

<div style="text-align:right;">

<p>jhkhkh</p>

<p>kljfsdf</p>

</div>

[NesheK]

Nan car je n'ai pas encore compris à quoi servait exactement la balise <ul> !

Merci, je vais essayé ça !

EDIT : Je pense à un truc, ça ne change pas le fait que j'ai besoin de deux div en float ! Et que deux div en float se chevauchent forcément, que ce soit sous FF ou sous IE8 (sur IE7 ça va à peu près...)...

Modifié 18 Novembre 2008 par NesheK

[Dudu]

Salut

Dudu pourra probablement être plus "propre"...

À défaut de faire plus propre, j'aurais surtout fait autrement avec deux listes (donc deux <ul>) différentes. Une à gauche, une à droite.

C'est ce qui me parait le plus simple vu ce que NesheK semble vouloir faire.

Et surtout pas le moindre <div>, je les fuis comme la peste. C'est la balise à utiliser lorsque vraiment il n'y en a pas d'autre possible.

Bon courage NesheK, tu deviendras bientôt "l'expert (XHTML-CSS) de la maison-mère, à qui on la fera pas à l'envers"

[NesheK]

LoL Dudu !! Merci pour ta réponse ! Je vois que tu t'y connais aussi en NTM !

Ok, je vais chercher du côté des <ul> dès demain, je reposterai pour dire si j'ai trouvé une solution ou pour poser de nouvelles questions en fonction de ce que j'aurai appris des <ul> (que je découvre !) !

Merci à vous tous,

@ très vite,

NesheK.

[lapin7]

Bonjour,

je tombe sur ce sujet par hasard...

déjà il faut mettre des balises d'ouverture et de fermeture pour tes listes à puces mais là n'est pas le sujet du post.

liste non ordonnée (à utiliser en général)

<ul>
<li></li>
<li></li>
</ul>

liste ordonnée (un peu plus spécifique, donne l'ordre des éléments, je ne m'en sers pratiquement jamais)

<ol>
<li></li>
<li></li>
</ol>

un peu de lecture à ce sujet ici

pour ton problème :

pourquoi ne pas mettre les deux dans la même div ?

remplacer

<div class="mp3-date">15/08/2008</div><div class="mp3-artiste">DJ James</div>

par

<div class="mp3-date">15/08/2008 - DJ James</div>

s'il te faut absolument les deux "div" tu peux peut-être les imbriquer

une div float left avec tes 2 à l'intérieur. ex :

<div class"jeflotteadroite"><div class="mp3-date">15/08/2008</div><div class="mp3-artiste">DJ James</div></div>

avec mp3-date float left et mp3-artiste float right si tu as les deux div mp3 qui se décale l'une en-dessous l'autre tu dois pouvoir régler ça en leur rajoutant une position relative.

tiens-nous au courant