28173 sujets

CSS et mise en forme, CSS3

Puces décallées à gauche

Je viens d'avancer dans mes div... Pas toujours très évident quand on débute (oui, j'ai décidé de bannir les tableaux). J'ai voulu ajouter une liste de puce (qui viennent se placer dans mon bloc2). Mais le problème, c'est que la puce s'affiche à gauche en dehors du bloc en question....

Donc, mon code css


.puce1 {
	display: list-item;
	align:justify;
	padding-left:0;
        list-style-image: url(http://codep54f.easy-hebergement.info/Photos/go.gif);
	}


Et dans ma page html

				<ul class="puce1">
					<li>Texte</li>
				</ul>

Si vous pouviez m'aider ça serait sympa.
Bonjour,

.puce1 {
	display: list-item;
        list-style-image: url(http://codep54f.easy-hebergement.info/Photos/go.gif);
	}

Et ça devrait le faire.
Houlà stop, on se calme !

display: list-item, c'est déjà le mode d'affichage par défaut des éléments li. C'est donc inutile. De plus, l'appliquer à ul, il faudrait que je vérifie dans les spécifications (ce que je ne vais pas faire, vu que là dans deux minutes je compte aller me coucher), mais ça me semble casse-gueule. Il me semble que les ul sont par défaut en affichage de type bloc, et que les faire passer en affichage de type item de liste n'est pas recommandé.
http://wiki.media-box.net/documentation/css/display

Attention également aux padding et margin left pour les listes (ul et ol) : suivant les navigateurs, le retrait à gauche d'une liste ordonnée ou non est réalisé avec un margin-left ou un padding-left. Si on veut s'éloigner du comportement par défaut (supprimer, réduire ou augmenter le décalage), il faudra préciser à la fois margin et padding, pour la compatibilité entre les navigateurs.

Remarque : la propriété CSS align n'existe pas. La propriété pertinente est peut-être text-align.

Enfin, si on supprime le retrait à gauche de la liste, la puce risque de sortir du bloc, effectivement. Voir à ce sujet la propriété list-style-position.
http://wiki.media-box.net/documentation/css/list-style-position
Merci de vos éclairages ! J'ai pu avancer un peu... Ma puce est bien dans mon bloc 2. Par contre, j'en ai une qui s'affiche sans rien à côté. J'ai vérifié et je n'ai pas de "puce vierge".


.puce1 {
	text-align:justify;
	list-style-position: inside;
        list-style-image: url(http://codep54f.easy-hebergement.info/Photos/go.gif);
	}


Dernière Minute : C'est bon, la puce vierge a disparue !
Modifié par Mouse54200 (22 Nov 2006 - 09:50)
Mouse54200 a écrit :
Merci de vos éclairages ! J'ai pu avancer un peu... Ma puce est bien dans mon bloc 2. Par contre, j'en ai une qui s'affiche sans rien à côté. J'ai vérifié et je n'ai pas de "puce vierge".

Voir ce que je disais ci-dessus à propos du display: list-item appliqué à ul. Tu avais donc affiché à l'écran :
- la puce de ul (déclaré en display: list-item) ;
- la puce de li (par défaut en display: list-item).
Modifié par mpop (22 Nov 2006 - 10:58)
Encore un petit problème avec les puces. Sous Firefox aucune problème. J'ai bien un léger espace entre la puce et le début de mon texte... Par contre sur IE, tout est collé. Est-ce que quelqu'un sait d'où ça peut venir ?
Je ne comprend rien du tout. Et pour être honnête, IE commence à me les casser sérieusement !!

Voilà mon code css

.puce1 {
	text-align:justify;
	padding-left:0px;
	margin-left:0px;
	list-style-position: inside;
        list-style-image: url(http://codep54f.easy-hebergement.info/Photos/go.gif);
	}


et voilà la parte html

<div class="puce1">
	<li>Concentration Départementale Route</li>
	<li>Concentration Départementale VTT</li>
</div>
a écrit :
Et pour être honnête, IE commence à me les casser sérieusement !!


Oui, pour etre honnete c'est mon cas, et je pense le cas de beaucoup de personnes tu sais, tu n'est pas seul !!!!

Maintenant c'est normal aussi, une liste c'est un <ul> ou un <ol> par exemple, et les <li> sont les éléments de liste, tu devrais donc avoir :

HTML

<ul class="puce1">
<li>Concentration Départementale Route</li>
<li>Concentration Départementale VTT</li>
</ul>


Sachant que <ul> est de type block et que tu peut le positionner comme un <div>.

CSS :
.puce1 {
text-align:justify;
padding-left:0px !important; /*Lu uniquement par Firefox*/
padding-left:20px;               /*Lu uniquement par IE*/
margin-left:0px;
list-style-image:url(http://codep54f.easy-hebergement.info/Photos/go.gif);
}


Avec ça tu controle l'espacement entre la puce et le texte de ton <li> indépendamment sur les deeux browsers.

A savoir qu'ensuite, pour faire bien et aller au devant d'eventuels problèmes il faut deplacer les regles spécifiques à IE via une feuille de style prévue juste pour lui (IE) via des commentaires conditionnels.

Avec ce genre de syntaxe en plus de ton appel de css "normal" ou de base:
:

<!--[if IE]>
 <link rel="stylesheet" type="text/css" href="./pour _IE.css" />
<![endif]-->


Si tu suis pas tout, renseignes toi sur l'attribut !important (il y a des articles dans la FAQ de ce forum.) et sur les Smiley cligne commentaires conditionnels.
Modifié par Hum (26 Nov 2006 - 19:20)
Je viens d'essayer et ça ne va toujours. Enfin disons que ça ne va toujours pas. Disons que le problème d'espacement semble se corriger... mais cette fois ci, sous firefox, mes puces se retrouvent en dehors de mon div
Attention, l'ordre des padding avec le !important doit etre respecté autrement....

As tu essayer de changer les valeurs pour voir si tu les contrôlais bien indépendamment ?

As tu un exemple en ligne ? ce serait vraiment mieux...

Autrement remontre du code avec la liste et son conteneur, et leurs CSS appliqué.
Modifié par Hum (26 Nov 2006 - 19:29)
Je viens d'adopter une solution qui améliore les choses sous IE. J'ai tout simplement apporté des modif' à mon fichier image avec un espace de 2 px après ma puce.... Sous IE ça fait un peu mieux... et sous Firefox on ne vois presque pas la différence de 2 petits pixel d'espace en plus....
Pour les utilisateurs de la merde qu'est IE ben ils ont qu'à mettre Firefox surtout que je le recommande en page d'acceuil
Sujet clos
Aller à