Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1446 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  listes, puces et CSS

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

listes, puces et CSS

n°1329503
freed102
Arayashiki
Posté le 21-03-2006 à 14:45:16  profilanswer
 

comment aligner une puce (image) avec son texte ? comment savoir quelle taille doit faire l'image de la puce pour qu'elle soit bien calée ?
 
et d'autre part.. comment coller la liste en haut de la cellule du tableau ? (ya un gros blanc en haut et en bas)
 
voici mon code
 

Code :
  1. <style type="text/css">
  2. /*{  
  3. padding:0;  
  4. margin:0;  
  5. }  
  6. body{
  8. }
  9. */
  10. #nav_gauche{
  11. font-family:Arial, Helvetica, sans-serif;
  12. font-size:12px;
  13. font-weight:bold;
  14. margin:0;
  15. padding:0;
  16. list-style-position: inside;
  17. }
  18. #nav_gauche a:link{
  19. text-decoration: none;
  20. font-weight:normal;
  21. color:#000000;
  22. }
  23. #nav_gauche a:visited{
  24. text-decoration: none;
  25. font-weight:normal;
  26. color:#000000;
  27. }
  28. #nav_gauche a:hover{
  29. text-decoration:underline;
  30. }
  31. #nav_gauche a:active{
  32. text-decoration:none;
  33. color:#FF6600;
  34. font-weight:bold;
  35. }
  37. #nav_gauche, li{
  38. border-bottom: 1px solid #EEEEEE;
  39. padding-top:7px;
  40. padding-bottom:7px;
  41. list-style-type: none;
  42. margin:0;
  43. }
  44. .nav_gauche_sous_menu{
  45. font-size:11px;
  46. padding-left:10px;
  47. text-decoration:none;
  48. }
  49. </style>
  50. <table width="130" border="0" cellpadding="0" cellspacing="0">
  51. <tr>
  52.  <td colspan="2" align="right">
  53.   <img src="img/1/nav_gauche_filet_haut.jpg" width="130" height="17" alt="" /></td>
  54. </tr>
  55. <tr>
  56.  <td colspan="2" valign="top">
  57.  <ul id="nav_gauche">
  58.  <li style="list-style-image:url(img/1/nav_gauche_fleche1.jpg)"><strong>Accueil</strong></li>
  59.  <li style="list-style-image:url(img/1/nav_gauche_fleche2.jpg)"><strong>Mon compte fid&eacute;lit&eacute;</strong></li>
  60.   <li class="nav_gauche_sous_menu"><a href="#">Mes coordonn&eacute;es</a></li>
  61.   <li class="nav_gauche_sous_menu"><a href="#">Mes points</a></li>
  62.   <li class="nav_gauche_sous_menu"><a href="#">Mes commandes</a></li>
  64.  </ul>
  65.  </td>
  66. </tr>
  67. <tr>
  68.  <td colspan="2" align="right">
  69.   <img src="img/1/nav_gauche_filet_bas.jpg" width="130" height="18" alt="" /></td>
  70. </tr>
  71. </table>


Message édité par freed102 le 21-03-2006 à 14:51:31
mood
Publicité
Posté le 21-03-2006 à 14:45:16  profilanswer
 

n°1329916
Shinuza
This is unexecpected
Posté le 22-03-2006 à 01:48:47  profilanswer
 

-Commence par utiliser un fichier externe pour ton code CSS
-Les tableaux servent à stocker des données tabulaires, et non pas la mise en page
-Evite de laisser les alt=""vides
-L'attribut align="" n'existe pas.
 

