MON MENU CSS ne centre pas

WRInaute discret
Bonjour (re)
Et voilà c'est encore moi mais avec un nouveau sujet.
Mon menu ne se centre pas et le sous menu est en escalier
Quelqu'un pourrait me dire où je me suis plantée
J'ai pris des petits bouts de codes à droite à gauche et je me mélange les pinceaux
Merci d"avance
Code:
<ul class="nav">
    <li class="nav-item"><a href="#">ACCUEIL</a></li>
    <li class="nav-item"><a href="#">FAIRE PART PAS CHER</a></li>
    <li class="nav-item"><a href="#">BAPTEME</a></li>
    <li class="nav-item"><a href="#">MARIAGE</a></li>
    <li class="nav-item"><a href="#">NAISSANCE</a></li>
    <li class="nav-item"><a href="#">MARIAGE</a></li>
    <li class="nav-item"><a href="#">COMMUNION</a></li>
    <li class="nav-item"><a href="#">REMERCIEMENT</a></li>
    <li class="nav-item"><a href="#">MENU</a></li>
    <li class="nav-item"><a href="#">FÊTES</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Anniversaire enfant</a></li>
    <li class="sub-nav-item"><a href="#">Anniversaire adulte</a></li>
    <li class="sub-nav-item"><a href="#">Noël et Voeux</a></li>
    <li class="sub-nav-item"><a href="#">Halloween</a></li>
    </ul></li>
    <li class="nav-item"><a href="#">CARTES</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Carte simple 10.5 X 14 CM</a></li>
    <li class="sub-nav-item"><a href="#">Carte double 10.5 X 21 CM (Pliée)</a></li>
    <li class="sub-nav-item"><a href="#">Carte longue 10 .5 X 21 CM (Pliée)</a></li>
    <li class="sub-nav-item"><a href="#">Carte double couleur 15.8 X 22 (Pliée)</a></li>
    <li class="sub-nav-item"><a href="#">Carte double couleur 18 X 25 (Pliée)</a></li>
    </ul></li>
    <li class="nav-item"><a href="#">PRODUITS ASSORTIS</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Poster</a></li>
    <li class="sub-nav-item"><a href="#">Dragées</a></li>
    <li class="sub-nav-item"><a href="#">Calendrier</a></li>
    <li class="sub-nav-item"><a href="#">Set de table</a></li>
    <li class="sub-nav-item"><a href="#">Marque place</a></li>
    <li class="sub-nav-item"><a href="#">Etiquette adhésive</a></li>
    </ul></li>
    <li class="nav-item"><a href="#">A SAVOIR</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Témoignage</a></li>
    <li class="sub-nav-item"><a href="#">Coup de coeur</a></li>
    <li class="sub-nav-item"><a href="#">Nouveautés</a></li>
    <li class="sub-nav-item"><a href="#">Tarifs</a></li>
    </ul></li>
    <li class="nav-item"><a href="#">AIDE</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Exemple de texte</a></li>
    <li class="sub-nav-item"><a href="#">Exemple d' écriture</a></li>
    <li class="sub-nav-item"><a href="#">Exemple de visualisation</a></li>
    <li class="sub-nav-item"><a href="#">Exemple de postures</a></li>
    <li class="sub-nav-item"><a href="#">Gabarit à télécharger</a></li>
    <li class="sub-nav-item"><a href="#">Procéder au paiement </a></li>
    </ul></li>
</ul>
a-effacer.jpg
 
WRInaute accro
Juste une question même pas hors sujet : "Procéder au paiement" c'est une option réelle de ton "futur menu" ?
Car si c'est le cas autant te dire tout de suite que vue là où tu bloque maintenant, vaux mieux changer des options que tu as pris à la base car a ce stade tu gérera plu rien depuis longtemps et tout sera du mandarin pour toi :wink:

C'est pas que je veuille te décourager mais avoir les pieds sur terre c'est bien aussi et je sais de quoi je parle j'ai vécu 7 ans sur l'eau et passé 20 ans dans l'air ...
 
Membre Honoré
Bonjour,

Complément :
Il y a deux articles intéressants sur AlsacréationS à ce sujet :
- Créer des menus simples en CSS
- Centrer les éléments ou un site web en CSS
.

Cordialement.
 
WRInaute discret
zeb a dit:
Juste une question même pas hors sujet : "Procéder au paiement" c'est une option réelle de ton "futur menu" ?
Car si c'est le cas autant te dire tout de suite que vue là où tu bloque maintenant, vaux mieux changer des options que tu as pris à la base car a ce stade tu gérera plu rien depuis longtemps et tout sera du mandarin pour toi :wink:

C'est pas que je veuille te décourager mais avoir les pieds sur terre c'est bien aussi et je sais de quoi je parle j'ai vécu 7 ans sur l'eau et passé 20 ans dans l'air ...

Oui ça explique comment le paiement va se dérouler.
Mes clients ne payent pas de suite
Je leur fais une maquette et si elle leur plait, ils l'achètent.
Quand ils valident leur commande un lien de ma banque, par mail, leur est envoyé
 
WRInaute discret
Bonjour,

Autant vous dire que je bidouille car je ne connais rien en CSS
Donc j'y vais pas à pas, mais là ca fait juste 3H20 que je galère et j'ai grave besoin de vous.
Voilà, j'ai pris un tuto sur http://www.frogweb.fr/menu-deroulant-horizontal/
Je l'ai bidouillé à ma sauce et bien sûr tt plante

Déjà voici mes pages
http://www.votre-faire-part.com/test.htm
http://www.votre-faire-part.com/feuille.css

PROBLEME 1
J'ai rencontré un problème de centrage. Mon menu était bien centré au niveau de la page mais il n'était pas centré au niveau de la hauteur pour se faire j'ai remplacé les balises
Code:
#menu-demo2 a{
text-decoration:none;
display:block;
padding:18px 22px;

Et je l'ai remplacé par celui ci
Code:
#menu-demo2 a{
text-decoration:none;
display: table-cell;
vertical-align: middle;
padding: 22px;

Et les problèmes ont commencé
- AU SURVOL DU LIEN "FETES"
le background s'est rétréci et du coup j'ai les liens sur 2 lignes et sur certains navigateurs les liens écrits dans le sous menu ne sont pas centrés

PROBLEME 2
Je voudrais mettre une maison en guise d'accueil dans le menu, mais je ne sais pas comment procéder ?
Quelqu'un peut m'aider ?

Et enfin le PROBLEME 3
Entre la maison et lien, j'ai mis un lien "Faire part pas cher" qui n'a pas de sous menu
Est-ce que mon code est juste stp ?
Code:
<ul id="menu-demo2">
 
  <img src="image/accueil.jpg" />
 
      <li><a href="#">FAIRE PART PAS CHER</a></li>
 
    <li><a href="#">FÊTES</a>
 
        <ul>
 
            <li><a href="#">lien sous menu 1</a></li>
 
            <li><a href="#">lien sous menu 1</a></li>
 
            <li><a href="#">lien sous menu 1</a></li>
 
            <li><a href="#">lien sous menu 1</a></li>
 
        </ul>
 
    </li>
 
</ul>

SVP AIDEZ MOI, je suis au bord de la rupture !!
Merci merci merci
 
Nouveau WRInaute
Insomnie quand tu nous tiens...

En reprenant le premier "gros" menu que tu nous a donné, pour avoir quelquechose de plus réaliste, on pourrait avoir un html qui ressemble à:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link rel=stylesheet href='page.css'>
<link rel=stylesheet href='menu.css'>
</head>
<body>
<div id=principal>
        <div id=haut><img src="image/menu-haut.jpg" width="1130" height="329" /></div>
  <div id=menu-principal>

<ul id="menu">
    <li><img src="image/accueil.jpg" />
    <li><a href="#">ACCUEIL</a></li>
    <li><a class=twolines href="#">FAIRE PART<br>PAS CHER</a></li>
    <li><a href="#">BAPTEME</a></li>
    <li><a href="#">MARIAGE</a></li>
    <li><a href="#">NAISSANCE</a></li>
    <li><a href="#">MARIAGE</a></li>
    <li><a href="#">COMMUNION</a></li>
    <li><a href="#">REMERCIEMENT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">FÊTES</a>
    <ul>
    <li><a href="#">Anniversaire enfant</a></li>
    <li><a href="#">Anniversaire adulte</a></li>
    <li><a href="#">Noël et Voeux</a></li>
    <li><a href="#">Halloween</a></li>
    </ul></li>
    <li><a href="#">CARTES</a>
    <ul>
    <li><a href="#">Carte simple 10.5 X 14 CM</a></li>
    <li><a href="#">Carte double 10.5 X 21 CM (Pliée)</a></li>
    <li><a href="#">Carte longue 10 .5 X 21 CM (Pliée)</a></li>
    <li><a href="#">Carte double couleur 15.8 X 22 (Pliée)</a></li>
    <li><a href="#">Carte double couleur 18 X 25 (Pliée)</a></li>
    </ul></li>
    <li><a class=twolines href="#">PRODUITS<br>ASSORTIS</a>
    <ul>
    <li><a href="#">Poster</a></li>
    <li><a href="#">Dragées</a></li>
    <li><a href="#">Calendrier</a></li>
    <li><a href="#">Set de table</a></li>
    <li><a href="#">Marque place</a></li>
    <li><a href="#">Etiquette adhésive</a></li>
    </ul></li>
    <li><a href="#">A SAVOIR</a>
    <ul>
    <li><a href="#">Témoignage</a></li>
    <li><a href="#">Coup de coeur</a></li>
    <li><a href="#">Nouveautés</a></li>
    <li><a href="#">Tarifs</a></li>
    </ul></li>
    <li><a href="#">AIDE</a>
    <ul>
    <li><a href="#">Exemple de texte</a></li>
    <li><a href="#">Exemple d' écriture</a></li>
    <li><a href="#">Exemple de visualisation</a></li>
    <li><a href="#">Exemple de postures</a></li>
    <li><a href="#">Gabarit à télécharger</a></li>
    <li><a href="#">Procéder au paiement </a></li>
    </ul></li>
