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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1167465
Je@nb
Kindly give dime
Posté le 02-08-2005 à 01:37:57  profilanswer
 

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

mood
Publicité
Posté le 02-08-2005 à 01:37:57  profilanswer
 

n°1167469
phosphorus​68
Pseudo à n°
Posté le 02-08-2005 à 01:47:47  profilanswer
 

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
n°1167473
Je@nb
Kindly give dime
Posté le 02-08-2005 à 01:54:21  profilanswer
 

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

n°1168194
Je@nb
Kindly give dime
Posté le 02-08-2005 à 18:46:02  profilanswer
 

upup :)

n°1168205
afbilou
pouet your life
Posté le 02-08-2005 à 19:04:12  profilanswer
 

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

n°1168216
afbilou
pouet your life
Posté le 02-08-2005 à 19:12:25  profilanswer
 

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
n°1168262
Je@nb
Kindly give dime
Posté le 02-08-2005 à 19:55:27  profilanswer
 

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 :/

n°1168274
gatsusat
Posté le 02-08-2005 à 20:07:20  profilanswer
 

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

n°1168277
afbilou
pouet your life
Posté le 02-08-2005 à 20:11:54  profilanswer
 

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

n°1168279
afbilou
pouet your life
Posté le 02-08-2005 à 20:14:50  profilanswer
 

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

mood
Publicité
Posté le 02-08-2005 à 20:14:50  profilanswer
 

n°1168280
gatsusat
Posté le 02-08-2005 à 20:16:08  profilanswer
 

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.

n°1168282
afbilou
pouet your life
Posté le 02-08-2005 à 20:18:03  profilanswer
 

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
n°1168353
Je@nb
Kindly give dime
Posté le 02-08-2005 à 22:25:23  profilanswer
 

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

n°1168364
afbilou
pouet your life
Posté le 02-08-2005 à 22:51:33  profilanswer
 

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;}

n°1168413
Je@nb
Kindly give dime
Posté le 03-08-2005 à 00:32:49  profilanswer
 

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 :/

n°1169204
Je@nb
Kindly give dime
Posté le 03-08-2005 à 18:06:49  profilanswer
 

up :)

n°1169925
Je@nb
Kindly give dime
Posté le 04-08-2005 à 15:16:33  profilanswer
 

up :D


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

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

 

Sujets relatifs
[ADSI] Lister complètement les utilisateurs d'une OUSupprimer complètement des espaces invisibles.
Affichage puce dans une listeprobleme completement inexplicable avec les sockets sous windows c++
[CSS] Comment définit la position d'une puce ?Espacement entre une puce et ce qui suit (listes)
programmation carte à puce[CSS] Puce collée au texte
[Carte à puce] Programmation avec la basiccard[ASP - Oracle] Je suis complètement chèvre ou quoi ?
Plus de sujets relatifs à : Puce sur IE complètement décallée, niquel sur FF

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.116 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)