[RESOLU] Mettre deux <li> cote a cote

Salut tous le monde.

Oui je sais, ceux qui liront le message se moqueront peut etre, car il suffit de faire un display:inline, ou un float:left... si je viens ici c'est que j'ai essayé la plupart des choses que j'ai trouver sur ce forum ou sur le web en général.

mise en condition, voici une bref image de mon HTML, plus clair au moins :

donc voila, nous voyons la hiérarchie div / div / ul / li. quand je met un display inline, la seul chose que ça fait, c'est enlever la couleur et les bordure de mes li, car en faite ce sont des article, mis l'un en dessous de l'autre (que j'aimerais mettre deux par deux).

le display block me fais un block pas de soucis, et mon float:left; me rétrécie mon bloc, me change sa taille, si je met un float left a tout mes <li> il reste tous rétrécie les uns en dessous des autres. la seul possibilité reste le position:absolute.

Mais je peux pas me permettre de faire la position absolute, car après je dois générer des article et ils doivent se positionné là où il faut (soit sur la liste de gauche, soit sur la liste de droite, ce qui n'est pas le cas pour le moment, y'a meme pas de droite ou gauche )

Personnellement je pence fortement que ce soucis à un rapport avec mes classes, ou mes <div> au dessus de <ul> (voir photo). Enfin, je (display:)block, blague a part.

Si quelqu'un veut bien prendre la peine de m'aider, je serais très ravi. Je vous remercie d'avoir pris le temps de lire mon soucis (même pour ceux qui ne répondent pas )

Cordialement,
Modifié par JuseN (06 Jun 2012 - 11:40)

hum... après je peux toujours essayé de mettre chaque <li> dans une cellule de tableau, ce qui me ferais un tableau "par ligne" contenant deux cellules cote a cote, et une <li> dans chaque cellules, mais je trouve que sa surcharge beaucoup...

display:inline-block ET float:left ?

Bonjour

JuseN a écrit :
donc voila, nous voyons la hiérarchie div / div / ul / li. quand je met un display inline, la seul chose que ça fait, c'est enlever la couleur et les bordure de mes li, car en faite ce sont des article, mis l'un en dessous de l'autre (que j'aimerais mettre deux par deux).

En effet display: inline n'est pas très adapté… ce serait plutôt inline-block en l'occurence

JuseN a écrit :
le display block me fais un block pas de soucis, et mon float:left; me rétrécie mon bloc, me change sa taille, si je met un float left a tout mes &lt;li&gt; il reste tous rétrécie les uns en dessous des autres. la seul possibilité reste le position:absolute.

L'autre solution est en effet float. Qui va prendre la taille minimale dont il a besoin, celle-ci pouvant être choisie par une bonne vieille valeur pifométrique par le navigateur, suivant les cas.
Heureusement, on dispose de la propriété width, qui nous permet de fixer le problème à des valeurs plus précises.

a écrit :
hum... après je peux toujours essayé de mettre chaque <li> dans une cellule de tableau, ce qui me ferais un tableau "par ligne" contenant deux cellules cote a cote, et une <li> dans chaque cellules, mais je trouve que sa surcharge beaucoup... ohwell

C'est la troisième solution, utiliser display:table et famille en css.

Naemesis a écrit :
display:inline-block ET float:left ?

Oui deja essayer, j'ai parler un peu vite, j'ai écris display:inline, mais j'ai également essayer le inline-block.

kustolovic a écrit :
L'autre solution est en effet float. Qui va prendre la taille minimale dont il a besoin, celle-ci pouvant être choisie par une bonne vieille valeur pifométrique par le navigateur, suivant les cas.
Heureusement, on dispose de la propriété width, qui nous permet de fixer le problème à des valeurs plus précises.

