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

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 3 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Espace à droite d'une balise <li> ou <ul>

rufo

Pas me confondre avec Lycos!

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 :

<table class="ContextualMenu">
<tbody>
<tr>
<th class="ContextualMenu">Suivi DDT</th>
</tr>
<tr>
<td class="ContextualMenu">
<ul class="ContextualMenu">
<li><a class="ContextualMenu" href="">Créer une demande</a></li>
<li><a class="ContextualMenu" href="">Demandes soumises</a></li>
</ul>
</td>
</tr>
</tbody>
</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

Publicité

FlorentG

Unité de Masse

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"

Explique-nous pourquoi tu dois absolument mettre un tableau

masklinn

í dag viðrar vel til loftárása

rufo a écrit :

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

FlorentG

Unité de Masse

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

Code :

<div>
<h2>Suivi DDT</h2>
<ul class="ContextualMenu">
<li><a class="ContextualMenu" href="">Créer une demande</a></li>
<li><a class="ContextualMenu" href="">Demandes soumises</a></li>
</ul>
</div>

Ou dans une liste de définitions...

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

masklinn

í dag viðrar vel til loftárása

FlorentG a écrit :

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

Code :

<div>
<h2>Suivi DDT</h2>
<ul class="ContextualMenu">
<li><a class="ContextualMenu" href="">Créer une demande</a></li>
<li><a class="ContextualMenu" href="">Demandes soumises</a></li>
</ul>
</div>

Ou dans une liste de définitions...

les classes sur les <a> sont inutiles
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

FlorentG

Unité de Masse

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

rufo

Pas me confondre avec Lycos!

Voici ma page :

Code :

+--------------------------------------------------------------------+
| (img Logo) (Menu principal) |
+---------------+----------------------------------------------------+
| | |
| +----------+ | (Contenu de ma page) |
| | Menu 1 | | |
| +----------+ | |
| | * lien1 | | |
| | * lien2 | | |
| | * lien3 | | |
| +----------+ | |
| | |
| | |
| +----------+ | |
| | Menu 2 | | |
| +----------+ | |
| | * lien1 | | |
| | * lien2 | | |
| +----------+ | |
| | |
| | |
+---------------+----------------------------------------------------+

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

FlorentG

Unité de Masse

C'est faisable sans tableaux je crois bien

masklinn

í dag viðrar vel til loftárása

FlorentG a écrit :

C'est faisable sans tableaux je crois bien

c'est même sûr

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

rufo

Pas me confondre avec Lycos!

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.

Publicité

FlorentG

Unité de Masse

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

rufo

Pas me confondre avec Lycos!

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

FlorentG

Unité de Masse

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

rufo

Pas me confondre avec Lycos!

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

FlorentG

Unité de Masse

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

rufo

Pas me confondre avec Lycos!

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

FlorentG

Unité de Masse

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

rufo

Pas me confondre avec Lycos!

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é?

FlorentG

Unité de Masse

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

rufo

Pas me confondre avec Lycos!

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

rufo

Pas me confondre avec Lycos!

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

FlorentG

Unité de Masse

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

rufo

Pas me confondre avec Lycos!

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:

rufo

Pas me confondre avec Lycos!

FlorentG 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)?

FlorentG

Unité de Masse

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

Code :

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

FlorentG

Unité de Masse

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

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

rufo

Pas me confondre avec Lycos!

FlorentG a écrit :

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?

rufo

Pas me confondre avec Lycos!

FlorentG a écrit :

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

Code :

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

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

FlorentG

Unité de Masse

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

FlorentG

Unité de Masse

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

FlorentG

Unité de Masse

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

masklinn

í dag viðrar vel til loftárása

FlorentG a écrit :

Il est censé permettre la visualisation sur les navigateurs qui le gèrent

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

rufo

Pas me confondre avec Lycos!

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:

FlorentG

Unité de Masse

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

rufo

Pas me confondre avec Lycos!

FlorentG a écrit :

C'est presque un hack 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:

FlorentG

Unité de Masse

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

Code :

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

rufo

Pas me confondre avec Lycos!

FlorentG a écrit :

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

Code :

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

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

rufo

Pas me confondre avec Lycos!

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

rufo

Pas me confondre avec Lycos!

FlorentG a écrit :

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

Code :

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

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

Code :

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

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

plainsofpain

Pingouino's lover

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

Publicité

Page : 1 2 3

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Couleurs ascenceur d'une balise overflow	probleme balise <div>
[C] gestion du caractère espace	Espace sécurisée ?
Probleme de dimension d'un SVG avec la balise EMBED	Espace après FORM
Si j'ajoute la balise script, IE rend une page blanche	distribution de l'espace avec dreamweaver mx
[html] largeur d'une balise Select	L'évènement onclick n'a aucun effet sur la balise option sous IE6
Plus de sujets relatifs à : Espace à droite d'une balise <li> ou <ul>

Page générée en 0.100 secondes