Probleme d'affichage avec firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Probleme d'affichage avec firefox

Teddyted

Bonjour

Mon probleme est que dans mon site la couleur du "main" en jaune ne s'affiche pas sous Firefox alors que sous IE aucun probleme. La hauteur du bloc "main" doit augmenter en fonction de la hauteur du bloc "contenu"

Le XHTML

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue dans le test!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design_vierge.css" />
</head>
<body>
<div class="head">
<div class="bloc1"></div>
<div class="bloc2"></div>
<div class="bloc3"></div>
</div>
<div class="main">
<div class="blocmenu">
<div id="navcontainer">
<ul id="navlist">
<li><a href="connecter.html#">Se connecter</a></li>
</ul>
</div>
<div class="mbloc">Présentation</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="lien#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
</ul>
</div>
<div class="mbloc">Information</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="lien.html#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
<li><a href="lien.html#">lien</a></li>
</ul>
</div>
</div>
<div class="contenu"></div>
</div>
</body>
</html>

Le CSS

Code :

body
{
margin-top: 30px;
background: #333333;
font: bold 12px verdana,helvetica,arial,sans-serif;
}
/*Head : disposition des 3 premiers blocs*/
.head
{
width: 943px;
height: 107px;
margin: auto;
background-color: white;
border-bottom: #808080 1px solid;
}
.bloc1
{
float: left;
width: 210px;
height: 100%;
}
.bloc2
{
float: left;
width: 530px;
height: 100%;
border-left: #808080 1px solid;
border-right: #808080 1px solid;
}
.bloc3
{
float: left;
width: 201px;
height: 100%;
}
/*Head : disposition des 3 premiers blocs*/
/*Main : disposition des 3 blocs centrales*/
.main
{
width: 943px;
height: auto;
margin: auto;
background: yellow;
}
/*Création du menu*/
.blocmenu
{
float: left;
background-color: blue;
}
ul#navlist
{
width: 210px;
margin: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
background: #808080;
border-bottom: #808080 1px solid;
}
ul#navlist li
{
border-top: #808080 1px solid;
border-left-width: 0px;
border-bottom-width: 0px;
margin: 0px;
list-style-type: none;
border-right-width: 0px
}
ul#navlist li a
{
border-top-width: 0px;
border-bottom-width: 0px;
border-left: #aaaabb 20px solid;
border-right-width: 0px;
padding-right: 8px;
padding-left: 8px;
padding-top: 7px;
padding-bottom: 7px;
display: block;
background: #333399;
width: 174px;
text-align: left;
text-decoration: none;
}
ul#navlist li a:link
{
color: #666677;
}
div#navcontainer li a:visited
{
color: #ffffff;
}
ul#navlist li a:hover
{
border-left-color: #ff9000;
background: #000d33;
border-bottom-color: #ff9000;
border-top-color: #ff9000;
border-right-color: #ff9000;
color: #ffffff;
}
.mbloc
{
background-color: #ffffff;
color: #333366;
width: 210px;
text-indent: 15px;
padding-top: 7px;
padding-bottom: 7px;
}
/*Création du menu*/
.contenu
{
float: left;
width: 530px;
text-align: center;
border-left: #808080 1px solid;
border-right: #808080 1px solid;
padding-bottom: 55px;
background: white;
}
/*Main : disposition des 3 blocs centrales*/

Vous pouvez aussi corriger se qui n'est pas correct

Merci

Message édité par Teddyted le 29-08-2006 à 08:18:11

Publicité

bis2kt

c'est simplement parce que ton "main" n'a pas de hauteur.
Et je vois pas bien pourquoi t'utilises une classe ? d'ailleurs t'en utilises un peu partout... tu me diras, tant que ça marche.

Teddyted

Salut,
Justement, je ne lui donne pas de hauteur car je veux que le bloc du "contenu" agrandisse le bloc "main" automatiquement. Comme ca, le fond jaune reste sur les coté droite et gauche.
Exemple : si j'ai 50 lignes de texte dans le contenu, alors le bloc contenu va agrandir automatiquement le "main".
Je sais pas si c'est clair?? Sinon comment faire autrement qu'avec des class pour donner la mise en forme?? Des id???

bis2kt

bah en theorie, ton main doit prendre automatiquement la hauteur de son contenu (donc au minimum la taille de ton "blocmenu", même si il le fait pas sous ff et opera... ) là j'ai pas le temps de débugger le truc (désolé) mais jsuis sur qu'il y a une ame charitable qui va pouvoir t'aider. Sinon, en gros, on utilise les "class" pour des elements qui apparaissent plusieurs fois dans la page (comme ton "navcontainer" ) et des "id" pour les elements uniques (comme ton "main" ), j'ai l'impression que tu fais exactement l'inverse
et moi je fuis comme la peste les padding, tous les navigateurs ne les interprete pas de la même façon, mais après, peut-être que c'est moi ne sait pas bien les utiliser

Message édité par bis2kt le 29-08-2006 à 12:56:45

Teddyted

Tu as bien compris mon probleme sous Internet explorer aucun probleme le main prend la taille du contenu donc comme tu as dis au minimum la taille du menu. Malheureusement Firefox ne le comprend pas.
La question reste : que faut il modifier?? J'attend une ame charitable...

PS : J'ai modifier les class par des id mais j'ai toujours le meme resultat.

bis2kt

tiens, ça me revient comme ça en passant (avec les doigts tout gras plein de KFC...) tu peux utiliser la propriété "min-height" qui fonctionne sous ff et Opera.

mIRROR

Chevreuillobolchévik

question un peu classique t as du faire de loooooooongues recherches [:pingouino]
tu mets des flottants dans un div au flux normal c est normal que ca plante
il faut faire flotter ton conteneur

Teddyted

Tu pourrais m'expliquer plus en détail car je ne comprend pas, je precise je suis novice.
Pour les recherches, c'est vrai que je n'en ai pas de longues car je suis a l'etranger et je n'ai pas souvent accés a internet.
Merci

bis2kt

en gros, ajoute un div global en absolute qui positionne toute la page, et ton main passe le en float:left

Teddyted

Ok, je vais tester ca, merci pour ton aide

Publicité

Teddyted

Merci , ca marche impecable mais je ne comprend pas pourquoi il faut faire ca pour firefox....

FORUM HardWare.fr

Programmation

HTML/CSS

Probleme d'affichage avec firefox

Sujets relatifs
affichage d'un swf: firefox ok, IE probleme !	[Flash/AS] problème d'affichage avec Firefox
Probléme affichage image avec firefox sur smartblog	problème d'affichage sous firefox et safari
probleme de rafraichissement de l affichage sous firefox	Problème d'affichage entre Firefox et IE
Problème affichage infoBulle IE <> Firefox	Problème affichage IE / Firefox
Problème d'affichage entre IE et Firefox	[CSS+HTML]Probleme d'affichage FireFox
Plus de sujets relatifs à : Probleme d'affichage avec firefox

Page générée en 0.067 secondes