Div Invisible Sous Firefox par Acoustik - page 1

Bonjour ou Bonsoir, J'ai un souci lors de ma découpe CSS/Xhtml...

En faite mon site est nikel sous IE mais quand je passe sous Firefox j'ai des Div qui disparaisse...

Leurs noms sont :

#fond
#hautpage1
#hautpage2

Je pense qu'il manque quelque chose dans le css J'ai chercher mais je n'es point trouver ...

Mon 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>Mon Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="mon site" href="style.css" />
</head>
<body><div id="fond">
<div id="head"></div>
<div id="menu">
<div id="fondmenu1"></div>
<div class="element_menu">
   <ul>
   <li><a href="index.php?page=news">News</a> / <a href="#" onclick="win=window.open(this.href, '_blank'); if(win) return false;">Archives</a></li>
<li><a href="#" onclick="win=window.open(this.href, '_blank'); if(win) return false;">Forum</a></li>
<li><a href="#" onclick="win=window.open(this.href, '_blank'); if(win) return false;">Livre d'or</a></li>
<li><a href="index.php?page=contact">Contact</a></li>
<li><a href="index.php?page=partenariat">Partenariat</a></li>
<li><a href="index.php?page=recrutement">Recrutement</a></li>
</ul>
</div>

<div id="fondmenu2"></div>
<div class="element_menu">
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

<div id="fondmenu3"></div>
<div class="element_menu">
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

<div id="fondmenu4"></div>
<div class="element_menu">
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

<div id="fondmenu5"></div>
<div class="element_menu">
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

<div id="fondmenu6"></div>
<div class="element_menu">
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>

<div id="page">
<div id="hautpage1"></div>
<div id="hautpage2"></div>
<div id="hautpage3"></div>
<div id="centrepage">
<p>Le texte sera ici<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
</p>
</div></div>
<div id="baspage"></div>
<div id="bas"></div>
<div id="bas2"><a class="bas2" href="#" onclick="win=window.open(this.href, '_blank'); if(win) return false;"></a></div>
</div>
</body>
</html>

body
{
width: 825px;
margin: auto;
background-color: #000000;
}

#fond
{
width: 825px;
background-image: url("images/fond.png");
}

/* --------------------------------------------- Head --------------------------------------------- */

#head
{
width: 825px;
height: 182px;
background-image: url("images/head.png");
background-repeat: no-repeat;
}

/* --------------------------------------------- Le Menu --------------------------------------------- */

#fondmenu1
{
width: 139px;
height: 57px;
background-image: url("images/menu1.png");
background-repeat: no-repeat;
}

#fondmenu2
{
width: 139px;
height: 60px;
background-image: url("images/menu2.png");
background-repeat: no-repeat;
}

#fondmenu3
{
width: 139px;
height: 60px;
background-image: url("images/menu3.png");
background-repeat: no-repeat;
}

#fondmenu4
{
width: 139px;
height: 60px;
background-image: url("images/menu4.png");
background-repeat: no-repeat;
}

#fondmenu5
{
width: 139px;
height: 60px;
background-image: url("images/menu5.png");
background-repeat: no-repeat;
}

#fondmenu6
{
width: 139px;
height: 60px;
background-image: url("images/menu6.png");
background-repeat: no-repeat;
}

#menu
{
float: left;
width: 139px;
background-image: url("images/fondmenu.png");
}

#element_menu
{
background-image: url("images/fondmenu.png");
}

/* Quelques effets sur les menus */

.element_menu ul
{
list-style-image: url("images/bouton.gif");
padding: 0px;
padding-left: 25px;
margin: 0px;
margin-bottom: 0px;
color: #B3B3B3;
font-family: Verdana;
font-size: 10px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
color: #990000;
text-decoration: underline;
}

/* Page */

#page
{
width: 686px;
float: right;
color: #B3B3B3;
background-image: url("images/fondpage.png");
}

#hautpage1
{
display: inline;
width: 686px;
float: right;
color: #B3B3B3;
background-image: url("images/hautpage1.png");
background-repeat: no-repeat;
}

#hautpage2
{
width: 686px;
float: right;
color: #B3B3B3;
background-image: url("images/hautpage2.png");
}

#hautpage3
{
width: 686px;
float: right;
color: #B3B3B3;
background-image: url("images/hautpage3.png");
background-repeat: no-repeat;
}

#centrepage
{
margin-left: 30px;
margin-right: 25px;
margin-bottom: 20px;
padding: 0px;
color: #B3B3B3;
}

#baspage
{
width: 686px;
height: 28px;
float: right;
color: #B3B3B3;
background-image: url("images/baspage.png");
background-repeat: no-repeat;
}

/* --------------------------------------------- Bas --------------------------------------------- */

#bas
{
width: 740px;
height: 43px;
float: left;
background-image: url("images/bas.png");
background-repeat: repeat-x;
}

#bas2
{
width: 85px;
float: right;
height: 43px;
background-image: url("images/bas2.png");
background-repeat: repeat-x;
}

Merci de bien vouloir m'aider...

Acoustik

14 janvier 2006 à 23:48:31

kabuto_fr

15 janvier 2006 à 2:48:47

Salut,

En fat il disparaisse pas, mais en fait il sont pousser a droite.
expliquation:
Tu a le #fond qui fait 825px (qui ne sert a rien body fait la meme chose)
tu cole a droite #hautpage1 avec une largeur de 686px
meme chose pour #hautpage2 et #hautpage3 ce qui nout fait un total pour la largeur de page de 2058px
dont tu n'afiche que les 825px du #font.
Reduit la taille des #haut.... pour que ca fontionne.

@+

15 janvier 2006 à 14:27:30

Pour le fond j'ai beau enlever le 825px ca ne change pas... il est invisible sous Firefox...

Si vous préferez c'est un fond parce que quand le menu est plus grandque le centre et ba on voit une coupure dans le design, donc la je met se fond et quand c'est plus grand (aussi bien le menu -> Centre ou le Centre -> Menu on ne voit pas de "séparation"...

Et puis pour les hauts pages... C'est parce que en haut de la div principale il doit y avoir 3 images différents avec des choses dnas celle du milieu ...

Je ne voit pas quoi ajouter ou modifier dans mon code pour que ca change car si je reduit la largeur des #haut... il va manquer des morceaux car il sont répété que une fois...

Div Invisible Sous Firefox

Div Invisible Sous Firefox

Supprimer

Modérer

Signaler le message aux modérateurs