Pb menu

Question

Elfy75

12 Nov 2012 à 16:42

Salut les ami(e)s,
De nouveau besoin d'un petit coup de pouce, je suis entrain de faire un menu pour un test, gros problème mon menu ne s'adapte pas du tout à ma fenêtre, tout bouge et c'est moche je voudrais qu'il soit fixe mais en même temps adapté à la taille de ma fenêtre
Voila mon code


<body>
<h1> TEST</h1>
<ul id="menu">
  <li><a href="#" title="colliers&laisses">* COLLIERS & LAISSES</a></li>
  <li><a href="#" title="vetements">* VÊTEMENTS</a></li>
  <li><a href="#" title="conforts">* CONFORTS</a></li>
  <li><a href="#" title="accessoires">* ACCESSOIRES</a></li>
  <li><a href="#" title="nourritures">* NOURRITURES</a></li>
  <li><a href="#" title="hygienes">* HYGIENES</a></li>
</ul>
</body>
</html>


body
{
    margin:0;
    padding:0;
    background-color: #FFF;
	height:auto;
}

h1
{
	color:#F9F;
	font-size:60px;
	text-align:center;
	letter-spacing:5px;
}

#menu li 
{
  display: inline;
}

#menu
{
  margin: 20px auto;
  padding: 20px auto;
  list-style: none ;
  text-align: center ;
}

#menu li {
  display: inline ;
  margin-right: 0px ;
  color: #000 ;
  background: #FFF ;
}

#menu li a {
  padding: 25px 10px;
  background: #FFF ;
  color: #000;
  font-size:18px;
  font-family:didot;
  line-height: 10px;
  text-align: center ;
  text-decoration: none ;
}

Si quelqu'un à une idée je suis preneuse, je tourne en rond,
En vous remerciant,
Elfy

siandaqui

12 Nov 2012 à 18:18

Bonsoir, je ne suis pas très doué et codage, mais j'ai eu également un problème de menu.

Je te met mon codage résolu en espérant que ca puisse t'aider.

Bonjour,

pour celles et ceux que ça intéressent, je joins ici le code CSS et HTML de mon menu horizontal.

J'ai tellement apprécié l'aide rapide que l'on m'a fourni, que c'est la moindre des chose que je puisse faire!

Merci encore!

CSS:
ul#menu2_b {
width: 900px;
height:30px;
background:#C90 0 0 repeat-x;
margin:auto;
padding: 0;
list-style: none;
border-left-style:solid;
border-left-color:#C90;
border-left-width:3px;
border-right-style:solid;
border-right-color:#C90;
border-right-width:3px;
border-bottom-style:solid;
border-bottom-color:#C90;
border-bottom-width:3px;
}

ul#menu2_b li {
margin:auto; padding: 0;
}

ul#menu2_b li a {
float: left;
padding: 0 15px 0 15px;
color:#FFF;
font-weight:bold;
text-decoration:none;
height:30px;
line-height:30px;
}

ul#menu2_b li a:hover {
background:url(images/bg_menu2.jpg) 0 -30px repeat-x;
}

ul#menu2_b li a:active {
background:url(images/bg_menu2.jpg) 0 -60px repeat-x;
}

ul#menu2_b li .actif_b, ul#menu2_b li .actif_b:hover, ul#menu2_b li .actif_b:active {
background:url(images/bg_menu2.jpg) 0 -90px repeat-x;
}

HTLM:
<ul id="menu2_b">
<li><a href="index.html" class="actif_b">Page d'accueil</a></li>
<li><a href="page1.html">Qui sommes nous</a></li>
<li><a href="page2.html">Nos prestations</a></li>
<li><a href="page3.html">Nos tarifs</a></li>
<li><a href="page4.html">Nos coordonnées</a></li>
<li><a href="page5.html">Nous écrire</a></li>
</ul>

Pour vos pages suivantes, pensez à modifier le code html.

Exemple:
Pages d'accueil (index) le code sera:
<ul id="menu2_b">
<li><a href="index.html" class="actif_b">Page d'accueil</a></li>
<li><a href="page1.html">Qui sommes nous</a></li>
<li><a href="page2.html">Nos prestations</a></li>
<li><a href="page3.html">Nos tarifs</a></li>
<li><a href="page4.html">Nos coordonnées</a></li>
<li><a href="page5.html">Nous écrire</a></li>
</ul>
alors que pour la seconde page:
<ul id="menu2_b">
<li><a href="index.html">Page d'accueil</a></li>
<li><a href="page1.html" class="actif_b">Services</a></li> (modifier juste l'attribut class)
<li><a href="page2.html">Portfolio</a></li>
<li><a href="page3.html">Partenaires</a></li>
<li><a href="page4.html">Liens</a></li>
<li><a href="page5.html">Contact</a></li>
</ul>
et ainsi de suite sur chaque page.

J'espère avoir été assez clair.

Cordialement

siandaqui

13 Nov 2012 à 06:24

Bonjour,

j'ao modifier votre code et après test il semblerait que cela fonctionne du moins chez moi sous firefox et IE.

CSS:

body
{
margin-left:auto;<<<<<<<<<<<<<<<< ligne ajouté
margin-right:auto;<<<<<<<<<<<<<<<< ligne ajouté
background-color: #FFF;
width:1000px;<<<<<<<<<<<<<<<< ligne ajouté
height:auto;
}

h1
{
color:#F9F;
font-size:60px;
text-align:center;
letter-spacing:5px;
}

#menu li
{
display: inline;
margin:auto;
padding:0;
}

#menu
{
margin: 20px auto;
padding: 20px auto;
list-style: none ;
text-align: center ;
}

#menu li {
display: inline ;
margin-right: 0px ;
color: #000 ;
background: #FFF ;
}

#menu li a {
float:left;<<<<<<<<<<<<<<<< ligne ajouté
padding: 25px 10px;
background: #FFF ;
color: #000;
font-size:18px;
font-family:didot;
line-height: 10px;
text-align: center ;
text-decoration: none ;
}

Elfy75

13 Nov 2012 à 11:55

siandaqui a écrit :
Bonjour,

j'ao modifier votre code et après test il semblerait que cela fonctionne du moins chez moi sous firefox et IE.

CSS:

body
{
margin-left:auto;<<<<<<<<<<<<<<<< ligne ajouté
margin-right:auto;<<<<<<<<<<<<<<<< ligne ajouté
background-color: #FFF;
width:1000px;<<<<<<<<<<<<<<<< ligne ajouté
height:auto;
}

h1
{
color:#F9F;
font-size:60px;
text-align:center;
letter-spacing:5px;
}

#menu li
{
display: inline;
margin:auto;
padding:0;
}

#menu
{
margin: 20px auto;
padding: 20px auto;
list-style: none ;
text-align: center ;
}

#menu li {
display: inline ;
margin-right: 0px ;
color: #000 ;
background: #FFF ;
}

#menu li a {
float:left;<<<<<<<<<<<<<<<< ligne ajouté
padding: 25px 10px;
background: #FFF ;
color: #000;
font-size:18px;
font-family:didot;
line-height: 10px;
text-align: center ;
text-decoration: none ;
}

Bonjour,
Merci pour votre aide, ainsi ça fonctionne, mon menu ne se dispache pas su plusieurs ligne, par contre mon titre et mon menu ne son plus tout à fait centré

Sujet clos

CSS et mise en forme, CSS3

Pb menu