Tableau de navigation qui empiète sur ses sous-menus Bouton_activeTableau de navigation qui empiète sur ses sous-menus Bouton_hoverTableau de navigation qui empiète sur ses sous-menus Fb-hoverTableau de navigation qui empiète sur ses sous-menus Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Tableau de navigation qui empiète sur ses sous-menus EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Tableau de navigation qui empiète sur ses sous-menus EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Tableau de navigation qui empiète sur ses sous-menus EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Tableau de navigation qui empiète sur ses sous-menus EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Tableau de navigation qui empiète sur ses sous-menus EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Tableau de navigation qui empiète sur ses sous-menus EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Tableau de navigation qui empiète sur ses sous-menus EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Tableau de navigation qui empiète sur ses sous-menus EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -20%
Sony PULSE Elite – Casque PS5 sans fil (blanc) ...
Voir le deal
119 €

Partagez
 

Tableau de navigation qui empiète sur ses sous-menus

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://wild-instinct-rpg.forumactif.com/
Skaëlle
Skaëlle
{ Membre }
{ Membre }

Féminin Messages : 12



Tableau de navigation qui empiète sur ses sous-menus Empty
Bien le bonjour everbody =3

Herp, encore moi, je sais. Mais je suis très nulle en CSS et HTML, ne pas taper merci. ._." Bref, je viens à demander votre aide pour un tableau qui depuis hier me fait sans arrêt bidouiller ce fichu CSS. D: Le forum sur lequel je travaille est fermé pour le moment (enfin juste fermé officiellement mais il est parfaitement accessible), donc ce n'est pas trèèèès urgent mais une réponse me ferait très plaisir. Alors, ça se passe sous IE, je n"ai pas eu le temps de vérifier sous Firefox, et en fait, le tableau est bien itou itou mais le soucis c'est que quand les sous-menu s'affichent, ils sont mangés par le fond des menus de base. Je ne saurais pas vraiment expliquer et imager serait assez délicat vu l'état de mon ordinateur, je vous envoie donc là: http://trc-world-tsubasa.forumactif.com/index.htm
Ne faites pas attention au vert de la barre de naviguation j'ai pas fini! .3. Bref, voici mes codes, parce que je suppose que sans codes le problème ne pourra pas être détecté xD

CSS:
Code:
/*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/
div#menu {
width: 120px;
background-image: url("http://www.generation-upload-fr.com/upload2/34143pattern7.1.jpg");
}

div#menu ul {
padding: 0;
width: 120px;
border:1px solid;
margin:0px;
}
/*On positionne les elements du menu */
div#menu ul li {
position:relative;
list-style: none; /*on enleve les icones de liste */
border-bottom:2px solid; /*ajout d'une bordure de separation d'element:*/
background-image: url("http://www.generation-upload-fr.com/upload2/34143pattern7.1.jpg");
}

div#menu ul ul {
position: absolute;
top: 0;
left: 100px; /*100px correspond au décalage a droite, on décale de la taille du ul de base*/
background-image: url("http://www.generation-upload-fr.com/upload2/34143pattern7.1.jpg");


div#menu li a {
text-decoration: none; /* plus de soulignement pour les liens */
}

 /*fond jaune pr les sous-menu*/
div#menu li.sousmenu {
background: 000000;
background-image: url("http://www.generation-upload-fr.com/upload2/34143pattern7.1.jpg");
}

 /* fichier pour internet explorer */
body {
behavior: url(csshover.htc);
}

/* On cache tous les sous menu avec la propriété display none */
div#menu ul ul {
position: absolute;
top: 0;
left: 100px;
display:none
}

/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
display:block;
background-image: url("http://www.generation-upload-fr.com/upload2/34143pattern7.1.jpg");
}

En effet, j'ai utilisé le code fourni sur une demande de code sur le forum, après j'ai bidoumerdé le tout Very Happy Bon, et le HTML du tableau donc :

