Aller au contenu

CSS et compatibilité sous les navigateurs

Angelmalefica

Par Angelmalefica
dans (X)HTML et CSS

 Partager

Sujets conseillés

Angelmalefica

Angelmalefica

Posté
Posté

Kikoo tout le monde!!!

J'ai l'impression que lorsqu'on arrange un problème on en a 2000 qui nous tombent sur le coin de la figure...

J'ai fait mon site et il marche très bien sous mozilla, enfin chez moi!!! :hypocrite:

Et euh je suis en train d'essayer de le rendre ausi compatible sous IE, navigateur sur lequel il ne ressemble absolument à rien...

Le problème c'est que les éléments que je dois supprimer pour qu'il fonctionne sous IE font que mon site ressemble à qqch sous mozilla...

Croyez-vous pouvoir m'aider??

Par exemple voici le code du menu (que j'appelle dynamiquement avec une inclusion php):

<div id="zonemenu">
<img src="Util/Titres/Menu.gif" class="titre">
<br><br>
<center>
<!-- Debut du code Domino Counter -->
<script type="text/javascript">var dominocounter_a = "locationpsv";</script>
<script type="text/javascript" src="http://www.dominocounter.net/webcounter.js"></script>
<!-- Fin du code Domino Counter -->
</center>
<br><br><a href="indexA.php" target="_top"><img src="Util/flag_uk.gif"></a> <a href="indexA.php">English version</a>
<br><br><a href="Accueil.php"><img src="Util/Boutons/bouton1.gif" width="128" height="57"></a>
<br><a href="Descriptif.php"><img src="Util/Boutons/bouton2.gif" width="128" height="57"></a>
<br><a href="Prestations.php"><img src="Util/Boutons/bouton3.gif" width="128" height="57"></a>
<br><a href="Photos.php"><img src="Util/Boutons/bouton4.gif" width="128" height="57"></a>
<br><a href="tarifs.php"><img src="Util/Boutons/bouton5.gif" width="128" height="57"></a>
<br><a href="situationgeo.php"><img src="Util/Boutons/bouton6.gif" width="128" height="57"></a>
<br><a href="Acces.php"><img src="Util/Boutons/bouton7.gif" width="128" height="57"></a>
<br><a href="loisirspossibles.php"><img src="Util/Boutons/bouton8.gif" width="128" height="57"></a>
<br><a href="contact.php"><img src="Util/Boutons/bouton9.gif" width="128" height="57"></a>
<br><img src="Util/mon_gif.gif">
</div> <!-- Fin du div "zonemenu"-->

Voici le code ma page d'accueil (le même que l'index):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Location saisonnière à Puy Saint Vincent (05)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
div
{
  border:2px;
}
#ensemble
{
  top:0px;
  right:0px;
}
#zonepage 
{
  position: absolute;
  background: #FFFFFF url(Util/fond_pages.jpg);
  position: fixed;
  width: 85%;
  /*marginleft: 15%;*/
  height: 100%;
  float: right;
  top: 0px;
  left: 15%;
}
#zonemenu 
{
  position: absolute;
  background: #FFFFFF url(Util/fond_flocons.jpg);
  position: fixed;
  text-align: center;
  width: 15%;
  height:100%;
  float: left;
  left: 0px;
  top: 0px;
}
h1
{
  font: "Palatino Linotype", "Comic Sans MS";
  font-size: larger;
  font-style: inherit;
}

/* Ce qui permet de ne plus avoir les cadres bleus autour des boutons du menu */
a img 
{
  border: none;
}
p
{
  font-family:"Palatino Linotype", "Comic Sans MS";
  font-size: medium;
  color: black;
}
</style>
</head>


<body>
<div id="ensemble">
<?php
include ("menu.php");
?> 
  <div id="zonepage">
    <center><br><img src="Util/Titres/accueil.gif" alt="Accueil"><br><br><br><br><img src="util/exterieur13.jpg" alt="Photo vue extérieure de la maison"><br></center>
    <h1 align="center">APPARTEMENT T1 (2 PIÈCES)</h1>
      <p align="center">Loue appartement homologué 6 personnes fonctionnel, lumineux, convivial, au coeur des Alpes.</p>
      <p>          Situé à Puy Saint Vincent 1600, non loin de la station, cette location est très typée maison de montagne. Nous vous proposons à la location toute saison cet appartement pouvant accueillir jusqu'à 6 personnes. Cette location dans laquelle vous pourrez passer un séjour inoubliable est située dans un cadre agréable et calme.</p>
  </div> <!-- Fin du div "zonepage"-->
