petite modif pour menu verti gauche

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : petite modif pour menu verti gauche

petitsoldat

Bonjour à tous,
il y a un menu dans les tutos du site d'alsacreation qui me plait bien mais je voudrais lui apporté une modif, et je n'arrive pas à trouver où.
Voici l'adresse du menu : http://css.alsacreations.com/modelesmenus/vd2.htm

Et le petit truc que je voudrais lui ajouter c'est sur le sous menu. Je voudrais que ce soit la ligne entiere qui contient le texte qui soit cliquable et pas que le texte.
Avez-vous une idée ?
MErci

Publicité

xtof_83

Freeride Spirit

display:block

gatsu35

Blablaté par Harko

le display block est déjà sur le A du menu, en fait c'est IE qui fait sa pute, je vote pour le fait que le block n'a pas de layout sur lui
en foutant un zoom:1 on force le layout.
lecture : http://www.satzansatz.de/cssd/onhavinglayout.html

sinon le code corrigé (avec un petit fond sur le A:hover (un fond rouge))

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>un menu vertical déroulant en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
<!--
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
zoom:1; /*on force le layout de ce con de IE*/
}

#menu li a:hover {
background:red;
color:#fff;
}


#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
-->
</style>

</head>
<body>

<!-- Menu  -->

<dl id="menu">
        <dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="#">Menu 1</a></dt>
            <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
                <ul>
                    <li><a href="#">Sous-Menu 1.1</a></li>
                    <li><a href="#">Sous-Menu 1.2</a></li>
                    <li><a href="#">Sous-Menu 1.3</a></li>

                </ul>
            </dd>    
            
        <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu 2</dt>
            <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
                <ul>
                    <li><a href="#">Sous-Menu 2.1</a></li>
                    <li><a href="#">Sous-Menu 2.2</a></li>
                </ul>

            </dd>    

        <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt>
            <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
                <ul>
                    <li><a href="#">Sous-Menu 3.1</a></li>
                    <li><a href="#">Sous-Menu 3.1</a></li>

                    <li><a href="#">Sous-Menu 3.1</a></li>

                    <li><a href="#">Sous-Menu 3.1</a></li>
                    <li><a href="#">Sous-Menu 3.1</a></li>
                    <li><a href="#">Sous-Menu 3.1</a></li>
                </ul>
            </dd>

        <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu 4</dt>

            <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
                <ul>
                    <li><a href="#">Sous-Menu 4.1</a></li>
                    <li><a href="#">Sous-Menu 4.1</a></li>
                </ul>
            </dd>
</dl>

<div id="mentions">Raphaël GOETTER<br />

  <a href="http://www.alsacreations.com">Alsacréations</a><br />
  <a href="http://css.alsacreations.com/Galeries-de-menus-en-CSS">Retour</a></div>

</body>
</html>

---------------
Blablaté par Harko

mIRROR

Chevreuillobolchévik

genial ton lien gatsu je connaissais pas merci

petitsoldat

est-ce qu'il est possible de mettre un espace blanc entre chaque menus? J'ai essayé plusieurs trucs mais rien de concluant.

xtof_83

Freeride Spirit

padding

ou tu jous avec les border

petitsoldat

j'ai créé un # pour chaque menu avec la position top. C'est mieux?

gatsu35

Blablaté par Harko

a la ligne #menu dt0
tu modifie margin: 2px 0; en margin:5px 0 (ou le nombre de pixel que tu veux pour separer les menus)

Message édité par gatsu35 le 07-06-2006 à 16:23:35

---------------
Blablaté par Harko

petitsoldat

Merci c'est super. Petite question :
le 0 correspond à quoi alors ?

gatsu35

Blablaté par Harko

http://wiki.media-box.net/documentation/css/margin

---------------
Blablaté par Harko

Publicité

petitsoldat

Merci trop cool !!!
j'abuse encore de votre gentillesse .
Si je veux que mes fond de menu de gauche soit transparent comment je fais ?
Parce que j'ai essayé de virer l'intitulé background et ma souris n'affiche plus mon ss menu dés qu'elle sort du texte. Faut-il mettre une image en gif transparent?

gatsu35

Blablaté par Harko

background: #A9BFCB; <== tu supprime cette ligne

---------------
Blablaté par Harko

petitsoldat

oui j'ai essayé mais je n'arrive pas à aller sur le sous menu dés que la souris sort du texte. ALors j'ai trouvé une solutiond e replis une image avec un fond transparent. Bonne solution?

petitsoldat

Sinon j'ai un autre soucis. J'ai testé cette mise en page avec firefox et oulalalalala.
Il ne me prends pas en compte les propriété du background (je l'ai modifié j'ai mis une img), ni le style de police, j'ai aussi un underline un peu épais sous les menus. Une idée ?
Merci

xtof_83

Freeride Spirit

Une idée qu'il faut se débrouiller un peu seul, cher ami

Pour toi:
http://www.csszengarden.com/
http://www.alsacreations.com
http://openweb.eu.org/

petitsoldat

une autre petite embrouille. Mon menu passe sous les zones de foermulaires . Une idée ?
J'ai cherché partout mais rien !!!

petitsoldat

ouh ouh y a qq un ?

xtof_83

Freeride Spirit

9min et 2 sec de patience, ben dis donc... va falloir faire des efforts de ce côté là mon ami

petitsoldat

bon désolé je patiente milles excuses

petitsoldat

sinon je fais des essais qd meme. J'essaye avec la propriété z-index mais rien n'y fais, que faire ?

petitsoldat

vous avez vriament pas d'idée pour ce pb ? svp

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

petite modif pour menu verti gauche

Sujets relatifs
[RESOLU]Selection ds menu deroulant d'une BD puis echo d'un champ lié	Menu JS dans PHP (relou)
menu en java	[C] Clique gauche automatique de la souris
PHP 5 : Donnez moi une petite aide SVP...	menu flash
Afficher pendant un certain temps un popup menu	Select menu
Petite question sur les tris de tableau	menu
Plus de sujets relatifs à : petite modif pour menu verti gauche

Page générée en 0.086 secondes