La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  pb de menu		 « Précédent Suivant »
Pages: [1] 2 Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: pb de menu  (Lu 3212 fois)
pb de menu
« sur: le 12-11-2012 a 16:35:41 »
Elfy75
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 69





Voir le Profil    WWW    E-Mail
Répondre avec citation

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
Rapporter au modérateur  

Re:pb de menu
« Répondre #1 sur: le 12-11-2012 a 19:36:50 »
bidouille7
Habitué
***

Hors-Ligne

Messages: 446



Je suis un petit retraité

Voir le Profil    WWW
Répondre avec citation

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.
Rapporter au modérateur  
http://www.alenchere.com
Re:pb de menu
« Répondre #2 sur: le 12-11-2012 a 21:25:55 »
Elfy75
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 69





Voir le Profil    WWW    E-Mail
Répondre avec citation

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.
Rapporter au modérateur  
Re:pb de menu
« Répondre #3 sur: le 13-11-2012 a 09:27:55 »
bidouille7
Habitué
***

Hors-Ligne

Messages: 446



Je suis un petit retraité

Voir le Profil    WWW
Répondre avec citation

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.
« Dernière Édition: le 13-11-2012 a 09:51:47 par bidouille7 » Rapporter au modérateur  
http://www.alenchere.com
Re:pb de menu
« Répondre #4 sur: le 13-11-2012 a 10:47:35 »
Elfy75
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 69





Voir le Profil    WWW    E-Mail
Répondre avec citation

Citation de: 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.

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.
Rapporter au modérateur  
Re:pb de menu
« Répondre #5 sur: le 13-11-2012 a 10:51:13 »
bidouille7
Habitué
***

Hors-Ligne

Messages: 446



Je suis un petit retraité

Voir le Profil    WWW
Répondre avec citation

Dans le css tu as deux  #menu li, pourquoi?
Rapporter au modérateur  
http://www.alenchere.com
Re:pb de menu
« Répondre #6 sur: le 13-11-2012 a 11:01:01 »
Elfy75
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 69





Voir le Profil    WWW    E-Mail
Répondre avec citation

Citation de: bidouille7 le le 13-11-2012 a 10:51:13
Dans le css tu as deux  #menu li, pourquoi?

ah oui j'en ai supprimé un depuis, c'est rien.
Rapporter au modérateur  
Re:pb de menu
« Répondre #7 sur: le 13-11-2012 a 11:05:05 »
bidouille7
Habitué
***

Hors-Ligne

Messages: 446



Je suis un petit retraité

Voir le Profil    WWW
Répondre avec citation

#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.
Rapporter au modérateur  
http://www.alenchere.com
Re:pb de menu
« Répondre #8 sur: le 13-11-2012 a 11:21:08 »
Elfy75
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 69





Voir le Profil    WWW    E-Mail
Répondre avec citation

Citation de: 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.

ç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
Rapporter au modérateur  
Re:pb de menu
« Répondre #9 sur: le 13-11-2012 a 11:25:28 »
bidouille7
Habitué
***

Hors-Ligne

Messages: 446



Je suis un petit retraité

Voir le Profil    WWW
Répondre avec citation

#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.
Rapporter au modérateur  
http://www.alenchere.com
Re:pb de menu
« Répondre #10 sur: le 13-11-2012 a 11:35:37 »
Elfy75
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 69





Voir le Profil    WWW    E-Mail
Répondre avec citation

Citation de: 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.

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?
Rapporter au modérateur  
Re:pb de menu
« Répondre #11 sur: le 13-11-2012 a 11:38:43 »
bidouille7
Habitué
***

Hors-Ligne

Messages: 446



Je suis un petit retraité

Voir le Profil    WWW
Répondre avec citation

Je crois avoir trouvé l'erreur. Dans le body tu as mis:
<ul  id="menu">

essaies en mettant juste <ul> sans le id menu
Rapporter au modérateur  
http://www.alenchere.com
Re:pb de menu
« Répondre #12 sur: le 13-11-2012 a 11:50:46 »
Elfy75
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 69





Voir le Profil    WWW    E-Mail
Répondre avec citation

Citation de: 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

ç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;
}
Rapporter au modérateur  
Re:pb de menu
« Répondre #13 sur: le 13-11-2012 a 11:53:59 »
Elfy75
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 69





Voir le Profil    WWW    E-Mail
Répondre avec citation

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;
}
Rapporter au modérateur  
Re:pb de menu
« Répondre #14 sur: le 13-11-2012 a 14:35:31 »
bidouille7
Habitué
***

Hors-Ligne

Messages: 446



Je suis un petit retraité

Voir le Profil    WWW
Répondre avec citation

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.
Rapporter au modérateur  
http://www.alenchere.com
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] 2 Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 
Logo du forum du webmaster

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg