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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Petit bug d'affichage sous IE maybe les float: en cause

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Petit bug d'affichage sous IE maybe les float: en cause

n°1196560
xtof_83
Freeride Spirit
Posté le 10-09-2005 à 16:01:47  profilanswer
 

Bonjour tous le monde...
 
Donc comme d'habitude mon site subit la destruction des tables...
 
mais petit probléme...
 
Sous FF nickel l'affichage...
http://img36.imageshack.us/img36/8697/ff2nh.th.jpg
 
 
Mais sous IE comment dire...
http://img36.imageshack.us/img36/5229/ie0fp.th.jpg
 
Bon jai regardé les sites d'exeption IE , j'ai cru trouvé quelques chose, mais c'est pas ça...
 
Don je viens vous demander un peu d'aide...
 
le code:
 
CSS:

Code :
  1. .page_accueil {
  2. width:100%;
  3. float:left;
  4. background-color:#FFFFFF;
  5. margin:0px;
  6. padding:0px;
  7. }
  9. .gauche_accueil, .droite_accueil {
  10. width:25%;
  11. float:left;
  12. }
  14. .centre_accueil {
  15. width:50%;
  16. float:left;
  17. }
  19. .centre_accueil p {
  20. font-family: Verdana, Arial, Helvetica, sans-serif;
  21. font-size: 12px;
  22. color: #000000;
  23. font-weight: bold;
  24. text-align: left;
  26. }


 
 
HTML (en bref)
 

Code :
  1. <div class="page_accueil">
  2. <div class="gauche_accueil">
  3.  <p>
  4.  .........
  5.    <div class="cadre">
  6.     <div class="hautdroit"></div><div class="hautgauche"></div>
  7.     <p class="titre_cadre">Membres :</p>
  8.     <div class="contenu">
  9.      <p>Bienvenue :<br><b><?=$ResInfosMembres['Nom']?> <?=$ResInfosMembres['Prenom']?></b></p>
  10.      <p align="right"><a href="/modules/membres.php?type=Valider">Modifier compte</a></p>
  11.      <p align="center"><a href="index.php?connect=0" class="Lien_vert">D&eacute;connexion</a></p>
  12.     </div>
  13.     <div class="basdroit"></div><div class="basgauche"></div>
  14.    </div>
  15.   <? }
  16.   else
  17.    {?>
  18.                                 ...............
  19.    <div class="cadre">
  20.     <div class="hautdroit"></div><div class="hautgauche"></div>
  21.     <p class="titre_cadre">Membres :</p>
  22.     <div class="contenu">
  23.      <p>login :<input type="text" name="login"></p>
  24.      <p>pass :<input type="password" name="pass"></p>
  25.      <p align="right"><a href="modules/membres.php">s'inscrire</a></p>
  26.      <p align="center"><input type="submit" value="Envoyer" class="bouton"></p>
  27.      <p align="center"><?=$msg2?></p>
  28.     </div>
  29.     <div class="basdroit"></div><div class="basgauche"></div>
  30.    </div>
  31.                                 .............
  32.   <? }?>
  33.   <br>
  34.   ............
  35.    <div class="cadre">
  36.     <div class="hautdroit"></div><div class="hautgauche"></div>
  37.     <p class="titre_cadre">Inscription &agrave; la mailing liste :</p>
  38.     <div class="contenu">
  39.      <p>Email :&nbsp;<input type="text" name="mailing"></p>
  40.      <p align="center"><input type="checkbox" name="inscrit" value="1" class="none">&nbsp;Pour ce d&eacute;sinscrire</p>
  41.      <p align="center"><input type="submit" value="Envoyer" class="bouton"></p>
  42.      <p align="center"><?=$msg?></p>
  43.     </div>
  44.     <div class="basdroit"></div><div class="basgauche"></div>
  45.    </div>
  46.   ...............;;
  47.  </p>
  48. </div>
  49. <div class="centre_accueil"><p><?=$intro;?></p></div>
  50. <div class="droite_accueil">
  51.  <p>
  52.  <? require("modules/langues.php" );?>
  53.   <div class="cadre">
  54.    <div class="hautdroit"></div><div class="hautgauche"></div>
  55.    <p class="titre_cadre">Freeride Actus :</p>
  56.    <div class="contenu">
  57.     <p><? include_once("actualites/news-accueil.php" );?></p>
  58.    </div>
  59.    <div class="basdroit"></div><div class="basgauche"></div>
  60.   </div>
  61.   <br>
  62.  <? $SQLNbrMembres='SELECT * FROM membres';
  63.   $ReqNbrMembres=mysql_query($SQLNbrMembres);
  64.   $NbreMembres=mysql_num_rows($ReqNbrMembres);?>
  65.   <div class="cadre">
  66.    <div class="hautdroit"></div><div class="hautgauche"></div>
  67.    <p class="titre_cadre">Statistiques :</p>
  68.    <div class="contenu">
  69.                  <p align="left">.........................</p>
  70.     <p>Membres inscrits:&nbsp;&nbsp;<?=$NbreMembres?></p>
  71.    </div>
  72.    <div class="basdroit"></div><div class="basgauche"></div>
  73.   </div>
  74.   <p align="center">...........................</p>
  75.  </p>
  76. </div>
  77. </div>
  78. <div style="clear: both;"></div>


 
