listes, puces et CSS

listes, puces et CSS - HTML/CSS - Programmation

Marsh Posté le 21-03-2006 à 14:45:16    

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
Reply

Marsh Posté le 21-03-2006 à 14:45:16   

Reply

Marsh Posté le 22-03-2006 à 01:48:47    

-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.
Reply

Marsh Posté le 22-03-2006 à 11:44:17    

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
Reply

Marsh Posté le 22-03-2006 à 11:49:00    

à 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 -
Reply

Marsh Posté le 22-03-2006 à 11:55:06    

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

Reply

Marsh Posté le 22-03-2006 à 12:06:12    

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

Reply

Marsh Posté le 22-03-2006 à 12:15:46    

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.
Reply

Marsh Posté le 22-03-2006 à 12:33:46    

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 !)

Reply

Marsh Posté le 22-03-2006 à 12:35:45    

ç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 -
Reply

Marsh Posté le 22-03-2006 à 12:39:14    

J'ai édité :D


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 22-03-2006 à 12:39:14   

Reply

Marsh Posté le 22-03-2006 à 12:54:07    

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

Reply

Marsh Posté le 22-03-2006 à 13:22:51    

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
Reply

Marsh Posté le 22-03-2006 à 14:00:10    

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...

Reply

Marsh Posté le 22-03-2006 à 14:17:46    

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

Message cité 1 fois
Reply

Marsh Posté le 22-03-2006 à 17:22:46    

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
Reply

Marsh Posté le 23-03-2006 à 09:45:49    

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...

Reply

Marsh Posté le 23-03-2006 à 09:53:16    

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
Reply

Marsh Posté le 23-03-2006 à 18:40:42    

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 ?

Reply

Marsh Posté le 23-03-2006 à 20:18:04    

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

Message cité 1 fois
Reply

Marsh Posté le 23-03-2006 à 22:04:48    

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...

Reply

Marsh Posté le 23-03-2006 à 22:33:55    

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
Reply

Marsh Posté le 10-04-2006 à 16:13:58    

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 !  
 

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed