Partage

probleme d'extension de mon menu

css

29 octobre 2006 à 4:37:29

Bonjour voila je pense que mon design de site est arrivée a son therme seulement j'ai un probleme avec mon menu horizontal haut malgré un widht de 98% celui ne s'etend pas pourriez vous m'aider? je vous poste l'adresse du site car vous pourrez y voir egalement que lorsqu'on diminue la fenetre celui-ci ce deforme sur mozilla ainsi que sur IE
voici mon site

et voici mon code css:

/* Menu horizontal */

div#menu_horizontal
{
width : 98%;
height : 40px;
margin-top : 16px;
margin-left: 1%;
margin-bottom: 10px;
font-family: Georgia, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

div#menu_horizontal ul
{
margin : 0px;
padding : 0px;
list-style-type : none;
}

div#menu_horizontal li
{
padding :7px;
line-height : 38px;
display : inline;
background-image: url("design/fondmenuhaut.png");
background-repeat: repeat-x;
background-color: #FFFAF0;
}

div#menu_horizontal li.bouton_gauche
{
border: 2px ridge #c32500;
}

div#menu_horizontal li.bouton_centre
{
font-size: 20px;
padding: 15px;
padding-left: 21px;
padding-right: 21px;
border: 2px ridge #c32500;
}

div#menu_horizontal li.bouton_droite
{

border: 2px ridge #c32500;
}

div#menu_horizontal a
{
color : black;
text-decoration : none;
padding : 0 0.5em;
font : 0.8em "Trebuchet MS";
}

div#menu_horizontal a:hover
{
text-decoration : none;
color: #c32500;
}

div#menu_horizontal a img
{
border : none;
padding : 0 0.3em;

}

je vous poste egalement mon HTML :

<div id="menu_horizontal">
<ul>
<li class="bouton_gauche"><a href="index.php?page=news">Accueil</a></li>
<li class="bouton_gauche"><a href="http://w2.webreseau.com/fr/services/forums/forums.asp?id=653679" target="_blank">Forum</a></li>
<li class="bouton_gauche"><a href="http://w2.webreseau.com/fr/services/guestbook/messages.asp?id=653680" target="_blank">Livre d'or</a></li>
<li class="bouton_centre">Bienvenue sur Emoto-Plaisir</a></li>

<li class="bouton_droite"><a href="#">Deconnections</a></li>
<li class="bouton_droite"><a href="#">0 Message</a></li>
</ul>
</div>

Vous remarquerez egalement que sous IE la barre rouge ne s'affiche pas

Voila si vous pouviez m'aider sa serait super

corbeau

29 octobre 2006 à 22:11:32

Personne ne trouve de solution?

Main Mich

29 octobre 2006 à 22:20:59

Bonjour
Je suis pas sur... à la limite essai en changean % par px mais là se pose le problème de la taille de l'écrant du visiteur...Ou essai de mettre un taille dans ton li en px.

Ou alors vérifi que tu as défini une taille pour ton corps en général (en px ou %).
Après je sai pas... bonne chance et bonne soirée!!!

Prisma Web

corbeau

29 octobre 2006 à 22:34:34

Merci de vouloir m'aider seulement mon body est bien en 100% et j'ai mit des width:100% pour voir si sa changer qu'elle que chose dans les Li et meme les Ul mais rien n' y fait

Perlejade

30 octobre 2006 à 8:40:26

Ton menu lui-même fait bien la taille qu'il faut, ce sont ses éléments qui sont trop petits.
Supprime le display: inline; (attention, tu auras des problèmes de marges à corriger) et le padding ; remplace-les par width: (largeur totale du menu (ici en %) - marges entre les éléments du menu (ici en %)) / nombre d'éléments du menu (plus un text-align: center;).
(Attention : les marges (margin) entre les éléments du menu et la largeur de chacun d'eux doivent être exprimées dans la même unité.)

En espérant être utile

(PS : je trouve le thème de ton site bizarre pour un site parlant de moto, mais très joli.)

corbeau

30 octobre 2006 à 15:30:37

Alors deja merci de ton perlejade seulement j'ai essaye ce que tu ma mit mais si j'enleve display: inline; les boites du menu ce retrouve les une en dessous des autres au lieu d'etre a la suite l'une de l'autre!
De plus j'ai remplacé les padding pas width mais j'ai pas vu le changement je pense surement avoir mal compris ce que tu ma dit , si c'est le cas je m'en excuse! je te poste le code avec ses modifications

/* Menu horizontal */

div#menu_horizontal
{
width : 98%;
height : 40px;
margin-top : 2%;
margin-left: 1%;
margin-bottom: 1%;
font-family: Georgia, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

div#menu_horizontal ul
{
list-style-type : none;
width: 100%;
}

div#menu_horizontal li
{
width :100%;
line-height : 38px;
background-image: url("design/fondmenuhaut.png");
background-repeat: repeat-x;
background-color: #FFFAF0;
display: inline;
}

div#menu_horizontal li.bouton_gauche
{
width: 100%;
border: 2px ridge #c32500;
}

div#menu_horizontal li.bouton_centre
{
width: 100%;
font-size: 20px;
border: 2px ridge #c32500;
}

div#menu_horizontal li.bouton_droite
{
width: 100%;
border: 2px ridge #c32500;
}

div#menu_horizontal a
{
color : black;
text-decoration : none;
padding : 0 0.5em;
font : 0.8em "Trebuchet MS";
}

div#menu_horizontal a:hover
{
text-decoration : none;
color: #c32500;
}

div#menu_horizontal a img
{
border : none;
padding : 0 0.3em;

}

et je te met l'adresse du site pour que tu voit ce que sa donne Emoto-plaisir

P.S: Peut tu me dire pourquoi tu trouve mon theme bizarre ?

mais merci pour le compliement quand meme

Perlejade

30 octobre 2006 à 19:29:39

Ah, c'est ça que tu voulais ? Désolée, j'avais mal compris la question.
Je trouve ton thème bizarre, car les sites parlant de sports considérés comme "virils" et "modernes" utilisent plutôt des couleurs sombres (du genre noir/rouge), ou flashy (violet/jaune/vert fluo). Le thème que tu utilises fait peut-être référence à quelque chose de connu chez les motards, mais à une profane comme moi ça évoque quelque chose de délicat et un peu ancien, complètement opposé à ce à quoi je m'attendrais ; l'originalité bien maîtrisée est toujours un bon choix (même que c'est Dave Shea qui l'a dit).

corbeau

30 octobre 2006 à 19:50:43

alors si il le dit c'est que c'est vrai lool en tout cas merci pour tes critiques constructives!
car je doit avouer qu'en design et graphisme je suis tres mauvais c'est pourquoi il est aussi simple!
Ensuite pour ce qui est des couleurs je vais essayer tes conseils

autrement pour l'histoire de mon menu qu'elle qu'un a une idée?

Perlejade

30 octobre 2006 à 19:59:50

Non non, surtout ne change pas, j'aime vraiment cette originalité !
Et pour le menu, en fait, je comprends pas vraiment ce que tu veux faire...

corbeau

30 octobre 2006 à 20:07:02

loool Ha oui tu pense vraiment que sa peut plaire comme sa? je voulais essayer autre chose voir si c'est bien je te montrerais sinon je remet tout a zero lool !
Pour le menu beh en faite je le veut comme il etait avant que j'y retouche mais qu'il fasse toute la page car en 1024 par exemple il prend pas toute la page en longueur

Perlejade

30 octobre 2006 à 20:23:25

Ben c'est bien ce que je disais. Le display: block; ne devrait pas provoquer de retour à la ligne avec float: left; et des largeurs bien calculées.

Tu obtiens de bons résultats avec

div#menu_horizontal li
{
display: block;
float: left;
margin: 1%;
}

div#menu_horizontal li.bouton_gauche
{
width: 12%;
}

div#menu_horizontal li.bouton_centre, div#menu_horizontal li.bouton_droite
{
width: 25%;
}

En espérant être utile

corbeau

30 octobre 2006 à 21:04:06

encore merci de ton aide on avance a grand pas , alros comme tu pourra le voir sur le site le mmenu doit prendre au moins 95% de la largeur de la page , meem si on fait pas mieux je ferai avec

mais par contre si je diminue la page de taille beh le menu ce deforme

et sous Ie le corps passe a present sous le menu de gauche lool vais devenir fou!

Perlejade

30 octobre 2006 à 21:09:36

En effet, l'effet est loupé en 800*600. Réduis légèrement ton menu (c'est pas catastrophique si tu as une petite marge sur les côtés). Réduis aussi un peu la largeur du corps, du menu de gauche et de la marge entre les deux, pour éviter les "naufrages" (surnom que je donne aux flottants qui "coulent" en se "poussant" les uns sous les autres).

corbeau

30 octobre 2006 à 21:45:09

bon alors j'ai fait de scorections sur mozilla beh sa marche sauf le menu qui ce deforme toujours, et sous IE beh rien ne va

ps: alors ces nouvelles couleur? du site?

Perlejade

30 octobre 2006 à 22:02:46

Avec les proportions que je t'ai données, le menu reste potable jusqu'à des résolutions très petites. Bon, il y a une marge sur des résolutions élevées, mais rien d'affreux.
Pour IE, je vais avoir du mal à tester vu que je ne l'ai pas, mais n'oublie pas que pour lui largeur contenu = width - padding - border, alors que les standards demandent que largeur contenu = width, et on ajoute padding et border pour la largeur totale.
Et qu'il agrandit les marges des flottants (il augmente de 3px).

corbeau

31 octobre 2006 à 15:17:27

Salut bon sache que j'ai reussi je pense a stabiliser le menu , sous IE il reste un petit bugg qui est que le corps passe soous le menu lorsque je diminue la fenetre mais bon c 'est pas encore trop frave!
De plus chose assez amusante mon menu est inversée mais c'est pas genant au contriarei je croit que je prefere!
Ensuite beh j'ai changé la couleur et je pense que sa te plaira

Perlejade

31 octobre 2006 à 15:32:50

Pour les couleurs, je préférais avant, mais bon je ne m'y connais pas du tout en moto et encore moins en goût. Est-ce que le site rend bien sous IE avec une fenêtre de 760px de large ? Si oui, c'est suffisant.

corbeau

1 novembre 2006 à 10:24:46

Ha mince decidement toutes les femmes me disent qu'elles preferaient les couleurs d'avant lool va falloir que je trouve un compromis entre les hommes et les femmes lool!
Bon sinon sous IE et en 800*600 a present c'est mon menu de gauche qui pose probleme, toutes mes listes ce retrouvent a droites alors qu'elles devraient ce trouver a gauche ce ki et si je regaurde sous mozilla , les puces sortent du cadre a gauche

a tu une super idées?
Merci en tout cas pour tout le temps que tu passe a m'aider!

Perlejade

1 novembre 2006 à 14:36:24

La plupart des motards sont des hommes, donc la question est vite tranchée.

.element_menu
{
padding-left: 25px;
}

règle le problème des puces : en effet, elles sont ajoutées à l'extérieur de la liste et non à l'intérieur.

Pour les listes à droite, je ne sais pas, vu que je n'ai pas IE. Tu aurais un screenshot ?

corbeau

1 novembre 2006 à 18:34:52

coucou je te met un screen de IE
pour le padding il est reduit a 5px mais sa ne change rien!
Mais bon moi je veut aussi que les femmes aiment mon

site

Perlejade

1 novembre 2006 à 20:15:31

Si tu veux plaire à tout le monde, t'as pas fini.
Pour IE, là, je ne sais pas trop, désolée.

corbeau

1 novembre 2006 à 20:19:55

Bon ecoute merci pour tes conseils precieux en tout cas car j'ai bien avancée sur le design grace a toi! a present je vais tester plein de trucs et peut etre arrivée a corrigée ces buggs!
Enfin si qu'elle qu'un pourrait m'aider! quand meme sa serait cool! je post mon
code css:

/* Le menu gauche*/

#menugauche
{
float: left;
width: 14%;
margin: 1%
}

.element_menu
{
background-color: #FFFAF0;
background-image: url("design/hautboite.png");
background-repeat: repeat-x;
border: 2px ridge blue;
margin-bottom: 20px;
}

.element_menu h4
{
color: #c32500;
font-family: georgia, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
border-bottom: 1px solid #6cb94b;
}

.element_menu ul
{
list-style-image: url("puce.png");
padding-bottom: 5px;
padding-left: 5px;
text-align: left;
}

.element_menu a
{
color: #000000;
text-decoration: none;
}

.element_menu a:hover
{
color: #c32500;
}

Perlejade

1 novembre 2006 à 20:21:23

Ca a marché, le truc du padding ?

corbeau

1 novembre 2006 à 20:33:19

heu non malheureusement j'ai mit comme tu peut le voir un padding de 5px et mes puces pour mozilla son en dehors du cadre et sous mozilla tout ce retrouvent a droite

Perlejade

1 novembre 2006 à 21:26:27

Normal, 5px c'est beaucoup trop petit, il faut 25px.

corbeau

2 novembre 2006 à 0:42:28

Perlejade j'ai trouvé

je sais plus trop comment mais j'ai trouvé mdr ayez i'm sauvé , mais j'ai encore un probleme mdr, j'ai mit les premieres lettres de mes paragraphes dans mes news de couleur mais sa marche pas sous mozilla mais sous IE oui et la police d'ecriture est plus petite mdr,je me suis apercu egalkement que lorsqu'on rafraichi la page on voit les lettrines un tres bref instant faut etre rapide

Up je me suis apercu en travaillant sur mon site cete nuit, d'autre bugg de compatibilité, je vous fait la liste, aller je me lance , dans le sous menu moto les puces ne s'affiche pas, il y a egalement la date de mes news qui ce trouvent en haut du titre news alors qu'elle devrais ce trouver a droite, pour le footer meme souci le copyright devrait etre a gauche et me contacter a droite et j'en oublie surement si pouviez m'aider avant que je finisse dans une camisole de force sa serait gentil!
En plus j'ai fait un teste sur le w3c c horrible j'ai 60 erreurs de moyenne que sur deux pages lool et j'en ai plus de 250 mais sa je vais pas vous demander de m'aider a les corriger , il manquerait plus que vous fassiez mon site a ma place !
Merci encore pour ceux qui veulent bien m'aider!

Perlejade

2 novembre 2006 à 8:39:26

Si tu as des erreurs dans ton HTML, il faut les corriger avant le CSS ; le rendu des navigateurs en dépend, donc pas la peine de faire le boulot deux fois.

corbeau

2 novembre 2006 à 14:37:39

Beh en faite pour ce qui est des erreurs html j'en ai deja corrigé 20 seulement pour le reste je comprend pas tres bien ce qu'ils veulent me mettre!