</ul>

</div>
        <div id=contenu> </div>
        <div id=footer> au pied </div>
</div>
</body>
</html>

... donc on a viré les balises en double introduites par les copier/coller sous dreamweaver, nettoyé les nombreaux noms de classe css qui n'apportaient pas grand chose et séparé le html du css, un fichier "page.css" pour le layout général, et un fichier "menu.css" pour que tu puisses expérimenter (et tu le feras) avec l'un sans impacter l'autre.

Pour le page.css, on a:
Code:
#principal {
margin: auto;
width:1130px;
height:1576px;
}
#haut {
height:329px;
}
#menu-principal {
height:64px;
background-image: url(image/menu.jpg);
}
#contenu {
   margin: auto;
   height:850px;
   background-color: #FFFFFF;
   }
#footer {
height:329px;
background-image: url(image/footer.jpg);
}
body {
background-image: url(image/shutterstock_123635434.jpg);
}

Pour le menu.css, on a:
Code:
ul#menu {
	margin: 0; padding: 0 10px;
}
ul#menu li, ul#menu ul {
	padding: 0;
}
ul#menu li {
	list-style: none;
	display: block; float: left;
	position: relative;
}
ul#menu a {
	font-size: 11px;
	display: block; 
	line-height: 64px;
	height: 64px;
	padding: 0 10px;
	text-decoration: none; color: #fff;
	text-align: center;
}
ul#menu ul a {
	text-align: left;
}
ul#menu a.twolines {
	line-height: 14px;
	height: 30px;
	padding: 17px 5px;
}
ul#menu li img {
	padding-top: 17px;
}
ul#menu ul li:last-child{	
padding: 0 0 10px 0;
border-radius:0 0 8px 8px;
}
ul#menu ul{
	position:absolute;
	max-height:0;
	left: -20px;
	width: 240px;
	overflow:hidden;
	-moz-transition: .8s all .3s;
	-webkit-transition: .8s all .3s;
	transition: .8s all .3s;
}
ul#menu li:hover ul{
	max-height: 30em;
}
ul#menu ul li {
	background:#fc6fb8;
}
ul#menu ul li a {
	width: 150px;
	line-height: 12px;
	height: auto;
	padding: 15px 20px;
}
ul#menu li:hover li a {
	color: #fff;
}
ul#menu li:hover a, ul#menu li li:hover a {
	color: #000;
}

Alors, quelques petites remarques à la volée:
  • j'ai dû franchement réduire la taille de caractères: 11px pour afficher toute la barre --> as-tu réellement besoin d'autant de menus de premier niveau?
  • le positionnement du sous-menu est loin d'être top: quand on est trop à droite, il déborde, ce serait à corriger (css / js / plusieurs possibilités)
  • certains menus doivent être repris sur deux lignes pour gagner un peu de place, j'ai ajouté une classe "twolines". On aurait pu travailler avec du inline-block et un vertical align, mais ça m'évoque de douloureux souvenir de tests de compatibilité cross-browser, donc non
  • tu n'as pas de couleur de fond par défaut pour #menu-principal, ce qui fait que si l'image ne se charge pas... on ne voit rien du tout
 
WRInaute discret
Olala Cduray tu m'as tt fait !!
Je t'adore je t'adore !! Merci merci merci
Tu as raison le menu en haut est trop long
je vais rebidouiller et j'aurai ss doute encore besoin de toi !!
Merci merci merci merci
Merci merci merci merci
Merci merci merci merci
 
