Puce sur IE complètement décallée, niquel sur FF

Puce sur IE complètement décallée, niquel sur FF - HTML/CSS - Programmation

Marsh Posté le 02-08-2005 à 01:37:57    

Salut,
je refais une page pour un pote pour qu'elle soit plus propre sémantiquement (virer ses tables, font etc) et faire un truc niquel en XHTML+CSS
Cependant j'ai un ptit problème avec mes puces :
 
http://tests.jeanb-net.com/liteboard/
 
Sur FF elles sont bien placées au bon endroit sur IE par contre elles sont au milieu, il y a un truc pour les mettre a leur bonne place parce que y a rien a faire j'y arrive pas.
 
Après il y a plusieurs trucs que j'ai fait qui sont un peu crados hack j'expliquerai mais c'est moins important

Reply

Marsh Posté le 02-08-2005 à 01:37:57   

Reply

Marsh Posté le 02-08-2005 à 01:47:47    

Je suis pas sûr de moi, mais les hr ne posent pas d'énormes problèmes dans IE? Décalage de 3 lignes ...
Si tu fais un clear: both; grâce à autre (EDIT: chose) qu'un <hr />, ça irait pas mieux? :??:
 
EDIT: sur le li directement ...


Message édité par phosphorus68 le 02-08-2005 à 01:49:42
Reply

Marsh Posté le 02-08-2005 à 01:54:21    

sur le li non car le img est dans le li mais sans le hr ça me faisait déjà ça

Reply

Marsh Posté le 02-08-2005 à 18:46:02    

upup :)

Reply

Marsh Posté le 02-08-2005 à 19:04:12    

Fait une bordure de couleur 'transparent' dans le cas ou tes miniatures ne sont pas parcouru par la souris ... ca evitera le decalage pas beau qui a lieu lors de l'apparition de la bordure :]
 
A ta place j'aurais mis le object dans le <h1> en virant le <p> autour qui n'est pas justifié. Si le object ne passe pas tu mets le titre de ton site : ca evite de le cacher ;) et tu enleves la classe a h1 etant donné qu'en general il n'y a qu'un seul h1 (la classe sert donc a rien)
 
remplace egalement ton <p id="bienvenue"> par un h2 :D
 
J'aurais utilise une liste de definition pour tes miniatures personnellement : dl/dt/dd
 
Pour ce qui est des puces, en general l'experience montre qu'il est preferable de mettre un background de la puce que tu veux utiliser, de le placer avec background-position et de jouer sur le padding pour decaler le contenu de l'element afin qu'il se trouve a droite de la puce :p
 
voila ^^

Reply

Marsh Posté le 02-08-2005 à 19:12:25    

Encore une subtilite pour supprimer le class="first" dans ton menu
 

Code :
  1. ul > li:first-child {
  2.   Nos services
  3.  }
  4.  ul > li:first-child + li {
  5.   Forums
  6.  }
  7.  ul > li:first-child + li ~ li {
  8.   Le reste
  9.  }


 
Ca marche pas sous IE rassure toi :D .. mais ta solution non plus ne marche pas sous IE (et tu as raison car ce  n'est pas indispensable de pourrir son code pour si peu).


Message édité par afbilou le 02-08-2005 à 19:20:26
Reply

Marsh Posté le 02-08-2005 à 19:55:27    

afbilou a écrit :

Fait une bordure de couleur 'transparent' dans le cas ou tes miniatures ne sont pas parcouru par la souris ... ca evitera le decalage pas beau qui a lieu lors de l'apparition de la bordure :]
 
A ta place j'aurais mis le object dans le <h1> en virant le <p> autour qui n'est pas justifié. Si le object ne passe pas tu mets le titre de ton site : ca evite de le cacher ;) et tu enleves la classe a h1 etant donné qu'en general il n'y a qu'un seul h1 (la classe sert donc a rien)
 
remplace egalement ton <p id="bienvenue"> par un h2 :D
 
