Résultats de la recherche (Page 1) / Forum d'entraide: tuto-fr.com

#1 Re : De tout de rien » Affichage des sous sous menu » 04-08-2006 11:14:55

Bonjour, deux trois p'tit question.

Comme c'est de l'imbriquation de css toutes modifications se répercute sur le reste donc je galaire a :

- Mette un (background-image: url(menu/font_menu.gif)) juste sur les titres du menu sans que ca ce répecute sur les sous-menu et sous-sous-menu.
- De meme j'aimerais donner une hauteur supperieur aux titres du menu et garder la hauteur acctuel pour les sous-menu et sous-sous-menu.

si qq veux m'aider j'ai modifier mon précédent poste afin d'avoir un menu qui marche.

Voila merci de votre aide

#2 Re : De tout de rien » Affichage des sous sous menu » 28-07-2006 21:49:20

enfin j'y suis arrivé. J'avais telement fait d'essais pour adapter le code qu était altéré alors j'ai supprimé le fichier est suis reparti de zero donc maintenant sa marche.

cepandant comme une ame charitable est d'accord pour me venir en aide, j'aimerais cette fois ci pouvoir donner une taille differente a mes sous-sous-menu.

je me trouve confronté au même probleme. Quelle class changer. Je s'ais qu'il faut une nouvelle class "niveau 3bis" mais je ne s'ais pas comment la monter. Voici tout de meme mon code

Code :

 <!-- *********** MENU ************ -->
<div id="menu" style="margin-left:0px; width:774">
    <ul class="niveau1">
        <li><a href="?page=accueil">Accueil</a></li>
        <li class="sousmenu"><a href="#">Eau Vive</a>
            <ul class="niveau2">
                <li><a href="?page=raft">Rafting</a></li>
                <li><a href="?page=hydro">Hydrospeed</a></li>
                <li><a href="?page=kayak">Kayak-raft</a></li>
                <li class="sousmenu"><a href="#">• Les rivières</a>
					<ul class="niveau3">
						<li><a href="?page=dranse">La Dranse</a></li>
                        <li><a href="?page=dora">La Dora Baltea</a></li>
                        <li><a href="?page=giffre">Le Giffre</a></li>
                        <li><a href="?page=isere">L'Isère</a></li>
					</ul>
				</li>
                <li><a href="?page=classification">Classification</a></li>
            </ul>
        </li>
            <li class="sousmenu"><a href="#">Activités</a>
                <ul class="niveau2bis">
                    <li class="sousmenu"><a href="#">• Les journées</a>
                        <ul class="niveau3">
                            <li><a href="?page=eauvive">Eau vive</a></li>
                            <li><a href="?page=accro">Accrobranche & raft</a></li>
                            <li><a href="?page=aero">Aér'eau</a></li>
                        </ul>   
                    </li>
                    <li class="sousmenu"><a href="#">• Les week-ends</a>
                        <ul class="niveau3">
                            <li><a href="?page=montagne">La montagne d'en eau</a></li>
                            <li><a href="?page=trieau">Tri-eau</a></li>
                            <li><a href="?page=multi">Multi-activités</a></li>
                            <li><a href="?page=decouverte">Découverte</a></li>
                        </ul>
					</li>
                    <li><a href="?page=passeport">Passeport aquaforme</a></li>
                    <li class="sousmenu"><a href="#">• Les sorties hivernales</a>
                        <ul class="niveau3">
                            <li><a href="?page=snow">Journée Snow & Ski</a></li>
                            <li><a href="?page=motoneige">Motoneige & raquettes</a></li>
                            <li><a href="?page=neige">Multi neige</a></li>
                        </ul>
					</li>
                    <li><a href="?page=voyages">Les voyages</a></li>
                    <li><a href="?page=entreprise">Entreprises</a></li>
                    <li><a href="?page=junior">Junior</a></li>
                </ul>
            </li>
        <li><a href="?page=boutique">Boutique</a></li>
        <li><a href="?page=tarifs">Tarifs</a></li>
        <li><a href="?page=photos">Photos</a></li>
        <li><a href="?page=livre">Livre d'Or</a></li>
        <li><a href="?page=contact">Contact</a></li>
        <li class="sousmenu"><a href="#">Infos</a>
            <ul class="niveau2">
                <li><a href="?page=liens">Liens</a></li>
                <li><a href="?page=partenaires">Partenaires</a></li>
                <li><a href="?page=clients">Clients</a></li>
                <li><a href="?page=cgv">C.G.V.</a></li>
                <li><a href="?page=equipe">L'équipe</a></li>
            </ul>
        </li>
    </ul>
</div>
<!-- *********** END MENU ************ -->

CSS :

body {behavior: url(csshover.htc);} 
div#menu a {color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight: bold} 
div#menu ul {padding: 0; margin:0px; background: white; text-align:center} 
div#menu li {background:#CF9D32} 
div#menu li:hover {background: #EDD7A3} 
div#menu li.sousmenu:hover {background: #EDD7A3;} 
/* rajout couleure de fond */ 
div#menu li.sousmenu {/*background: #CF9D32 url(menu/corner_arrow.gif) no-repeat */} 

/* une petite bordure en top*/ 
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid} 

div#menu ul ul {position: absolute;display:none; width:86px; text-indent: 3px; text-align:left} 
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:86px} 
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;} 
div#menu ul.niveau3 {top:-1px; left: 86px;} 

/*TAILLE DEUXIEME COLONNE BIS */              
div#menu ul.niveau2bis ul {left: 140px;}  
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2bis, 
div#menu ul.niveau2bis li.sousmenu:hover ul.niveau3 {display:block; }
div#menu ul.niveau2bis li a {top:-1px; width: 140px; text-align:left;} 

