28172 sujets

CSS et mise en forme, CSS3

Mise en ligne bloc li

bonsoir a tous, voila j'aimerais alligner une serie d'element li a qui j'ai mi la tete au carrée. 


<ol>
<li><a>blablabla 1</a></li>
<li><a>blablabla 2</a></li>
<li><a>blablabla 3</a></li>
<li><a>blablabla 4</a></li>
</ol>



li {
	display: block; 
	width: 70px;
	height: 70px; 
	background:#ffffff; 
	border: 1px solid gray; 
	margin: 10px;
	padding: 2px;
}


merci a tous pour votre aide
Modifié par worms30 (06 Jul 2012 - 23:34)
salut,

si tu veux dire alignés sur l'horizontal, vite fait qque chose comme :

li {
        float: left;
	/*display: block;
	width: 70px;
	height: 70px;*/ 
	background:#ffffff; 
	border: 1px solid gray; 
	margin: 10px 20px 10px;
	padding: 2px;
}
	
	li a { display: block; width: 70px; height: 70px; }


en prenant soin de rétablir le flux par la suite avec (une classe) "clearfix" qui va bien.
A+
Administrateur
jmlapam a écrit :
Ou du inline-block en display cela marche très bien aussi.


Pour résumer :
- float : sort du flux, ça va toujours compliquer la vie
- display: inline-block : pourquoi pas mais pas compatible nativement IE6/IE7
- display: inline : parfait si tu n'as pas besoin de donner une taille (width, height) aux li
Salut a tous et merci pour votre aide. En effet ton code "o06" fonctionne au poil mais comme le dit Raphael l’élément li sort du flux. comme remédier a ça svp. o006 tu parle d'un clearfix, mais comment cela s'utilise concrètement? Si non inline-block ?
Clearfix c pour retablir le flux des elements situes apres tes flotants ex:clear:both juste apres
sinon le mieux cest inline car par defaut ul est de type block

si apres tu leur specifie une largeur display:inline-block est plus indique
disons que ce type de positionnement combine les deux

si tu veux rendre ca compatible ie7 il faut mettre
li{display:inline;zoom:1;}

dsl j ecris depuis mon webphone
bonsoir,

pour que ce soit compatible IE6/7 , la structure est tout a fait adapté pour générer une feuille de style qui conviendra a tous:
li {display:inline;}
li a {display:inline-block;}


Cordialement
@gc-nomade : +1

Raphael a écrit :

- display: inline-block : pourquoi pas mais pas compatible nativement IE6/IE7


Sur les éléments qui sont nativement de type inline ou inline-block c'est parfaitement compatible IE6 et 7.
Modifié par jb_gfx (10 Jul 2012 - 03:17)
salut a tous et encore merci pour votre aide, mais j'avoue ne plus vous suivre. Je suis novice en la matière et même si nombreux tutos aborde le sujet j'avoue etre quelques peut perdu dans tout ça . Je comprend en effet qu'il existe divers pratique pour mètre l’élément li en bloc . Mais pourriez vous apporter des exemples de code css suivant cet exemple de liste afin d y voir plus clair Smiley langue

Par ailleurs "o06" je n'est pas non tout fais compris comment ce servir de la propriété clearfix et me suis servis de ceci afin de mètre a la ligne l'élément sortant lpacé en dessous 

<h2 style="clear:left;">


merci a tous pour votre aide
Vous etes au poil Smiley cligne
Modifié par worms30 (10 Jul 2012 - 19:45)
bonsoir,

j'ai aussi un doute finalement Smiley smile , a tu un croquis à montrer histoire de bien saisir quel genre(s) d'alignement(s) tu recherches ?

++
La guerre du positionnement fait rage depuis les evoquations recentes des valeurs table cell et Inline-block

Surtout table cell qui permet de reproduire les positionnements des vieilles tables html sans contraintes de largeur et autres(ie8 et > )

on pourrait en creer un debat au bar

sinon pour que l on t aide envoie nous une image de l effet recherche
Modifié par phpCbien (10 Jul 2012 - 20:45)
phpCbien a écrit :
T sur¿ ^^
Smiley lol

inline normal mais inline-block non!


Bon je répète : inline-block fonctionne parfaitement sous IE6 et IE7 sur les éléments de type inline et inline-block. Et oui j'en suis sûr, ça fait au moins 8 ans que je l'utilise sans aucun problème.
Hello

Pour résumer si tu veux utiliser les flottants

li{
float: left;
width: 70px;
height: 70px;
border: 1px solid grey /* grey et pas gray */
margin-right: 10px /* enfin tu mets ce que tu veux */
}

.clear{
clear: both;
}

et en dessous de ta liste, tu mets une div vide avec la classe clear, comme ceci :
<div class="clear"></div>

Et voilà, ça devrait faire l'affaire.
Administrateur
jb_gfx a écrit :


Sur les éléments qui sont nativement de type inline ou inline-block c'est parfaitement compatible IE6 et 7.

la question porte bien sur des li, n'est-ce pas ?
Raphael a écrit :


la question porte bien sur des li, n'est-ce pas ?

moui ...
worms30 a écrit :
bonsoir a tous, voila j'aimerais alligner une serie d'element li a qui j'ai mi la tete au carrée. 


&lt;ol&gt;
&lt;li&gt;&lt;a&gt;blablabla 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;blablabla 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;blablabla 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;blablabla 4&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;



li {
	display: block; 
	width: 70px;
	height: 70px; 
	background:#ffffff; 
	border: 1px solid gray; 
	margin: 10px;
	padding: 2px;
}


merci a tous pour votre aide


sauf que le topic s'est alimenter tout seul et que la description de son problème est bien floue ... Smiley smile pour lui proposer une approche simple et efficace.
Le seul truc que je ne voit pas remettre en cause est la structure HTML, quant aux styles (quoi et comment), depend de ce qu'il essaie de faire réellement Smiley smile
Modifié par gc-nomade (11 Jul 2012 - 19:49)
Sujet clos
Aller à