Découvrez
Digiposte !
Posez votre question Signaler

Menu ligne CSS??

Tsointsoin - Dernière réponse le 8 juil. 2009 à 08:13
Bonjour tout le monde!
J'ai cherché sur le forum mais impossible de trouver mon bonheur. Voilà, je débute dans le webmastering.
Je souhaite faire un menu en ligne sous la bannière en ayant les boutons centrer ou justifier.
J'ai créé des boutons en images que j'ai loadé dans le div menu. Ensuite j'aimerais dans mon css centrer ou justifier mes images pour donner un menu plus sympa que tout coincé à gauche.
Voici la portion de code html:
<div id="menu">
<img src = "images/bouton_accueil.png">
<img src = "images/bouton_methode.png">
<img src = "images/bouton_photos.png">
<img src = "images/bouton_contact.png">
<img src = "images/bouton_acces.png">
<img src = "images/bouton_liens.png">
et le css:
#menu
{
position: center;
}
Que dois-je mettre dans le css??
Merci pour votre aide!
Tsointsoin
Lire la suite 

Menu ligne CSS »

11 réponses
Réponse
+0
moins plus
monkey_monk 609Messages postés 1 juillet 2009Date d'inscription 2 juin 2011Dernière intervention 4 juil. 2009 à 22:08
Bonjour,

en général pour ce genre de menu on utilise une liste. Exemple : 
<div id="menu">
  <ul>
    <li><a href="#" title="Accueil"><img src="images/bouton_accueil.png" alt="Bouton accueil" /></a></li>
    <li><a href="#" title="Methode"><img src="images/bouton_methode.png" alt="Bouton methode" ></a></li>
    <li><a href="#" title="Photos"><img src="images/bouton_photos.png" alt="Bouton photos" /></a></li>
    <li><a href="#" title="Contact"><img src="images/bouton_contact.png" alt="Bouton contact" /></a></li>
    <li><a href="#" title="Acces"><img src="images/bouton_acces.png" alt="Bouton acces" /></a></li>
    <li><a href="#" title="Liens"><img src="images/bouton_liens.png" alt="Bouton liens" /></a></li>
  </ul>
</div>


et ton css : 

/* tu places ton menu grace à la DIV */
div#menu { margin:10px auto 10px; text-align:center; }
/* ensuite tu configures ta liste pour qu'elle s'affiche en ligne, pour cela il faut ruser un peu */
div#menu ul {
  height: 19px;
  list-style-type: none;
}
div#menu ul li{ float:left; text-align:left; }
div#menu ul li a{
  display:block;
  width:28px;
  height:19px;
  text-align:center;
  border:none;
}


Est-ce clair ?

Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Tsointsoin 4 juil. 2009 à 22:41
Merci monkey_monk... Je vais décortiquer tout ca pour le comprendre et je vais essayer!

Je te tiens au courant!

Merci!

Tsointsoin

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Tsointsoin 6 juil. 2009 à 16:54
Ce ne marche pas Monkey Monk, ca centre mon menu avec 1/3 d'espace à gauche et 2/3 à droite... au lieu du moitié-moitité...

D'où est-ce que ça peut venir?

Merci!

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
avion-f16 16595Messages postés 17 février 2008Date d'inscription 31 janvier 2012Dernière intervention 6 juil. 2009 à 17:22
Salut.
Si tu garde ton code (sans liste), voilà le code CSS pour centrer : 
#menu
{
 text-align:center;
}

Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
Tsointsoin 6 juil. 2009 à 17:28
Oui j'ai essayé aussi mais, ça ne marche pas non plus.

Mais est-ce que c'est possible d'utiliser un text-align avec des boutons en format .png donc des images??

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
monkey_monk 609Messages postés 1 juillet 2009Date d'inscription 2 juin 2011Dernière intervention 7 juil. 2009 à 00:56
Bonsoir,

il faudrait le code de ta page pour vraiment t'aider...