Merci d'avance.... :jap:

mood
Publicité
Posté le 10-09-2005 à 16:01:47  profilanswer
 

n°1196592
Badze
Aime les frites
Posté le 10-09-2005 à 16:52:20  profilanswer
 

Salut,
Je n'ai pas trop lus ton code par fénéantise mais pourquoi ne pas mettre le bloc qui est sencé etre a droite avec un float:right;

n°1196598
xtof_83
Freeride Spirit
Posté le 10-09-2005 à 16:56:51  profilanswer
 

Tant fais pas le code n'est pas là pour etre lu...enfin...juste le début..
 
Ben oui j'y ait pensé..affichage encore pire
 
Sous FF sa change rien
Mais sous IE se me fait un ecran qui s'etalle sur 80000000px en largeur..

n°1196609
Badze
Aime les frites
Posté le 10-09-2005 à 17:13:29  profilanswer
 

fait voir le css de droite_accueil stp.
autrement pourquoi tu met un float:left; dans ton page_accueil, a mon sens il n'est pas utile sanchant que celui ci est ton globale et quil prendre 100% de ta largeur de page.
 
a premiere vu, j'ai limpression de ton bloc droite est trop grand pour passez a droite de tes autres blocs.


Message édité par Badze le 10-09-2005 à 17:15:03
n°1196610
FlorentG
Unité de Masse
Posté le 10-09-2005 à 17:14:25  profilanswer
 

Déjà un conseil, au lieu de te faire chier avec tes div vides pour les coins arrondis (autant utiliser des tableaux ;), fait des blocs normaux, et utilise des machins style -moz-boder-radius -> Sous Gecko les coins seront arrondis, et sur le reste ce sera carré, ce qui change pas grand chose, et ça permet d'aller le  code en virant vraiment tout ce qui est présentation...

n°1196616
xtof_83
Freeride Spirit
Posté le 10-09-2005 à 17:22:05  profilanswer
 

Le CSS de droite_accueil pour linstant c'étais le même que gauch_accueil...je te l'ai donné
 
et puis la taille sa m'étonnerais déja sous FF sa rentre et puis tous est en % donc sa devrais ce tassé en fonction...
 
FlorentG...je connais pas trop cela...et la jai passé quelques petites heures à galérer pour ces coins arrondi...
 
Donc vais attendre un peu avant de changer cela....

n°1196621
omega2
Posté le 10-09-2005 à 17:34:06  profilanswer
 

Pour ce que j'ai vu de la syntaxe, c'est :

Code :
  1. -moz-border-radius n1 n2 n3 n4


Les nx étant à changer en fonction de la taille (en pixels) de l'arrondis de chaque coin. Je ne sais pas dans quel ordre ils sont par contre.
 
En css3 :

Code :
  1. border-radius n1 n2


