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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  affichage de liste <ul></ul> sur IE et FF

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

affichage de liste <ul></ul> sur IE et FF

n°1304188
queshua
Posté le 13-02-2006 à 11:57:19  profilanswer
 

Bonjour,
 
c'est concernant un titre "h3" et son texte qui est une liste sur deux colonnes (liste de gauche et liste de droite).
Sur IE, ça s'affiche comme je le souhaites cad :  
 
TITRE H3
liste gauche                   liste droite
liste gauche                   liste droite
...                                ...
 
TITRE H3
liste gauche                   liste droite
liste gauche                   liste droite
...                                ...
 
considérant que ma liste gauche a une position:inherit et la liste droite une position:absolute avec left:..px + top:..px.
 
 
ce que je ne comprends pas c'est que je suis obligée pour mozilla d'insérer des <br/> après mon 1er H3 pour, comment dire, laisser suffisamment de blancs pour y insérer mes listes gauche et droite. En clair, sans les <br/> il ne prend pas en compte la propriété "inherit" de liste gauche et ça s'affiche comme ça (ci-joint mon code et mon css correspondant).
 
TITRE H3
TITRE H3
liste gauche                   liste droite
liste gauche                   liste droite
...                                ...
 
 
code XHTML :
<h3><a name="artisans" id="artisans"></a>&gt;&gt; les artisans </h3>
<ul class="liste-artisan-gauche">
<li><strong>AZIMUT TRAVAUX</strong><br />
Rénovation de bâtiments<br />
91, rue du Puy<br />
38660 La Terrasse<br />
Tél./Fax : 04.76.92.47.55</li>
<li><strong>CREATION GRESIVAUDAN</strong><br />
Paysagiste<br />
1, route des vergers<br />
38660 La Terrasse<br />
Tél./Fax : 04.76.92.40.12</li>
<li><strong>FABBIAN SARL</strong><br />
Travaux de maçonnerie générale<br />
70, rue du Sabot<br />
38660 La Terrasse<br />
Tél./Fax : 04.76.08.29.61</li>
</ul>
<ul class="liste-artisan-droite">
<li><strong>LAPEYRE THIERRY</strong><br />
Menuiserie<br />
Lotissement les jardins du Glézy<br />
7, route des petites roches<br />
38660 La Terrasse<br />
Tél. : 04.76.92.18.67</li>
<li><strong>MERCIER NORBERT</strong><br />
Carreleur<br />
13, rue de Belledonne<br />
lotissement le Mas 2<br />
38660 La Terrasse<br />
Tél. : 04.76.08.27.92 - Fax : 04.76.92.28.07</li>
<li><strong>VIABIL'ETUDES - SARL</strong><br />
bureau d'études VRD<br />
129, place de la mairie<br />
38660 La Terrasse<br />
Tél. : 04.76.92.47.15 - Fax : 04.76.92.45.96</li>
</ul>
<h3><a name="commerçants" id="commerçants"></a>&gt;&gt; les commerces et services</h3>
 
 
...sur son coulis de css :
.liste-artisan-gauche{
 width:300px;
 margin-left:60px;
 top:200px;
 position:inherit;
}
 
.liste-artisan-gauche li {
 font-family: "Arial", "Helvetica", sans-serif;
 font-size: 9pt;
 color: #000;
 text-align: left;
 list-style-type: circle;
 list-style-position: outside;
 margin-bottom: 15px;
}
 
.liste-artisan-droite {
 width:300px;
 left:400px;
 top:200px;
 position:absolute;
}
 
.liste-artisan-droite li {
 font-family: "Arial", "Helvetica", sans-serif;
 list-style-type: circle;
 list-style-position: outside;
 margin-bottom: 15px;
 position: static;
 font-size: 9pt;
 color: #000;
 text-align: left;
}
 
h3 {
 font-family: "Arial", "Helvetica", sans-serif;
 font-size: 10pt;
 color: #000;
 text-align: left;
 background-color: #F7E6E1;
 position: static;
}
 
merci de me faire partager votre expérience à ce sujet car mettre des <br/> pour faire de la mise en page reviendrait pour moi à faire des tableaux et ça me gêne. Merci d'avance.

mood
Publicité
Posté le 13-02-2006 à 11:57:19  profilanswer
 

n°1304227
gatsu35
Blablaté par Harko
Posté le 13-02-2006 à 12:44:44  profilanswer
 

faut mettre tes DEUX UL dans un bloc DIV comme ca tu n'auras pas de soucis
 
car justement le but du float:left, c'est de mettre l'élément à gauche des autres, du coup le bordel est à gauche

n°1304351
queshua
Posté le 13-02-2006 à 14:29:38  profilanswer
 

gatsu35 a écrit :

faut mettre tes DEUX UL dans un bloc DIV comme ca tu n'auras pas de soucis
 
car justement le but du float:left, c'est de mettre l'élément à gauche des autres, du coup le bordel est à gauche


 
 
mais tout est dans un div comme suit
 
<div id="...">
h3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
h3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

