[RÉGLÉ] Une question de CSS

[Isabelle62]

Bonjour,

nous avons besoin de l'expertise en CSS de l'un d'entre vous.

Nous aimerions définir un style CSS pour la balise ul.
Dans un fihier css, nous avons donc défini:

ul.gp01 {
list-style:square;
width: 90%;
}

Dans notre document HTML, nous avons écrit pour une liste :
<ul class="gp01">

<li><span class="guillenphoto-article-texte">La photographie r&eacute;aliste qui regroupe de nombreux th&egrave;mes comme le photojournalisme, le paparazzisme, l&rsquo;astrophysique, la photo naturaliste par exemple. Dans cette approche photographique, le photographe rend compte d&rsquo;une sc&egrave;ne ou d&rsquo;une situation sans artifice. C&rsquo;est la r&eacute;alit&eacute; qui prime.</span></li><br />

<li><span class="guillenphoto-article-texte">La photographie artistique est une repr&eacute;sentation imaginaire du monde r&eacute;el. Dans cette approche, le photographe se sert de la r&eacute;alit&eacute; pour d&eacute;crire ses &eacute;motions, ses sentiments, sa vision du monde et de la vie.</span></li>

</ul>

Le style que nous avons défini ne fonctionne pas. Nous avons toujours un caractère bizarre qui apparait qui n'est pas un carré comme nous le voudrions.

Voici la page en question : https://www.guillenphoto.com/cms/pourquoi-la-photographie-est-une-discipline-artistique-partie-1.html

Il s'agit de la première liste.

Est-ce quelqu'un pourrait nous dire ce qui ne va pas? Nous ne comprenons vraiment pas.

Merci par avance pour votre aide
Bien à vous tous
Isa

[lomart]

Re : Une question de CSS

Bonsoir,

Il existe une règle qui a une priorité plus importante.
Il faut donc annuler l'impact de cette règle dans votre contexte.

Ajouter uniquement les règles CSS suivantes :
ul.gp01 > li {
list-style-type: square !important;
width: 90%;
}
ul.gp01 > li::before {
content: "" !important;
}

[Isabelle62]

Re : Une question de CSS

Merci beaucoup Iomart,

c'est super. Votre solution fonctionne. Nous avons bien le carré et la liste occupe 80% de la largeur.
Nous n'aurions jamais trouvé. Nous ne comprenons pas trop ce que signifie cette syntaxe. Mais bon l'important c'est que cela fonctionne.

Nous allons abuser de vos compétences car nous voudrions décaler la liste un peu la droite pour indenter le texte.
Nous essayons margin-left: 3%; mais cela ne fonctionne pas.
Comment pouvons nous faire?

Merci encore pour votre aide
Bien à vous

[Isabelle62]

Re : Une question de CSS

Nous avons trouvé.

Nous avons ajouté la propriété suivante : list-style-position:inside !important;

Maintenant cela fonctionne comme nous le voulons.

Merci pour votre aide.
Bien à vous
Isa