Espace à droite d'une balise <li> ou <ul>

Espace à droite d'une balise <li> ou <ul> - HTML/CSS - Programmation

Marsh Posté le 16-12-2004 à 18:39:24    

Bonjour,
 
J'essaye de faire un site bien conforme au XHTML + CSS. Donc, je vire ma mise en page à base de tableaux et j'utilise des balises <div> + css. Problème, pour mon menu contextuel (du genre de celui de ce site http://www.kdp-info.com/ mais c'est pas moi qui l'ait fait), là, je suis obligé d'utilisé un tableau.
j'ai fait un truc du genre :

Code :
  1. <table class="ContextualMenu">
  2.     <tbody>
  3.         <tr>
  4.             <th class="ContextualMenu">Suivi DDT</th>
  5.         </tr>
  6.         <tr>
  7.            <td class="ContextualMenu">
  8.                <ul class="ContextualMenu">
  9.                    <li><a class="ContextualMenu" href="">Créer une demande</a></li>
  10.                    <li><a class="ContextualMenu" href="">Demandes soumises</a></li>
  11.                </ul>
  12.    </td>
  13. </tr>
  14.     </tbody>
  15. </table>


 
Mais bizarrement, je me retrouve avec un gros espace vide entre le contenu des <li> et le bord droit de mon tableau. En +, mes libellés de liens hypertextes vont à la ligne alors que pour certains, y'a la place de les faire tenir sur une ligne. C'est comme si y'avait un padding ou une marge > 0 et même si je force à 0px ces 2 propriétés, ben ça amrche pas :( Une idée? Merci :jap:
 
ps : si je n'ai aps été assez clair, je peux vous donner plus d'explications...


Message édité par rufo le 16-12-2004 à 18:40:04
Reply

Marsh Posté le 16-12-2004 à 18:39:24   

Reply

Marsh Posté le 16-12-2004 à 18:55:11    

Règle n°1, on n'est jamais obligé d'utiliser un tableau. Si c'est pas possible sans, faut se dire "alors les standards ne le permettent pas, donc on change" :D
 
Explique-nous pourquoi tu dois absolument mettre un tableau :)

Reply

Marsh Posté le 16-12-2004 à 18:56:10    

rufo a écrit :

Bonjour,
 
J'essaye de faire un site bien conforme au XHTML + CSS. Donc, je vire ma mise en page à base de tableaux et j'utilise des balises <div> + css. Problème, pour mon menu contextuel (du genre de celui de ce site http://www.kdp-info.com/ mais c'est pas moi qui l'ait fait), là, je suis obligé d'utilisé un tableau.


Là va faloir m'expliquer comment tu peux être obligé d'utiliser un tableau pour faire un menu [:matleflou]
 
et puis t'es pas vraiment obligé de mettre des class="contextualMenu" partout [:mlc]
 
Puis sur le site que t'as linké je vois pas de menu contextuel spécial (rappel: un menu contextuel dépend du contexte, donc c'est habituellement le menu sur right-clic)
 
Ensuite le site linké est une espèce d'ignominie en HTML bizarre, tables et JS à profusion.
 
Enfin... bah, non, pas encore d'enfin, je te filerais peut être des liens si j'arrive à comprendre ce que tu veux faire


Message édité par masklinn le 16-12-2004 à 18:59:11

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 16-12-2004 à 18:58:05    

Aussi ton th, remplace-le par un <h2> et met tout ça dans une div :
 

Code :
  1. <div>
  2.   <h2>Suivi DDT</h2>
  3.   <ul class="ContextualMenu">
  4.     <li><a class="ContextualMenu" href="">Créer une demande</a></li>
  5.     <li><a class="ContextualMenu" href="">Demandes soumises</a></li>
  6.   </ul>
  7. </div>


 
Ou dans une liste de définitions...


Message édité par FlorentG le 16-12-2004 à 18:58:21
Reply

Marsh Posté le 16-12-2004 à 19:00:26    

FlorentG a écrit :

Aussi ton th, remplace-le par un <h2> et met tout ça dans une div :
 

Code :
  1. <div>
  2.   <h2>Suivi DDT</h2>
  3.   <ul class="ContextualMenu">
  4.     <li><a class="ContextualMenu" href="">Créer une demande</a></li>
  5.     <li><a class="ContextualMenu" href="">Demandes soumises</a></li>
  6.   </ul>
  7. </div>


 
Ou dans une liste de définitions...


les classes sur les <a> sont inutiles :o
d'ailleurs dans l'idéal on collerait le "contextualmenu" en id sur le <div>
on alors on intégrerait le titre directement dans la list et on dégagerait complètement le div


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 16-12-2004 à 19:01:02    

Oui, j'ai pas optimisé son exemple à donf ;)

Reply

Marsh Posté le 17-12-2004 à 12:01:03    

Voici ma page :

Code :
  1. +--------------------------------------------------------------------+
  2. |   (img Logo)            (Menu principal)                           |
  3. +---------------+----------------------------------------------------+
  4. |               |                                                    |
  5. | +----------+  |                (Contenu de ma page)                |
  6. | |  Menu 1  |  |                                                    |
  7. | +----------+  |                                                    |
  8. | | * lien1  |  |                                                    |
  9. | | * lien2  |  |                                                    |
  10. | | * lien3  |  |                                                    |
  11. | +----------+  |                                                    |
  12. |               |                                                    |
  13. |               |                                                    |
  14. | +----------+  |                                                    |
  15. | |  Menu 2  |  |                                                    |
  16. | +----------+  |                                                    |
  17. | | * lien1  |  |                                                    |
  18. | | * lien2  |  |                                                    |
  19. | +----------+  |                                                    |
  20. |               |                                                    |
  21. |               |                                                    |
  22. +---------------+----------------------------------------------------+


Donc, là, j'ai des <div> pour le logo, la zone du menu principal, le menu à gauche et le contenu de la page.


Message édité par rufo le 17-12-2004 à 12:01:33
Reply

Marsh Posté le 17-12-2004 à 12:18:57    

C'est faisable sans tableaux je crois bien :)

Reply

Marsh Posté le 17-12-2004 à 12:21:22    

FlorentG a écrit :

C'est faisable sans tableaux je crois bien :)


c'est même sûr :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 17-12-2004 à 14:32:58    

eh galère. Je suis confronté au fameux pb du modèle Box de Microsoft :( Sur IE et Opera, je doit retirer 10px sur la largeur par rapport à Mozilla.

Reply

Marsh Posté le 17-12-2004 à 14:32:58   

Reply

Marsh Posté le 17-12-2004 à 14:33:35    

Pour le box, met le bon doctype :  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Reply

Marsh Posté le 17-12-2004 à 15:19:07    

FlorentG a écrit :

Pour le box, met le bon doctype :  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 
ça marche pas pour IE 5.x :(

Reply

Marsh Posté le 17-12-2004 à 15:23:23    

Oublie IE5, il est trop buggé pour les CSS, justement à cause du modèle de boite :(

Reply

Marsh Posté le 17-12-2004 à 15:33:23    

FlorentG a écrit :

Oublie IE5, il est trop buggé pour les CSS, justement à cause du modèle de boite :(


 
malheureusement, je ne peux pas l'oublier...

Reply

Marsh Posté le 17-12-2004 à 15:41:41    

Et pourtant, il le faut... Sur ta page principale met un lien vers FireFox ou vers IE6 ;)

Reply

Marsh Posté le 17-12-2004 à 15:47:19    

FlorentG a écrit :

Et pourtant, il le faut... Sur ta page principale met un lien vers FireFox ou vers IE6 ;)


c'est pour un intranet...

Reply

Marsh Posté le 17-12-2004 à 16:19:57    

Ah d'accord... Ben faut utiliser des div supplémentaires servant de conteneur, alors ça marche pour tout le monde :)

Reply

Marsh Posté le 17-12-2004 à 16:23:25    

bon, je m'en suis sorti avec un <div> qui entoure mon <h2> et mon <ul>. Par contre, avec Mozilla, la puce (une image ici) devant mon lien est bien centrée en hauteur mais pas avec IE ou Opéra... Mon lien apparaît un peu décalé vers le bas par rapport à l'image. Y'a moyen de l'avoir centré?

Reply

Marsh Posté le 17-12-2004 à 16:28:38    

Y'a rien à faire je crois bien... Moi je mettais alors en list-style-type: none; et je bricolais avec une background-image à la bonne position...

Reply

Marsh Posté le 17-12-2004 à 16:30:32    

ben moi, avant, j'utilisais une <img> devant mes liens mais vu que les css concernant les listes sont là pour ça...

Reply

Marsh Posté le 17-12-2004 à 16:32:18    

remarque en passant : avec Netscape 4.7, le contenu des <div> est ignoré (pas affiché) :( Pas génial ça...

Reply

Marsh Posté le 17-12-2004 à 16:35:14    

Hum, je peux comprendre qu'on a besoin d'être compatible IE5, par contre pour Netscape 4.7, c'est complètement impossible...
 
Pour NS 4.7, le seul moyen de faire tout ça, c'est du vieux HTML 3.2 pas valide avec 50 000 tableaux et 24786 balises <font>...

Reply

Marsh Posté le 17-12-2004 à 16:40:46    

autre question : pour mes liens, j'ai des styles sur le hover, link et visited. Vous m'avez dit que je pouvais virer le class de mes <a>. Je dois donc mettre où mes styles pour les liens afin de pas dupliquer la class pour chaque style? Merci de votre aide :jap:

Reply

Marsh Posté le 17-12-2004 à 16:42:15    

FlorentG a écrit :

Hum, je peux comprendre qu'on a besoin d'être compatible IE5, par contre pour Netscape 4.7, c'est complètement impossible...
 
Pour NS 4.7, le seul moyen de faire tout ça, c'est du vieux HTML 3.2 pas valide avec 50 000 tableaux et 24786 balises <font>...


 
mais le xhtml n'est pas sensé permettre la visualisation (même toute moche) de n'importe quel site sur n'importe quel navigateur (même vieux)?

Reply

Marsh Posté le 17-12-2004 à 16:42:19    

genre si t'as un div#pouet, et que tes liens sont dedans, tu peux faire ça :
 

Code :
  1. #pouet a:link, #pouet a:visited, etc.


Reply

Marsh Posté le 17-12-2004 à 16:45:07    

rufo a écrit :

mais le xhtml n'est pas sensé permettre la visualisation (même toute moche) de n'importe quel site sur n'importe quel navigateur (même vieux)?


 
Il est censé permettre la visualisation sur les navigateurs qui le gèrent :D
 
Un navigateur qui gère pas le CSS, ben il gèrera pas le CSS même avec de l'XHTML.
 
Faut prendre le truc en sens inverse : il permet la visualisation sur tous les navigateurs, même genre ceux sur téléphone portable, du fait de sa syntaxe de type XML donc rigoureuse. Il est plus facile de parser un document clairement structuré qu'une soupe de balise innommable.
 
Maintenant, pour ce qui est du cas de NS4.7, c'est un navigateur qui a causé beaucoup de mal à cause de son non-support des standards. Même IE4 gérait mieux le CSS1 que NS4.7

Reply

Marsh Posté le 17-12-2004 à 16:48:20    

FlorentG a écrit :

Il est censé permettre la visualisation sur les navigateurs qui le gèrent :D
 
Un navigateur qui gère pas le CSS, ben il gèrera pas le CSS même avec de l'XHTML.
 
Faut prendre le truc en sens inverse : il permet la visualisation sur tous les navigateurs, même genre ceux sur téléphone portable, du fait de sa syntaxe de type XML donc rigoureuse. Il est plus facile de parser un document clairement structuré qu'une soupe de balise innommable.
 
Maintenant, pour ce qui est du cas de NS4.7, c'est un navigateur qui a causé beaucoup de mal à cause de son non-support des standards. Même IE4 gérait mieux le CSS1 que NS4.7


 
ce que je voulais dire, c'ets qu'un navigateur qui gèrerait pas les CSS devrait tout de même afficher tous les textes du docuemnt xhtml, non?

Reply

Marsh Posté le 17-12-2004 à 16:48:59    

FlorentG a écrit :

genre si t'as un div#pouet, et que tes liens sont dedans, tu peux faire ça :
 

Code :
  1. #pouet a:link, #pouet a:visited, etc.



 
et si j'ai pas d'identifiant sur mon <div>?

Reply

Marsh Posté le 17-12-2004 à 16:49:14    

Oui, pour ça faut un filtre passe-bas (ou passe-haut je sais plus).

Reply

Marsh Posté le 17-12-2004 à 16:49:50    

rufo a écrit :

et si j'ai pas d'identifiant sur mon <div>?


 
Il en faut un, sinon tu peux pas... C'est le méchanisme des CSS qui oblige ça, t'es obligé de mettre un id ou une class pour différencier les éléments

Reply

Marsh Posté le 17-12-2004 à 16:51:41    

Voilà pour masquer le CSS à NS4.7 : http://tantek.com/CSS/Examples/highpass.html

Reply

Marsh Posté le 17-12-2004 à 17:52:09    

FlorentG a écrit :

Il est censé permettre la visualisation sur les navigateurs qui le gèrent :D
 
Un navigateur qui gère pas le CSS, ben il gèrera pas le CSS même avec de l'XHTML.


Si on ne lui permet pas d'aller voir le CSS (il ne faut jamais le lui permettre), NS4.7 va afficher la page en mode "texte", sans CSS


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 18-12-2004 à 10:29:01    

FlorentG a écrit :

Voilà pour masquer le CSS à NS4.7 : http://tantek.com/CSS/Examples/highpass.html


 
Merci pour le lien. Je mettrais ça en oeuvre lundi. Mais cette technique, ce serait pas par hasard un hack??? :whistle:  

Reply

Marsh Posté le 19-12-2004 à 12:54:50    

C'est presque un hack :D Mais chut ;). Ca permet de virer les navigateurs qui passent pas une certaine Section de la spécification CSS..
 

Reply

Marsh Posté le 20-12-2004 à 10:37:26    

FlorentG a écrit :

C'est presque un hack :D Mais chut ;). Ca permet de virer les navigateurs qui passent pas une certaine Section de la spécification CSS..


 
Dans la série "je suis chiant et je me soigne pas" :whistle:, y'aurait moyen que le hack proposé pour Netscape 4.x ne s'applique pas à IE 5.0. Parce que j'ai réussi à faire une css qui marche bien pour IE 5.x, IE 6.x, Opéra 7.x, Mozilla Firebird, Firefox, Netscape 6.x et Netscape 7.x :) Donc, j'aimerais bien que les utilisateurs de IE 5.x aient un bel affichage vu que c'est possible... Merci :jap:

Reply

Marsh Posté le 20-12-2004 à 10:40:16    

si, y'a moyen. Tu met le super hack d'enfer, et pis ensuite dans ton head tu fait ça :
 

Code :
  1. <!--[if LT IE 6]
  2. <style rel="stylesheet" type="text/css" href="css-pour-ie5.css" />
  3. [endif]-->

Reply

Marsh Posté le 20-12-2004 à 11:23:40    

FlorentG a écrit :

si, y'a moyen. Tu met le super hack d'enfer, et pis ensuite dans ton head tu fait ça :
 

Code :
  1. <!--[if LT IE 6]
  2. <style rel="stylesheet" type="text/css" href="css-pour-ie5.css" />
  3. [endif]-->



 
ça marche pas :( Pourtant, j'ai bien mis ça dans mon head...

Reply

Marsh Posté le 20-12-2004 à 11:29:03    

même en remplaçant la balise <style> par <link>.

Reply

Marsh Posté le 20-12-2004 à 11:33:08    

FlorentG a écrit :

si, y'a moyen. Tu met le super hack d'enfer, et pis ensuite dans ton head tu fait ça :
 

Code :
  1. <!--[if LT IE 6]
  2. <style rel="stylesheet" type="text/css" href="css-pour-ie5.css" />
  3. [endif]-->



 
Bon, après une petite recherche sur le web et qq corrections, ça donne ça :

Code :
  1. <!--[if LT IE 6]>
  2. <link rel="stylesheet" type="text/css" href="css-pour-ie5.css" />
  3. <![endif]-->


 
Et là, ça marche. Merci pour tout en tout cas :jap:

Reply

Marsh Posté le 20-12-2004 à 12:24:14    

Moi sur mon site de test divers et variés, http://plainsofpain.free.fr, j'ai fait un menu comme tu le veux en CSS ... C'est pas si dur, tu jouer avec les propriétés de fond de tes listes ul, lorsqu'elles sont dans l'id menu par exemple
 
ca donne un truc du style
 
Code html

Citation :


<div id="menu">
<h1>Ton titre de menu</h1>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
</div>


 
Code CSS

Citation :


 
 
#menu h1
{
font-size: 14pt;
text-align:center;
background-color:#xxxxxx
ou background-image: url("tonimage.jpg" );
}
 
#menu ul,li (quasiment pareil)
{
font-size: 12pt;
text-align:center;
background-color:#xxxxxx
ou background-image: url("tonimage.jpg" );
}


 
En jouant avec les images, les tailles, et les couleurs, grâce aux CSS, on peut arriver a quelque chose de bien ...
 
Et aussi dans :
 
#menu
{
}
 
Tu rajoutes forcément les propriétés qui vont bien pour bien placer ton menu ...
 
Moi comme site avec des gabarits tout prêt pour comprendre comment cela fonctionne je te conseille http://www.alsacreations.com.
 
En espèrant que cela t'aide ... je débute également, mais avec tout ce que j'ai vu, je pense que le seul problème avec la mise en page full CSS c'est de se débrouiller pour que ca aille partout.  
 
C'est faisable cependant, mon site s'affiche correctement sous IE comme sous Firefox, en 800*600 comme en 1024*768 ou plus ...

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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