Menu ligne CSS??
Fermé
Tsointsoin
-
4 juil. 2009 à 21:50
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 - 8 juil. 2009 à 08:13
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 - 8 juil. 2009 à 08:13
A voir également:
- Menu ligne CSS??
- Partager photos en ligne - Guide
- Menu déroulant excel - Guide
- Aller à la ligne excel - Guide
- Site de vente en ligne particulier - Guide
- Windows 11 menu démarrer classique - Guide
11 réponses
monkey_monk
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
131
4 juil. 2009 à 22:08
4 juil. 2009 à 22:08
Bonjour,
en général pour ce genre de menu on utilise une liste. Exemple :
et ton css :
Est-ce clair ?
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 ?
Merci monkey_monk... Je vais décortiquer tout ca pour le comprendre et je vais essayer!
Je te tiens au courant!
Merci!
Tsointsoin
Je te tiens au courant!
Merci!
Tsointsoin
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!
D'où est-ce que ça peut venir?
Merci!
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
6 juil. 2009 à 17:22
6 juil. 2009 à 17:22
Salut.
Si tu garde ton code (sans liste), voilà le code CSS pour centrer :
Si tu garde ton code (sans liste), voilà le code CSS pour centrer :
#menu
{
text-align:center;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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??
Mais est-ce que c'est possible d'utiliser un text-align avec des boutons en format .png donc des images??
monkey_monk
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
131
7 juil. 2009 à 00:56
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...
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...
Utilisateur anonyme
7 juil. 2009 à 02:09
7 juil. 2009 à 02:09
Pas obligé de faire une liste mais un tableau nan?
Un tableau sans thead...
Un tableau sans thead...
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;
}
<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;
}
monkey_monk
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
131
7 juil. 2009 à 19:19
7 juil. 2009 à 19:19
Bonjour,
essayes de mettre ça pour ton css body :
ensuite place un div autour de tes 2 div :
Et pour le css de container tu fais :
Voilà, j'espère que ça fera avancer le projet... tiens-nous au courant !
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 !
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
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
monkey_monk
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
131
8 juil. 2009 à 08:13
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>.
L'alignement text-align fonctionne bien chez moi... pour être sur fixe aussi les largeur de tes <li>.
