Affichage du CSS sous Firefox
mailbox13630
Messages postés
140
Statut
Membre
-
Dalida Messages postés 7114 Statut Contributeur -
Dalida Messages postés 7114 Statut Contributeur -
Bonjour,
Encore un pb d'affichage du CSS sous Firefox...
Suivez ce lien: http://www.provence-web-services.com.
Vous verrez une page donc le bloc central ne s'affiche pas en totalité..
Il comprend une image centrale mesurant 850 par 850 px...qui ne s'affiche pas entièrement.
Mais je ne trouve pas la solution de ce blocage..grrrrrr.....
Sous IE, pas de soucis, l'affichage est très propre.
Voici le code html et le css:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Au marché du numérique</title>
<link rel="stylesheet" media="screen" type="text/css" title="catstyle.css" href="catstyle.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="principal" style="background-image:url(http://www.france2018.fr/fondetchat.gif);background-repeat:no-repeat; background-attachment:fixed; background-position:center" >
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="80">
<param name="movie" value="http://www.france2018.fr/jardin_loulotte.swf">
<param name="quality" value="high">
<embed src="http://www.france2018.fr/jardin_loulotte.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="300" height="80"></embed>
</object><br/>
</div>
<div id="droite">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td scope="col"><img src="http://www.france2018.fr/whitebutterfly2.gif "class="floatLeft"; /></th>
<td scope="col"><h5>Blabla</h5></th>
</tr>
<tr>
<td><img src="http://www.france2018.fr/whitebutterfly2.gif "class="floatLeft"; /></td>
<td><h5>blabla</h5></td>
</tr>
<tr>
<td><img src="http://www.france2018.fr/whitebutterfly2.gif "class="floatLeft"; /></td>
<td><h5>Encore du blabla</h5></td>
</tr>
<tr>
<td><img src="http://www.france2018.fr/whitebutterfly2.gif "class="floatLeft"; /></td>
<td><h5>D'autres blablas</h5></td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
body
{
background-color:gray;
}
}
#principal
{
margin-top:30px;
width:850px;
margin:auto;
height:850px;
max-height:850px;
}
#droite
{
margin-top:40px;
margin:auto;
height:150px;
width:350px;
vertical-align:right;
margin-right:20px;
font-family: Arial,Tahoma, Verdana, Serif;
color:white;
margin-left:550px;
vertical-align:auto;
}
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}
object
{
float:right;
margin-right:0px;
margin-bottom:20px;
position:relative;
}
a
{
border:none;
color:gray;
}
a:hover
{
text-decoration:underline;
}
Merci d'avance pour votre aide
Encore un pb d'affichage du CSS sous Firefox...
Suivez ce lien: http://www.provence-web-services.com.
Vous verrez une page donc le bloc central ne s'affiche pas en totalité..
Il comprend une image centrale mesurant 850 par 850 px...qui ne s'affiche pas entièrement.
Mais je ne trouve pas la solution de ce blocage..grrrrrr.....
Sous IE, pas de soucis, l'affichage est très propre.
Voici le code html et le css:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Au marché du numérique</title>
<link rel="stylesheet" media="screen" type="text/css" title="catstyle.css" href="catstyle.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="principal" style="background-image:url(http://www.france2018.fr/fondetchat.gif);background-repeat:no-repeat; background-attachment:fixed; background-position:center" >
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="80">
<param name="movie" value="http://www.france2018.fr/jardin_loulotte.swf">
<param name="quality" value="high">
<embed src="http://www.france2018.fr/jardin_loulotte.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="300" height="80"></embed>
</object><br/>
</div>
<div id="droite">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td scope="col"><img src="http://www.france2018.fr/whitebutterfly2.gif "class="floatLeft"; /></th>
<td scope="col"><h5>Blabla</h5></th>
</tr>
<tr>
<td><img src="http://www.france2018.fr/whitebutterfly2.gif "class="floatLeft"; /></td>
<td><h5>blabla</h5></td>
</tr>
<tr>
<td><img src="http://www.france2018.fr/whitebutterfly2.gif "class="floatLeft"; /></td>
<td><h5>Encore du blabla</h5></td>
</tr>
<tr>
<td><img src="http://www.france2018.fr/whitebutterfly2.gif "class="floatLeft"; /></td>
<td><h5>D'autres blablas</h5></td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
body
{
background-color:gray;
}
}
#principal
{
margin-top:30px;
width:850px;
margin:auto;
height:850px;
max-height:850px;
}
#droite
{
margin-top:40px;
margin:auto;
height:150px;
width:350px;
vertical-align:right;
margin-right:20px;
font-family: Arial,Tahoma, Verdana, Serif;
color:white;
margin-left:550px;
vertical-align:auto;
}
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}
object
{
float:right;
margin-right:0px;
margin-bottom:20px;
position:relative;
}
a
{
border:none;
color:gray;
}
a:hover
{
text-decoration:underline;
}
Merci d'avance pour votre aide
A voir également:
- Affichage du CSS sous Firefox
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Telecharger firefox - Télécharger - Navigateurs
- Affichage double ecran - Guide
- Exporter favoris firefox - Guide
- Windows 11 affichage classique - Guide
19 réponses
salut,
tu fais flotter les éléments qui sont à l'intérieur du container, c'est comme si ton container était vide.
tu fais flotter les éléments qui sont à l'intérieur du container, c'est comme si ton container était vide.
Je débute...Il faut bien passer pas là avant d'exceller!
Ce que j'espère un jour...
D'ici là, le site du zéro et comment ça marche sont de bons outils.
Code d'en tête de page: Dreamweaver
Le reste, je l'ai codé sur Blocnote.
Qu'est ce qui ne vas pas dans le code?
Ce que j'espère un jour...
D'ici là, le site du zéro et comment ça marche sont de bons outils.
Code d'en tête de page: Dreamweaver
Le reste, je l'ai codé sur Blocnote.
Qu'est ce qui ne vas pas dans le code?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
si tu augmente le height le l'élément qui a comme id droite
ça marche mais bon c'est pas logique que ça prenne pas toute la place
mais ça doit être puisque tous les navigateurs sauf ie le lise comme ça
ça marche mais bon c'est pas logique que ça prenne pas toute la place
mais ça doit être puisque tous les navigateurs sauf ie le lise comme ça
Pas d'affolationnage! ;-)
Aucune susceptibilité dans l'air!
Mais c'est en webmasteurisant que l'on devient webmateur ;-)
Voici le lien vers l'image que je souhaite voir apparaître dans la partie centrale.
Le chat regardera en direction du menu...
http://www.france2018.fr/fondetchat.gif
Comme tu as pu le voir après avoir enlevé les float, on parvient à voir les oreilles mais c'est tout,
Merci tu temps que tu m'accorde,
Aucune susceptibilité dans l'air!
Mais c'est en webmasteurisant que l'on devient webmateur ;-)
Voici le lien vers l'image que je souhaite voir apparaître dans la partie centrale.
Le chat regardera en direction du menu...
http://www.france2018.fr/fondetchat.gif
Comme tu as pu le voir après avoir enlevé les float, on parvient à voir les oreilles mais c'est tout,
Merci tu temps que tu m'accorde,
le fond ne sera visible que si le contenu à une hauteur plus grande que ledit chat…
tu peux mettre l'arrière-plan sur <body>, ça mange pas de pain et ça t'économisera un <div>.
au passage tu peux définir une largeur à <body> et le centrer sur la page :
et pour que tout le chat soit visible, suffit de définir une hauteur minimale à <body>, ça ne fonctionne pas sous IE 6 mais tu peux choisir de l'ignorer.
il faudrait que tu mettes tous les styles dans une feuille de style à part sinon ça va vite être le bronx.
enfin si tu nous dit à quoi tu veux que le reste ressemble, on pourra te donner une structure de document plus correcte (pas de <table>, pas de <img/> pour la déco).
tu peux mettre l'arrière-plan sur <body>, ça mange pas de pain et ça t'économisera un <div>.
au passage tu peux définir une largeur à <body> et le centrer sur la page :
body{
width:800px; /* à modifier avec la largeur du chat */
margin:0 auto; /* tu peux aussi mettre une marge en haut et en bas*/
}
et pour que tout le chat soit visible, suffit de définir une hauteur minimale à <body>, ça ne fonctionne pas sous IE 6 mais tu peux choisir de l'ignorer.
body{
width:800px; /* à modifier avec la largeur du chat */
margin:0 auto; /* tu peux aussi mettre une marge en haut et en bas*/
min-height:600px; /* à modifier avec la hauteur du chat */
}
il faudrait que tu mettes tous les styles dans une feuille de style à part sinon ça va vite être le bronx.
enfin si tu nous dit à quoi tu veux que le reste ressemble, on pourra te donner une structure de document plus correcte (pas de <table>, pas de <img/> pour la déco).
si vous n'auriez pas ignorer mion message j'avais dis qu'il fallaitmettre un height plus grand que 150 à l'id droite
j'avais dis qu'il fallaitmettre un height plus grand que 150 à l'id droite
oui mais ça aurait fonctionné seulement maintenant alors qu'on ne sait pas ce qu'il va y avoir dans la page.
normalement il devrait y avoir plus de contenu donc ça devrait se faire tout seul.
et ça ne résout pas le problème du menu qui est positionné avec le {padding} de son container et qui empêche d'ajouter d'autre contenu à la même hauteur.
si notre questionneur veut mettre en place une colonne, il va falloir reprendre la mise en page plutôt que de bricoler celle là. sinon il reviendra le jour d'après quand il ne réussira pas à ajouter du contenu où il veut.
oui mais ça aurait fonctionné seulement maintenant alors qu'on ne sait pas ce qu'il va y avoir dans la page.
normalement il devrait y avoir plus de contenu donc ça devrait se faire tout seul.
et ça ne résout pas le problème du menu qui est positionné avec le {padding} de son container et qui empêche d'ajouter d'autre contenu à la même hauteur.
si notre questionneur veut mettre en place une colonne, il va falloir reprendre la mise en page plutôt que de bricoler celle là. sinon il reviendra le jour d'après quand il ne réussira pas à ajouter du contenu où il veut.
Bonsoir,
En fait, firefox est plus exigeant que IE en termes de respect des standards. C'est pourquoi, il n'affiche pas correctement la page si elle n'est pas bien faite. Voici un tutoriel
http://www.apprendre-joomla.com/positionnement-conteneurs.html
sur la résolution des problèmes d'affichage lors de l'utilisation de la proprièté float pour le positionnement des blocs div ; Cette proprièté doit être en effet bien maitrisée.
Salut.
En fait, firefox est plus exigeant que IE en termes de respect des standards. C'est pourquoi, il n'affiche pas correctement la page si elle n'est pas bien faite. Voici un tutoriel
http://www.apprendre-joomla.com/positionnement-conteneurs.html
sur la résolution des problèmes d'affichage lors de l'utilisation de la proprièté float pour le positionnement des blocs div ; Cette proprièté doit être en effet bien maitrisée.
Salut.
non ça doit pas être dis comme ça c'est ie l'exception car opéra et safaris et google chrome font pareil
"Mais IE est loin de respecter les "standards" du W3C : c'est d'ailleurs l'une des raisons qui poussent développeurs et webmasters à préférer Firefox " EXTRAIT DE L'ARTICLE:
http://www.journaldunet.com/solutions/0503/050323_firefox_ie.shtml
De toute façon, ce n'est pas l'objet de la discussion bien que c'est une réalité pour le navigateur de Microsoft le plus populaire.
le tutoriel d'avant
http://www.apprendre-joomla.com/positionnement-conteneurs.html
résoud le problème de positionnement rencontré même par les webmasters expérimentés.
http://www.journaldunet.com/solutions/0503/050323_firefox_ie.shtml
De toute façon, ce n'est pas l'objet de la discussion bien que c'est une réalité pour le navigateur de Microsoft le plus populaire.
le tutoriel d'avant
http://www.apprendre-joomla.com/positionnement-conteneurs.html
résoud le problème de positionnement rencontré même par les webmasters expérimentés.
Merci à tous pour vos informations, Mathieu, Dalylona et Math 2000. Je prends bien note de tout ce que vous m'avez indiqué.
A Mathieu:
J'ai effectué les changements en mettant l'image de fond dans la balise <body>
J'ai supprimé ma table...;-)
Il y a du mieux!
Par contre, je ne parviens pas à afficher mon menu en haut à droite (le chat regarderait dans la direction du menu).
Mes dernières modifs sont en ligne.
A Mathieu:
J'ai effectué les changements en mettant l'image de fond dans la balise <body>
J'ai supprimé ma table...;-)
Il y a du mieux!
Par contre, je ne parviens pas à afficher mon menu en haut à droite (le chat regarderait dans la direction du menu).
Mes dernières modifs sont en ligne.
salut,
alors on peut continuer !
remplace ton <div id="droite"> par :
ce sera déjà plus propre et pour ajouter les images :
pour le positionner, il faut que tu nous dises ce qu'il y aura d'autre dans le document.
en fonction de ça on te donnera la meilleure technique.
à plus !
alors on peut continuer !
remplace ton <div id="droite"> par :
<ul id="navigation"> <li class="lien1"><a href="page1.html">Page 1</a></li> <li class="lien2"><a href="page2.html">Page 2</a></li> <li class="lien3"><a href="page3.html">Page 3</a></li> <li class="lien4"><a href="page4.html">Page 4</a></li> </ul>
ce sera déjà plus propre et pour ajouter les images :
ul#navigation{
margin:0;
padding:0;
}
ul#navigation li{
background-image:url(http://www.france2018.fr/whitebutterfly2.gif);
background-repeat:no-repeat;
background-position:0 50%;
padding:0 0 0 32px; /* à adapter */
line-height:24px; /* à adapter */
}
pour le positionner, il faut que tu nous dises ce qu'il y aura d'autre dans le document.
en fonction de ça on te donnera la meilleure technique.
à plus !
Merqui!
J'avais commencé par des balises ul pour mon menu, mais je rencontrais un problème style text-indent à chaque ligne...chaque ligne était décalée...bref, j'ai opté ensuite pour le tableau..Pas mieux.
Grâce à ton code, c'est propre, par contre, c'est aligné à gauche alors que je souhaiterai que ce soit en haut à droite.
J'ai ajouté à ul#navigation li un margin-left:650px;
Ca décale le menu où il faut.
Par contre, je ne parviens pas à le monter.
Ne faut-il pas ajouter des float quelques part? (il y a une animation flash en haut, est-ce-qu'elle ne bloque pas?)
C'est en ligne,
a+
J'avais commencé par des balises ul pour mon menu, mais je rencontrais un problème style text-indent à chaque ligne...chaque ligne était décalée...bref, j'ai opté ensuite pour le tableau..Pas mieux.
Grâce à ton code, c'est propre, par contre, c'est aligné à gauche alors que je souhaiterai que ce soit en haut à droite.
J'ai ajouté à ul#navigation li un margin-left:650px;
Ca décale le menu où il faut.
Par contre, je ne parviens pas à le monter.
Ne faut-il pas ajouter des float quelques part? (il y a une animation flash en haut, est-ce-qu'elle ne bloque pas?)
C'est en ligne,
a+
bis repetita placent…
pour le positionner, il faut que tu nous dises ce qu'il y aura d'autre dans le document. en fonction de ça on te donnera la meilleure technique.
Pardon...Je comprends vite mais il faut me le répéter souvent ;-)
C'est une page d'accueil très "épurée" qui ne comportera le menu principal, celui que je cherche à cadrer en haut à droite.
Ce menu se retrouvera au même emplacement sur les autres pages du site.
Le graphisme des autres pages sera différent (même couleur, menu au même emplacement, mais pas de fond de page imagé pour la lisibilité...)
Gracie mille
C'est une page d'accueil très "épurée" qui ne comportera le menu principal, celui que je cherche à cadrer en haut à droite.
Ce menu se retrouvera au même emplacement sur les autres pages du site.
Le graphisme des autres pages sera différent (même couleur, menu au même emplacement, mais pas de fond de page imagé pour la lisibilité...)
Gracie mille
salut,
ok, donc tant qu'à faire autant positionner le menu de la même manière partout.
je te propose :
catstyle.css (ligne 51)
et pour mettre en forme les liens (à garder dans cet ordre) :
ok, donc tant qu'à faire autant positionner le menu de la même manière partout.
je te propose :
catstyle.css (ligne 51)
ul#navigation {
float:right;
list-style-type:none; /* pour enlever les puces */
margin:0 32px 0 0; /* à adapter */
padding:0;
}
ul#navigation li {
background-image:url(http://www.france2018.fr/whitebutterfly2.gif);
background-position:0 50%;
background-repeat:no-repeat;
line-height:50px;
/* margin-left:650px; devenu inutile */
padding:0 0 0 32px;
}
et pour mettre en forme les liens (à garder dans cet ordre) :
ul#navigation li a:link{}
ul#navigation li a:visited{}
ul#navigation li a:hover{}
ul#navigation li a:active{}
Slt Mathieu,
Cool, c'est au bon endroit.
Par contre le texte chevauche les butterflies (trad: les beurres qui volent),
J'ai changé background-image en list-style-image, c'est mieux, mais je ne parviens pas à centrer l'alignement vertical texte/papillon.
Par ailleurs, existe-t-il une propriété CSS pour modifier l'écart entre la puce (quelle qu'elle soit) et le texte?
Danke sehr ;-)
Cool, c'est au bon endroit.
Par contre le texte chevauche les butterflies (trad: les beurres qui volent),
J'ai changé background-image en list-style-image, c'est mieux, mais je ne parviens pas à centrer l'alignement vertical texte/papillon.
Par ailleurs, existe-t-il une propriété CSS pour modifier l'écart entre la puce (quelle qu'elle soit) et le texte?
Danke sehr ;-)
http://www.france2018.fr