28172 sujets

CSS et mise en forme, CSS3

Ajouter une puce à un éléméent uniquement par CSS?

Pages :
Bonjour!

J'aimerais savoir s'il est possible de rajouter une puce à un élément uniquement par CSS.
En gros, comme avec la propriété list-style-type.

Dans mon cas ce serait pour un élément <a>, car on m'a demandé de "marquer" l'onglet sélectionné avec une puce afin de le rendre plus visible aux personnes ayant des déficiences visuelles (oui, je sais, ce n'est peut-être pas la meilleure façon de faire...).
Je pourrais faire cela en javascript mais je voudrais éviter.

Merci d'avance.
Salut,

Tout simplement à l'aide de la propriété background. Tu peux bien sur utiliser une classe ou un identifiant pour marquer la balise pour que cela ne s'applique qu'à elle.
Merci pour la réponse!

Mais je ne parlais pas de puces images, bien qu'effectivement cela puisse être une solution. (Et dans ce cas, faut aussi penser à changer le padding).

J'ai l'impression que ce n'est tout simplement pas possible, me trompe-je?
Bonjour,

List-style-type est une propriété CSS uniquement applicable aux éléments de listes ; donc effectivement tu ne pourras pas l'utiliser pour <a>. Par contre s'il s'agit d'un menu, il pourrait être judicieux de le baliser les éléments du menu avec un liste.
Laurie-Anne a écrit :
Bonjour,

List-style-type est une propriété CSS uniquement applicable aux éléments de listes ; donc effectivement tu ne pourras pas l'utiliser pour <a>. Par contre s'il s'agit d'un menu, il pourrait être judicieux de le baliser les éléments du menu avec un liste.


C'est bien ce que j'ai fait. Mais je ne veux faire apparaître la puce que pour UN des éléments de la liste.

L'élément sélectionné a une classe différente des autres, mais j'ai beau lui "dire" d'afficher une puce à l'aide de la propriété list-style-type, ça ne marche pas. Ça devrait?
pour ajouter l'élément a une seul élément de la liste, tu peux appliquer une class a ton li en question ..
peux tu glisser un petit bout de code qu'on regarde ce que tu veux faire ?
Mateo a écrit :

C'est bien ce que j'ai fait. Mais je ne veux faire apparaître la puce que pour UN des éléments de la liste.
L'élément sélectionné a une classe différente des autres, mais j'ai beau lui "dire" d'afficher une puce à l'aide de la propriété list-style-type, ça ne marche pas. Ça devrait?

Peut-on voir le code utilisé (html/css) ou une page en ligne ?...

Cdt,
Sylvain
Le voici, simplifié:

HTML:

<UL class="TabBar">
	<LI class="TabHeaderBackgroundFront">
	</LI>
	<LI>
		<A class="TabSelected" href="#">Onglet 1</A>
	</LI>
	<LI>
		<A class="Tab" href="#">Onglet 2</A>
	</LI>
	<LI>
		<A class="Tab" href="#">Onglet 3</A>
	</LI>
	<LI>
		<A class="Tab" href="#">Onglet 4</A>
	</LI>
	<LI class="TabHeaderBackgroundBack">
	</LI>
</UL>


CSS:
ul.TabBar
{
	padding: 0px;
	margin: 0px;
	display: inline;
	width: 100%;
	height: 100%;
}

.TabBar li
{
	display: inline;
	float: left;
	height: 100%;
}

li.TabHeaderBackgroundBack
{
	float: none;
}

a.TabSelected {
	list-style-type: circle;
    FONT-WEIGHT: bold;
}

Modifié par Mateo (18 Nov 2009 - 14:49)
Tous les tag HTML (et les attributs CSS) devraient être rédigés en miniature.

Pour ton problème : mets les classes sur les éléments li (comme déjà conseillé) et tout ira mieux.
Laurie-Anne a écrit :
Tous les tag HTML (et les attributs CSS) devraient être rédigés en miniature.


C'est pas moi qui l'ai fait Smiley langue . Et y'en a PARTOUT, ni le temps ni l'envie tout corriger.

Laurie-Anne a écrit :
Pour ton problème : mets les classes sur les éléments li (comme déjà conseillé) et tout ira mieux.


Oui, j'ai essayé, mais ça marche pas non plus Smiley decu :

li.TabSelected {
	list-style-type: circle;
}

<li class="TabSelected">
	<a href="#">Onglet 1</a>
</li>

Modifié par Mateo (18 Nov 2009 - 14:49)
oula ... c'est un peu fait à l'arrache
donc si j'ai bien compris ton code c'est ça ???

<ul class="TabBar">
<li class="TabSelected"><a href="#">Onglet 1</a></li>
<li><a href="#">onglet 2</a></li>
<li><a href="#">onglet 3</a></li>
</ul>






ul .TabBar{
padding: 0px;
margin: 0px;
display: inline;
width: 100%;
height: 100%;
}

.TabSelected li{
list-style-type: circle;
display: inline;
float: left;
height: 100%;
}

??? c'est comme ca que je le vois ton truc (tel que tu l'expliques)
dis moi ce que tu as mis
(tu as mis un inline a ul et a li ... je crois que c'est juste applicable a un li)
Passe ton code au W3C aussi ca peut être utile
Euh... Wamdeus, ce code :
.TabSelected li{
cible tous les éléments li se trouvant dans un parent ayant la classe TabSelected

Mateo, Normalement ton code : 
li.TabSelected {
     list-style-type: circle; 
}
devrait fonctionner. Cette ligne est bien placée après celle pour li qui annule la puce ? Pour être sûr de ton coup, tu peux également préciser toute la hiérarchie : 
ul.TabBar li.TabSelected {
Wamdeus a écrit :
oula ... c'est un peu fait à l'arrache
donc si j'ai bien compris ton code c'est ça ???

Ce que j'ai posté, c'est trèèèès nettoyé/simplifié, le code est bien plus monstrueux et dégueulasse que ça! Smiley cligne
Mais bon, faut bien que je fasse avec ce qu'on me donne, ça me prendrait des semaines si je décidais de faire le ménage...

Wamdeus a écrit :


<ul class="TabBar">
<li class="TabSelected"><a href="#">Onglet 1</a></li>
<li><a href="#">onglet 2</a></li>
<li><a href="#">onglet 3</a></li>
</ul>






ul .TabBar{
padding: 0px;
margin: 0px;
display: inline;
width: 100%;
height: 100%;
}

.TabSelected li{
list-style-type: circle;
display: inline;
float: left;
height: 100%;
}

??? c'est comme ca que je le vois ton truc (tel que tu l'expliques)
dis moi ce que tu as mis
(tu as mis un inline a ul et a li ... je crois que c'est juste applicable a un li)
Passe ton code au W3C aussi ca peut être utile


Hum... Je ne sais pas si ce que j'avais écrit, mais j'ai depuis j'ai corrigé/simplifié le code que j'avais écrit dans mon précédent commentaire.

Et que j'écrive:
li.TabSelected {
	list-style-type: circle;
	FONT-WEIGHT: bold;
}
ou 
a.TabSelected {
	list-style-type: circle;
	FONT-WEIGHT: bold;
}
, le résultat est le même: pas de puce affichée.
Modifié par Mateo (18 Nov 2009 - 15:05)
Laurie-Anne a écrit :
Euh... Wamdeus, ce code :
.TabSelected li{
cible tous les éléments li se trouvant dans un parent ayant la classe TabSelected

Mateo, Normalement ton code : 
li.TabSelected {
     list-style-type: circle; 
}
devrait fonctionner. Cette ligne est bien placée après celle pour li qui annule la puce ?

Oui.
Laurie-Anne a écrit :
Pour être sûr de ton coup, tu peux également préciser toute la hiérarchie : 
ul.TabBar li.TabSelected {

Marche toujours pas Smiley decu

Pourtant je me suis fait des petits fichiers test avec le strict minimum de code et toujours pas de puce pour l'onglet sélectionné.

Je les donne en intégralité au cas où y'aurait un truc qui m'aurait échappé:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE>Test</TITLE>
		<LINK href="test.css" rel="stylesheet" type="text/css">
	</HEAD>
	<BODY>
		<UL class="TabBar">
			<LI class="TabHeaderBackgroundFront">
			</LI>
			<LI class="TabSelected">
				<A href="#">Onglet 1</A>
			</LI>
			<LI>
				<A class="Tab" href="#">Onglet 2</A>
			</LI>
			<LI>
				<A class="Tab" href="#">Onglet 3</A>
			</LI>
			<LI>
				<A class="Tab" href="#">Onglet 4</A>
			</LI>
			<LI class="TabHeaderBackgroundBack">
			</LI>
		</UL>
	</BODY>
</HTML>

CSS:
ul.TabBar
{
	padding: 0px;
	margin: 0px;
	display: inline;
	width: 100%;
	height: 100%;
}

.TabBar li
{
	display: inline;
	float: left;
	height: 100%;
}

li.TabHeaderBackgroundBack
{
	float: none;
}

li.TabSelected {
	list-style-type: circle;
	FONT-WEIGHT: bold;
}
juste comme ça ... par simple curiosité . Si tu enlève ton padding et ton margin a 0px ca te fais quoi ???

tu appliques quelque chose aux autres li ?? je vois un <li class="Tab">

passe ton code css au W3C aussi ....
Merci, grâce à toi, ça avance!

Le code donné suivant marche avec Firefox, mais pas avec IE6 à cause du float:
ul.TabBar
{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.TabBar li
{
	float: left;
	list-style-type: none;
}

.TabHeaderBackgroundBack
{
	float: none;
}

li.TabSelected
{
	list-style-type: square;
	list-style-position: inside;
	FONT-WEIGHT: bold;
}


Mais j'en ai besoin de mon float (pour des raisons que je n'ai pas le temps d'expliquer, mais s'il le faut, je le ferai).
Modifié par Mateo (18 Nov 2009 - 17:38)
Bon ben je crois que c'est un bug d'IE6! Un truc aussi simple que ce qui suit marche sous FireFox mais pas sous IE6:
<ul>
	<li>Element 1</li>
	<li>Element 2</li>
</ul>

ul {
	list-style: square;
}

ul li {
	float: left;
}


Y'a-t-il un moyen de contourner ce bug?
Modifié par Mateo (18 Nov 2009 - 17:54)
Pages :
Sujet clos
Aller à