Alors oui, j'ai mis un width avec mon float:left, cela m'a bien régler ma taille (j'avais bien oublier ce bon vieux widht, merci) mais après.
Du coup, mon premier article, ou mon premier <li> à un float:left et un widht:420px.

Maintenant mon deuxième article, dois'je lui mettre la même chose, car même avec un float left, il reste en dessous du premiers... hum.. je continue mes test de mon coté.

JuseN a écrit :

Du coup, mon premier article, ou mon premier &lt;li&gt; à un float:left et un widht:420px.

Maintenant mon deuxième article, dois'je lui mettre la même chose, car même avec un float left, il reste en dessous du premiers...

La même chose ou une autre valeur, c'est question de ton visuel. Ce qu'il faut c'est que la largeur de tes 2 divs + les margin, paddings et borders soit inférieure ou égale à la largeur de la div contenante. Sinon elles passent en-dessous de l'autre

Bien, j'essaye tous ça et je te tiens au courant.
Merci, cordialement,

Bon personnellement j'ai rajouté ça (j'ai surligner ce que j'ai rajouté) :



Donc on voit que j'ai rajouter deux DIV (surtout pour le test, car uniquement sur les deux premier LI je l'ai est mis), dans ses deux DIV, j'ai rajouter du CSS (je sais c'est moche de mettre du style="" dans le html) mais avec dreamweaver c'est bien pratique pour tester en live).

ben mon résultat c'est ça :



CLIQUER POUR AGRANDIR;

donc bon... sont toujours l'un en dessous de l'autre

je suis obliger de garder des LI, car dans mon CSS.css y'a beaucoup de ".nomclasse li" concernant justement ces LI.
Modifié par JuseN (05 Jun 2012 - 11:31)

et si tu mets les styles dircetement sur les li ? histoire que ca fasse pas nimp d'intercaller des div entre les li.

D'autant plus que syntaxiquement, ce n'est plus correct, car les seuls éléments que peuvent contenir les éléments ul et ol sont des élements li, et rien d'autre.

La preuve en DTD HTML 4 :

<!ELEMENT UL - - (LI)+                 -- unordered list -->

Et en documentation HTML5

http://www.w3.org/TR/html-markup/ul.html a écrit :
Permitted contents
zero or more li elements

Tous deux tirés de w3.org

Edit : Les éléments menus peuvent également contenir des li (je l'apprends à l'instant)
Modifié par Gothor (05 Jun 2012 - 11:51)

Naemesis a écrit :
et si tu mets les styles dircetement sur les li ? histoire que ca fasse pas nimp d'intercaller des div entre les li.

deja fait. mais je vais réessayer avec deux trois modif. (comme par exemple enlever les DIV )

Gothor a écrit :
seuls éléments que peuvent contenir les éléments ul et ol sont des élements li, et rien d'autre.

Autant pour moi, je pensais que même les DIV passées.


Merci de vos réponse
Cordialement,

À première vue j'aurais tendance à penser que la largeur de ton conteneur (en l'occurrence la balise <ul>) a une largeur inférieur à la somme de deux enfants (<li>), ce qui fait que tes blocs n'ayant pas la place de se placer les uns à côté des autres se retrouvent les uns en dessous des autres.

Exemple :

<ul style="display:block; width:500px;">
	<li style="display:block; float:left; width:225px;">Hello</li>
	<li style="display:block; float:left; width:225px;">world</li>
</ul>

Attentions de prendre en compte dans les calcules de largeur les padding, margin et border de tes éléments qui vont s'additionner à leur largeur.

moust a écrit :
la largeur de ton conteneur (en l'occurrence la balise <ul>) a une largeur inférieur à la somme de deux enfants (<li>)

Oué , j'ai pensé ça aussi. le code je le reprend (je suis en stage, et c'est mon maitre de stage qui à fait le site en copiant collant d'un autre site, il s'y connait en rien niveau programmation WEB, même si ce n'est que du HTML/CSS)

du coup je pence que je vais péter son code (car trop de tableau dans des tableau on dirait du web 1.0) et recommencé. dès que j'ai trouver la solution à mon problème de toute façon je reviens ici prévenir.

Merci de ta réponse,
Cordialement,

Voila cmt la position est de base (capture depuis dreamweaver) :



et si je rajoute ce que tu m'a dis moust :



donc bon...je pence que sa vient comme je disait, des tableau dans un tableau, dans une cellulles de tableau qui se trouve lui même dans un tableau, bref... l’errance pour tous reconstruire.

Bon... ben j'vais péter un câble...

je suis nul en CSS et j'ai du me farcir les 6 fichier de ... 1000 - 2000 lignes chacun pour voir une erreur

ça m'a pris depuis ce matin 9H, y'avais du clear:both pour mes liste.. Oh my god pourquoi je ne l'ai pas vu plus tot.

du coup c'est bon , ça fonctionne le cote a cote. j'ai mis deux UL (ou plus par la suite) chacun contenant deux LI.

Merci a tous ceux on essayé de m'aider, a bientôt et bonne continuation.
Cordialement.