Code :
  1. <style type="text/css">
  2. /*{  
  3. padding:0;  
  4. margin:0;  
  5. }  
  6. body{
  8. }
  9. */
  10. #nav_gauche{
  11. font-family:Arial, Helvetica, sans-serif;
  12. font-size:12px;
  13. font-weight:bold;
  14. margin:0;
  15. padding:0;
  16. list-style-position: inside;
  17. }
  18. #nav_gauche a:link{
  19. text-decoration: none;
  20. font-weight:normal;
  21. color:#000000;
  22. }
  23. #nav_gauche a:visited{
  24. text-decoration: none;
  25. font-weight:normal;
  26. color:#000000;
  27. }
  28. #nav_gauche a:hover{
  29. text-decoration:underline;
  30. }
  31. #nav_gauche a:active{
  32. text-decoration:none;
  33. color:#FF6600;
  34. font-weight:bold;
  35. }
  37. #nav_gauche, li{
  38. border-bottom: 1px solid #EEEEEE;
  39. padding-top:7px;
  40. padding-bottom:7px;
  41. list-style-type: none;
  42. margin:0;
  43. }
  44. .nav_gauche_sous_menu{
  45. font-size:11px;
  46. padding-left:10px;
  47. text-decoration:none;
  48. }
  49. </style>
  51.   <img src="img/1/nav_gauche_filet_haut.jpg" width="130" height="17" alt="" />
  52. <div>
  53.  <ul id="nav_gauche">
  54.  <li style="list-style-image:url(img/1/nav_gauche_fleche1.jpg)"><strong>Accueil</strong></li>
  55.  <li style="list-style-image:url(img/1/nav_gauche_fleche2.jpg)"><strong>Mon compte fid&eacute;lit&eacute;</strong></li>
  56.   <li class="nav_gauche_sous_menu"><a href="#">Mes coordonn&eacute;es</a></li>
  57.   <li class="nav_gauche_sous_menu"><a href="#">Mes points</a></li>
  58.   <li class="nav_gauche_sous_menu"><a href="#">Mes commandes</a></li>
  59.  </ul>
  60.  <img src="img/1/nav_gauche_filet_bas.jpg" width="130" height="18" alt="" />
  61. </div>


 
Donne le meme résultat, meme si niveau sémantique ca n'est pas ça. C'est toujours mieux qu'un tableau. Mais bon je vais pas te macher le boulot non plus :D
 
Pour ton autre question, tu as un padding-top et padding-bottom appliqué, ce qui expliquerait le blanc.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1330070
freed102
Arayashiki
Posté le 22-03-2006 à 11:44:17  profilanswer
 

bon c toujours le bordel :
 
voilà ce que j'ai :
http://www.freedfromparis.com/temp/OR/test.htm
 
voila ce que je dois avoir :
http://www.freedfromparis.com/temp/OR/menu.jpg

Message cité 1 fois
n°1330075
skeye
Posté le 22-03-2006 à 11:49:00  profilanswer
 

à ta place je commencerais par voir ce que ça donne en mettant les margin et les padding des ul et li concernés à 0, puis j'ajouterais tranquillement étape par étape ce qui convient...;)


---------------
Can't buy what I want because it's free -
n°1330085
freed102
Arayashiki
Posté le 22-03-2006 à 11:55:06  profilanswer
 