J'aurais utilise une liste de definition pour tes miniatures personnellement : dl/dt/dd
 
Pour ce qui est des puces, en general l'experience montre qu'il est preferable de mettre un background de la puce que tu veux utiliser, de le placer avec background-position et de jouer sur le padding pour decaler le contenu de l'element afin qu'il se trouve a droite de la puce :p
 
voila ^^


 
J'ai pas compris pour l'histoire du h1/object ? je met le object dans le h1 ok mais pour le titre je le met comment ? je fais un p dans le object ? En fait si j'ai fait ça c pour le référencement.
 
Sinon j'ai foutu en dl/dt/dd (j'avais pas fait le rapprochement que je faisais en fait une définition :D) donc du coup j'ai foutu les puces à coup de background mais toujours un problème sous IE car là en plus mon texte se barre en bas :/

Reply

Marsh Posté le 02-08-2005 à 20:07:20    

au passage :  
dl : definition list, debut une liste de definition
dt : definition title
dd : definition description
 
c'est comme cela que je le traduit lol

Reply

Marsh Posté le 02-08-2005 à 20:11:54    

Pour le titre je voyais ca comme ca :

Code :
  1. <h1>
  2.      <object>
  3.           <param />
  4.           <param />
  5.           Titre qui apparait si le Flash n'est pas supporté.
  6.      </object>
  7. </h1>


 
Pour les listes de definitions c'est pas encore ca ;)

Code :
  1. <dl>
  2.      <dt>Les forums de discussion</dt>
  3.      <dd><img /></dd>
  4.      <dd>Ces forums de discussions personnalisables ...</dd>
  6.      <dt>Les livres d'or</dt>
  7.      <dd><img /></dd>
  8.      <dd>Patati patata ...</dd>
  9. </dl>


Peut-etre a adapter plus a ton cas :)
Et biensur jouer sur les CSS pour retrouver le meme positionnement qu'actuellement :)

Reply

Marsh Posté le 02-08-2005 à 20:14:50    

Pour les puces en CSS :

Code :
  1. dl dt {
  2. background-image: url(puce.gif);
  3. bakground-repeat: no-repeat;
  4. background-position: top left;
  5. padding-left: 30px; // a adapter en fonction de la largeur de la puce
  6. }

Reply

Marsh Posté le 02-08-2005 à 20:14:50   

Reply

Marsh Posté le 02-08-2005 à 20:16:08    

afbilou tu m'aides pour le monsieur Xtof_83 car la je m'enfonce à lui expliquer que s'il ne donne pas plus d'infos on ne l'aidera pas plus.

Reply

Marsh Posté le 02-08-2005 à 20:18:03    

J'ai pas suivi dsl :p juste vu que ca gueulait pas mal :D
Puisque tu as l'air motivé demande lui son code en PV s'il a peur que tout le monde le voit ;) Une fois le probleme résolu il aura juste une personne a tuer (toi) pour etre sur de conserver le secret :)


Message édité par afbilou le 02-08-2005 à 20:19:15
Reply

Marsh Posté le 02-08-2005 à 22:25:23    

Ben le pb pour la liste de définition c'est que je voudrait garder le lien ainsi que le soulignage/encadrage du lien/image

Reply

Marsh Posté le 02-08-2005 à 22:51:33    

