Titre: pb de menu
Posté par: Elfy75 le le 12-11-2012 a 16:35:41
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
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>
|
|
CSS
Code:
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 vous avez une idée de ce qui va pas je veux bien un indice.
Merci à tous |
Titre: Re:pb de menu
Posté par: bidouille7 le le 12-11-2012 a 19:36:50
Bonjour. je ne vois pas ou est ton souci.J'ai testé sur google et tout fonctionne correctement, ton menu est bien en ligne.La seule chose que je vois, c'est la taille des caractères qui me semblent un peu gros.
Pour que cela s'affiche dans une fenêtre, il faut donner des dimensions à celle-ci.
dans le css:
width:le nombre de pixels; c'est pour la largeur
height: le nombre de pixels; c'est pour la hauteur de la fenêtre.
A plus. |
Titre: Re:pb de menu
Posté par: Elfy75 le le 12-11-2012 a 21:25:55
Merci pour ta réponse, il faut en effet que je m'occupe encore de la taille des typos.
En fait ce qui me pose problème c'est que si je reduis ma fenêtre pour une fenetre plus petite, mon titre ne reste pas sur une ligne, je voudrais que ça reste fixe. |
Titre: Re:pb de menu
Posté par: bidouille7 le le 13-11-2012 a 09:27:55
Bonjour. Pour que le titre reste en place, dans le css :
#h1
{
display:block;
color: f9f;
font-size:60px;
text-align: center;
}
En mettant display block le titre devrait rester au centre ..
A plus. |
Titre: Re:pb de menu
Posté par: Elfy75 le le 13-11-2012 a 10:47:35
Bonjour. Pour que le titre reste en place, dans le css :
#h1
{
display:block;
color: f9f;
font-size:60px;
text-align: center;
}
En mettant display block le titre devrait rester au centre ..
A plus.
|
|
Bonjour,
Merci beaucoup pour ton aide, je me suis mal exprimée, c'est mon menu et non le titre qui bouge, des que je bouge ma fenêtre le menu fini sur plusieurs lignes, je préférerais qu'il reste sur une ligne.
|
Titre: Re:pb de menu
Posté par: bidouille7 le le 13-11-2012 a 10:51:13
| Dans le css tu as deux #menu li, pourquoi? |
Titre: Re:pb de menu
Posté par: Elfy75 le le 13-11-2012 a 11:01:01
Dans le css tu as deux #menu li, pourquoi?
|
|
ah oui j'en ai supprimé un depuis, c'est rien. |
Titre: Re:pb de menu
Posté par: bidouille7 le le 13-11-2012 a 11:05:05
#menu
{
display: inline;
margin: 20px auto;
padding: 20px auto;
list-style: none ;
text-align: center ;
}
#menu li
{
margin-right: 0px ;
color: #000 ;
background: #FFF ;
}
Essaies comme cela. |
Titre: Re:pb de menu
Posté par: Elfy75 le le 13-11-2012 a 11:21:08
#menu
{
display: inline;
margin: 20px auto;
padding: 20px auto;
list-style: none ;
text-align: center ;
}
#menu li
{
margin-right: 0px ;
color: #000 ;
background: #FFF ;
}
Essaies comme cela.
|
|
ça ne fonctionne pas, mon menu ne reste toujours pas sur une seule ligne, je fais des test de mon coté.
J'avais pensé sinon au lieu d'utiliser mes balises <UL> <LI> mettre le tout dans une balise <p> avec un text-align="center"; c'est peut être pas très orthodoxe mais ça fonctionne |
Titre: Re:pb de menu
Posté par: bidouille7 le le 13-11-2012 a 11:25:28
#menu
{
float:left;
margin-left:0px;
margin-top:5px;
}
#menu ul
{
display:inline;
}
#menu ul li
{
background:#ADCF4F;
border:1px solid #000;
display:inline;
font-weight:700;
height:30px;
list-style:none;
margin-left:1px;
padding:3px 15px;
text-align:center;
width:150px;
}
Essaies cela, c'est ce que j'ai sur une page web. |
Titre: Re:pb de menu
Posté par: Elfy75 le le 13-11-2012 a 11:35:37
#menu
{
float:left;
margin-left:0px;
margin-top:5px;
}
#menu ul
{
display:inline;
}
#menu ul li
{
background:#ADCF4F;
border:1px solid #000;
display:inline;
font-weight:700;
height:30px;
list-style:none;
margin-left:1px;
padding:3px 15px;
text-align:center;
width:150px;
}
Essaies cela, c'est ce que j'ai sur une page web.
|
|
Toujours pas, j'y comprends plus rien, il me reste 3 cheveux sur la tête. ça paraît simple comme ça..
Et mon idée pas très homologuée de paragraphe qu'est ce que tu en penses? |
Titre: Re:pb de menu
Posté par: bidouille7 le le 13-11-2012 a 11:38:43
Je crois avoir trouvé l'erreur. Dans le body tu as mis:
<ul id="menu">
essaies en mettant juste <ul> sans le id menu |
Titre: Re:pb de menu
Posté par: Elfy75 le le 13-11-2012 a 11:50:46
Je crois avoir trouvé l'erreur. Dans le body tu as mis:
<ul id="menu">
essaies en mettant juste <ul> sans le id menu
|
|
ça change rien en enlevant l'id, j'ai remis le code complet. Je comprends pas ce qui bloque, maintenant mon menu est vertical et completement à gauche
Code:
body
{
margin:0;
padding:0;
background-color:#FFF;
height:auto;
}
h1
{
color:#F9F;
font-size:60px;
text-align:center;
letter-spacing:5px;
}
menu
{
display:inline;
margin:20px auto;
padding:20px auto;
list-style:none;
text-align:center;
}
menu li
{
display:inline;
margin-right:0px;
color:#000;
}
menu li a
{
padding: 25px 10px;
color: #000;
font-size:18px;
font-family:didot;
line-height:10px;
text-align:center;
text-decoration:none;
}
|
|
|
Titre: Re:pb de menu
Posté par: Elfy75 le le 13-11-2012 a 11:53:59
Ah comme ça ça fonctionne, mais mon titre et mon menu ne so plus tout à fait centré.
Code:
body
{
margin-left:auto;
margin-right:auto;
background-color: #FFF;
width:900px;
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;
padding: 25px 10px;
background: #FFF ;
color: #000;
font-size:18px;
font-family:didot;
line-height: 10px;
text-align: center ;
text-decoration: none ;
}
p
{
margin:auto;
text-align:center;
line-height:900px;
}
|
|
|
Titre: Re:pb de menu
Posté par: bidouille7 le le 13-11-2012 a 14:35:31
code html:
<body>
<h1> TEST</h1>
<div id="menu">
<ul>
<li><a href="#" title="colliers&laisses" class="Style1">* COLLIERS & LAISSES</a></li>
<li class="Style1"><a href="#" title="vetements">* VÊTEMENTS</a></li>
<li class="Style1"><a href="#" title="conforts">* CONFORTS</a></li>
<li class="Style1"><a href="#" title="accessoires">* ACCESSOIRES</a></li>
<li><a href="#" title="nourritures" class="Style1">* NOURRITURES</a></li>
<li class="Style1"><a href="#" title="hygienes">* HYGIENES</a></li>
</ul>
</div>
Code css:
*/style css*/
body
{
margin-left:auto;
margin-right:auto;
background-color: #FFF;
width:900px;
height:auto;
}
h1
{
color:#F9F;
font-size:60px;
text-align:center;
letter-spacing:5px;
}
#menu
{
float:left;
margin-left:50px;
margin-top:5px;
}
#menu ul
{
display:inline;
}
#menu ul li
{
background:#ADCF4F;
border:1px solid #000;
display:inline;
font-weight:700;
height:30px;
list-style:none;
margin-left:1px;
padding:3px 15px;
text-align:center;
width:150px;
}
#menu a:hover
{
color:#FFF;
}
p
{
margin:auto;
text-align:center;
line-height:900px;
}
Par contre j'ai réduit la taille du texte des boutons.
Regardes si cela te convient. |
Titre: Re:pb de menu
Posté par: Elfy75 le le 13-11-2012 a 14:50:25
code html:
<body>
<h1> TEST</h1>
<div id="menu">
<ul>
<li><a href="#" title="colliers&laisses" class="Style1">* COLLIERS & LAISSES</a></li>
<li class="Style1"><a href="#" title="vetements">* VÊTEMENTS</a></li>
<li class="Style1"><a href="#" title="conforts">* CONFORTS</a></li>
<li class="Style1"><a href="#" title="accessoires">* ACCESSOIRES</a></li>
<li><a href="#" title="nourritures" class="Style1">* NOURRITURES</a></li>
<li class="Style1"><a href="#" title="hygienes">* HYGIENES</a></li>
</ul>
</div>
Code css:
*/style css*/
body
{
margin-left:auto;
margin-right:auto;
background-color: #FFF;
width:900px;
height:auto;
}
h1
{
color:#F9F;
font-size:60px;
text-align:center;
letter-spacing:5px;
}
#menu
{
float:left;
margin-left:50px;
margin-top:5px;
}
#menu ul
{
display:inline;
}
#menu ul li
{
background:#ADCF4F;
border:1px solid #000;
display:inline;
font-weight:700;
height:30px;
list-style:none;
margin-left:1px;
padding:3px 15px;
text-align:center;
width:150px;
}
#menu a:hover
{
color:#FFF;
}
p
{
margin:auto;
text-align:center;
line-height:900px;
}
Par contre j'ai réduit la taille du texte des boutons.
Regardes si cela te convient.
|
|
GENIAL, merci beaucoup pour ton aide, c'est super sympa, je vais étudier tes modifs de près, voir ce qui ne collait pas. |
Titre: Re:pb de menu
Posté par: bidouille7 le le 13-11-2012 a 14:52:58
| ok on y est arrivé. Au cas ou tu voudrais mettre un slider sur ta page, tu me le dis, je pourrai te le créer .Tu auras juste à me donner les images et je m'occuperai du reste. A plus. |
Titre: Re:pb de menu
Posté par: Elfy75 le le 13-11-2012 a 14:55:02
merci c'est super cool. Je vais réfléchir à la suite.
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|