WRInaute discret
Hello,
Je l'ai bidouillé à ma sauce et suivi vos conseils à la lettre
http://www.votre-faire-part.com/page.html
http://www.votre-faire-part.com/page.css
http://www.votre-faire-part.com/menu.css

- Pour la balise image,
vous m'aviez dit :
Code:
  <li><img src="image/accueil.jpg" border="0" />
il manque un </li>, non ?
J'ai mis donc ça :
C'est juste ?
Code:
<li><a href=index.html><img src="image/accueil.jpg" border="0" /></a></li>

- Pour le menu déroulant, ca ne serait pas mieux de ne pas faire de saut de ligne entre les liens mais les uns en dessous des autres ?
Pouvez-vous me dire dans quel bloc je peux modifier svp ?

Anniversaire enfant
Anniversaire adulte


et non
Anniversaire enfant
(saut de ligne)
Anniversaire adulte
(saut de ligne)


- Le menu n'est pas centré sur la longueur
Dois-je rajouter ?

display: table-cell;
vertical-align: middle;

Mais je ne sais pas où?


- Et enfin, je voudrais espacer mes liens entre eux,
et comme d'hab je ne sais pas où ?


Je suis désolée de vous ennuyer mais je suis une VRAIE débutante.
J'ai appris le html en tatonant et maintenant je le taperai les yeux fermés
J'espère qu'il en sera de même pour le CSS
 
WRInaute impliqué
pour info, sur mon écran de pc de bureau, j'ai une barre de défilement horizontale à cause de l'image du haut, contenant du texte, qui impose une largeur minimale trop grande.
 
WRInaute impliqué
cduray a dit:
Je suis désolée de vous ennuyer mais je suis une VRAIE débutante.
J'ai appris le html en tatonant et maintenant je le taperai les yeux fermés
J'espère qu'il en sera de même pour le CSS

Félicitations pour une débutante. J'ai abandonné l'apprentissage du html depuis longtemps. Pour le css si ça vous intéresse, je me souviens avoir recopié durant des jours, les pages d'un livre donnant les définitions des propriétés en css 2. Si ça n'est pas trop dépassé, vous pouvez aller y jeter un oeil : http://www.minded.fr/langage/style/.
 
Nouveau WRInaute
<li><img src="image/accueil.jpg" border="0" />
il manque un </li>, non ?
J'ai mis donc ça :
C'est juste ?
<li><a href=index.html><img src="image/accueil.jpg" border="0" /></a></li>

le </li> est optionnel en HTML5, mais tu peux le mettre, ça ne fera pas de mal. Le lien est bon aussi.

- Pour le menu déroulant, ca ne serait pas mieux de ne pas faire de saut de ligne entre les liens mais les uns en dessous des autres ?
Pouvez-vous me dire dans quel bloc je peux modifier svp ?

Dans le CSS, la règle
Code:
ul#menu ul li a {
        width: 150px;
        line-height: 12px;
        height: auto;
        padding: 15px 20px;
}

=> remplace padding 15px 20px; par padding 5px 20px;

- Le menu n'est pas centré sur la longueur
Dois-je rajouter ?
display: table-cell;
vertical-align: middle;
Mais je ne sais pas où?

Je ne suis pas très partisan du table-cell, tu pourrais définir plutôt une margin-left: 30px; (ou plus) sur ul#menu.

- Et enfin, je voudrais espacer mes liens entre eux,
et comme d'hab je ne sais pas où ?

Dans ul#menu a, rajoute margin-left: 10px; par exemple.

Je suis désolée de vous ennuyer mais je suis une VRAIE débutante.
J'ai appris le html en tatonant et maintenant je le taperai les yeux fermés
J'espère qu'il en sera de même pour le CSS

Commence par les bases, box model, cascade, positionnement. Madrileño a mentionné AlsaCréations, c'est une bonne source d'info en ligne
 
WRInaute accro
T'as déjà 4 polices de caractère différentes sur ta page qui est encore vide c'est franchement pas top (logo, header, menu, contenu) une ou deux c'est bien.
Ton image de fond est un vrai poster (3 351px × 2 865px 8O ), ça dois pouvoir se faire avec une toute petite image en repeat.
Le Menu est en majuscule c'est pas top tu devrais imposer ça en CSS si tu y tiens mais garder une présentation normale dans le code.

Bon après ça fait un peut "fifille" mais je suppose que c'est voulu même si perso je suis pas fan pour deux ronds.
 
Discussions similaires
Haut