> Tous les forums > Forum des Webmasters
 Centrer menu!!Sujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
Francy
  Posté le 07/09/2014 @ 17:29 
Aller en bas de la page 
Petite astucienne

Bonjour,

Je viens de créer un menu css sur le net mais je n'arrive pas a le centrer, sur ma page html dans la div menu j'ai "<div id='cssmenu' class='align-center'> " mais faut surement faire des changement dans la

feuille de style mais j'arrive pas a voir ou.

Si Quelqu'un aurai la patience de regarder ma feuille de style:

@charset "UTF-8";
/* Base Styles */
#cssmenu > ul,
#cssmenu > ul li,
#cssmenu > ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu > ul {
position: relative;
z-index: 597;
}
#cssmenu > ul li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu > ul ul li {
float: none;
}
#cssmenu > ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu > ul li:hover > ul {
visibility: visible;
}
/* Align last drop down RTL */
#cssmenu > ul > li.last ul ul {
left: auto !important;
right: 99%;
}
#cssmenu > ul > li.last ul {
left: auto;
right: 0;
}
#cssmenu > ul > li.last {
text-align: right;
}
/* Theme Styles */
#cssmenu > ul {
border-top: 5px solid #ac0312;
font-family: Calibri, Tahoma, Arial, sans-serif;
font-size: 14px;
background: #e80505;
background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));
background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);
background: linear-gradient(top, #1e1e1e 0%, #040404 100%);
width: auto;
zoom: 1;
}
#cssmenu > ul:before {
content: '';
display: block;
}
#cssmenu > ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu > ul li a {
display: inline-block;
padding: 10px 22px;
}
#cssmenu > ul > li.active,
#cssmenu > ul > li.active:hover {
background-color: #ac0312;
}
#cssmenu > ul > li > a:link,
#cssmenu > ul > li > a:active,
#cssmenu > ul > li > a:visited {
color: #ffffff;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul ul ul {
top: 0;
}
#cssmenu > ul li li {
background-color: #ffffff;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
background-color: #F5F5F5;
}
#cssmenu > ul > li.hover,
#cssmenu > ul > li:hover {
background-color: #ac0312;
-webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
#cssmenu > ul a:link,
#cssmenu > ul a:visited {
color: #9a9a9a;
text-decoration: none;
}
#cssmenu > ul a:hover {
color: #9a9a9a;
}
#cssmenu > ul a:active {
color: #9a9a9a;
}
#cssmenu > ul ul {
border: 1px solid #CCC \9;
-webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
width: 150px;
}

Merci d'avance

Francesca

Publicité
elle
 Posté le 07/09/2014 à 17:40 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Et quel est le CSS pour la class align-center?

Pour pouvoir centrer, il faut de plus que l'élément dans lequel tu insères le menu ait une largeur définie...

Dreamer
 Posté le 07/09/2014 à 17:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Et quel est le CSS pour la class align-center?

Pour pouvoir centrer, il faut de plus que l'élément dans lequel tu insères le menu ait une largeur définie...

#cssmenu n'est pas défini !!

#cssmenu {

width: ? ;

height: ? ;

margin: ? ;

padding: ?; }

Francy
 Posté le 07/09/2014 à 17:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonjour elle et dreamer,

Je suis novice dans le webdesign a ce que je comprend il manque sa

#cssmenu n'est pas défini !!

#cssmenu {

width: ? ;

height: ? ;

margin: ? ;

padding: ?; }

je l'insère ou dans ma feuille de style?

Dreamer
 Posté le 07/09/2014 à 18:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

J'image sans peine que tu dois mettre ton menu dans une page.

Imaginons que ce soit à gauche tu auras donc ceci

#cssmenu {

width:200px;

float:left;

}

le width peut-être en px ou em (200px = 12.5em)

Francy
 Posté le 07/09/2014 à 18:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

excuser mon retard pour répondre,

Oui je dois faire un site et j'ai commencé a mettre ma bannière et en dessous j'y ai mis mon menu qui est tout a gauche pour le moment.

voici mon menu en ce moment http://hpics.li/df41eeb



Modifié par Francy le 07/09/2014 19:02
Dreamer
 Posté le 07/09/2014 à 20:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Euh, c'est un menu horizontal ??

Si c'est le cas, tu vas utiliser le inline, une largeur si tu connais la longueur du menu et un margin pour le centrage !!

#cssmenu {

display:inline;

width: 500px;

margin:0px auto; (ou margin-left:auto; et margin-right:auto;)

}

Francy
 Posté le 08/09/2014 à 16:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonjour dreamer,

sa marche merci beaucoup

a bientôt

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
21,90 €Webcam Aukey FullHD à 21,90 €
29,99 € -27%

Cdiscount propose la webcam Webcam Aukey FullHD à 21,90 €. On la trouve habituellement autour de 29,99 €. Cette webcam offre une résolution FullHD 1080p pour une vidéo claire et nette et intègre deux microphones réduisant les bruits de fond. De plus, un cache de protection vous offre une sécurité supplémentaire et une tranquillité d'esprit lorsque vous n'utilisez pas la webcam. Elle est compatible Windows, Mac et Android. 


Voir l'offre
-7 €-7 € dès 20 € pour une première livraison en point de retrait Amazon (selon éligibilité)

Amazon propose actuellement 7 euros de remise dès 20 euros d'achats avec le code RETRAIT7 pour une première livraison en point de retrait Amazon. Vous pouvez vérifier votre éligibilité à cette offre en vous rendant sur cette page. Vous trouverez la liste des points de retrait sur cette page.


Voir l'offre
18,65 €Clé USB Sandisk Luxe 128 Go à double connectique USB 3.1 Type A et C à 18,65 €
30 € -38%

Amazon fait une promotion sur la clé USB Sandisk Luxe 128 Go à double connectique USB 3.1 Type A et C qui passe à 18,59 €. Cette clé USB  dispose d'un connecteur USB Type C et d'un connecteur classique de type A. Grâce à elle, transférez en toute simplicité et rapidement (jusqu'à 150 Mo/s) vos fichiers entre vos smartphones, tablettes et ordinateurs. On la trouve ailleurs à plus de 30 €.


Voir l'offre
0 €Cartouche d'encre ou papier photo à 0 €

InkClub offre une cartouche d'encre pour 0 €. Inscrivez la référence de votre imprimante dans la case de recherche. Vous serez ensuite dirigé vers la liste des produits prévus pour votre imprimante. Vous reconnaîtrez les offres à 0 € grâce aux symboles. Et si vous ne trouvez pas de cartouche pour votre imprimante à 0 €, vous pourrez vous tourner vers du papier photo.

L'offre n'est valide qu'une fois par client. Des frais de transport fixes s'ajoutant (4,95 €) n'hésitez pas à compléter votre commande avec d'autres cartouches notamment les modèles compatibles InkClub qui sont de bonne qualité.


Voir l'offre

Sujets relatifs
Comment centrer le menu
centrer mon menu deroulant
centrer un menu deroulant horizontal / CSS-HTML
Menu qui bouge
Google Keyword Planner (menu outil) gratuit ?
positionner un menu dynamique
Target dans menu déroulant "option value=...." html
Script menu ne s'affiche pas sur IE7
Menu déroulant devenu inactif
Menu en Javascript
Plus de sujets relatifs à Centrer menu!!
 > Tous les forums > Forum Forum des Webmasters