Différence d'interpretation IE/firefox sur blog

Différence d'interpretation IE/firefox sur blog - HTML/CSS - Programmation

Marsh Posté le 02-08-2007 à 01:01:03    

Bien le bonjour,
 
Regardez cette page alternativement avec IE et firefox.
 
http://xxx.zeblog.com/
 
Avec firefox, tout a l'air à sa place.
 
Avec IE, c'est la cata : l'image se retrouve un metre en bas et les coins arrondis du cadre principal ont disparu.
 
Auriez-vous une idée de la provenance de ces erreur ? Est-ce remédiable ?
 
Merci  :jap:


Message édité par Pascal le nain le 18-01-2011 à 21:48:54
Reply

Marsh Posté le 02-08-2007 à 01:01:03   

Reply

Marsh Posté le 02-08-2007 à 02:03:25    

Pour les arrondis, tu utilises des propriétés CSS propres a FF, donc normal.
Pour la div qui se barre, faut dire que t'utilises un mélange de margins et de floats un peu bidouille à mon humble vue.
Tu peux pas essayer de mettre #centre en float ?


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 02-08-2007 à 12:44:08    

avec float ca change absolument rien  :sweat:

Reply

Marsh Posté le 02-08-2007 à 13:06:16    

Pascal le nain a écrit :

avec float ca change absolument rien  :sweat:


En float:right, et tu le mets AVANT la partie gauche ?


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 02-08-2007 à 13:35:08    

arf j'ai rien compris XD

Reply

Marsh Posté le 02-08-2007 à 13:44:53    

Pour l'instant tu as :

Code :
  1. <div id="gauche">
  2.  blabla
  3. </div>
  4. <div id="centre">
  5.  blablabla
  6. </div>


Code :
  1. #gauche {
  2.  float:left;
  3. }
  4. #centre {
  5. }
 

Et ça ce serait mieux (du moins ça marcherais):

Code :
  1. <div id="centre"> <!-- #centre est avant #gauche -->
  2.  blablabla
  3. </div>
  4. <div id="gauche">
  5.  blabla
  6. </div>


Code :
  1. #gauche {
  2.  float:left;
  3. }
  4. #centre {
  5.  float:right;
  6. }


valou


Message édité par theredled le 02-08-2007 à 13:45:06

---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 02-08-2007 à 14:59:02    

Ca commence à être ca.
 
Mais maitenant c'est la barre de gauche qui se retrouve 1 metre plus bas ^^

Reply

Marsh Posté le 02-08-2007 à 16:25:41    

Pascal le nain a écrit :

Ca commence à être ca.

 

Mais maitenant c'est la barre de gauche qui se retrouve 1 metre plus bas ^^


Ah oui, normal, vire la marge gauche de la div #centre aussi, sinon ça va pas le faire.


Message édité par theredled le 02-08-2007 à 16:27:44

---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 02-08-2007 à 16:43:08    

Arf quand on résoud un problème,yen a toujours un nouveau :)
 
Maintenant, les deux parties de la page sont bien au bon niveau, mais la partie droite est alignée a droite :( ca devrait être centré  :ange:
 
pourtant, en faisant une recherche dans le code, je ne trouve l'instruction "align:right" que pour le pied de page où est affiché "aucun commentaire"  :whistle:
Or l'image n'est pas concernée par le div.piedsdepage

Message cité 1 fois
Message édité par Pascal le nain le 02-08-2007 à 16:50:12
Reply

Marsh Posté le 02-08-2007 à 19:14:50    

Roh un lapin
 
Tu veux que ta div soit alignée sur le menu de gauche ?


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 02-08-2007 à 19:14:50   

Reply

Marsh Posté le 02-08-2007 à 19:20:58    

Pascal le nain a écrit :

Arf quand on résoud un problème,yen a toujours un nouveau :)

 

Maintenant, les deux parties de la page sont bien au bon niveau, mais la partie droite est alignée a droite :( ca devrait être centré  :ange:

 

pourtant, en faisant une recherche dans le code, je ne trouve l'instruction "align:right" que pour le pied de page où est affiché "aucun commentaire"  :whistle:
Or l'image n'est pas concernée par le div.piedsdepage


Hep, je conseille de faire une petite recherche sur Google pour savoir ce que veux dire float:right, voire de lire des tutos sur les bases (ou pas) du css ;)

 


Message édité par theredled le 02-08-2007 à 19:21:28

---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 02-08-2007 à 20:17:14    

theredled a écrit :

Roh un lapin
 
Tu veux que ta div soit alignée sur le menu de gauche ?


 
Je veux simplement que le contenu de la page principal soit centré ou aligné a gauche, et non a droite comme c'est le cas.
Le tout avec une barre de menu a gauche ;)

Reply

Marsh Posté le 02-08-2007 à 20:47:58    

