Affichage du CSS sous Firefox Fermé

Question

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: Au marchÃ© du numÃ©rique

	Blabla
	blabla
	Encore du blabla
	D'autres blablas

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

darknade · Answer

Bonjour, ton premier lien ne fonctionne pas.

Dalida · Answer

salut,

tu fais flotter les éléments qui sont à l'intérieur du container, c'est comme si ton container était vide.

mailbox13630 · Answer

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?

Dalida · Answer

te vexe pas c'était pour rire !

faut que ça ressemble à quoi ?
est-ce que tu as une maquette ?

math 2000 · Answer

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

mailbox13630 · Answer

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,

Dalida · Answer

le fond ne sera visible que si le contenu à une hauteur plus grande que ledit chat… tu peux mettre l'arrière-plan sur , ça mange pas de pain et ça t'économisera un

. au passage tu peux définir une largeur à 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 à , ç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 , pas de pour la déco).

math 2000 · Answer

si vous n'auriez pas ignorer mion message j'avais dis qu'il fallaitmettre un height plus grand que 150 à l'id droite

dalylona · Answer

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.

math 2000 · Answer

non ça doit pas être dis comme ça c'est ie l'exception car opéra et safaris et google chrome font pareil

dalylona · Answer

"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.ht­ml 

résoud le problème de positionnement rencontré même par les webmasters expérimentés.

mailbox13630 · Answer

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.

Dalida · Answer

salut, alors on peut continuer ! remplace ton

par : 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 !

mailbox13630 · Answer

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+

Dalida · Answer

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.

mailbox13630 · Answer

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

Dalida · Answer

salut,

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{}

mailbox13630 · Answer

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 ;-)

Dalida · Answer

J'ai changé background-image en list-style-image, c'est mieux
non tu vas t'embêter, entre autre pour positionner la puce.

m'enfin si tu veux essayer tu peux utiliser {list-style-position:inside | outside;}.

Affichage du CSS sous Firefox

19 réponses

Discussions similaires