Discussion :

[julietta]

Bonjour à tous,

Je me suis pris la riche idée de faire mon site sous spip...COOL me direz-vous... ! Ce à quoi je vous répondrai : c’est sûr ! mais pas quand il faut s’adapter à IE pour se tenir à la portée de 90% des utilisateurs...

Vous l’aurez donc compris je bataille avec IE (dire que je suis passé sous mac pour échapper à windaube mais il nous rattrape toujours !)(dogme windaubien)

Que je vous explique : Mon css suis la forme suivante
#navigation
width:250px ;
padding : 0 ;
margin : 0 ;

#corps
margin:0px 20px 20px 430px ;


#contextes
background-color:white ;
padding:0px ;
margin:0px 5px 0px 155px ;
text-align:center ;
line-height:1.5em ;
width:239px ;
position : absolute ;



Le problème vient évidemment de ce position : absolute ; qui non-interprété par IE me fout mon menu de navigation au beau milieu de ma page...
Alors j’ai tenté le float:left ; et là oh magie le menu apparait bien à sa place...Mais voila la colonne centrale se trouve décalée vers le bas pour se placer en dessous de mon fameux menu de navigation...

J’avoue ne pas savoir comment résoudre ce problème qui dépasse mes compétences... Je compte donc sur les votres (bah oui faut être honnête)

l’adresse de mon site : http://la.cabotte.free.fr
J’ai remis les paramètres par défaut mais si vous le voulez je peux remettre le "float" pour que vous puissiez voir où se situe le problème d’affichage...

Merci à vous tous !!!

[Tsilefy]

Et pourtant ....
Pour une fois, ce n'est pas de la faute de ce pauvre IE

Tu mets un positionnement absolu mais tu n'indiques pas où positionner ton div. Du coup, chaque navigateur l'interprète un peu comme il veut.

mets un top: xxpx; left: xxpx; par ex, et le div se mettra là où tu veux.

[julietta]

si c'est bien ça tu es mon sauveur !!!

Mais n'empêche que pour la défense de Firefox : lui au moins il le met là où il faut

[julietta]

voici mon nouveau code

#navigation {
width:250px;
padding: 0;
margin: 0 ;
}
#corps{
margin:0px 20px 20px 430px;
}

#contextes{
background-color:white;
padding:0px;
margin:0px 5px 0px 155px;
margin-top: 0px;
margin-left: 40;
text-align:center;
line-height:1.5em;
width:239px;
position: absolute;
}


Nickel sur firefox comme d'habitude et meme problème sur IE

[julietta]

http://la.cabotte.free.fr



Avez-vous (comme moi) un affichage merdique sur votre IE ?

[Tsilefy]

normal puisque tu ne sembles pas avoir fait ce que j'ai dit : positionner le div.
Quand n met un élément en position absolu, il sort du flux normal des éléments, pour se positionner là où on lui dit de se mettre.
Donc, il faut ajouter par ex (adapter les valeurs pour ton cas):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
position: absolute;
top:150px; /*distance par rapport au haut du bloc qui le contient*/
left:10px; /*distance par rapport à la gauche du bloc */

au lieu de top, left, tu peux utiliser top/right, bottom/right, bottom/left suivant la référence que tu prends pour le positionner

[julietta]

Merci Tsilefy pour ton aide !!!!

En fait hier soir me rendant compte de mon erreur j'ai modifié le code comme ceci :

#contextes{
background-color:white;
padding:0px;
margin:0px 5px 0px 155px;
top: 220px;
left: 40px;
text-align:center;
line-height:1.5em;
width:239px;
position: absolute;
}

Visiblement cela fonctionne sur IE mais très franchement hier soir je ne voyais pas de changement et aujourd"hui en rallumant le pc tout est nickel....
Pourtant c'est pas faute d'avoir VIDER le CACHE de IE une vingtaine de fois !!!

Concernant mon code est-ce qu'il ne serait pas plus propre de l'écrire ainsi :

#contextes{
background-color:white;
position: absolute;
top: 220px;
left: 40px;
padding:0px;
margin:0px 5px 0px 155px;
text-align:center;
line-height:1.5em;
width:239px;
}

[julietta]

non bon ben je reviens vers vous...

sur IE ça ne fonctionne toujours pas...Le menu n'est plus en plein milieu mais il génère un espace blanc à droite du menu...

[Tsilefy]

Pourtant, chez moi ça semble correct.
voir ici : http://img140.imageshack.us/my.php?i...4107941lc1.jpg



En même temps, vu que ton site fait de la pub pour FireFox, je comprends que ton IE râle et traîne les pieds

[julietta]

je l'ai mise dans la journée tant IE me gonfle !!!
Non mais !!!



Oui en fait maintenant l'affichage est correct parce que j'ai enlevé le bloc "newsletter" et dès que je le mets il apparait sur IE comme étant beaucoup plus large, du coup IE complète avec du blanc (alors que Firefox ne pose évidemment pas de souci)...
Et j'avoue ne pas avoir trouvé où se situe le paramètre "width" de ce bloc...Du coup je l'ai tout simplement enlevé...

[julietta]

En tous les cas MERCI Tsilefy !!!
Tes conseils m'ont vraiment aidé !

[Tsilefy]

Pas de quoi

Tu peux utiliser les commentaires conditionnels et spécifier des styles spécifiques à IE, et ainsi garder un (bon) style pour les autres navigateurs.
Mais bon, ça relève du forum HTML /CSS, pas d'ici.

[julietta]

oui oui bien sûr je ferais ça !
Enfin tu me connais quand même, j'y avais tout de suite pensé...