De prime abord, je dirais qu'il s'agit d'un problème d'imbrication de DIV...


Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Hapama 91Messages postés 6 juillet 2009Date d'inscription 25 mai 2010Dernière intervention 7 juil. 2009 à 02:09
Pas obligé de faire une liste mais un tableau nan?
Un tableau sans thead...

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Tsointsoin 7 juil. 2009 à 15:04
html:

<body>


<div id="header">
<!-- Bannière affichée par le CSS -->
</div>

<div id="menu">
<ul>
<li><a href="main.php?page=accueil" title="Bienvenue!"><img src = "images/bouton_accueil.png" alt="Bouton accueil"> </a></li>
<li><a href="main.php?page=methode" title="Méthodes utilisées"><img src = "images/bouton_methode.png" alt="Bouton methode" ></a></li>
<li><a href="main.php?page=photos" title="Cliquez pour voir les photos"><img src = "images/bouton_photos.png" alt="Bouton photos"> </a></li>
<li><a href="main.php?page=contact" title="Une question?"><img src = "images/bouton_contact.png" alt="Bouton contact"> </a></li>
<li><a href="main.php?page=acces" title="Comment s'y rendre"><img src = "images/bouton_acces.png" alt="Bouton acces"> </a></li>
<li><a href="main.php?page=liens" title="Plus d'informations"><img src = "images/bouton_liens.png" alt="Bouton liens"> </a></li>
</ul>
</div>



css:

body
{
width: 800px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
font-family: comic sans ms, verdana, serif;

}


#header
{
width: 800px;
height: 150px;
background-image: url("images/header.png");
background-repeat: no-repeat;
margin-bottom: 3px;
border: 1.5px solid black;

}

#menu { margin:10px auto 10px; text-align:center; }

#menu ul {
height: 30px;
list-style-type: none;
}
#menu ul li{ float:left; text-align:left; }
#menu ul li a{
display:block;
width:100px;
height:30px;
text-align:center;
border: 1.5px solid black;
}

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
monkey_monk 609Messages postés 1 juillet 2009Date d'inscription 2 juin 2011Dernière intervention 7 juil. 2009 à 19:19
Bonjour,

essayes de mettre ça pour ton css body :
body { width:100%; height:100%; text-align:center; }


ensuite place un div autour de tes 2 div : 
<div id="container">
  <div id="header"></div>
  <div id="menu"></div>
  <div id="contenu">
    ...je suppose que tu as un div ici !
  </div>
</div>


Et pour le css de container tu fais :
div#container { width:800px; width:100%; margin:50px auto 20px; text-align:left; }


Voilà, j'espère que ça fera avancer le projet... tiens-nous au courant !


Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Tsointsoin 7 juil. 2009 à 23:58
Ca ne fonctionne pas non plus... C'est même pire, ca me déglingue toute ma page! :P

En fait, j'ai remarqué que l'espace entre ma marge gauche et mon premier bouton est en fait la distance due à la liste <ul> <li> etc.

Donc ma liste est bien en ligne mais, il semblerait qu'elle est alignée à gauche alors que je souhaiterai centrer mon menu.

Pour être vraiment clair: ma page fait 800px de large, j'ai 6 boutons de 100px de large (pour l'instant) et je souhaite le centrer comme un "text-align: center"; mais sauf qu'avec les images, il semblerait que c'est complètement autrement... :P

Un grand merci pour votre aide...!

Tsointsoin

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
monkey_monk 609Messages postés 1 juillet 2009Date d'inscription 2 juin 2011Dernière intervention 8 juil. 2009 à 08:13
Tu devrais essayer en mettant text-align:center; (ou alors tu l'enlèves simplement) à #container et fixer la taille de ton #menu à width:600px; pour en faire un bloc centré.

L'alignement text-align fonctionne bien chez moi... pour être sur fixe aussi les largeur de tes <li>.

Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « Menu ligne CSS?? » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook