18073 sujets

Questions générales et questions de débutants

[Résolu] Menu qui repousse le texte

Merci Probleme resolu

Bonjour

Plusieurs soucis de debutant Tous sous FIREFOX

1 - Mon menu décale le texte en dessous

2 - Le sous menu que j ai élargi a un souci de couleurs de fond (trop petites)

3 - Est il possible d alleger la partie du code qui se repete (celle qui justement concerne Firefox)
En fait j ai fait ca pour décaler le menu de la marge gauche mais c est peut etre pas la meilleure solution...

Merci de votre aide a tous

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 &quot;pousse&quot; 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>
[#]
Modifié par catseb (18 May 2006 - 21:02)
Pourquoi 2 menus ? pour eviter tout javascript

Sinon j ai trouvé pour les sous menus, mais est il possible de faire en sorte que mon sous menu passe au dessus de mon texte sans le décaler ?

Merci
Sujet clos
Aller à