c ce que j'ai fait au debut.. Mais j'arrive toujours au même point dans FF ! :((

n°1330092
freed102
Arayashiki
Posté le 22-03-2006 à 12:06:12  profilanswer
 

.. vivement le jour où ils vont tous se mettre d'accord !!! c pas demain la veille ! lol

n°1330099
Shinuza
This is unexecpected
Posté le 22-03-2006 à 12:15:46  profilanswer
 

Edit : J'ai rien dis.
 
Déja il faut réduire tes padding.
 
Ensuite pense dans ce sens :
 
C'est possible de décaler le sous menu comme ça :
 

Code :
  1. .nav_gauche_sous_menu{
  2. font-size:11px;
  3. margin-left:10px;
  4. text-decoration:none;
  5. }


 
Par contre la petite ligne sous ton menu suivra le meme schéma, donc elle sera décalée de 10px (par exemple, ajuste a ta guise)
 
Donc il faut que décale uniquement le texte :
 
 

Code :
  1. .nav_gauche_sous_menu{
  2. font-size:11px;
  3. text-decoration:none;
  4. }
  6. .nav_gauche_sous_menu span{
  7. margin-left:10px;
  8. }


 
Ensuite pour ton lien décalé tu ajoutes à chaque fois <span></span> autour, ça devrait marcher
 
 

Message cité 1 fois
Message édité par Shinuza le 22-03-2006 à 12:38:55

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1330115
freed102
Arayashiki
Posté le 22-03-2006 à 12:33:46  profilanswer
 

bah c tout simplement que sur FF ça n'est pas pareil, et que je dois faire impérativement la même chose que la maquette (au pixel pres !)

n°1330119
skeye
Posté le 22-03-2006 à 12:35:45  profilanswer
 

ça m'étonne que t'aies tous ces espaces avec FF si tu mets les paddings et les margins à zéro...p-e line-height qui pose pb, alors? :??:


---------------
Can't buy what I want because it's free -
n°1330120
Shinuza
This is unexecpected
Posté le 22-03-2006 à 12:39:14  profilanswer
 

J'ai édité :D


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
mood
Publicité
Posté le 22-03-2006 à 12:39:14  profilanswer
 

n°1330130
the prison​er
Posté le 22-03-2006 à 12:54:07  profilanswer
 

ce lien devrait t'aider :
http://css.maxdesign.com.au/listamatic/

n°1330155
Pitsy
Posté le 22-03-2006 à 13:22:51  profilanswer
 

freed102 a écrit :

bon c toujours le bordel :
 
voilà ce que j'ai :
http://www.freedfromparis.com/temp/OR/test.htm
 
voila ce que je dois avoir :
http://www.freedfromparis.com/temp/OR/menu.jpg


 
 
Moi je ferais une construction du genre sur tes bases (j'aurais peut-être fait un peu différement perso), avec une image de fond plutôt que de remplacer la puce:
 

<div id="bloc_gauche">
<img src="test_fichiers/nav_gauche_filet_haut.jpe" alt="" height="17" width="130">
   <ul id="nav_gauche">
    <li id="navon">Mes cadeaux</li>
    <li><a href="#">Accès Internet</a></li>
    <li><a href="javascript:ActionDispatcher('annul_cat');">Informatique</a></li>
    <li><a href="#">Musique</a></li>
    <li><a href="#">Photo/vidéo</a></li>
    <li><a href="#">Jeux/logiciels</a></li>
    <li><a href="#">Téléphonie</a></li>
   </ul>
<img src="test_fichiers/nav_gauche_filet_bas.jpe" alt="" height="18" width="130">
</div>


 

#bloc_gauche{
width:150px;
text-align:right;
}
 
#nav_gauche{
width:130px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
list-style-type: none;
margin-left:20px;
text-align:left;
}
 
#nav_gauche li{
border-bottom: 1px solid #EEEEEE;
text-indent: 20px;
line-height: 25px;
 
}
#nav_gauche a {
text-decoration: none;
color:#000000;
}
 
#nav_gauche a:hover{
text-decoration:underline;
}
 
#nav_gauche a:active{
color:#FF6600;
font-weight:bold;
}
 
#nav_gauche li#navon {
text-indent:10px;
font-weight:bold;
font-size:12px;
background: url(img/1/nav_gauche_fleche2.jpg) no-repeat left center;
}


 
C'est pas paufiné en détail, mais la présentation est la même sous IE ff et opera.

Message cité 1 fois
Message édité par Pitsy le 22-03-2006 à 15:51:49
n°1330190
freed102
Arayashiki
Posté le 22-03-2006 à 14:00:10  profilanswer
 

Shinuza a écrit :

Edit : J'ai rien dis.
 
Déja il faut réduire tes padding.
 
Ensuite pense dans ce sens :
 
C'est possible de décaler le sous menu comme ça :
 

Code :
  1. .nav_gauche_sous_menu{
  2. font-size:11px;
  3. margin-left:10px;
  4. text-decoration:none;
  5. }


 
Par contre la petite ligne sous ton menu suivra le meme schéma, donc elle sera décalée de 10px (par exemple, ajuste a ta guise)
 
Donc il faut que décale uniquement le texte :
 
 

Code :
  1. .nav_gauche_sous_menu{
  2. font-size:11px;
  3. text-decoration:none;
  4. }
  6. .nav_gauche_sous_menu span{
  7. margin-left:10px;
  8. }


 
Ensuite pour ton lien décalé tu ajoutes à chaque fois <span></span> autour, ça devrait marcher


Ouai je viens d'essayer un peu ta méthode... c pas encore tout à fait ça...