Code:
<p id="menu123"><div id="menu">
  <ul class="niveau1">
      <li class="sousmenu"><a href="menu 1">menu 1</a>
        <ul class="niveau2">
            <li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
            <li><a href="Sous menu 2.2/">Sous menu 2.2</a></li>
<li><a href="Sous menu 2.3/">HOYOYO</a></li>
<li><a href="Sous menu 2.4/">Sous menu 2.2</a></li>

        </ul>
      </li>
      <li class="sousmenu"><a href="menu 2">menu 2</a>
        <ul class="niveau2">
            <li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
            <li><a href="Sous menu 2.2/">Sous menu 2.2</a></li>
<li><a href="Sous menu 2.3/">Sous menu 2.2</a></li>
        </ul>
      </li>
      <li class="sousmenu"><a href="menu 3">menu 3</a>
        <ul class="niveau2">
            <li><a href="Sous menu 2.1">Prédéfinis</a></li>
            <li><a href="Sous menu 2.2/">Puêt</a></li>
<li><a href="Sous menu 2.3">Test</a></li>

        </ul>
      </li>
  </ul>
</div>
</p>
  </div>

Je crois que j'ai pris un peu plus que le tableau à la fin... .__. No blémo je crois pas que ça dérange, siiiii? *se fait frapper*

Merci d'avance ~
MessageSujet: Tableau de navigation qui empiète sur ses sous-menus   Tableau de navigation qui empiète sur ses sous-menus EmptyVen 12 Fév 2010, 02:59
Revenir en haut Aller en bas
http://abcd.com
Scali
Scali
{ Membre }
{ Membre }

Féminin Messages : 41



Tableau de navigation qui empiète sur ses sous-menus Empty
Bonjour Smile

Sur ces deux codes >>

Code:
/*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/
div#menu {
width: 120px;
background-image: url("http://www.generation-upload-fr.com/upload2/34143pattern7.1.jpg");
}

div#menu ul {
padding: 0;
width: 120px;
border:1px solid;
margin:0px;
}

Essaye avec la taille 100 et non 120.

Je viens de tester et chez moi, ça fonctionne Wink

scali.
MessageSujet: Re: Tableau de navigation qui empiète sur ses sous-menus   Tableau de navigation qui empiète sur ses sous-menus EmptyVen 12 Fév 2010, 04:00
Revenir en haut Aller en bas
http://wild-instinct-rpg.forumactif.com/
Skaëlle
Skaëlle
{ Membre }
{ Membre }

Féminin Messages : 12



Tableau de navigation qui empiète sur ses sous-menus Empty
Ha oui c'est parfait merci infiniment <3
MessageSujet: Re: Tableau de navigation qui empiète sur ses sous-menus   Tableau de navigation qui empiète sur ses sous-menus EmptyVen 12 Fév 2010, 12:38
Revenir en haut Aller en bas
http://abcd.com
Scali
Scali
{ Membre }
{ Membre }

Féminin Messages : 41



Tableau de navigation qui empiète sur ses sous-menus Empty
Pas d'quoi Paix
MessageSujet: Re: Tableau de navigation qui empiète sur ses sous-menus   Tableau de navigation qui empiète sur ses sous-menus EmptyVen 12 Fév 2010, 15:18
Revenir en haut Aller en bas
Contenu sponsorisé




Tableau de navigation qui empiète sur ses sous-menus Empty
MessageSujet: Re: Tableau de navigation qui empiète sur ses sous-menus   Tableau de navigation qui empiète sur ses sous-menus Empty
Revenir en haut Aller en bas
 

Tableau de navigation qui empiète sur ses sous-menus

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» <Navigation> Mettre une Image sous la Barre de Navigation
» image qui passe sous la barre de navigation
» Barre Navigation sous message accueil
» Liens pour barre de navigation et de sous-forums
» Barre de navigation sous la date/heure actuelle

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit