Aller au contenu

Menu qui repousse le texte en dessous (FF)

catseb

Par catseb
dans (X)HTML et CSS

 Partager

Sujets conseillés

catseb

catseb

Posté
Posté (modifié)

Bonjour,

Deux trois choses en fait. Je debute, j ai bidouillé un truc (vous allez hurler en voyant le code mais bon...)

Donc :

1 - L'ouverture des sous menus sour firefox décale mes textes en dessous au lieu de s'afficher par dessus

2 - J'ai un menu que j ai élargi mais les couleurs d arriere plan des sous menus ne passent pas

3 - Est il possible de réunir les codes des classes FFA a FFE en une plutot que de répéter un code identique

4 - Pourquoi l'affichage des mes polices se fait en times et non en arial ou verdana en dehors du menu ??

En fait s il y a une partie menu FF c est pour un affiche sous Firefox et IE pour internet explorer sans usage de javascript.

Voila si vous pouvez me depanner par ce que la je trouve plus rien meme sur les forums je dois pas avoir les bons mots cles

Merci par avance

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" lang="fr">
<head>
<title>Atout-Bio.fr.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">  
media="screen">
body {
font-family:Verdana;
font-size: 12px;
margin: 0;
padding: 0;
}
#entete {
height: 100px;
background-color: #ffff33;
}
#haut {
padding-right: 50px;
height: 50px;
background-color:#ff9900;
}
.menuIE {
	position: absolute;
	top: 110px;
	left: 50px;
	z-index:100;
	width: 100%;
    display:none !important;
    display:block;
}
a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
    color:#000;
    width:100px;
    height:18px;
    display:block;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:12px;
    line-height:18px;
    overflow:hidden;
}
a.boutonIE:hover {
    color:#fff;
    background:#000;
    overflow:visible;}
a.boutonIE:hover table {
    display:block;
    background:#eee;
    border-collapse:collapse;
}
.boutonFF { 
	margin-left: 50px;
	z-index:100;
    color:#000;
    width:100px;
    height:18px;
    display:block !important;
    display:none;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:12px;
    line-height:18px;
    overflow:hidden;
 }
.boutonFF:hover {
    height:auto;
    cursor:pointer;
    color:#fff;
	background:#000;
}
.boutonFFA { 
	z-index:100;
	width: 100px;
    color:#000;
    height:18px;
    display:block !important;
    display:none;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:12px;
    line-height:18px;
    overflow:hidden;
 }
.boutonFFA:hover {
    height:auto;
    cursor:pointer;
    color:#fff;
	background:#000;
 }
 .boutonFFB { 
	z-index:100;
	width: 150px;
    color:#000;
    height:18px;
    display:block !important;
    display:none;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:12px;
    line-height:18px;
    overflow:hidden;
 }
.boutonFFB:hover {
    height:auto;
	width:150px;
    cursor:pointer;
    color:#fff;
	background:#000;
}
.boutonFFC { 
	z-index:100;
	width: 100px;
    color:#000;
    height:18px;
    display:block !important;
    display:none;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:12px;
    line-height:18px;
    overflow:hidden;
 }
.boutonFFC:hover {
    height:auto;
    cursor:pointer;
    color:#fff;
	background:#000;
}
.boutonFFD { 
	z-index:100;
	width: 100px;
    color:#000;
    height:18px;
    display:block !important;
    display:none;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:12px;
    line-height:18px;
    overflow:hidden;
 }
.boutonFFD:hover {
    height:auto;
    cursor:pointer;
    color:#fff;
	background:#000;
}
.boutonFFE { 
	z-index:100;
	width: 100px;
    color:#000;
    height:18px;
    display:block !important;
    display:none;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:12px;
    line-height:18px;
    overflow:hidden;
 }
.boutonFFE:hover {
    height:auto;
    cursor:pointer;
    color:#fff;
  background:#000;
}
a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
    display:block;
    width:100px !important;
    width:98px;
    height:18px;
    border-bottom:1px solid #000;
    text-decoration:none;
    color:#000;
	font-family: verdana;
    font-size:12px;
    text-align:center;
    background:#eee;   
}
a.SousMenu:hover {background:#BCCCD2;}
#conteneur {
	position: absolute;
	width: 100%;
	background-color:#FFFF33;
	top: 5px;
}
#centre {
background-color: #FFFFFF;
margin-left: 150px;
margin-right: 0px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #ff9900;
}
p {margin: 0 0 10px 0;}
</style>
</head>

<body>

<div id="conteneur">

   <div id="entete">entete <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

   <div id="haut">
<div class="menuIE">
<a class="boutonIE" href="#nogo">Accueil
<table><tr><td>
</td></tr></table>
<a class="boutonIE" href="#nogo">Soins du Corps
<table><tr><td>
<a class="SousMenu" href="#nogo">Le Corps</a>
<a class="SousMenu" href="#nogo">Le Visage</a>
<a class="SousMenu" href="#nogo">L'Homme</a>
<a class="SousMenu" href="#nogo">Bébé</a>
<a class="SousMenu" href="#nogo">Solaire</a>
</td></tr></table>
</a>
<a class="boutonIE" href="#nogo">Bien-Etre
<table><tr><td>
<a class="SousMenu" href="#nogo">Huiles Essentielles</a>
<a class="SousMenu" href="#nogo">Huiles Végétales</a>
<a class="SousMenu" href="#nogo">Elixirs Floraux</a>
<a class="SousMenu" href="#nogo">Diététique</a>
</td></tr></table>
</a>
<a class="boutonIE" href="#nogo">Beauté
<table><tr><td>
<a class="SousMenu" href="#nogo">Le Visage</a>
<a class="SousMenu" href="#nogo">Les Yeux</a>
<a class="SousMenu" href="#nogo">Les Joues</a>
<a class="SousMenu" href="#nogo">Les Lèvres</a>
<a class="SousMenu" href="#nogo">Peignes & Brosses</a>
</td></tr></table>
</a>
<a class="boutonIE" href="#nogo">Maison & Jardin
<table><tr><td>
<a class="SousMenu" href="#nogo">Senteurs & Décoration</a>
<a class="SousMenu" href="#nogo">L'Entretien</a>
<a class="SousMenu" href="#nogo">Le Jardin</a>
<a class="SousMenu" href="#nogo">Le Cuir</a>
</td></tr></table>
</a>
<a class="boutonIE" href="#nogo">Librairie
<table><tr><td>
<a class="SousMenu" href="#nogo">Nos livres</a>

</td></tr></table>
</a>
</div>

<div class="boutonFF"><strong>Accueil</strong><br />
</div>
<div class="boutonFFA"><strong>Soins du Corps</strong><br />
<a class="SousMenu" href="#nogo">Le Corps</a>
<a class="SousMenu" href="#nogo">Le Visage</a>
<a class="SousMenu" href="#nogo">L'Homme</a>
<a class="SousMenu" href="#nogo">Bébé</a>
<a class="SousMenu" href="#nogo">Solaire</a></div>

<div class="boutonFFB"><strong>Bien Etre</strong><br />
<a class="SousMenu" href="#nogo">Huiles Essentielles</a>
<a class="SousMenu" href="#nogo">Huiles Végétales</a>
<a class="SousMenu" href="#nogo">Elixirs floraux</a>
<a class="SousMenu" href="#nogo">Diététique</a></div>

<div class="boutonFFC"><strong>Beauté</strong><br />
<a class="SousMenu" href="#nogo">Le Visage</a>
<a class="SousMenu" href="#nogo">Les Yeux</a>
<a class="SousMenu" href="#nogo">Les Joues</a>
<a class="SousMenu" href="#nogo">Les Lèvres</a>
<a class="SousMenu" href="#nogo">Peignes & Brosses</a></div>

<div class="boutonFFD"><strong>Maison</strong><br />
<a class="SousMenu" href="#nogo">Ambiances</a>
<a class="SousMenu" href="#nogo">Entretien</a>
<a class="SousMenu" href="#nogo">Le Jardin</a>
<a class="SousMenu" href="#nogo">Le Cuir</a></div>

<div class="boutonFFE"><strong>Librairie</strong><br />
<a class="SousMenu" href="#nogo">Nos Livres</a></div>

   </div>
   
   <div id="gauche"><p>menu gauche</p>
    <p>largeur fixe : 150px</p>
    
   </div>

  	<div id="centre">

     partie centrale qui "pousse" les colones vers le bas.<br />
     partie avec du contenu occupant le reste de la largeur<br />
     partie avec du contenu occupant le reste de la largeur<br />

     partie avec du contenu occupant le reste de la largeur<br />
     partie avec du contenu occupant le reste de la largeur<br />

     partie avec du contenu occupant le reste de la largeur<br />
     partie avec du contenu occupant le reste de la largeur<br />
     partie avec du contenu occupant le reste de la largeur<br />
     partie avec du contenu occupant le reste de la largeur<br />

     partie avec du contenu occupant le reste de la largeur<br />
     partie avec du contenu occupant le reste de la largeur<br />

     partie avec du contenu occupant le reste de la largeur<br />
     partie avec du contenu occupant le reste de la largeur<br />
  	</div>
   
   <div id="pied">pied de page</div>

</div>
   

</body>
</html>

<edit modo> CODEBOX pour les longs codes SVP ! </edit>

Modifié par Dudu
Lien vers le commentaire
Partager sur d’autres sites
  • 2 semaines plus tard...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...