/* rajout de couleur de fond et de survol */
div#menu ul.niveau3 li { background: #EDD7A3}
div#menu ul.niveau3 li:hover { background: #DDB664}

#3 De tout de rien » Affichage des sous sous menu » 28-07-2006 19:07:07

christobal
Réponses : 4

Bonjour, Je reviens au sujet du tuto "menu css".

Cette fois j'ai vraiement besoin d'aide j'ai réussi a avoir une taille differente suivant les sous menu en faisent une class niveau2bis mais maintenant c'est les sous sous menus qui ne s'affiche pas.

Que faire ? Quel class changé ? Faut'il une nouvelle class ?

Je suis perdu.

Merci de votre aide

#4 De tout de rien » Au sujet du tuto MENU CSS » 25-06-2006 21:50:30

christobal
Réponses : 1

bonjour, cela fait des jours que je cherchais un tuto de cette classe pouvant me permettre de mettre des sous-sous menus.

je viens donc de créer mon menu en horizontal, mais je rencontre des problemes.
le principale PB et que je n'arrive pas a mettre les sous menus et sous-sous menus de longueur suffisante pour que le txt tienne sur une ligne.

je ne sais pas si c'est bien mais voici mon CSS et mon Code


body {behavior: url(csshover.htc);} 

/* DEFINITION DU MENU PRINCIPAL */
div#menu a {
	color:#000000;
	font-family: Verdana, Arial, sans-serif, Helvetica;
	font-size: 10px;
	 }
div#menu ul { margin:0px; text-align:center;} /* POSSITONNEMENT DES SOUS MENUS */
div#menu li { background:#73A2DA ;} /* FOND DU MENU */
div#menu li:hover {background: #EDD} 
div#menu li.sousmenu:hover {background: #EBB;} 
 
div#menu li.sousmenu { background-color:#ff9900} /* COULEUR DE FOND DES BLOCS AVEC SOUS MENU*/

div#menu ul li {position:relative; list-style: none; float:left; border-top:0px solid} /* une petite bordure en top*/ 

div#menu ul ul {position: absolute;display:none; width:100px} 
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block; width:86px}/* TAILLE DES BLOCS DU MENU PRINCIPAL */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;} 
div#menu ul.niveau3 {top:-1px; left: 86px;} /* POSSITONNEMENT DES SOUS-SOUS MENUS */

/* rajout de couleures de fond et de survol */ 
div#menu ul.niveau3 li { background: #99CCCC} 
div#menu ul.niveau3 li:hover { background: #99CC00}
<div id="menu" style="width:774px ;"> 
<ul class="niveau1"> 
	<li><a href="lien">Accueil</a></li> 
	
	<li class="sousmenu"><a href="lien">Eau Vive</a> 
		<ul class="niveau2"> 
			<li><a href="lien">Rafintg</a></li> 
			<li><a href="lien">Hydrospeed</a></li> 
			<li><a href="lien">Kayak-Raft</a></li> 
			<li class="sousmenu"><a href="lien">Les rivières</a> 
				<ul class="niveau3"> 
					<li><a href="lien">La Dranse</a></li> 
					<li><a href="lien">La Dora Baltéa</a></li> 
					<li><a href="lien">Le Giffre</a></li> 
					<li><a href="lien">L'Hisère</a></li> 
				</ul> 
			</li> 
			<li><a href="lien">Classification</a>
			</li> 
		</ul> 
	</li> 
	
	<li class="sousmenu"><a href="lien">Activités</a> 
		<ul class="niveau2"> 
			<li class="sousmenu"><a href="lien">Les Journées</a>
				<ul class="niveau3"> 
					<li><a href="lien">Eau Vive</a></li> 
					<li><a href="lien">Accrobranche & Raft</a></li> 
					<li><a href="lien">Aér' Eau</a></li> 
				</ul> 
			</li> 
			<li class="sousmenu"><a href="lien">Les Week-Ends</a>
				<ul class="niveau3"> 
					<li><a href="lien">La montagne vue d'en Eau</a></li> 
					<li><a href="lien">Trie Eau</a></li> 
					<li><a href="lien">Multi-activités</a></li> 
					<li><a href="lien">Découverte</a></li> 
				</ul> 			
			</li> 
			
			<li><a href="lien">Passeport aquaforme</a></li> 
			
			<li class="sousmenu"><a href="lien">Les sorties hivernales</a> 
				<ul class="niveau3"> 
					<li><a href="lien">Journée Snow & Ski</a></li> 
					<li><a href="lien">Motoneige et raquettes</a></li> 
					<li><a href="lien">Multi neige</a></li> 
				</ul> 
			</li> 
			<li><a href="lien">Les sorties hivernales</a></li> 
			<li><a href="lien">Les Entreprises</a></li> 
			<li><a href="lien">Les Juniors</a></li> 
		</ul> 
	</li> 
	
	<li><a href="lien">Boutique</a></li> 
	
	<li><a href="lien">Tarifs</a></li> 
	
	<li><a href="lien">Photos</a></li> 

	<li><a href="lien">Livre d'Or</a></li> 

	<li><a href="lien">Contact</a></li> 

	<li class="sousmenu"><a href="lien">Infos</a> 
		<ul class="niveau2"> 
			<li><a href="lien">Liens</a></li> 
			<li><a href="lien">Partenaires</a></li> 
			<li><a href="lien">Clients</a></li> 
			<li><a href="lien">L'équipe</a></li> 
			<li><a href="lien">C.G.V</a></li> 
		</ul> 
	</li> 
</ul> 
</div>

Merci de votre aide