Menu Horizontal justifié

Fermé
mlaniew123 Messages postés 13 Date d'inscription vendredi 10 février 2012 Statut Membre Dernière intervention 31 décembre 2018 - 10 févr. 2012 à 12:12
mlaniew123 Messages postés 13 Date d'inscription vendredi 10 février 2012 Statut Membre Dernière intervention 31 décembre 2018 - 10 févr. 2012 à 14:01
Bonjour,
Je suis nouvelle et tente de faire mon petit site internet. Chose pas facile! Les éléments se mettent en placent, mais je suis bloquée sur le menu.
J'aimerais qu'il prenne la largeur de mon site et soit justifié.

Pour un exemple plus concret, voici ma page:
www.wintersdorff.fr

Et voici mes codes de menu:
#menu .container {
z-index : 1001;
top : 0;
margin : 0 0 0 0;
width : 800px;
}
#menu {
float :left;
height : auto;
padding : 0 0 0 0;
}
#menu p {
color : #000000;
width : auto;
font-family : Arial;
text-align : left;
padding : 0 0 0 0;
margin : 0 0 0 0;
}
#menu ul {
float : right;
width : auto;
list-style : none;
overflow : auto;
margin : -20px 0 10px 12px;
}
#menu ul li.section-title { /* property of the section titles */
font-family : Arial;
color : #1A171B;
font-size : 1.5em;
font-style : normal;
text-align : right;
text-decoration : none;
width : auto;
padding : 0 0 2px 0;
margin : 0 3px 5px 0;
}
#menu ul li.section-title:hover {
color : #1A171B;
}
#menu ul li {  /* property of the projects/exhibitions titles */
font-family : Arial;
text-align : left;
font-size : 1em;
width : 100px;
line-height : 150%;
margin : 0 0 0 0;
}
#menu ul a:link {
padding : 0 0 0 0;
text-decoration : none;
color : #1A171B;
}
#menu ul a:active {   /* couleur sous-menu */
padding : 0 0 0 0;
text-decoration : none;
color : #1A171B;
}
#menu ul a:visited {    /* sous-menu visité */
padding : 0 0 0 0;
text-decoration : none;
color : #1A171B;
}
#menu ul a:hover {        /* sous-menu hover */
padding : 0 0 0 0;
font-style : bold;
color : #1A171B;
}




A voir également:

3 réponses

yelem Messages postés 74 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 3 juin 2014 23
10 févr. 2012 à 12:38
Salut mlaniew123,

Pour que ton menu prenne la largeur de ta page internet il te suffit de définir sa largeur dans ton code CSS. Tu n'as qu'à rajouter width : 100%;
Pour ce qui est de la justification de ton texte, il te suffit de préciser :
text-align: justify;

Dis moi si cela a marché.

Sympa ton site au passage
0
mlaniew123 Messages postés 13 Date d'inscription vendredi 10 février 2012 Statut Membre Dernière intervention 31 décembre 2018
10 févr. 2012 à 12:51
Merci Yelem pour ton message.

En fait je suis incapable de placer ces codes dans mon css.
A quel niveau je dois les placer?

#menu ul li.section-title
à ce niveau là?

:)
0
Salut,
Comme vous devez vous en douter #menu ul li.section-title indique les styles de toutes les classes "section-title" dans une liste non ordonée(li de ul) regroupée par une balise(problablement un div) d'identifiant unique(id): "menu".
Bref chaque li de ul (section-title)est une case du menu, donc si vous indiquez 100% de l place il risque d'y avoir un problème.
Essayez plutôt sur le bien nommé container qui a pour l'instant 800px de largeur de remplacer par 100%.

#menu .container {
z-index : 1001;
top : 0;
margin : 0 0 0 0;
width : 800px;
}

La mise en page étant dépandante d'une largeur fixe il faudra peut être ajuster les autres éléments en fonction(il sont pas en arrière plan par le css, donc je suppose que ce sont des images dans le html).
0
mlaniew123 Messages postés 13 Date d'inscription vendredi 10 février 2012 Statut Membre Dernière intervention 31 décembre 2018
10 févr. 2012 à 14:01
Bonjour Bornel,

Pour la petite histoire, je créée mon site à partir de l'application web Indexhibit, et souhaite customizer le tout. Je ne maitrise pas les css et autres choses de web :) Mais petit à petit j'avance.
Concernant les menus, je suis perdue.Ca fait quinze jours que je suis dessus, en essayant de modifier les éléments un par un pour voir ce que ça donne sur mon site.

J'ai bien modifié le width: 100%

Mais rien. Mon menu est désormais centré :)
www.wintersdorff.fr
0