</div>  <!-- Fin du div "ensemble"-->
</body>
</html>

Voila... On me demande d'enlever la valeur "absolute", les "marginleft"...

Pouvez-vous m'aider s'il vous plait? Merci d'avance :rolleyes:

Lien vers le commentaire
Partager sur d’autres sites
MarvinLeRouge

MarvinLeRouge

Posté
Posté

Salut,

Tu as des éléments qui sont indiqués comme étant

position : absolute;
position : fixed;
float : left;

C'est lequel le bon ? Ca pourrait faire que IE y perde ses petits.

D'autre part, tu as un élément qui fait 85% de largeur et l'autre 15%. Or, 85% + 15% n'est pas nécessairement toujours égal à 100% (question d'arrondi), ce qui pourrait provoquer le passage "en dessous" d'éléments flottants (comme ici).

Lien vers le commentaire
Partager sur d’autres sites
Angelmalefica

Angelmalefica

Posté
  • Auteur
Posté

Kikoo!

Bon alors c'est vrai que les deux positions qu'il y a je ne l'avais pas vu.

En fait le position:absolute c'est pour me permettre de jouer avec le placement du calque comme je le veux.

Quant au position:fixed concerne le background. Du coup j'ai changé l'élément et j'ai mit background-attachment:fixed.

Pour l'histoire des pourcentages, je ne sais pas trop comment m'y prendre ca si peut etre une histoire d'arrondies... Je voudrais que mon site s'adapte à chacune des résolutions des visiteurs...

De plus, le validateur me dit que tous les éléments tels que margin-left, les pourcentages, float et tout ça ne sont pas compatibles avec IE....

Comment faire alors pour que mon site soit correct sans utiliser ces éléments???

Aidez moi s'il vous plait je ne vois pas comment faire... :gueule:

Lien vers le commentaire
Partager sur d’autres sites
MarvinLeRouge

MarvinLeRouge

Posté
Posté
..

Pour l'histoire des pourcentages, je ne sais pas trop comment m'y prendre ca si peut etre une histoire d'arrondies... Je voudrais que mon site s'adapte à chacune des résolutions des visiteurs...

<{POST_SNAPBACK}>

Pas vraiment problématique : tu n'as pas besoin que la somme fasse 100% : 99% ou 98% provoquent souvent le même résultat. Tu peux aussi préciser la dimension d'un élément et pas de l'autre (qui prendra alors toute la place disponible ;) ).

De plus, le validateur me dit que tous les éléments tels que margin-left, les pourcentages, float et tout ça ne sont pas compatibles avec IE....

<{POST_SNAPBACK}>

:blink: Là j'avoue que je demande à voir : c'est quoi ton validateur ? Parce que IE comprend tout à fait les margin et les pourcentages (même s'il a des bugs là comme ailleurs). En revanche, s'il s'agit de marginleft (que j'ai repéré dans ton code), c'est normal : c'est margin-left qu'il faut écrire.

Lien vers le commentaire
Partager sur d’autres sites
Angelmalefica

Angelmalefica

Posté
  • Auteur
Posté

Merci à toi car j'ai réussit à rendre ma page un peu meilleure. J'ai surtout essayé de modifier la page d'accueil. Une fois que j'aurai réussit à placer cette-ci correctement, je modifierai les autres.

Le code donne cela maintenant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Location saisonnière à Puy Saint Vincent (05)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
div
{
 border:1px;
}
#ensemble
{
 top:0px;
 right:0px;
}
#zonepage
{
 /*position: absolute;*/
 background: #FFFFFF url(Util/fond_pages.jpg);
 background-attachment:fixed;
 width: 85%;
 margin-left: 100px;
 height: 100%;
 /*float: right;*/
 top: 0px;
 left: 15%;
}
#zonemenu
{
 position: absolute;
 background: #FFFFFF url(Util/fond_flocons.jpg);
 background-repeat: repeat-y;
 background-attachment:fixed;
 text-align: center;
 width: 15%;
 height:100%;
 /*float: left;*/
 left: 0px;
 top: 0px;
}
h1
{
 font: "Palatino Linotype", "Comic Sans MS";
 font-size: larger;
}