Là, c'est la largeur et la hauteur des 4 coins qui sont définis. Il y a la même syntaxe pour régler les coins un par un ce qui permet de donner des tailles différentes à chaque arrondis.
 
 
Dans les deux cas, ca permet d'éviter l'utiliser de pleins de div et d'images servant uniquement à créer cet effet d'arrondis. C'est le navigateur qui se démerdera à afficher les arrondis comme un grand à partir des infos du css.


Message édité par omega2 le 10-09-2005 à 17:35:35
n°1196628
xtof_83
Freeride Spirit
Posté le 10-09-2005 à 17:41:21  profilanswer
 

pas de probléme vais m'instruire là dessus...
 
Mais pour mon probléme principale....?

n°1196842
xtof_83
Freeride Spirit
Posté le 11-09-2005 à 01:07:06  profilanswer
 

Il y a un truc bizare...j'avais pas vu au début
en réduisant la fenetre ou l'agrandisant sous IE, le menu ce place bien...
 
Mais à certaine taille de fenetre il se place en bas...
 
Comprend pas...
Merci d'avance...

n°1196897
Flyman30
Posté le 11-09-2005 à 10:58:46  profilanswer
 

xtof_83 a écrit :

Il y a un truc bizare...j'avais pas vu au début
en réduisant la fenetre ou l'agrandisant sous IE, le menu ce place bien...
 
Mais à certaine taille de fenetre il se place en bas...
 
Comprend pas...
Merci d'avance...


 
Ça c'est les floats quand il n'y a plus assez de place, ça passe en dessous c'est un comportement normal de float  :D  

mood
Publicité
Posté le 11-09-2005 à 10:58:46  profilanswer
 

n°1196905
gatsusat
Posté le 11-09-2005 à 11:15:52  profilanswer
 

si tu fais des CSS partout, tu me vires tous tes attributs align="machin" ca n'a rien à faire ici.
 

n°1196915
xtof_83
Freeride Spirit
Posté le 11-09-2005 à 11:35:10  profilanswer
 

gatsusat a écrit :

si tu fais des CSS partout, tu me vires tous tes attributs align="machin" ca n'a rien à faire ici.


 
 
Oui c'est vrai je vais faire cela...
 
Mais une question...il y a comme même beaucoup de div là, donc admettons que je fasse le remplacement pour les contours rond...
 
Sa en fait toujours beaucoup...c'est moi qui me démerde mal, faut il utiliser autrement ce contenu de page???
 

Citation :

Ça c'est les floats quand il n'y a plus assez de place, ça passe en dessous c'est un comportement normal de float  :D  


 
Mais pourquoi...je sais pas ...vu que tous est en flotant sa devrais etre bon...sa devrait se réduire équitablement...
 
Bon vais mettre le truc en ligne pour vous montrez... :)

n°1196931
xtof_83
Freeride Spirit
Posté le 11-09-2005 à 11:49:58  profilanswer
 
n°1196959
Badze
Aime les frites
Posté le 11-09-2005 à 12:33:56  profilanswer
 

Donc c'était bien un probleme d'espacement ?

n°1196971
xtof_83
Freeride Spirit
Posté le 11-09-2005 à 12:55:24  profilanswer
 

Ben je sais pas ça marche toujours pas....

n°1196991
Badze
Aime les frites
Posté le 11-09-2005 à 13:12:16  profilanswer
 

Je suis persuader que c'est bien un probleme de place.
Réduit beaucoup le centrale.
Et je serai a ta place, j'éviterai les tailles en % pour tout ton design. cela donnera une catastrophe pour les grandes résolutions.


Message édité par Badze le 11-09-2005 à 13:12:34
n°1196998
xtof_83
Freeride Spirit
Posté le 11-09-2005 à 13:26:46  profilanswer
 

donc faire un site en pour affichage 1024??
 
 
Dans ce cas je doit faire un cadre de quel taille maxi?
 
 
Enfin je préfére comme même en %...
...
 
Je peux combiner ceci...
 
Les 2 menu, gauche droite en dur...et le centre en %
 