n°1304354
gatsu35
Blablaté par Harko
Posté le 13-02-2006 à 14:31:18  profilanswer
 

avant que je crorrige ton truc
tu me vires le caca du <a name="machin" id="machin"></a>
tu met directement un id sur h3 ca fera pareil pour l'ancre

n°1304368
gatsu35
Blablaté par Harko
Posté le 13-02-2006 à 14:37:36  profilanswer
 

tu pourrai montrer une image de ce que tu souhaite exactement obtenir car moi j'ai po tout bien saisi ce que tu veux faire, surtout que tu t'es embarqué avec des positions absolute alors que tu n'as pas forcément besoin

n°1304369
gatsu35
Blablaté par Harko
Posté le 13-02-2006 à 14:37:48  profilanswer
 
n°1304434
queshua
Posté le 13-02-2006 à 15:36:37  profilanswer
 


 
voila le résultat sous IE et c'est ce que je veux (mon titre bleu + mon contenu en liste + puis mon 2nd titre)
http://site.voila.fr/aviard/images/liste_sous_IE.jpg
 
et voila le résultat sous FF (les titres en bleu s'enchainent les uns après les autres sans prendre en compte le contenu entre les deux) :
http://site.voila.fr/aviard/images/liste_sous_FF.jpg
 
s'il n'y a pas de cohérence possible entre IE et FF, je mettrai tout sur une seule colonne et basta mais sur le principe, je pense que j'ai dû faire une erreur dans mes CSS. Merci...
 

n°1304438
gatsu35
Blablaté par Harko
Posté le 13-02-2006 à 15:40:55  profilanswer
 

okay donc laisse moi un ptit instant et jte ponds ca en super simple tu vas voir

n°1304453
queshua
Posté le 13-02-2006 à 15:51:48  profilanswer
 

gatsu35 a écrit :

okay donc laisse moi un ptit instant et jte ponds ca en super simple tu vas voir


 
je viens déjà de corriger le "caca" des ancres : effectivement c'est la même chose mais qu'est-ce que ça change, c'est + conforme par rapport aux spécifications W3C ?  
en tout cas merci pour tout...

n°1304460
gatsu35
Blablaté par Harko
Posté le 13-02-2006 à 15:58:17  profilanswer
 

Code :
  1. <?xml version="1.0" encoding="us-ascii"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5.   <head>
  6.     <title></title>
  7. <style type="text/css">
  8. .liste-artisan-droite, .liste-artisan-droite *, .liste-artisan-gauche, .liste-artisan-gauche *{
  9. margin:0;
  10. padding:0; /*On vires toutes les marges internes et externes = plus de facilité*/
  11. }
  12. .liste-artisan-gauche{
  13. float:left /*Positionnement flottant à gauche pas besoin de chichi et autres grigris*/
  14.  width:300px; /*On met une largeur à ce block de 300px, le block de droite prendra le reste de la largeur qui reste*/
  15. }
  16. .liste-artisan-droite li, .liste-artisan-gauche li {
  17. font-family: "Arial", "Helvetica", sans-serif;
  18. margin-bottom: 15px;
  19. font-size: 9pt;
  20. color: #000;
  21. display:block;
  22. list-style:circle;
  23. padding-left:15px;/*Pour afficher la puce, sous FF il faut incrementer le padding*/
  24. _margin-left:15px; /*Sous IE il faut incrementer le margin*/
  25. _padding-left:0; /*Donc sous IE on remet le padding à 0*/
  26. }
  27. h3 {
  28. font-family: "Arial", "Helvetica", sans-serif;
  29. font-size: 10pt;
  30. color: #000;
  31. text-align: left;
  32. background-color: #F7E6E1;
  33. clear:both; /*On arrête le positionnement flottant après H3 pour ne pas avoir de surprises.*/
  34. }
  35. </style>
  36.   </head>
  37.   <body>
  38.     <h3 id="artisans">
  39.       &gt;&gt; les artisans
  40.     </h3>
  41.     <ul class="liste-artisan-gauche">
  42.       <li>
  43.         <strong>AZIMUT TRAVAUX</strong><br />
  44.         R&eacute;novation de b&acirc;timents<br />
  45.         91, rue du Puy<br />
  46.         38660 La Terrasse<br />
  47.         T&eacute;l./Fax : 04.76.92.47.55
  48.       </li>
  49.       <li>
  50.         <strong>CREATION GRESIVAUDAN</strong><br />
  51.         Paysagiste<br />
  52.         1, route des vergers<br />
  53.         38660 La Terrasse<br />
  54.         T&eacute;l./Fax : 04.76.92.40.12
  55.       </li>
  56.       <li>
  57.         <strong>FABBIAN SARL</strong><br />
  58.         Travaux de ma&ccedil;onnerie g&eacute;n&eacute;rale<br />
  59.         70, rue du Sabot<br />
  60.         38660 La Terrasse<br />
  61.         T&eacute;l./Fax : 04.76.08.29.61
  62.       </li>
  63.     </ul>
  64.     <ul class="liste-artisan-droite">
  65.       <li>
  66.         <strong>LAPEYRE THIERRY</strong><br />
  67.         Menuiserie<br />
  68.         Lotissement les jardins du Gl&eacute;zy<br />
  69.         7, route des petites roches<br />
  70.         38660 La Terrasse<br />
  71.         T&eacute;l. : 04.76.92.18.67
  72.       </li>
  73.       <li>
  74.         <strong>MERCIER NORBERT</strong><br />
  75.         Carreleur<br />
  76.         13, rue de Belledonne<br />
  77.         lotissement le Mas 2<br />
  78.         38660 La Terrasse<br />
  79.         T&eacute;l. : 04.76.08.27.92 - Fax : 04.76.92.28.07
  80.       </li>
  81.       <li>
  82.         <strong>VIABIL'ETUDES - SARL</strong><br />
  83.         bureau d'&eacute;tudes VRD<br />
  84.         129, place de la mairie<br />
  85.         38660 La Terrasse<br />
  86.         T&eacute;l. : 04.76.92.47.15 - Fax : 04.76.92.45.96
  87.       </li>
  88.     </ul>
  89.     <h3 id="commercants">
  90.       &gt;&gt; les
  91.       commerces et services
  92.     </h3>
  93.   </body>
  94. </html>


Message édité par gatsu35 le 13-02-2006 à 16:01:54
mood
Publicité
Posté le 13-02-2006 à 15:58:17  profilanswer
 

n°1304464
gatsu35
Blablaté par Harko
Posté le 13-02-2006 à 15:59:24  profilanswer
 

queshua a écrit :

je viens déjà de corriger le "caca" des ancres : effectivement c'est la même chose mais qu'est-ce que ça change, c'est + conforme par rapport aux spécifications W3C ?  
en tout cas merci pour tout...


C'est :  
1-Plus simple
2-Conforme aux normes W3C
3-name="" ne s'applique qu'aux éléments de formulaires pour etre utilisé coté serveur, et tu peux aussi leur coller un Id
4-Id is your friend

n°1305135
queshua
Posté le 14-02-2006 à 13:41:24  profilanswer
 

merci beaucoup, je vois que mon chemin initiatique CSS n'est pas encore achevé...j'avis potasser tout cela et mettre tout ça en prod.
 
En tout cas merci beaucoup...
 
A+

n°1305669
cerel
Posté le 14-02-2006 à 22:49:57  profilanswer
 

C'est bete qu'il n'existe pas une balise pour les <address> ...


Message édité par cerel le 14-02-2006 à 22:51:25
n°1305670
gatsu35
Blablaté par Harko
Posté le 14-02-2006 à 22:50:38  profilanswer
 

+1

n°1305967
omega2
Posté le 15-02-2006 à 11:57:00  profilanswer
 

S'il existait une balise pour les adresses postale, alors il faudrait des balises spécifique à pleins d'autres regroupements (pourquoi une balise spécifique pour les adresses postales et pas une balise spécifique pour regrouper les caractéristique d'un objet ?) et l'html deviendrait alors difficile à apprendre et surtout peu de navigateurs ne s'amuseraient à gérer plusieurs centaines de balises dont le comportement et l'affichage serait identique et dont seule la signification de l'information contenu varirait.
 
Il ne faut pas oublier qu'il y a déjà eu une version de l'html qui a été un échec à cause du trop grand nombre de balise. (les navigateurs en géraient si peu que dés les mises à jours suivante de la norme, ils en ont viré plein)

n°1306367
queshua
Posté le 15-02-2006 à 15:39:14  profilanswer
 


merci pour le code mais en fait ça affiche tout sur une seule colonne :  
 
http://site.voila.fr/aviard/images/liste2.jpg
 
et quand je rajoute dans mon css :  
.liste-artisan-droite {    
 float:right;    
 width:300px;
}
 
ça m'affiche ça :
http://site.voila.fr/aviard/images/liste3.jpg
 
la liste de droite est bien à droite mais dessous celle de gauche et non pas à coté, bouuuuh ! mais pourquoi sont-ils si méchants ces navigateurs ?

n°1306380
queshua
Posté le 15-02-2006 à 15:46:44  profilanswer
 


 :jap: MERCI !!!
 
ça y est ça marche, j'avais une erreur de syntaxe dans mon css !
Merci beaucoup, j'avais pas mal de pages de pages à faire sur ce modèle et ça m'allège énormément ma feuille de style.
 


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

  affichage de liste <ul></ul> sur IE et FF

 

Sujets relatifs
[C++ débutant] Liste chaînée, suite des problemes :DAide SVP !! Affichage d'un nombre au hasard
Affichage dans la memoire videoCréer un affichage style graph a partir de fichier ?
envoie résultat d'un formulaire sur liste de contactsListe déroulante avec onchange et conservation des données précédentes
Faire un affichage en temps réelAffichage rubrique
Liste des language de programmation[VC++] Liste
Plus de sujets relatifs à : affichage de liste <ul></ul> sur IE et FF


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