HTML - Problème IE et Firefox
Résolu/Fermé
pierrehome
Messages postés
330
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
29 décembre 2010
-
14 nov. 2008 à 18:59
Zempachi Messages postés 7472 Date d'inscription vendredi 14 octobre 2005 Statut Contributeur Dernière intervention 5 juin 2020 - 16 nov. 2008 à 12:14
Zempachi Messages postés 7472 Date d'inscription vendredi 14 octobre 2005 Statut Contributeur Dernière intervention 5 juin 2020 - 16 nov. 2008 à 12:14
A voir également:
- HTML - Problème IE et Firefox
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Editeur html - Télécharger - HTML
- Comment supprimer bing de firefox - Guide
- Firefox telecharger - Télécharger - Navigateurs
- Exporter favoris firefox - Guide
6 réponses
Smoking bird
Messages postés
870
Date d'inscription
mardi 11 mars 2008
Statut
Membre
Dernière intervention
10 juillet 2011
58
14 nov. 2008 à 19:00
14 nov. 2008 à 19:00
commence par nous filer du code :) on pourra mieux te dire où se situe ton problème, sinon y'aurait trop de trucs à dire...
pierrehome
Messages postés
330
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
29 décembre 2010
44
14 nov. 2008 à 19:09
14 nov. 2008 à 19:09
merci de ton aide...
voila le code du fichier html : (c'est simplemennt une page ou il y a des photos avec un menu, un peu du type dailymotion). Le fichier CSS est après.
<html>
<head>
<title>Picturit.com</title>
<link rel="stylesheet" media="screen" type="text/css" title="css" href="css.css" /> <!-- référence au fichier css -->
</head>
<body>
<!-- en tête avec logo plus moyens de connection -->
<div id="entete">
<div id="logo" class="jaune">
Pictur-it !
</div>
<div id="connectionsinscrirepourquoinewsletter" class="jaune">
<a class="jaune" href="seconnecter.html">Se connecter</a> | <a class="jaune" href="sinscrire.html">S'inscrire</a> | <a class="jaune" href="pourquoisinscrire.html">Pourquoi s'inscrire ?</a> | <a class="jaune" href="newsletter.html">Newsletter</a>
</div>
<div id="recherche">
<label class="jaune">Recherche</label> <input type="text" name="recherche" style="background-color: rgb(11, 103, 5)" class="jaune" />
</div>
<div id="listederoulante">
<form action="rechliste.php" method="post" >
<select size="1" style="background-color: rgb(11, 103, 5)" class="jaune">
<option value="1" style="background-color: rgb(11, 103, 5)" class="jaune">Images</option>
<option value="2" style="background-color: rgb(11, 103, 5)" class="jaune">Membres</option>
</select>
</form>
</div>
<div id="boutonrech">
<input type="button" value="Rechercher" name="rechok" style="background-color: rgb(11, 103, 5)" class="jaune" />
</div>
<div id="acceuil">
<a class="menu" href="index.html">Accueil</a>
</div>
<div id="images">
<a class="menu" href="images.html">Images</a>
</div>
<div id="membres">
<a class="menu" href="membres.html">Membres</a>
</div>
<div id="aide">
<a class="menu" href="aide.html">Aide</a>
</div>
<div id="separateur1">
<img src="separateur.png" alt="separateur"/>
</div>
<div id="separateur2">
<img src="separateur.png" alt="separateur"/>
</div>
<div id="separateur3">
<img src="separateur.png" alt="separateur"/>
</div>
</div>
<!-- corps de page -->
<div id="corpsdepage" class="jaune">
<div id="sondage">
Sondage :
<form method="post" action="formulaire.php">
<input type="radio" name="sondage" value="tresbien" /> Très Bien <br />
<input type="radio" name="sondage" value="bien" /> Bien <br />
<input type="radio" name="sondage" value="moyen" /> Moyen <br />
<input type="radio" name="sondage" value="peutmieuxfaire" /> Peut mieux faire <br />
<input type="radio" name="sondage" value="passable" /> Passable <br />
<br />
<input type="submit" value="Voter" style="background-color: rgb(11, 103, 5)" class="jaune" />
</form>
</div>
<div id="image1" class="description">
<img src="dicaprio.jpg" alt="dicaprio" /> <br />
Léonardo dicaprio
</div>
<div id="image2" class="description">
<img src="doutey.jpg" alt="doutey" /> <br />
Mélanie Doutey
</div>
<div id="image3" class="description">
<img src="animaux.jpg" alt="animaux" /> <br />
Chatons
</div>
<div id="image4" class="description">
<img src="lavigne.jpg" alt="lavigne" /> <br />
Chatons
</div>
<div id="image5" class="description">
<img src="batiment.jpg" alt="batiment" /> <br />
Chatons
</div>
<div id="image6" class="description">
<img src="island.jpg" alt="island" /> <br />
Chatons
</div>
<div id="image7" class="description">
<img src="tigre.jpg" alt="tigre" /> <br />
Chatons
</div>
</div>
<div id="pieddepage">
</div>
<!-- fin du code XHTML -->
</body>
</html>
LE fichier CSS :
body
{
background-color: rgb(98, 232, 107);
}
/*création de la zone titre */
#entete
{
position: absolute;
width: 900px;
height: 100px;
left: 190px;
background-image: url("fondtitre.png");
background-repeat: no-repeat;
}
#logo
{
position: absolute;
width: 216;
height: 131;
left: 10;
font-family: "Segoe Script";
font-size: 1.7em;
}
#connectionsinscrirepourquoinewsletter
{
position: absolute;
left: 470;
top: 6;
}
#recherche
{
position: absolute;
left: 390;
top: 40;
}
#listederoulante
{
position: absolute;
left: 658;
top: 40;
}
#boutonrech
{
position: absolute;
left: 759;
top: 40;
}
.jaune
{
color: yellow;
font-size: 1em;
font-family: candara;
}
#acceuil
{
position: absolute;
left: 30;
top: 37;
}
#images
{
position: absolute;
left: 120;
top: 37;
}
#membres
{
position: absolute;
left: 210;
top: 37;
}
#aide
{
position: absolute;
left: 320;
top: 37;
}
a
{
text-decoration: none;
}
a:hover
{
background-color: green;
}
.menu
{
color: yellow;
font-size: 1.5em;
font-family: candara;
font-weight: bold;
}
#separateur1
{
position: absolute;
left: 111;
top: 39;
}
#separateur2
{
position: absolute;
left: 201;
top: 39;
}
#separateur3
{
position: absolute;
left: 313;
top: 39;
}
/*création du corps de page */
#corpsdepage
{
position: absolute;
width: 900;
height: 1000;
left: 190;
top: 110;
background-image: url("fondcorps.png");
margin-bottom: 10;
}
#sondage
{
position: absolute;
width: 140px;
height: 170px;
left: 707px;
top: 30px;
border: 1px solid yellow;
padding: 10px;
}
#image1
{
position: absolute;
left: 30;
top: 30;
border: 3px solid black;
}
#image2
{
position: absolute;
left: 180;
top: 30;
border: 3px solid black;
}
#image3
{
position: absolute;
left: 340;
top: 30;
border: 3px solid black;
}
#image4
{
position: absolute;
left: 30;
top: 290;
border: 3px solid black;
}
#image5
{
position: absolute;
left: 250;
top: 290;
border: 3px solid black;
}
#image6
{
position: absolute;
left: 420;
top: 290;
border: 3px solid black;
}
#image7
{
position: absolute;
left: 640;
top: 290;
border: 3px solid black;
}
.description
{
color: yellow;
font-size: 1.1em;
font-family: candara;
text-align: center;
}
#titrepage
{
position: absolute;
width: 900px;
height: 100px;
left: 0;
top: 10;
text-align: center;
font-size: 1.5em;
}
#champsinscription
{
position: absolute;
left: 30;
top: 100;
}
/* création pied de page */
#pieddepage
{
position: absolute;
width: 900px;
height: 100;
left: 190px;
top: 1150;
background-image: url("fondpied.png");
Voilà il manque juste les images... mais je pense que tu ne devrais pas en avoir besoin...
merci
voila le code du fichier html : (c'est simplemennt une page ou il y a des photos avec un menu, un peu du type dailymotion). Le fichier CSS est après.
<html>
<head>
<title>Picturit.com</title>
<link rel="stylesheet" media="screen" type="text/css" title="css" href="css.css" /> <!-- référence au fichier css -->
</head>
<body>
<!-- en tête avec logo plus moyens de connection -->
<div id="entete">
<div id="logo" class="jaune">
Pictur-it !
</div>
<div id="connectionsinscrirepourquoinewsletter" class="jaune">
<a class="jaune" href="seconnecter.html">Se connecter</a> | <a class="jaune" href="sinscrire.html">S'inscrire</a> | <a class="jaune" href="pourquoisinscrire.html">Pourquoi s'inscrire ?</a> | <a class="jaune" href="newsletter.html">Newsletter</a>
</div>
<div id="recherche">
<label class="jaune">Recherche</label> <input type="text" name="recherche" style="background-color: rgb(11, 103, 5)" class="jaune" />
</div>
<div id="listederoulante">
<form action="rechliste.php" method="post" >
<select size="1" style="background-color: rgb(11, 103, 5)" class="jaune">
<option value="1" style="background-color: rgb(11, 103, 5)" class="jaune">Images</option>
<option value="2" style="background-color: rgb(11, 103, 5)" class="jaune">Membres</option>
</select>
</form>
</div>
<div id="boutonrech">
<input type="button" value="Rechercher" name="rechok" style="background-color: rgb(11, 103, 5)" class="jaune" />
</div>
<div id="acceuil">
<a class="menu" href="index.html">Accueil</a>
</div>
<div id="images">
<a class="menu" href="images.html">Images</a>
</div>
<div id="membres">
<a class="menu" href="membres.html">Membres</a>
</div>
<div id="aide">
<a class="menu" href="aide.html">Aide</a>
</div>
<div id="separateur1">
<img src="separateur.png" alt="separateur"/>
</div>
<div id="separateur2">
<img src="separateur.png" alt="separateur"/>
</div>
<div id="separateur3">
<img src="separateur.png" alt="separateur"/>
</div>
</div>
<!-- corps de page -->
<div id="corpsdepage" class="jaune">
<div id="sondage">
Sondage :
<form method="post" action="formulaire.php">
<input type="radio" name="sondage" value="tresbien" /> Très Bien <br />
<input type="radio" name="sondage" value="bien" /> Bien <br />
<input type="radio" name="sondage" value="moyen" /> Moyen <br />
<input type="radio" name="sondage" value="peutmieuxfaire" /> Peut mieux faire <br />
<input type="radio" name="sondage" value="passable" /> Passable <br />
<br />
<input type="submit" value="Voter" style="background-color: rgb(11, 103, 5)" class="jaune" />
</form>
</div>
<div id="image1" class="description">
<img src="dicaprio.jpg" alt="dicaprio" /> <br />
Léonardo dicaprio
</div>
<div id="image2" class="description">
<img src="doutey.jpg" alt="doutey" /> <br />
Mélanie Doutey
</div>
<div id="image3" class="description">
<img src="animaux.jpg" alt="animaux" /> <br />
Chatons
</div>
<div id="image4" class="description">
<img src="lavigne.jpg" alt="lavigne" /> <br />
Chatons
</div>
<div id="image5" class="description">
<img src="batiment.jpg" alt="batiment" /> <br />
Chatons
</div>
<div id="image6" class="description">
<img src="island.jpg" alt="island" /> <br />
Chatons
</div>
<div id="image7" class="description">
<img src="tigre.jpg" alt="tigre" /> <br />
Chatons
</div>
</div>
<div id="pieddepage">
</div>
<!-- fin du code XHTML -->
</body>
</html>
LE fichier CSS :
body
{
background-color: rgb(98, 232, 107);
}
/*création de la zone titre */
#entete
{
position: absolute;
width: 900px;
height: 100px;
left: 190px;
background-image: url("fondtitre.png");
background-repeat: no-repeat;
}
#logo
{
position: absolute;
width: 216;
height: 131;
left: 10;
font-family: "Segoe Script";
font-size: 1.7em;
}
#connectionsinscrirepourquoinewsletter
{
position: absolute;
left: 470;
top: 6;
}
#recherche
{
position: absolute;
left: 390;
top: 40;
}
#listederoulante
{
position: absolute;
left: 658;
top: 40;
}
#boutonrech
{
position: absolute;
left: 759;
top: 40;
}
.jaune
{
color: yellow;
font-size: 1em;
font-family: candara;
}
#acceuil
{
position: absolute;
left: 30;
top: 37;
}
#images
{
position: absolute;
left: 120;
top: 37;
}
#membres
{
position: absolute;
left: 210;
top: 37;
}
#aide
{
position: absolute;
left: 320;
top: 37;
}
a
{
text-decoration: none;
}
a:hover
{
background-color: green;
}
.menu
{
color: yellow;
font-size: 1.5em;
font-family: candara;
font-weight: bold;
}
#separateur1
{
position: absolute;
left: 111;
top: 39;
}
#separateur2
{
position: absolute;
left: 201;
top: 39;
}
#separateur3
{
position: absolute;
left: 313;
top: 39;
}
/*création du corps de page */
#corpsdepage
{
position: absolute;
width: 900;
height: 1000;
left: 190;
top: 110;
background-image: url("fondcorps.png");
margin-bottom: 10;
}
#sondage
{
position: absolute;
width: 140px;
height: 170px;
left: 707px;
top: 30px;
border: 1px solid yellow;
padding: 10px;
}
#image1
{
position: absolute;
left: 30;
top: 30;
border: 3px solid black;
}
#image2
{
position: absolute;
left: 180;
top: 30;
border: 3px solid black;
}
#image3
{
position: absolute;
left: 340;
top: 30;
border: 3px solid black;
}
#image4
{
position: absolute;
left: 30;
top: 290;
border: 3px solid black;
}
#image5
{
position: absolute;
left: 250;
top: 290;
border: 3px solid black;
}
#image6
{
position: absolute;
left: 420;
top: 290;
border: 3px solid black;
}
#image7
{
position: absolute;
left: 640;
top: 290;
border: 3px solid black;
}
.description
{
color: yellow;
font-size: 1.1em;
font-family: candara;
text-align: center;
}
#titrepage
{
position: absolute;
width: 900px;
height: 100px;
left: 0;
top: 10;
text-align: center;
font-size: 1.5em;
}
#champsinscription
{
position: absolute;
left: 30;
top: 100;
}
/* création pied de page */
#pieddepage
{
position: absolute;
width: 900px;
height: 100;
left: 190px;
top: 1150;
background-image: url("fondpied.png");
Voilà il manque juste les images... mais je pense que tu ne devrais pas en avoir besoin...
merci
Smoking bird
Messages postés
870
Date d'inscription
mardi 11 mars 2008
Statut
Membre
Dernière intervention
10 juillet 2011
58
14 nov. 2008 à 19:25
14 nov. 2008 à 19:25
Pour commencer, dans ton css, à chaque fois que tu évoques une valeur, indique l'unité. T'as zappé 'px' dans plein de trucs (genre 'left:150px'). Faut être assez rigoureux avec les css en fait, si on veut que ça affiche pareil partout^^
Ensuite, évite le plus possible l'utilisation des unités em et % (pas noté de % chez toi, mais un ou deux em). Le pixel, c'est fiable^^.
N'hésite pas à déclarer des propriétés comme padding et margin, même si elles valent 0px, c'est une façon d'être sûr que les explorateurs s'amuseront pas avec (pratique partout, que ce soit sur body, ou sur le moindre div).
Rentabilise au mieux le principe des classes, ça te facilitera le travail, et ça te permettra de modifier plus de choses plus rapidement (toutes tes images on le même attribut top, position et border il me semble, il n'y a que le left qui change).
Je ne sais pas si tu as indenté ton code (vu que ça ressort pas toujours sur les forums), mais si c'est pas le cas, profites-en pour indenter tout ça, la lisibilité en sera accrue et tu travailleras avec davantage d'aisance^^
Voilà, globalement, c'est l'essentiel pour que tu atteignes tes objectifs.
Dernière précision, tu utilise beaucoup 'position:absolute'; pour éviter le chevauchement, en général on met position:relative; on adapte la position du truc par rapport à son parent, on spécifie les margin et les padding, et si ça déconne toujours, on met tout sur le même index
PS: pour tes div, met float:left^^
Ensuite, évite le plus possible l'utilisation des unités em et % (pas noté de % chez toi, mais un ou deux em). Le pixel, c'est fiable^^.
N'hésite pas à déclarer des propriétés comme padding et margin, même si elles valent 0px, c'est une façon d'être sûr que les explorateurs s'amuseront pas avec (pratique partout, que ce soit sur body, ou sur le moindre div).
Rentabilise au mieux le principe des classes, ça te facilitera le travail, et ça te permettra de modifier plus de choses plus rapidement (toutes tes images on le même attribut top, position et border il me semble, il n'y a que le left qui change).
Je ne sais pas si tu as indenté ton code (vu que ça ressort pas toujours sur les forums), mais si c'est pas le cas, profites-en pour indenter tout ça, la lisibilité en sera accrue et tu travailleras avec davantage d'aisance^^
Voilà, globalement, c'est l'essentiel pour que tu atteignes tes objectifs.
Dernière précision, tu utilise beaucoup 'position:absolute'; pour éviter le chevauchement, en général on met position:relative; on adapte la position du truc par rapport à son parent, on spécifie les margin et les padding, et si ça déconne toujours, on met tout sur le même index
PS: pour tes div, met float:left^^
Zempachi
Messages postés
7472
Date d'inscription
vendredi 14 octobre 2005
Statut
Contributeur
Dernière intervention
5 juin 2020
906
16 nov. 2008 à 12:14
16 nov. 2008 à 12:14
Ensuite, évite le plus possible l'utilisation des unités em et % (pas noté de % chez toi, mais un ou deux em). Le pixel, c'est fiable^^.
là tu donnes de mauvaises habitudes.
Pour des raisons d'accessibilité, il est recommender d'utiliser les "em".
Leur utilisation est tout aussi fiable, elle demande par contre une bonne organisation du code.
Donc si on code "à l'arrache" alors, avec les "em" , on est sur de se planter.
Donc non, ce n'est pas plus fiable, et l'utilisation des "em" est d'ailleurs fortement recommandé pour principalement assurer l'accessibilité de son site.
là tu donnes de mauvaises habitudes.
Pour des raisons d'accessibilité, il est recommender d'utiliser les "em".
Leur utilisation est tout aussi fiable, elle demande par contre une bonne organisation du code.
Donc si on code "à l'arrache" alors, avec les "em" , on est sur de se planter.
Donc non, ce n'est pas plus fiable, et l'utilisation des "em" est d'ailleurs fortement recommandé pour principalement assurer l'accessibilité de son site.
pierrehome
Messages postés
330
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
29 décembre 2010
44
14 nov. 2008 à 19:49
14 nov. 2008 à 19:49
je vais prendre en compte tout ce que tu viens de m'indiquer, je te remercie de ton aide...
Je te recontacte au besoin...
++
merci bcp
pierre
Je te recontacte au besoin...
++
merci bcp
pierre
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Smoking bird
Messages postés
870
Date d'inscription
mardi 11 mars 2008
Statut
Membre
Dernière intervention
10 juillet 2011
58
14 nov. 2008 à 19:56
14 nov. 2008 à 19:56
J't'en prie, y'a pas de soucis ^^
++
Smoke
++
Smoke
pierrehome
Messages postés
330
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
29 décembre 2010
44
16 nov. 2008 à 12:02
16 nov. 2008 à 12:02
salut,
dsl mais une autre question concernant la résolution du visiteur sur mon site :
Je créé mon site avec une résolution : 1280 X 800
Si un visiteur a une résolution 800 X 600, les blocks ne seront plus à leur place, non ?
J'ai pensé à faire ceci en HTML :
récupérer la résolution du visiteur, puis , par exemple, pour afficher une image au milieu faire un code du type :
position X : (résolution X) /2
position Y : (résolution Y) / 2
Quand penses-tu ?
merci de ton aide...
Pierre
dsl mais une autre question concernant la résolution du visiteur sur mon site :
Je créé mon site avec une résolution : 1280 X 800
Si un visiteur a une résolution 800 X 600, les blocks ne seront plus à leur place, non ?
J'ai pensé à faire ceci en HTML :
récupérer la résolution du visiteur, puis , par exemple, pour afficher une image au milieu faire un code du type :
position X : (résolution X) /2
position Y : (résolution Y) / 2
Quand penses-tu ?
merci de ton aide...
Pierre
