MON MENU CSS ne centre pas

garancetosello · 1 Décembre 2014

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>

Schwarzer Stern · 1 Décembre 2014

Salut,
envoie le css aussi

zeb · 1 Décembre 2014

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 ...

Madrileño · 2 Décembre 2014

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.

garancetosello · 2 Décembre 2014

Schwarzer Stern a dit:
Salut,
envoie le css aussi

J'ai tout changé et ca plante encore
Je vais tout renvoyer (merci de m'avoir répondu)

garancetosello · 2 Décembre 2014

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é

garancetosello · 2 Décembre 2014

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

cduray · 3 Décembre 2014

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

garancetosello · 3 Décembre 2014

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

cduray · 3 Décembre 2014

Olala Cduray tu m'as tt fait !!
Je t'adore je t'adore !! Merci merci merci

N'exagérons rien, je suis marié ;-)

Pas de souci, c'était avec plaisir

garancetosello · 3 Décembre 2014

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

baud74 · 3 Décembre 2014

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.

zikeur54 · 3 Décembre 2014

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/.

cduray · 3 Décembre 2014

<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

garancetosello · 3 Décembre 2014

pff je suis encore au boulot et jusqu'à tard. J'espère avoir la otiviation pour tester tout ce que vous m'avez dit :?
Merci pour tout les amis

garancetosello · 4 Décembre 2014

Yolo yolo Merci merci merci merci
http://www.votre-faire-part.com/page.html
Qu'en pensez-vous ?
Chez moi tout est parfait mais chez vous ?

zeb · 4 Décembre 2014

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.

Madrileño · 4 Décembre 2014

Bonjour,

Ici le menu est bien au centre.

Cordialement.