n°1330207
freed102
Arayashiki
Posté le 22-03-2006 à 14:17:46  profilanswer
 

j'y suis presque ! maintenant c IE qui me mets un wonder whitespace à gauche ! :((

Message cité 1 fois
n°1330372
freed102
Arayashiki
Posté le 22-03-2006 à 17:22:46  profilanswer
 

alors là je me fais moine !!!
 
c'est quoi le bug cette fois ???? mes polices ne s'affichent pas ! :(
 
http://www.freedfromparis.com/temp/OR/test2.htm


Message édité par freed102 le 22-03-2006 à 17:23:17
n°1330785
Pitsy
Posté le 23-03-2006 à 09:45:49  profilanswer
 

freed102 a écrit :

j'y suis presque ! maintenant c IE qui me mets un wonder whitespace à gauche ! :((


 

freed102 a écrit :

ouai génial ! lol  
 
bon maintenant je galère avec mes listes, ça s'affiche pas pareil dans IE et FF... j'ai pourtant regardé toutes les docs.. mais ya rien à faire ! je sens que je vais retourner avec mes bonnes vieilles tables totalement semantiquement incorrectes que tout le monde déteste ! lol


 
As-tu testé le code que je t'ai mis (je l'ai édité hier mais pas pu reposter derrière à cause d'un problème de connect) ? En quoi ne correspond-il pas à ce que tu souhaites obtenir ? (Tu lui rajoutes, bien sûr, le * {padding:0; margin:0;}; je n'ai mis que la partie css du menu)
 
Essaie d'aller au plus simple; plus tu définis de trucs inutiles dans ton css/xhtml plus tu as de risques de rencontrer des problèmes...

n°1330794
freed102
Arayashiki
Posté le 23-03-2006 à 09:53:16  profilanswer
 

je reviendrais plus tard là dessus, je peux pas y passer 3 jours, le temps m'est compté ! pour l'instant j'ai remis une table toute simple... ça ne bouge pas d'un poil et c aussi nickel sur IE que sur FF... le chef de projet n'y voit aucun inconvénient pour le moment... je flatterai mon égo une autre fois pour des choses plus perso ou si j'ai plus de temps !
J'espère toutefois qu'un jour nous pourrons faire des pages web sémantiquement et syntaxiquement correctes sans se soucier que tel ou tel navigateur interprète les choses à sa maniere !!! il serait temps qu'ils se mettent tous d'accord ! parcequ'au final.. en cherchant à faire les choses proprement, tu es obligé de détourner ou tricher sans arret !je trouve ça assez paradoxal !

Message cité 1 fois
n°1331266
Pitsy
Posté le 23-03-2006 à 18:40:42  profilanswer
 

freed102 a écrit :

J'espère toutefois qu'un jour nous pourrons faire des pages web sémantiquement et syntaxiquement correctes sans se soucier que tel ou tel navigateur interprète les choses à sa maniere !!! il serait temps qu'ils se mettent tous d'accord ! parcequ'au final.. en cherchant à faire les choses proprement, tu es obligé de détourner ou tricher sans arret !je trouve ça assez paradoxal !


 
Je ne vois pas ce qu'il n'y a de non-sémantique ou syntaxiquement incorrecte dans le bout de code que je t'ai fourni ? je ne vois pas non plus d'endroit où j'ai du tricher ou détourner ?
 
Quant à la question du pixel près, une fois le <ul> collé à la balise <img> (ou ajouter un <br> ) pour éviter l'espace rajouté par IE après l'image (bug indépendant des css), je te laisse me dire quelle(s) différence(s) tu vois sur le screen ci-dessous (Je suis passablement myope  :D ).
Avec, dans l'ordre, le même code sous:
Firefox 1.5, IE6 SP1, Opera 7.54, Mozilla 1.7.12, Netscape 7.2
 
screen
 
Ou alors, peut-être que je n'ai pas compris ce que tu souhaitais faire exactement ?

n°1331313
freed102
Arayashiki
Posté le 23-03-2006 à 20:18:04  profilanswer
 

et sur machintoque ??? hihi !! j'ose même pas imaginer !

