CSS/HTML : de Internet Explorer à Netscape
nitsuj73
Messages postés
21
Date d'inscription
Statut
Membre
Dernière intervention
-
nitsuj73 Messages postés 21 Date d'inscription Statut Membre Dernière intervention -
nitsuj73 Messages postés 21 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai récemment créé plusieurs sites en CSS/HTML.
Par simple curiosité, je me suis demandé comment ils rendaient sur Google Chrome et Mozilla.
Et là, je me suis rendu compte, horrifié, que mon site ne ressemblait plus a rien.
Plus aucun arrière plan, tous les textes et contenus étaient affichés à la suite, au lieu d'afficher une colonne contenu a gauche et une sidebar a droite... etc.
Bref, mes sites n'ont plus aucune forme...
C'est pour cela que je fais appel à vous !
J'aimerais connaître les différences entre Internet Explorer et les autres navigateurs tels que Safari, Google Chrome, Firefox...
Principalement sur ces points :
- Taille des div width et height
- Leur position float
- Comment mettre un arriere plan image ou color
Ce sont les informations qui me paraissent le plus utiles en ce moment...
Merci de vos réponses et bonne journée !
J'ai récemment créé plusieurs sites en CSS/HTML.
Par simple curiosité, je me suis demandé comment ils rendaient sur Google Chrome et Mozilla.
Et là, je me suis rendu compte, horrifié, que mon site ne ressemblait plus a rien.
Plus aucun arrière plan, tous les textes et contenus étaient affichés à la suite, au lieu d'afficher une colonne contenu a gauche et une sidebar a droite... etc.
Bref, mes sites n'ont plus aucune forme...
C'est pour cela que je fais appel à vous !
J'aimerais connaître les différences entre Internet Explorer et les autres navigateurs tels que Safari, Google Chrome, Firefox...
Principalement sur ces points :
- Taille des div width et height
- Leur position float
- Comment mettre un arriere plan image ou color
Ce sont les informations qui me paraissent le plus utiles en ce moment...
Merci de vos réponses et bonne journée !
A voir également:
- CSS/HTML : de Internet Explorer à Netscape
- Editeur html - Télécharger - HTML
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- Html download - Télécharger - HTML
- /Var/www/html/index.html ✓ - Forum Linux / Unix
19 réponses
Bonjour,
Je crois que les navigateurs interprete sensiblement différement chaques pages de codes ... c'est pourquoi il faut tenir compte de la compatibilité de chaque partie de code pour être sûr d'avoir un résultat équivalent... j'ai par exemple essayé de rajouter sur l'un de mes sites un pointeur de souris avec différentes méthodes... html, css 3 et JS et ça ne marchais pas partout... Faut avoir recours à des astuces souvent.
Après il faut repérer les endroits du code ou tu utilises des méthodes sensibles de ce coté là
Je crois que les navigateurs interprete sensiblement différement chaques pages de codes ... c'est pourquoi il faut tenir compte de la compatibilité de chaque partie de code pour être sûr d'avoir un résultat équivalent... j'ai par exemple essayé de rajouter sur l'un de mes sites un pointeur de souris avec différentes méthodes... html, css 3 et JS et ça ne marchais pas partout... Faut avoir recours à des astuces souvent.
Après il faut repérer les endroits du code ou tu utilises des méthodes sensibles de ce coté là
Oui, ça peut être une bonne solution, mais si je veux changer le bg de tout mon site je suis obligé de faire la modification sur toutes les pages...
Mais où est-ce que je pourrais connaître les compatibilités entre navigateurs ? Parceque j'ai fait des recherches sur Internet qui n'ont pas été très fructueuses...
Mais où est-ce que je pourrais connaître les compatibilités entre navigateurs ? Parceque j'ai fait des recherches sur Internet qui n'ont pas été très fructueuses...
A vrai dire, il faut regarder au fur et à mesure que tu codes... les codes JS sont souvent interprétés différement sur les navigateurs... mais la plupart du temps on ne trouve pas de grosses différences sur les div ou autre en html.
Peut-êre qu'il existe un site qui regroupe une partie des différences remarqué entre tel ou tel navigateur.
Sinon pour tes bg tu peux le mettre dans ton css en applicant ça à toutes tes balises body.
Peut-êre qu'il existe un site qui regroupe une partie des différences remarqué entre tel ou tel navigateur.
Sinon pour tes bg tu peux le mettre dans ton css en applicant ça à toutes tes balises body.
Oui... J'essayerai de faire ça, mais le problème c'est qu'il n'a pas l'air de se préoccuper de ma feuille de style...
Les "float" "width" et "height" ne sont respectés nulle part...
Et pour les bg de mes div ça marcherait avec "class" ?
Les "float" "width" et "height" ne sont respectés nulle part...
Et pour les bg de mes div ça marcherait avec "class" ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
50% du temps ces que le code nes pas valide donc laffichage nes pareil sur aucun navigateur... pour savoir si ton code es valide visite http://validator.w3.org/ .
50% du temps ces que lauteur nutilise pas les bon doctype donc utilise des code html avec des code xhtml copie coller par si par la et laffichageresulte en un brouillon ressemblan a un picaso lolll encore la http://validator.w3.org/ te dira si tu utilise un doctype ou pas.... par curiositer jaimera voir le site web pour voir quel es l'erreur car dab ces ie qui cause le problem mes dans ton cas ie marche bien alors je suis curieux :) un site valide fonctionnera bien sous nimporte kel navigateur a moin que tu utilise css3 car css3 nes pris en charge que par les navigateur modern mes ie 8 et 7 6... ne prennent en charge les css3 genre shadow etc
50% du temps ces que lauteur nutilise pas les bon doctype donc utilise des code html avec des code xhtml copie coller par si par la et laffichageresulte en un brouillon ressemblan a un picaso lolll encore la http://validator.w3.org/ te dira si tu utilise un doctype ou pas.... par curiositer jaimera voir le site web pour voir quel es l'erreur car dab ces ie qui cause le problem mes dans ton cas ie marche bien alors je suis curieux :) un site valide fonctionnera bien sous nimporte kel navigateur a moin que tu utilise css3 car css3 nes pris en charge que par les navigateur modern mes ie 8 et 7 6... ne prennent en charge les css3 genre shadow etc
Voici ma page html, suivi du css :
LE CSS :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- CSS général -->
<link rel="stylesheet" href="style/style.css"
type="text/css">
<!-- CSS carousel jQuery -->
<link rel="stylesheet" href="themes/default/default.css"
type="text/css" media="screen">
<link rel="stylesheet" href="themes/pascal/pascal.css"
type="text/css" media="screen">
<link rel="stylesheet" href="themes/orman/orman.css"
type="text/css" media="screen">
<link rel="stylesheet" href="nivo-slider.css"
type="text/css" media="screen">
<!-- fin CSS -->
<title>Index</title>
<?php $date = date("d/m/Y"); $heure = date('H'); $minute = date('i'); ?>
</head>
<body>
<div id="page">
<center><!-- Publicité -->
<div id="ad"><img style=""></div>
<!-- Header -->
<div style="text-align: left;" id="header"><span
style="font-weight: bold;"></span>
<div
style="font-family: Helvetica,Arial,sans-serif; text-align: left;"><font
style="" size="+2"> </font><span
style="font-weight: bold;"> <img
style="width: 199px; height: 199px;" alt=""
src="logo.png" align="middle"></span><font
size="+3"> </font><font
size="+3"> <span style="font-weight: bold;">TITRE
Noir</span> <font size="+2"><span
style="color: rgb(255, 0, 0);">2e titre rouge</span></font></font></div>
</div>
<!-- Menu -->
<div style="font-family: Helvetica,Arial,sans-serif;"
id="navig">Accueil - Contact - News</div>
<div id="container">
<div style="text-align: right;"></div>
<!-- Sidebar -->
<div id="sidebar">
<div style="text-align: right;"></div>
<h1 style="text-align: right;"><?php echo''.$date.''; ?>
-<?php echo''.$heure.''; ?>:<?php echo''.$minute.''; ?> </h1>
<h3>Navigation</h3>
Acceuil<br>
Contact<br>
News<br>
Plan du site<br>
<h3>Publicité</h3>
<div id="pub300x250"><img
style="width: 300px; height: 250px;" alt=""
src="style/images/pub/300x250.png"></div>
<br>
<h3>Social</h3>
Facebook :<br>
♥ j'aime<br>
(désolé pour ça mais j'avais pas de
bouton a mettre ;D)<br>
<h3>Newsletter</h3>
Inscrivez vous en envoyant un mais à notre webmaster dans la
partie Contact du site<br>
<h3>Contactez nous</h3>
nitsuj73@orange.fr
<div id="bas_side"></div>
</div>
<!-- Fin de la sidebar debut du contener -->
<h1>Accueil</h1>
<div id="texte">
<center><!-- CAROUSSEL JQUERY -->
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="http://www.funradio.fr"><img
src="images/01.png" title="Fun radio - Le son DANCEFLOOR"
alt=""></a><a href="https://www.deezer.com/fr/"><img
src="images/02.png" alt=""
title="Toute votre musique en écoute illimitée partout où vous allez avec Deezer Premium +"></a><a
href="https://www.google.com/?gws_rd=ssl"><img src="images/03.png"
title="Google" alt=""></a><img
src="images/04.png" alt="" title="Photoshop"></div>
</div>
<br>
<!-- Petite photo + présentation -->
<div style="text-align: left;"><img
style="float: left; width: 107px; height: 107px;" alt=""
src="style/images/jcwdlogo.png"><?php readfile('contenu/texte_photo_index.txt');?><br>
</div>
<br>
<!-- Deux cadres l'un a coté de l'autre -->
<!-- Gauche -->
<div id="contenu_acc_1"><span style="font-weight: bold;">CADRE
GAUCHE !<br>
</span><br>
Contenu du cadre<br>
</div>
<!-- Droit -->
<div id="contenu_acc_2"><span style="font-weight: bold;">CADRE
DROIT !</span><br>
<br>
Contenu du cadre</div>
<div style="text-align: left;"><br>
<!-- Fin blocs -->
<!-- Série de lignes, "Pour caler" --><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span style="color: rgb(255, 255, 255);">.</span><br>
<br>
<!-- A y est, c'est calé -->
<!-- Bouton + lien -->
<div style="text-align: center;"><button
onclick="location.href='test.html';"><span><em>Bouton</em></span></button><br>
</div>
<br>
<a href="page.php">
</a></div>
</div>
</center>
</div>
<!-- JQUERY + JAVASCRIPT -->
<script type="text/javascript"
src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script><!-- Fin jQ + JAVA -->
</div>
<!-- Footer -->
<div style="text-align: center;" id="footer">Footer
</div>
<!-- Footer -->
<!-- Publicité en dessous du footer -->
<div style="text-align: center;" id="foot_ad"><img
style="width: 728px; height: 90px;" alt=""
src="style/images/pub/728x90.png"></div>
</center>
</div>
<!-- Fin -->
</body>
</html>
LE CSS :
html, body {
background-position: center top;
background-repeat: repeat-x;
color: rgb(0, 0, 0);
background-color: rgb(0, 0, 0);
background-image: url(images/fond_page.png);
margin: 0px;
padding: 0px;
}
h1 {
text-align : left;
text-decoration : none;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 20px;
font-weight : bold;
color : #ffffff;
background-color : #850000;
background-image : url(images/fond_h1.png);
background-repeat : repeat-x;
line-height: 2.0;
padding-left:10px;
margin: 0;
}
h2 {
text-align : left;
text-decoration : none;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 15px;
font-weight : bold;
color : #ffffff;
background-image : url(images/fond_h2.png);
line-height: 2.0;
padding-left:10px;
height: auto;
}
h3{
text-align : left;
text-decoration : none;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 15px;
font-weight : bold;
color : #ffffff;
background-image : url(images/fond_h3.png);
line-height: 2.0;
padding: 0 0 0 10px;
height: 25px;
width: 300px;
}
#carousel{
width: 620px;
float: left;
}
#ad{
background-color: #000000;
height: 90px;
padding: 5px;
}
#page {
position: center top;
}
#header{
height: 200px;
width: 1022px;
background-image: url(images/head_bg.png);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navig{
width: 1022px;
height: 25px;
font-size : 20px;
background-color: #ffffff;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#container{
width: 1022px;
padding: 0 0 10px 10px;
border: 0;
background: #ffffff;
position: center-top;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar{
width: 300px;
padding: 0px 0px 0px 0px;
border: 0;
background: #E0E3E2;
position: right-top;
float: right;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidehead{
width: 300px;
padding: 0px 0px 0px 0px;
border: 0;
background: #E0E3E2;
position: right-top;
float: right;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#bas_side{
background-image: url(images/basside.png);
background-repeat: no-repeat;
height: 30px;
width: 300px;
}
#pub300x250{
width: 300px;
}
#texte{
float: left;
text-align : left;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#contenu_acc_1{
float: left;
width: 270px;
background-color: #850000;
margin-left: 50px;
background-image : url(images/fond_h1.png);
background-repeat : repeat-x;
color : #ffffff;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 5px;
}
#contenu_acc_2{
float: right;
width: 270px;
background-color: #850000;
margin-right: 50px;
background-image : url(images/fond_h1.png);
background-repeat : repeat-x;
color : #ffffff;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 5px;
}
#footer{
width: 1022px;
height: 100px;
background-image: url(images/footer.png);
background-repeat: no-repeat;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-left: auto;
margin-right: auto;
}
#foot_ad{
width: 1022px;
height: 100px;
padding: 5px;
}
button{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
overflow:visible;
text-align:center;
white-space:nowrap;
height:40px;
line-height:38px;
}
button span, button em{
display:block;
height:40px;
line-height:38px;
margin:0;
color:#ffffff;
}
button span{
padding-left:20px;
background:url(http://127.0.0.1:8888/test3/style/images/button/button.gif) no-repeat 0 0;
}
button em{
font-style:normal;
padding-right:20px;
background:url(http://127.0.0.1:8888/test3/style/images/button/button.gif) no-repeat 100% 0;
}
ok jai tester sur ie8 firefox 9.0.1 et chrome 16.0.912.63 la seul difference jai remarcker es le background blanc qui napparait pas sous chrome et firefox.... pour regler la solution jai ajouter display:inline-block; dans #container ... mes en gros ca parrait mal sous tou les navigateur tu pourrais faire un screenshot a partir de chez toi et l'héberger sur picdo ou autre pour voir ske ca donne chez toi ? car ces confu dans ma tete quand je vois ca il manke plein dimage ces toujours plus simple de savoir ske tu veux faire exactement pour regler les problem mes on dirait quil manke de container pour contenir les div... alors si tu peux faire un screenshot a partir de la je pourrais voir les erreur car la je vois que du neant :( desoler pour mon francais je suis canadiens et chez moi on parle plus anglais mes bon je me debrouille assez bien pareil :)
et pour repondre a ta question plus haut... une id es unique et class se repete dans la page ... exemple si tu fait 3 boite de la meme diemnssion qui se repete dans la case tu dois utiliser class car les boite son pas unique elle se repete... si tu ajoute plusieur float dans une meme boite tu dois utiliser display:inline-block; sinon les boite seron decaler meme voir manker le background... pour ajouter une arriere page couleur tu dois utiliser background: #fff; fff pour blanc biensure et pour une image en arriere plan ces background-image: url('liens vers l'image'); ... pour les width et height des div ca devrais bien se passer avec width:100px; et height:100px; qui formera un carrée de 100px par 100px
Le site a cette apparence sur internet explorer :
https://imageshack.com/
Et celle là sur mozilla :
https://imageshack.com/
https://imageshack.com/
Et celle là sur mozilla :
https://imageshack.com/
Oui c'est parceque je vous ai passé le code "brut" sans inclure les images...
Il va donc chercher directement sur votre ordinateur à un endroit donc, inexistant...
Il va donc chercher directement sur votre ordinateur à un endroit donc, inexistant...
desoler cetait les fete et jai eu de mauvaise nouvelle alors jai pas eu le temps de poster ici... apres avoir regarder jai remarquer plusieur erreur... mes le code nest pas propre et tres dure pour moi... je te sugere de recommencer le code si tu le desire jpeu meme taider a refaire a partir de zero ca devrais pas etre trop long quelque heure... a toi de voir
Oui :) Ok pas de soucis...
Oui je veux bien... Mais qu'est ce qui cloche exactement ?
Que faire pour le nettoyer ?
Oui je veux bien... Mais qu'est ce qui cloche exactement ?
Que faire pour le nettoyer ?
<body background="ton image" ; style="margin:0 ; padding:0 ; ">