/* Ce qui permet de ne plus avoir les cadres bleus autour des boutons du menu */
a img
{
 border: 0px;
}
p
{
 font-family:"Palatino Linotype", "Comic Sans MS";
 font-size: 11px;
 color: #000000;
}
</style>
</head>


<body>
<div id="ensemble">
<?php
include ("menu.php");
?> 
  <div id="zonepage">
    <center><br><img src="Util/Titres/accueil.gif" alt="Accueil"><br><br><br><br><img src="Util/exterieur13.jpg" alt="Photo vue extérieure de la maison"><br></center>
    <h1 align="center">APPARTEMENT T1 (2 PIÈCES)</h1>
      <p align="center">Loue appartement homologué 6 personnes fonctionnel, lumineux, convivial, au coeur des Alpes.</p>
      <p>          Situé à Puy Saint Vincent 1600, non loin de la station, cette location est très typée maison de montagne. Nous vous proposons à la location toute saison cet appartement pouvant accueillir jusqu'à 6 personnes. Cette location dans laquelle vous pourrez passer un séjour inoubliable est située dans un cadre agréable et calme.</p>
  </div> <!-- Fin du div "zonepage"-->
</div>  <!-- Fin du div "ensemble"-->
</body>
</html>

La validation que j'utilise est celle de dreamweaver. En fait cette validaton est plus une validation de compatibilité etre le code et le navigateur.

par exemple, voila ce que m'affiche le validateur pour ma page d'accueil :

Ligne 21 (dans le #zonepage) : La valeur "85%" n'est pas prise en charge pour la propriété CSS width (Mircrosoft IE 4.0)

Ligne 22 (dans le #zonepage) : La valeur "100px" n'est pas prise en charge pour la propriété CSS margin-left (Mircrosoft IE 4.0) => j'ai essayé de donné une taille à mon menu en pixels...

Ligne 30 (dans le #zonemenu) : La valeur "absolute" n'est pas prise en charge pour la propriété CSS position (Mircrosoft IE 4.0)

Ligne 32 (dans le #zonemenu) : La valeur "repeat-y" n'est pas prise en charge pour la propriété CSS background-repeat (Mircrosoft IE 4.0)

Ligne 35 (dans le #zonemenu) : La valeur "15%" n'est pas prise en charge pour la propriété CSS width (Mircrosoft IE 4.0)

J'ai réussit à remettre le contenu de la page à coté du menu, mais il y a des blancs sur les côtés et en bas, et le background du contenu de la page ne va pas jusqu'en bas... De plus il y a un blanc etre le menu et le contenu...

Je ne sais pas comment les enlever, pourriez-vous m'aider??

Mon site

Constatez par vous même, pour voir ce que je veux modifier il faut cliquer sur "Accueil" dans le menu puisque c'est cette page que je traite pour le moment...

PS : Merci MarvinLeRouge pour ton aide! ;) C'est gentil! :rolleyes:

Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté

Salut

IE 4.0 ? :blink: Ça fait belle lurette que plus personne ne l'utilise !

Vas-y gaiement avec tes propriétés CSS: tu ne risques rien :lol:

PS: est-ce bien normal si DreamWeaver écrit "Mircrosoft" au lieu de "Microsoft" ? :unsure:

Lien vers le commentaire
Partager sur d’autres sites
MarvinLeRouge

MarvinLeRouge

Posté
Posté

Arf tu valides avec l'outil interne de Dreamweaver, je comprends mieux.

Ne te prends pas la tête et utilise le valideur du W3C : il te dira simplement ce qui est autorisé ou pas. Et effectivement, IE6 date de 2001, alors IE4 ... :D

Lien vers le commentaire
Partager sur d’autres sites
Angelmalefica

Angelmalefica

Posté
  • Auteur
Posté

Benh non Dreamweaver écrit bien Microsoft, j'ai tout retapé car je ne pouvais pas faire de copier-coller...

Pour le W3C, j'ai essayé, enfin disons plutot que j'ai commencé à faire la validation de ma page de menu et de ma page d'accueil, mais il ne me dis rien à propos de la disposition de mes <div>... Je ne comprends pas pourquoi a mise en page marche sous FF et on sous IE...

Est-ce qu'IE ne prend pas en compte certaines balises ou certains attributs??

J'crois bien qe j'aurais besoin d'aide pour ca... J'ai cherché où je pourrais trouver réponse à mes question, mais je n'ai rien trouvé.... :blush:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...