Et comme ca ? :)

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html lang="fr">
  5. <head>
  6. <title>LiteBoard - Fournisseur de Services Gratuits !</title>
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9. <meta name="Description" content="LiteBoard, fournisseur de forums gratuits, livres d'or gratuits, hérgement d'images ultra-rapides et personnalisables à 100% !" />
  10. <meta name="Keywords" content="liteboard,livres d'or,livre d'or,guestbook,guestbooks,gratuit,gratuits,forum, images, hébergeur, hébergement, service, services, rapide,personnalisable,fournisseur,outils webmasters,webmaster,aide,offre basique,offre privilege,offre excellence" />
  12. <link type="text/css" rel="stylesheet" href="style.css" />
  13. </head>
  15. <body>
  17. <h1>
  18.  <object type="application/x-shockwave-flash" data="services.swf" width="590" height="181" tabindex="8">
  19.   <param name="movie" value="services.swf" />
  20.   LiteBoard - services gratuits
  21.  </object>
  22. </h1>
  24. <dl id="services">
  25.  <dt>Nos Services Gratuits :</dt>
  26.  <dd>
  27.   <ul>
  28.    <li><a href="http://forum.liteboard.net" tabindex="1">Forums</a></li>
  29.    <li><a href="http://book.liteboard.net" tabindex="2">Livres d'Or</a></li>
  30.    <li><a href="http://image.liteboard.net" tabindex="3">Hébergements Images</a></li>
  31.    <li><a href="http://forum.liteboard.net/forum-1.html" tabindex="4">Aide</a></li>
  32.   </ul>
  33.  </dd>
  34. </dl>
  36. <h2 id="bienvenue">Bienvenue sur le réseau LiteBoard</h2>
  38. <div id="content">
  39.  <p>Liteboard s'efforce chaque jour de vous fournir différents services, tous de qualité professionnelle. Etant parfaitement conscient du fait que chaque Internaute ne peut nécessairement ouvrir sa bourse tous les mois, nous avons opté pour vous fournir des services totalement gratuits.</p>
  40.  <p>Ceci étant, même gratuits, nous exigeons de nos scripts et logiciels le plus grand professionnalisme que possible. C'est ainsi que notre équipe se compose maintenant de trois développeurs, d'un administrateur serveur et enfin d'un contact commercial.</p>
  41.  <p>Pour faire place à la description furtive des membres de l'équipe et de nos services, voici un apercu rapide de ces derniers :</p>
  43.  <dl>
  44.   <dt><a href="http://forum.liteboard.net" tabindex="5"><img src="images/forum.png" alt="les forums" />Les forums de discussions </a></dt>
  45.   <dd>Ces forums de discussions personnalisables vous permettrons de créer très facilement une communauté autour d'un thème, d'une passion ou de vos centres d'intêrets. Les couleurs, catégories, descriptions, etc y sont totalement paramétrables.</dd>
  47.   <dt><a href="http://book.liteboard.net" tabindex="6"><img src="images/book.png" alt="les livres d'or" />Les livres d'or</a></dt>
  48.   <dd>Ces Livres d'Or sont à placer sur votre site, pour permettre à tous les Internautes d'y laisser un petit message, un commentaire.</dd><dd>Tout comme les forums, ces livres d'or sont totalement paramétrables.</dd>
  50.   <dt><a href="http://image.liteboard.net" tabindex="7"><img src="images/heberg.png" alt="les hébergements d'images" />Les hebergements d'images</a></dt>
  51.   <dd>Ce service vous permettra de partager vos images ou photos avec des amis, et ce, d'un seul clic ! Plus besoin de créer un compte FTP chez un hébergeur payant !</dd><dd>La simplicité y est de mise.</dd>
  52.  </dl>
  53. </div>
  55. <div id="footer"></div>
  57. </body>
  59. </html>


avec :

Code :
  1. div#content dl dt { clear: both; }
  2. div#content dl dt a img { float: right; }
  3. div#content dl dd { margin-right: une_marge_qui_va_bien px;}

Reply

Marsh Posté le 03-08-2005 à 00:32:49    

Voila j'ai fait mais sous IE il fait disparaitre pas mal de trucs, réaparaitre puis redisparaitre quand ça lui chante je comprend pas ce qu'il me fait :/

Reply

Marsh Posté le 03-08-2005 à 18:06:49    

up :)

Reply

Marsh Posté le 04-08-2005 à 15:16:33    

up :D

Reply

Sujets relatifs:

Leave a Replay

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