Lecture du CSS sur différents navigateurs

Résolu/Fermé
Gwoko - 8 août 2009 à 19:21
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 - 9 août 2009 à 10:43
Bonjour à tous,

Etant néophyte en matière de programmation il m'arrive evidemment quelques soucis.
Me voilà en train de refaire mon site, pour lui donner un coup de jeune et revoir l'essentiel de son contenu. A l'heure actuelle je paufine encore les détails avant de créer toutes les pages et de le remplir avec mes amis.

Bref, ce n'était pas ma réellement ma question mais je jugeait nécessaire de faire une petite introduction. Pour le point de vue technique, mon site est hébergé par forumactif.com. En effet, ayant déja mon forum sur ces serveurs, j'ai profité de leur module de pages HTMLs afin de garder mon nom de domaine et de pouvoir travailler la programmation tout en jugeant l'avancement en direct du site.
Petite contrainte néanmoins avec cette méthode, les feuilles de styles ne peuvent pas être externes et sont donc rattachées au code HTML.

Voilà mon problème : J'ai un "problème" de positionnement de mes blocs. En effet, afin d'avoir une page "déroulable" (c'est à dire qui s'agrandit automatiquement lorsque je rajoute du texte), j'utilise la technique suivante pour quasiment tous les éléments de mon site (et c'est là aussi ce qui rend la structure du site complexe au premier abord !) :

*élément de haut avec pour background le haut de l'image*
*élément de centre avec pour background le centre de l'image, sans hauteur fixe afin que le background se répète dans la hauteur. C'est cet élément qui contient tout le texte de l'élément plus global*
*élément de bas avec pour background le bas de l'image*

Pour ne pas vous perdre lors de la lecture de la source du site je vous ai préparé un petit schéma ^^'.
http://img193.imageshack.us/img193/6003/schmasite.jpg


A vrai dire je ne sais pas exactement quel est le problème sinon je ne viendrais pas vous poser la question ... Et comme un exemple vaut mieu qu'un long discours je vais simplement vous donner l'adresse de ma page d'exemple où je travaille mon site. Il vous suffit d'alterner les navigateurs, tous l'affichent avec un décalage entre les différents frames, ce qui produit des grandes barres noires comme vous l'aurez deviné, très moches ...
Pourtant, lorsque je lance la derniere version d'IE et que j'execute le bouton "Affichage de compatibilité" situé en haut à droite du navigateur, la page s'affiche enfin bien ! De même lorsque j'utilise une version antérieure d'IE d'ailleurs ...

Voici ma page de test en question :
http://wineha.justgoo.com/EXEMPLE-h14.htm

Les liens sont tous vides, ils ne sont là que pour tester leur aspect.
Pour voir le code vous n'avez qu'à afficher le code source il y a tout dedans : HTML ET CSS.


Quel est le problème ? Comment puis-je le régler ?

Merci d'avance de votre lecture et de vos recherches, amicalement Gwoko.
A voir également:

5 réponses

jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
8 août 2009 à 20:00
Bonsoir..

Un debut d indice.. j'ais mis

border-style: solid;
border-color: transparent ;

un peu partout dans le css.. et ca a enlever les décalages.. mais il reste un décalage corespondant à la taille de la bordure :(
1
Waouh je m'attendais pas à une réponse aussi rapide !
Pour ce qui est de tes bordures, je ne vois à quels blocs tu les as assimilés ?

J'ai essayé de l'appliquer à .menu_haut pour voir le résultat mais je ne vois pas de correction, simplement un décallage du au fait que la bordure a poussé le haut du menu vers la droite puisqu'il était exactement emboité dans menu.

J'ai sans doute mal du positionner les propriétés et mal compris.



Encore merci en tout cas, pour cette réponse rapide !
0
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
9 août 2009 à 09:48
re:)

---------------------------
/!\ modif !!!!
j'ai trouver une autre solution, post suivant, mais je laisse le code pour ceux que ca interesse ;)
---------------------------

bon, apres quelques manip.. j'ai toujours un ptit décalage, mais c'est mieux...

j'ai copier les sources dans un .php et rajouter :

au tout début du .php

<?php
$Ie=false;
if(ereg("msie",strtolower($_SERVER['HTTP_USER_AGENT'])))
{
//echo '<script>alert("ie");</script>';
$Ie=true;
//}else{
//echo '<script>alert("pas ie");</script>';
}
?>


.menu_centre
{
<?php
if (!$Ie){
echo "border-style: solid ;";
echo "border-color: transparent ;";
}
?>
...
}

#body_centre
{
<?php
if (!$Ie){
echo "border-style: solid ;";
echo "border-color: transparent ;";
}
?>
...
}

en fait je rajoute un border transparent que si le navigateur n est pas ie... mais il se décale car le border, meme transparent à une épaisseur.. j'ai essayer avec border:0px; mais ca refait tout bugger...

Je pense que la solution n est pas loin ;)
1
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
9 août 2009 à 10:04
ah non !!!
oublie tout !!! j ais trouver !!
h3
{
margin: 0px;
border: 0px;
padding:0px;

}

ul{
margin: 0px;
border: 0px;
padding:0px;
}
1
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
9 août 2009 à 10:43
et oui.. des fois il suffit de peu de chose pour que tout merde !!:p

ps.. j ai trouver en virrant toutes les marges que tu avait mis dans ton 'style'.. et comme ca bugguait toujours, j me suis di que ca venait du code, et la j ais vu les <ul> et <h3>.. et bingo !! :p
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Magnifique j'ai compris ! C'était donc les marges "naturelles" des éléments situés dans mes blocs qui les poussaient !!

Merci milles fois, vraiment. J'aurais jamais trouvé ça tout seul !

Le pire c'est que c'était vraiment un truc bête, il ne fallait pas chercher loin ... Enfin bon, tout est réglé.




Toutes mes félicitations et compliments, et encore merci !

Gwoko.
0