28221 sujets

CSS et mise en forme, CSS3

[résolu] Couper une liste en deux

Voila un titre bien nul, mais bon.

Donc j'ai le code suivant :


<ul id="board">
	<li>Nombre d'utilisateurs enregistrés : [2]</li>
	<li>Nombre de client dans la boutique : [1]</li>
	<li>Nombre de produits disponibles à la vente : [0]</li>
	<li>Chiffre d'affaires de la journée : [x]</li>
	<li>Chiffre d'affaires du mois en cours : [x]</li>
	<li>Chiffre d'affaires cumulé : [x]</li>
</ul>


je cherche à savoir si il est possible de présnter cette liste en affichant les 3 premières lignes à coté des 3 dernières comme si elles étaient dans deux cellules de tableaux ?

merci
Modifié le 15 Nov 2004 - 13:31
Une idée à creuser, je n'ai pas testé :
- enchasser les trois premiers items dans un div 1
- enchasser les trois suivants dans un div 2
- appliquer un float left sur div 1
Modifié le 15 Nov 2004 - 13:08
je comprends le principe, mais je cherche en fait à savoir si sans toucher le code, il est possible d'imaginer ou pas de faire çà... C plus pour me donner des bases de reflexions autour des possibilités des CSS..

à l'heure actuelle quand je réfléchis au look d'un site, je fais une maquette 100% photoshop, mais je ne quite presque jamais de vue qu'il va falloir transcrire cette maquette en une réalité fonctionnelle.

Mainteant je souhaite pourvoir à terme continuer à utiliser cette méthode, mais avec le repect des normes en plus. inévitablement je vais me casser les dents de temps à autres, mais dans un premier temps je penses qu'il est quand même bon de savoir de manière générique ce qui est faisable ou pas.

Dans un deuxième temps, avec de l'expérience, je serais surement plus tranquille à ce sujet.

je vois plutot les feuilles de style comme un libération et non une limitation comme je le lis de temps à autres...
Pour couper une liste en deux, suffit de la couper en deux.


<ul [b][#red]id="board"[/#][/b] class="left"> [b][#red]/* voir autocorrection plus bas */[/#][/b]
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

<ul [b][#red]id="board"[/#][/b] class="right"> [b][#red]/* voir autocorrection plus bas */[/#][/b]
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>




#board { 
   property: value; 
}

ul.left { 
   float: left; 
}

ul.right { 
   float: right; 
}


À voir absolument :
http://css.maxdesign.com.au/

<autocorrection>
Puisque le "id" est un sélecteur à usage unique, une petite manipulation s'impose.
</autocorrection>


<ul id="boardleft">
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

<ul id="boardright">
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>




#boardleft { 
   float: left; 
   property: value; 
}

#boardright { 
   float: right; 
   property: value; 
}

Modifié le 15 Nov 2004 - 14:12
héhéhé... c'est certain que de cette manière çà ne peut que fonctionner..


je cherchais juste à savoir si du point de vue de la présentation il était possible de faire ce genre de choses .

merci
Modifié le 15 Nov 2004 - 13:35
Stephan a écrit :


#boardleft { 
   float: left; 
   property: value; 
}

Tiens... ca fait quoi ca "property: value;"? Je ne connais pas cette propriété en CSS.

EDIT: ha ben j'etais bien dans le gaz moi en posant cette question tiens... Comme quoi, lire le forum entre deux quêtes de NWN, c'est pas vraiment une bonne idée Smiley fou
Modifié le 15 Nov 2004 - 22:56
Stephan a écrit :
Pour couper une liste en deux, suffit de la couper en deux.




Smiley biggrin Oui ! Mais si on préfère couper les cheveux en quatre ?

<ul>
<li style="float:left;">item</li>
<li style="margin-left:50px;">item</li>
<li style="clear:both; float:left;">item</li>
<li style="margin-left:50px;">item</li>
<li style="clear:both; float:left;">item</li>
<li style="margin-left:50px;">item</li>
<li style="clear:both; float:left;">item</li>
<li style="margin-left:50px;">item</li>
</ul>
çà c'est du grand art...

çà va bien dans le sens de ce que je cherche à faire -> être le plus libre possible quant à la mise en page post création d'un doc...

super tips.
Merci
Sujet clos
Aller à