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

Marsh Posté le 10-09-2005 à 16:01:47

Bonjour tous le monde...

Donc comme d'habitude mon site subit la destruction des tables...

mais petit probléme...

Sous FF nickel l'affichage...

Mais sous IE comment dire...

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 :

.page_accueil {
width:100%;
float:left;
background-color:#FFFFFF;
margin:0px;
padding:0px;
}
.gauche_accueil, .droite_accueil {
width:25%;
float:left;
}
.centre_accueil {
width:50%;
float:left;
}
.centre_accueil p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
text-align: left;
}

HTML (en bref)

Code :

<div class="page_accueil">
<div class="gauche_accueil">
<p>
.........
<div class="cadre">
<div class="hautdroit"></div><div class="hautgauche"></div>
<p class="titre_cadre">Membres :</p>
<div class="contenu">
<p>Bienvenue :<br><b><?=$ResInfosMembres['Nom']?> <?=$ResInfosMembres['Prenom']?></b></p>
<p align="right"><a href="/modules/membres.php?type=Valider">Modifier compte</a></p>
<p align="center"><a href="index.php?connect=0" class="Lien_vert">Déconnexion</a></p>
</div>
<div class="basdroit"></div><div class="basgauche"></div>
</div>
<? }
else
{?>
...............
<div class="cadre">
<div class="hautdroit"></div><div class="hautgauche"></div>
<p class="titre_cadre">Membres :</p>
<div class="contenu">
<p>login :<input type="text" name="login"></p>
<p>pass :<input type="password" name="pass"></p>
<p align="right"><a href="modules/membres.php">s'inscrire</a></p>
<p align="center"><input type="submit" value="Envoyer" class="bouton"></p>
<p align="center"><?=$msg2?></p>
</div>
<div class="basdroit"></div><div class="basgauche"></div>
</div>
.............
<? }?>
<br>
............
<div class="cadre">
<div class="hautdroit"></div><div class="hautgauche"></div>
<p class="titre_cadre">Inscription à la mailing liste :</p>
<div class="contenu">
<p>Email : <input type="text" name="mailing"></p>
<p align="center"><input type="checkbox" name="inscrit" value="1" class="none"> Pour ce désinscrire</p>
<p align="center"><input type="submit" value="Envoyer" class="bouton"></p>
<p align="center"><?=$msg?></p>
</div>
<div class="basdroit"></div><div class="basgauche"></div>
</div>
...............;;
</p>
</div>
<div class="centre_accueil"><p><?=$intro;?></p></div>
<div class="droite_accueil">
<p>
<? require("modules/langues.php" );?>
<div class="cadre">
<div class="hautdroit"></div><div class="hautgauche"></div>
<p class="titre_cadre">Freeride Actus :</p>
<div class="contenu">
<p><? include_once("actualites/news-accueil.php" );?></p>
</div>
<div class="basdroit"></div><div class="basgauche"></div>
</div>
<br>
<? $SQLNbrMembres='SELECT * FROM membres';
$ReqNbrMembres=mysql_query($SQLNbrMembres);
$NbreMembres=mysql_num_rows($ReqNbrMembres);?>
<div class="cadre">
<div class="hautdroit"></div><div class="hautgauche"></div>
<p class="titre_cadre">Statistiques :</p>
<div class="contenu">
<p align="left">.........................</p>
<p>Membres inscrits:  <?=$NbreMembres?></p>
</div>
<div class="basdroit"></div><div class="basgauche"></div>
</div>
<p align="center">...........................</p>
</p>
</div>
</div>
<div style="clear: both;"></div>

Merci d'avance.... :jap:

Reply

Marsh Posté le 10-09-2005 à 16:01:47

Reply

Marsh Posté le 10-09-2005 à 16:52:20

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;

Reply

Marsh Posté le 10-09-2005 à 16:56:51

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

Reply

Marsh Posté le 10-09-2005 à 17:13:29

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

Reply

Marsh Posté le 10-09-2005 à 17:14:25

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

Reply

Marsh Posté le 10-09-2005 à 17:22:05

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

Reply

Marsh Posté le 10-09-2005 à 17:34:06

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

Code :

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

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

Reply

Marsh Posté le 10-09-2005 à 17:41:21

pas de probléme vais m'instruire là dessus...

Mais pour mon probléme principale....?

Reply

Marsh Posté le 11-09-2005 à 01:07:06

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

Reply

Marsh Posté le 11-09-2005 à 10:58:46

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

Reply

Marsh Posté le 11-09-2005 à 10:58:46

Reply

Marsh Posté le 11-09-2005 à 11:15:52

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

Reply

Marsh Posté le 11-09-2005 à 11:35:10

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

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

Reply

Marsh Posté le 11-09-2005 à 11:49:58

http://southriders.free.fr/beta.php

Reply

Marsh Posté le 11-09-2005 à 12:33:56

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

Reply

Marsh Posté le 11-09-2005 à 12:55:24

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

Reply

Marsh Posté le 11-09-2005 à 13:12:16

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

Reply

Marsh Posté le 11-09-2005 à 13:26:46

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

Reply

Marsh Posté le 11-09-2005 à 13:35:41

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

Reply

Marsh Posté le 11-09-2005 à 13:37:14

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

Reply

Marsh Posté le 11-09-2005 à 14:23:34

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

Reply

Marsh Posté le 11-09-2005 à 14:34:53

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.

Reply

Marsh Posté le 12-09-2005 à 09:46:08

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

Reply

Marsh Posté le 12-09-2005 à 09:52:27

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.

Reply

Marsh Posté le 12-09-2005 à 09:54:32

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

Reply

Marsh Posté le 12-09-2005 à 10:49:25

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

Reply

Marsh Posté le 12-09-2005 à 10:54:43

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

Reply

Marsh Posté le 12-09-2005 à 10:59:46

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

merci

Reply

Marsh Posté le 12-09-2005 à 11:16:41

http://jigsaw.w3.org/css-validator [...] 2Fsite.css

Reply

Marsh Posté le

Reply

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

Sujets relatifs:

Leave a Replay