Bon ben c'est toujours mon menu

probléme de boutons pas à leur place

Sujet résolu

16 février 2006 à 0:41:08

Encore moi décidement il me faudrais des cours pour les plus nuls que nuls ...un petit coup de pouce ?? :euh:

Alors voilà en css:

.element_menu
{
margin-top: 20px;
margin-left: 10px;
font-size: 20px;
font-weight: bold;
}
.element_menu li
{
list-style-image: url("image/paw.gif");
text-align: center;
background-image: url("image/menu.jpg");
//*le bouton qui es censé etre sous chaque lien et à gauche ..sauf que là il es à droite manger sous le menu *//
background-repeat: no-repeat;
}

et en xhtlm :

<div id="menu">
<div class="element_menu">
<ul>
<li><a href="index.html">Présentation</a></li>

<li><a href="service.html">Nos services</a></li>

<li><a href="personnels.html">Personnels</a></li>

<li><a href="reference.html">Nos références</a></li>

<li><a href="lois.html">Nos obligations</a></li>

<li><a href="tarifs.html">Tarifs</a></li>

<li><a href="devis.html">Devis</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="plaquette.html">Plaquette</a></li>
</ul>
</div>
</div>

MrVincent

16 février 2006 à 1:11:58

C'est quoi le problème?

Veuve Noire

16 février 2006 à 1:21:31

ben oui pas clair mon probléme là ...je le ressors du texte c'est là !!!!:

background-image: url("image/menu.jpg");
//*le bouton qui es censé etre sous chaque lien et à gauche ..sauf que là il es à droite manger sous le menu *//

Normalement mon fond de menu es marbré marron avec des boutons dedans et les liens dessus et je me retrouve avec mon fond ma bordure ...rooo flute si je savais comment amener l'image de ce que ça donne se serais plus simple .

enfin donc j'ai mon block menu avec les liens leurs joli boutons le fond tous bien mais ce bout là rajoute un rectangle sous mes liens qui se retrouve coincé à droite je ne sais pourkoi alors que tout le reste es à sa plce ....

MrVincent

16 février 2006 à 1:39:27

Désolé j'avais pas vu le commentaire... J'ai essayé en me créant des images et ça fait pas très beau mais au moins ça marche...
Mon code:

HTML

<html><head><link rel="stylesheet" media="screen" type="text/css" title="Design CSS" href="yay.css" /></head><body>
<div id="menu">
<div class="element_menu">
<ul>
<li><a href="index.html">Présentation</a></li>

<li><a href="service.html">Nos services</a></li>

<li><a href="personnels.html">Personnels</a></li>

<li><a href="reference.html">Nos références</a></li>

<li><a href="lois.html">Nos obligations</a></li>

<li><a href="tarifs.html">Tarifs</a></li>

<li><a href="devis.html">Devis</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="plaquette.html">Plaquette</a></li>
</ul>
</div>
</div>

</body></html>

CSS

.element_menu
{
margin-top: 20px;
margin-left: 10px;
font-size: 20px;
font-weight: bold;
}
.element_menu li
{
list-style-image: url("paw.gif");
text-align: center;
height:50px;
width:120px;

background-image: url("menu.png");
background-repeat: no-repeat;
}

#menu
{
background-color:green;
width:300px;
height:900px;
border:2px solid black;

}

a
{
color:red;
vertical-align:middle;
}

lucky55

16 février 2006 à 1:41:54

Bonjour, ou plutot bonne nuit

Je pense qu'il faut changer "li" dans le code css par "ul".

MrVincent

16 février 2006 à 2:41:16

Ah c'est vrai! C'est très possible...

Riko

16 février 2006 à 6:35:59

Salut,

Est ce quelque chose comme cela que tu veux obtenir ?

Si cela t'intéresse voici les codes :

#menu {
height:600px;/*hauteur de l'image qui sera en fond du menu*/
width:225px /*largueur de l'image qui sera en fond du menu*/

}

.element_menu
{
margin-top: 20px;
margin-left: 10px;
font-size: 20px;
font-weight: bold;
background-image: url(menu1.png);/*image de fond marbré celle qui sera en fond du menu*/
background-repeat: no-repeat;

}
.element_menu li
{
list-style-image: url(34.gif);/*image de la puce*/
text-align: left;
background-image: url(104.gif);/*image du bouton */
background-repeat: no-repeat;
margin-left: 30px;
margin-top: 8px;
font-size: 14px;
padding-left: 18px; /*permet de decaler le texte par rapport au bouton*/
}

.element_menu a {
text-decoration: none;/*pour enlever le soulignement des liens*/
}

Adapte les dimensions d'images, les margin et padding en fonction de tes besoins

Veuve Noire

16 février 2006 à 14:57:21

Oui c'est ça que je veux ...j'ai mis le code ça marche mais j'aurais aimer mettre les liens au milieu de mes boutons ...là ça fait un probléme avec les puces (logique ) alors j'ai voulu enlever les puce mais là quand je met none j'ai des horribles bouton blanc ..pas logique hein ? ...

Merci en tout cas mais comment tu a fait pour capturer l'image du menu car faire voir ce que ça donne m'aiderais à faire comprendre ce qui vas pas !!! o_O

Riko

16 février 2006 à 17:22:39

Pour envoyer une image :

tu cliques sur envoi d'images (à coté du cadre ou tu écris ton message, juste en dessous des smilies)
tu choisis où est ton image
clic sur envoyer
tu devrais voir ton image
en dessous de l'image tu clic sur le premier icone (insérer)

Et voila !

Veuve Noire

17 février 2006 à 15:47:37

http://perso.wanadoo.fr/dogma-securite/

Alors voici mon site qui passe plus du tout en validateur xhtml 1.0 strict ...
et en mettant la premiere page en ligne je viens de m'aperçevoir qu'il passe (enfin presque mon menu es pas assez bas et on voit pas mes curseurs ) en godzilla mais alors en internet explorer c'est la cata comme vous pourrez le constater ...

Voilà .... encore merci m'aider .ha oui cliquez pas sur les liens je n'es mis que la premiére page en ligne :euh:

Cordialement.
VN

Riko

17 février 2006 à 16:03:04

Salut,
pour aligner ton menu et ton corps dans IE, essaie de modifier comme ceci

#corps {
BORDER-RIGHT: #666666 4px double;
PADDING-RIGHT: 5px;
BORDER-TOP: #666666 4px double;
PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(fond44.jpg);
MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 5px;
MARGIN-LEFT: 233px;
BORDER-LEFT: #666666 4px double;
WIDTH: auto; /* c'est ici qu'il faut modifier*/
PADDING-TOP: 5px;
BORDER-BOTTOM: #666666 4px double;
BACKGROUND-REPEAT: repeat;
TEXT-ALIGN: center
}

Essais de coder en minuscule

Veuve Noire

17 février 2006 à 16:22:19

Oui genial merci ..... mais je code en minuscule ???
enfin sur notepad mon code es en minuscule !!!

Bon premier probléme de résolu ..ma page es enfin aussi moche en godzilla que en IE (rire ..)MERCI MERCI MERCI

Mon menu lui par contre vas pas ... :euh:

et mes curseurs se voit en IE mais pas en godzilla ...

Voilà apres je ferais un autre topic pour essayer de voir et arranger toute mes fautes pour que ça passe au validateur ..

et apres ben peut etre un topic pôur qu'il soit encore mieux ...visuellement parlant o_O