Message cité 1 fois
n°1331379
Pitsy
Posté le 23-03-2006 à 22:04:48  profilanswer
 

freed102 a écrit :

et sur machintoque ??? hihi !! j'ose même pas imaginer !


 
bah ça ne devrait poser aucun pb sur les navigateur actuels puisqu'ils respectent les standards plutôt mieux: safari, icab, firefox. IE, à la limite, on s'en fou, il est plus mis à jour depuis longtemps.
 
Bon à part ça je ne vois pas pourquoi tu viens poser des questions sur les css si tu te conplais avec tes tableaux...

n°1331393
freed102
Arayashiki
Posté le 23-03-2006 à 22:33:55  profilanswer
 

bah c que j'ai envie qu'un jour ça soit plus clair tout simplement !


Message édité par freed102 le 23-03-2006 à 22:34:17
n°1343204
freed102
Arayashiki
Posté le 10-04-2006 à 16:13:58  profilanswer
 

Pitsy a écrit :

Moi je ferais une construction du genre sur tes bases (j'aurais peut-être fait un peu différement perso), avec une image de fond plutôt que de remplacer la puce:
 

<div id="bloc_gauche">
<img src="test_fichiers/nav_gauche_filet_haut.jpe" alt="" height="17" width="130">
   <ul id="nav_gauche">
    <li id="navon">Mes cadeaux</li>
    <li><a href="#">Accès Internet</a></li>
    <li><a href="javascript:ActionDispatcher('annul_cat');">Informatique</a></li>
    <li><a href="#">Musique</a></li>
    <li><a href="#">Photo/vidéo</a></li>
    <li><a href="#">Jeux/logiciels</a></li>
    <li><a href="#">Téléphonie</a></li>
   </ul>
<img src="test_fichiers/nav_gauche_filet_bas.jpe" alt="" height="18" width="130">
</div>


 

#bloc_gauche{
width:150px;
text-align:right;
}
 
#nav_gauche{
width:130px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
list-style-type: none;
margin-left:20px;
text-align:left;
}
 
#nav_gauche li{
border-bottom: 1px solid #EEEEEE;
text-indent: 20px;
line-height: 25px;
 
}
#nav_gauche a {
text-decoration: none;
color:#000000;
}
 
#nav_gauche a:hover{
text-decoration:underline;
}
 
#nav_gauche a:active{
color:#FF6600;
font-weight:bold;
}
 
#nav_gauche li#navon {
text-indent:10px;
font-weight:bold;
font-size:12px;
background: url(img/1/nav_gauche_fleche2.jpg) no-repeat left center;
}


 
C'est pas paufiné en détail, mais la présentation est la même sous IE ff et opera.


 
Comme prévu au début et vu les circonstances, j'ai du passer mes menus en liste, j'ai donc utilisé ta technique qui a l'air tres efficace, reste plus qu'un petit détail à élucider...
 
j'ai des petits bugs sur FF et sur IE mac
 
voici les screenshots :
 
http://www.freedfromparis.com/temp/OR/_test/screenmac.gif (Version IE Mac)
 
.. comme vous pouvez le constater la taille du menu est censée etre de 150px de large... là j'ai 285px.. je sais pas à quoi ça pourrait etre du
 
 
 
http://www.freedfromparis.com/temp/OR/_test/ffox1.jpg (Version FF PC et Camino Mac)
 
la premiere puce n'apparait pas
... et le line-height est foireux sur la premiere ligne pourtant sur IE6 et Safari c nickel (ou presque !)
 
en tous cas c deja bien pour les autres.. c plaisant de voir que c faisable ! thanx !  
 

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  listes, puces et CSS

 

Sujets relatifs
Bug incompréhensible sur IE (CSS - Mise en page)[CSS/HTML] bloc avec titre+contenu décoré avec img en fond
[CSS] pseudo-element : problème...[Javascript CSS] Flashbox
[CSS] appliquer une taille à un hoverProblème CSS pour un menu
ajustement auto zone texte CSS100% de hauteur (CSS)
[CSS] Comment contrôler les item générés des listes à puces ?CSS : Puces et listes en ligne
Plus de sujets relatifs à : listes, puces et CSS

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.074 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR