puces avec les css

[yelen]

bonjour;
ca y'est ! je suis passé aux css, et je regarde de loins maintenant ses dernières semaines passées a m'acharné avec des tableaux.

C'est vraiment pratique, et largement soutenu par une bonne documentation partout sur le net;
et pourtant j'ai un problème !! lol

Ca vas vous paraître simple, ca l'est, mais en ce qui me concerne j'ai tout essayer... :
je vais parler en terme general:

Soit deux images A et B positionées verticalement l'une a l'autre, sans marges, imbriquées. Elles sont en fait des images de fonds appelées avec une class définie dans la css.
Soit une image C (une puce), déclarée entre A et B dans le code html, que je veux pouvoir positionner sur A de facon relative a celle-ci. J'utilise l'atribut relative.. et top -10 pour la faire remonter par dessus. tout vas bien, elle se positionne ou il faut etc.

Mais B c'est décalé verticalement de A. Maintenant il y a une marge vide entre les deux, que je ne parvient pas a supprimer.
j'ai tout essayer : padding: 0px; height: 0px;(mais ca redimentionne aussi mon image.. normal), font-size: 0px; ...

Si vous pouviez m'apprendre ce dont j'ai besoin. merki

[calimo]

Euh... "une image vaut mieux que de grands discours" tu connais ? (et une exemple "en vrai" aussi)
Autrement dit je n'ai pas tout saisi...

[PsyDk]

Un dessin de ce que tu aimerais et une page de test seraient les bienvenus Sans ça je dois bien avouer que je suis un peu perdu

[PsyDk]

Euh... "une image vaut mieux que de grands discours" tu connais ? (et une exemple "en vrai" aussi)
Autrement dit je n'ai pas tout saisi...

lol ! On a été synchros sur ce coup là

[yelen]

arf.... je m'y attendai. le problème c'est que je n'ai pas d'exemple.

ha si voila : http://cjoint.com/?dqpzSe8vR5

c'est mon menu de gauche. normalemtent le texte est remplacé par des liens.
voili voilou!!

[yelen]

c'est simple, j'ai inseré l'image de la puce, en position relative a "la bordure".
ca me donne cet espace blanc, entre "la bordure" et "qui est là me tape"!

j'ai encore fait une longue recherche sur internet mais je ne trouve pas

[HP]

pour les neuneus (dont je fais parti) :
http://openweb.eu.org

clair, net, simple et précis
avec en plus un moteur de recherche interne très performant !

http://openweb.eu.org/articles/puces_images/

tout est là ...

l'abus de ce site est compatible avec la bonne santé du web.

[calimo]

Si tu avais un bout de code HTML+CSS aussi éventuellement... à quoi correspondent A, B et C sur cette image ?

[yelen]

merci déjas de vos reponses, même si on avance pas beaucoup!!(je suis rarement suffisement claire ca vient de moi )

vous donner mes sources je ne trouvait pas ca nécessaire puis-ce-qu'il n'est pas question de contexte; mais d'un simple problème de mise en page general.
mais si vous y tenez )


/* corp coresspond a "A" et "B" soit le milieux du menu.*/

a.corp {
border-left: solid;
border-right: solid;
border-color: rgb(198, 198, 280);
border-width: 1px;
padding-left: 20px;
background-color: rgb(243, 243, 255);
display: block;
font-size: 16px;
font-weight: bold;
color: rgb(90, 132, 198);
width: 160px;
text-décoration: none;}

a.corp:hover {
background-color: rgb(236, 236, 255);
padding-left: 20px;
color: rgb(60, 160, 250);
width: 160px;}


ensuite je veux pouvoir inserer des puce par dessus. comme a l'exemple que je vous ai donné.

code html de l'exemple (j'ai déclaré la puce en tant qu'image, mais le problème est le même) :

<a class="tete">Sommaire</a>
<a class="corp">La bordure</a>
<img src="img/puce.gif" style="position: relative; top: -15px; left: 6px;">
<a class="corp">qui est l&agrave;, me tape</a>
<a class="corp">sur les nerfs!!</a>
<a class="corp">alors &eacute;videment</a>
<a class="corp">je m'adresses </a>
<a class="corp">a ce forum </a>
<a class="corp">qui m'a d&eacute;jas</a>
<a class="corp">bien aid&eacute; !!</a>
<a class="fin"> )</a>


merci

[HP]

Code : Tout sélectionner

<a class="tete">Sommaire</a>
<a class="corp">La bordure</a>
<img src="img/puce.gif" style="position: relative; top: -15px; left: 6px;">
<a class="corp">qui est l&agrave;, me tape</a>
<a class="corp">sur les nerfs!!</a>
<a class="corp">alors &eacute;videment</a>
<a class="corp">je m'adresses </a>
<a class="corp">a ce forum </a>
<a class="corp">qui m'a d&eacute;jas</a>
<a class="corp">bien aid&eacute; !!</a>
<a class="fin"> :o)</a>

pourquoi ne pas mettre l'ensemble des <a> dans une <div> qui ferait le "container" et serait un rectangle machin chose ...
et ensuite faire une liste à puce avec les <a> ?

me semble que ce serait plus simple ...
attention, je dis peut être des c#nneries mais calimo n'est pas loin de toute façon

[calimo]

Bon ben comme l'a dit HP si tu veux faire une liste avec des puces, eh bien il faut la faire ! Vas-y, ose

Une liste c'est une liste, et il y a ce qu'il faut dans les spécifications HTML pour faire une vraie liste !
http://www.la-grange.net/w3c/html4.01/struct/lists.html

Je propose d'utiliser une liste de définition...

Code : Tout sélectionner

<h3>Sommaire</h3> <!-- ici c'est le titre du menu, c'est un hx, mets-y ce qu'il faut en fonction du contexte, h1, h2, h3, ..., h6 -->

<!-- ici on commence la liste -->
<dl>
<dt>La bordure</dt>
<dd>qui est là me tape</dd>
<dd>sur les nerfs</dd>
<dd>Lorem ipsum, sit dolor amet</dd>
</dl>

Et dans ton CSS tu mets

Code : Tout sélectionner

dt {
display:list-item; /* dd est affiché comme un élément de liste, avec une puce */
list-style-type:square; /* puce par défaut */
list-style-image:url("img/puce.gif"); /* ici on définit l'image à utiliser */

De cette manière tu peux en plus supprimer les classes.
Tu as une vraie liste, avec des vrais éléments de listes. Ta puce est une vraie puce avec un sens, pas juste une image comme ça dans le code HTML qui ne veux rien dire.

C'est tout à ton avantage


Je te conseille la lecture de ce tutoriel pour apprendre le HTML, je crois que ça ne te ferait pas de mal d'aquérir quelques bases sur la sémantique de ce langage

[HP]

j'ai pas dit de bêtise

calimo il est trop fort, avant de poster pour parler de code,
j'ai un espèce de frisson comme quand je vais passer ma page au W3C validator ...
y a que lui qui a réussi à me faire çà pour le moment !

calimo, en parlant de liste à puce ...
c'est une bonne idée de donner un look de liste à des <h3> ?

surtout si ce sont de vrais titres ...

[yelen]

Ouki merki

Ca vas resoudre mon problème, et de manière simple.
Bien que je puisse m'empiffrer de tonnes de connaissances en peut de temps ca ne fait que 3 jour que je fais des sites, 2 1/2 que je suis aux css!! http://www.geckozone.org/forum/viewtopic.php?t=19938. (la non plus pas très claire.. je ferai de grands efforts la prochaine fois pour me faire comprendre )

Je ne savais pas que les listes permettaient de faire ca; pas encore très à l'aise. Je vais bosser les listes et faire mon menu ainsi.

Mais elle ne me paraissent pas aussi souples, si je veux changer de puces a chaques lignes ? je suis obligé de définir des classes de liste dans ma css?

Code : Tout sélectionner

De cette manière tu peux en plus supprimer les classes. 

pourquoi est-ce bien de ses débarrasser des classe?

[nomade]

Ca allège ton code html, c'est déjà ça
si j'ai bien compris, si tu veux attribuer une image de puce différente pour chaque élément de la liste, il faudra mettre une classe différente à chaque élément <dd>, donc ça reviendra au même.

[ottomar]

http://openweb.eu.org/articles/puces_images/ pour les listes

http://openweb.eu.org/articles/initiation_css/ pour les cas particuliers dans les listes

edit: http://openweb.eu.org/articles/images_css/ puisque les puces sont des images