Et donc tu as déja essayé de mettre les 2 en float:left (ce coup-ci en mettant la div #centre après #gauche, normal quoi), et toujours sans margin-left sur #centre ?


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 02-08-2007 à 21:40:13    

dans ce cas là les deux parties [barre menu] et [page] s'inverses ! :D
le menu passe à droite et vis versa :p

Reply

Marsh Posté le 03-08-2007 à 00:10:15    

Pascal le nain a écrit :

dans ce cas là les deux parties [barre menu] et [page] s'inverses ! :D
le menu passe à droite et vis versa :p


T'as bien réinversé les 2 divs ?
 
L'inversion des div ce n'est QUE pour le coup du float:right.


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 03-08-2007 à 00:17:25    

Voila ce que j'ai (dans l'ordre) :
 

Code :
  1. #gauche {
  2. width:144px;
  3. float:left;
  4. padding:0px;
  5. margin-top:-8px;
  6. text-align:right;
  7. }
  8. #centre {
  9.  width:auto;
  10.         float:right;
  11.         position:relative;
  12. text-align:left;
  13. margin-top:5px;
  14. }

Reply

Marsh Posté le 03-08-2007 à 00:40:28    

Quand je te parle d'ordre c'est dans le HTML ! dans le css ça change rien, enfin pas ici.


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 03-08-2007 à 12:37:27    

arf en mettant la partie gauche AVANT la partie droite dans le code html ca change rien non plus :s

Reply

Marsh Posté le 03-08-2007 à 14:43:14    

sur ton site, #centre est toujours en float:right, hein. Faut qu'il soit en float:left
 

Citation :

Et donc tu as déja essayé de mettre les 2 en float:left (ce coup-ci en mettant la div #centre après #gauche, normal quoi), et toujours sans margin-left sur #centre ?


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 03-08-2007 à 21:51:11    

victoire :) en float:left ca marche nickel c'est fabuleux :D
 
allé une tite dernière question qui doit te paraitre enfantine.
 
Comment centrer la partie de droite ?
J'ai essayé text-align:center. ca ne marche pas... ^^

Reply

Marsh Posté le 03-08-2007 à 22:28:57    

Pascal le nain a écrit :

victoire :) en float:left ca marche nickel c'est fabuleux :D

 

allé une tite dernière question qui doit te paraitre enfantine.

 

Comment centrer la partie de droite ?
J'ai essayé text-align:center. ca ne marche pas... ^^


dans text-align il y a text ;)
Pour centrer ya plusieurs moyens, mais là j'ai bien l'impression que ton conteneur a une taille fixe non ? Donc le mieux est surement de simplement mettre une petite marge à gauche de #centre pour le décaler jusqu'au bon endroit...

 



Message édité par theredled le 03-08-2007 à 22:29:34

---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 03-08-2007 à 23:53:11    

Ca n'est pas adapté, car l'image affichée n'a jamais la même largeur ;)
 
Je veux que :
la largeur de la page entière soit fixe
la largeur du menu soit fixe
la largeur de la partie droite soit fixe (évident)
l'image se centre dans la partie de droite ;)

Reply

Marsh Posté le 04-08-2007 à 00:00:59    

dac :D
 
Alors pourquoi tu n'élargis pas la partie de droite jusqu'au bord droit ? ensuite tu n'auras effectivement plus qu'a mettre du text-align pour centrer l'image.
 
Tout à l'heure je croyais que tu mettais le text-align pour centrer la div :D je me suis trompé n'est-ce pas ? :o


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 04-08-2007 à 13:21:43    

Regarde ce billet
 
http://xxxx.zeblog.com/231780-ennui.../
 
Il a une largeur faible.
Il doit être centré.
et avec text-align:center; ca ne fonctionne pas :s


Message édité par Pascal le nain le 18-01-2011 à 21:50:02
Reply

Marsh Posté le 04-08-2007 à 13:44:22    

ah si c'est bon ! je m'étais simplement trompé de div :D
 
Ca marche nickel merci beaucoup pour ta patience theredled ;)

Reply

Marsh Posté le 04-08-2007 à 14:01:13    

arf non j'ai parlé trop vite :s
 
Maintenant IE a pas l'air d'apprécier les div :
 
http://xxx.zeblog.com
 
Le billet affiché se retrouve de nouveau 6 pieds sous terre :s
 
Si l'on modifie le centre en mettant float:right, l'image revient à gauche mais reste aussi bas...
 
Ne faut-il pas jouer sur l'attribut "position" qui en actuellement est en "relative" ?


Message édité par Pascal le nain le 18-01-2011 à 21:50:15
Reply

Marsh Posté le 04-08-2007 à 18:28:57    

ben si tu peux le mettre en "absolute" avec un atribut "top", t'auras pas de surprise selon les navigateurs.

Reply

Marsh Posté le 04-08-2007 à 18:40:33    

mmh je comprend pas la syntaxe. où faut-il placer le "top" ?
 
merci

Reply

Marsh Posté le 04-08-2007 à 18:48:47    

ah si c'est bon ca a l'air de marcher sur les deux navigateur :)
 
Merci beaucoup à vous deux :)

Reply

Marsh Posté le 05-08-2007 à 21:39:43    

L'absolute c'est mal :o
Du moins c'est bien de savoir faire sans.
Mais bon ça te convient, donc cool.


---------------
Contes de fées en yaourt --- --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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