Ce serais le mieux non??


Message édité par xtof_83 le 11-09-2005 à 13:28:06
n°1197003
plainsofpa​in
Pingouino's lover
Posté le 11-09-2005 à 13:35:41  profilanswer
 

Change le width du centre en mettant 49% au lieu de 50%.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1197005
omega2
Posté le 11-09-2005 à 13:37:14  profilanswer
 

Il me semble que c'est fortement déconseillé de mélang"er à la fois des % de em et des px vu que certains navigateurs ont beaucoup de mal à s'en sortir quand il y a de tout.
Ca m'étonerait pas que ca vienne de là.

n°1197052
plainsofpa​in
Pingouino's lover
Posté le 11-09-2005 à 14:23:34  profilanswer
 

Nan mais le problème est que IE prend son propre modèle de marge, donc faudrait diminuer la largeur de la partie centrale pour IE.
 
C'est une des méthodes que j'utilise en tout cas.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1197063
omega2
Posté le 11-09-2005 à 14:34:53  profilanswer
 

Plus j'avance avec les css plus je me rend compte que IE fait n'importe quoi avec les marges et autres positions au pixel prés.
Suffit de voir le nombre de fois où on a besoin de réduire des tailles ou de mettre tailles en négatif, c'est affolant.

n°1197384
xtof_83
Freeride Spirit
Posté le 12-09-2005 à 09:46:08  profilanswer
 

Bon merci les gars en méttant 49% sa marche bien mieux...
 
C'est complétement absurde, mais sa marche...
 
Merci...et Vive les bugs d'IE...

n°1197387
0x90
→
Posté le 12-09-2005 à 09:52:27  profilanswer
 

Ca se voit dans les screenshot, y'a une marge entre le premier menu et le centre de bcp plus grosse sous IE, un simple pb de différence de modèle de boite je dirais. ( margin/padding dehors au lieu d'être dedans )


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
n°1197390
FlorentG
Unité de Masse
Posté le 12-09-2005 à 09:54:32  profilanswer
 

Forcément, avec un Doctype à moitié complet, et transitionnal en plus, le modèle de boîte sera celui de Microsoft... La première chose qu'un développeur qui se met au CSS devrait savoir, c'est le doctype switching...
 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

n°1197447
xtof_83
Freeride Spirit
Posté le 12-09-2005 à 10:49:25  profilanswer
 

J'allais dire merci beaucoup, :lol:...mais c'est encore pire...
 
Enfin je le garde comme même car si c'est toi qui me le donne, sa doit être méga important...
 
Ben je vais tenter de faire marcher avec ce doctype...

n°1197453
FlorentG
Unité de Masse
Posté le 12-09-2005 à 10:54:43  profilanswer
 

Hésite pas à valider le code avec la DTD Strict, ça te permettera de voir quels sont les éléments dépréciés

n°1197463
xtof_83
Freeride Spirit
Posté le 12-09-2005 à 10:59:46  profilanswer
 

D'acord je vais faire cela, sa me permettra d'être sur de la syntaxe...
 
merci ;)

n°1197482
xtof_83
Freeride Spirit
Posté le 12-09-2005 à 11:16:41  profilanswer
 
mood
Publicité
Posté le   profilanswer
 


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

  [CSS] Petit bug d'affichage sous IE maybe les float: en cause

 

Sujets relatifs
[XHTML et CSS]Projet: Quand le neophyte apprend les standards(v Page3)CSS : quelle solution pour conserver mise en page avec layout ?
Changer l'affichage d'une page lorsqu'un utilisateur se loggue[CSS] Problème avec hover & active
[CSS] mise en page d'un menu vertical : pb sous FF[MySQL / Java] Petit souci avec les champs de type DATE
=OSD= Affichage par dessus overlay (fenêtre DirectX / OpenGL)[réglé] firefox ne lit plus ma feuille CSS mais IE oui!
impossible de réouvrir ma base de donnée a cause d'un .ldbXML Writer genre float
Plus de sujets relatifs à : [CSS] Petit bug d'affichage sous IE maybe les float: en cause

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

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