Menu - Forum

Menu [Réglé]

Créations de Thèmes

ReidLos Membre non connecté

Equipe Développement Modérateur

Le 13/02/2013 à 08h48

#123532

Modérateur
Voir le profil du membre ReidLos
Inscrit le : 27/02/2009
Site internet
Groupes :
Equipe Développement

Reprise du message précédent

ElenWii : Normalement les menus devrait être positionné correctement sur le thème base ? Tu peux regarder ?

babsolune Membre non connecté

Equipe Développement Administrateur

Le 13/02/2013 à 09h23

#123540

Administrateur
Voir le profil du membre babsolune
Inscrit le : 16/05/2008
Site internet
Groupes :
Equipe Développement

ReidLos :

ElenWii : Normalement les menus devrait être positionné correctement sur le thème base ? Tu peux regarder ?

"bout d'image ne fait pas réalité"

ils le sont mais il semble qu'il ait déclaré son menu dans le subheader qui contient deja le mini_connect, probleme de place=> le menu est décalé vers la bas, logique (non?)

Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site

Shoot Membre non connecté

Booster Bazooka

Le 13/02/2013 à 17h13

#123601

Booster Bazooka
Voir le profil du membre Shoot
Inscrit le : 14/08/2012
Groupes :

Effectivement quand je bouge le menu le mini_connect il se place bien dans la bande noire

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 24/02/2013 à 10h24

#124369

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

As tu réussi a faire ce que tu voulais shoot ?

ElenWii

Shoot Membre non connecté

Booster Bazooka

Le 25/02/2013 à 12h16

#124440

Booster Bazooka
Voir le profil du membre Shoot
Inscrit le : 14/08/2012
Groupes :

Salut,

Non pas vraiment, j'essaie mais sa ressemble à rien donc je supprime et retente mais toujours pareil lol

Merci

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 25/02/2013 à 12h40

#124442

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Qu as tu réussi a faire ?

ElenWii

Shoot Membre non connecté

Booster Bazooka

Le 25/02/2013 à 22h35

#124476

Booster Bazooka
Voir le profil du membre Shoot
Inscrit le : 14/08/2012
Groupes :

Le coté html (est encore) mais pas le css

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 25/02/2013 à 23h49

#124478

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Il te fait appliquer une taille au texte (font-size), et une couleur (color).
La balise li doit prendre toute la hauteur (height) et largeur(width) pour appliquer une bordure (border-bottom) à chaque item.

Fait voir ton code HTML

ElenWii

Shoot Membre non connecté

Booster Bazooka

Le 26/02/2013 à 14h40

#124499

Booster Bazooka
Voir le profil du membre Shoot
Inscrit le : 14/08/2012
Groupes :

Voila se que se je viens de faire à l'instant

Code HTML :

<html>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="menu">
  <ul>
    <li>
      <a href="#">Accueil</a>      
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Serveur</a>
      <ul>
        <li><a href="#">Jeux</a></li>
        <li><a href="#">Teamspeak</a></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Telechargement</a>
      <ul>
        <li><a href="#">Maps</a></li>
        <ul>
          <li><a href="#">Urban-Terror</a></li>
          <li><a href="#">Counter-Strike</a></li>
        </ul>
      </ul>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Contact</a>      
    </li>
  </ul>
</div>
</html>

Code CSS :

#menu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    list-style: none;
    text-align: center;
}
 
#menu li {
    list-style:none;
    float: left;
    position: relative;
    background-color: #01B0F0;
}
 
#menu ul li a {
    color: #fff;
    text-decoration: none;
    width: 150px;
    height:30px;
    display: block;
    text-align: center;
    border:1px solid #000;
    text-shadow:1px 1px 1px #FF0000;
}
 
#menu ul ul{
    position: absolute;       
    top: 31px;
    visibility: hidden; 
}
 
#menu ul li:hover ul {
    visibility: visible;
}
#menu li:hover{
    background-color:#fff;
}
 
#menu ul li ul a:hover{
    color:#fff;
    background-color: #000;
}
 
#menu li ul ul li{
    visibility: hidden;
}
 
#menu li ul:hover ul li {
    visibility: visible;
}
 
#menu li ul ul li a:hover{
    background-color: #999;

Édité par Shoot Le 26/02/2013 à 16h15

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 07/03/2013 à 23h03

#125081

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Bonsoir,

desoler du retard pour la réponse, en déplacement.

Tu utilise bcp trop de balise <ul>.

La balise <ul> doit encadrer tes balises <li>.

regarde cette exemple :

Code HTML :

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

ElenWii

Shoot Membre non connecté

Booster Bazooka

Le 10/03/2013 à 03h17

#125167

Booster Bazooka
Voir le profil du membre Shoot
Inscrit le : 14/08/2012
Groupes :

Salut

Citation :

desoler du retard pour la réponse, en déplacement.

Pas de soucis, sa ne presse pas sinon j'aurais fait un up

Citation :

Tu utilise bcp trop de balise <ul>

Ah pourtant j'ai suivi un tutoriel lol

Je vais réessayer Merci

Shoot Membre non connecté

Booster Bazooka

Le 12/03/2013 à 14h37

#125310

Booster Bazooka
Voir le profil du membre Shoot
Inscrit le : 14/08/2012
Groupes :

Salut

Alors voila se que j'ai fait

Code HTML :

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
  <div id="Menu">
      <ul>
        <li><a href="#">Accueil</a></li>
      </ul>
      <ul>
        <li><a href="#">Serveur</a>
          <ul>
            <li><a href="#">Jeux</a></li>
            <li><a href="#">Teamspeak</a></li>
          </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Téléchargement</a>
          <ul>
            <li><a href="#">Maps</a></li>
            <li><a href="#">Démos</a></li>
          </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Membres</a></li>
      </ul>
      <ul>
        <li><a href="#">Contact</a>          
        </li>
      </ul>  
    </div> 
</head>
</html>

Code CSS :

#Menu {
width:750px;
margin:0;
padding:0;
}
 
#Menu ul{
margin:0;
padding:0;
line-height: 30px;
}
 
#Menu li {
margin:0;
padding:0;
list-style: none;
float: left;
position: relative;
background: #999;
border-bottom: green;
}
 
#Menu ul li a {
text-align: center;
font-family: "Comic Sans MS", cursive;
font-size: 12px;
text-decoration: none;
height: 30px;
width:110px;
display: block;
color: #FFF;
border: 1px solid #fff;
text-shadow: 1px 1px 1px #000;
}
 
#Menu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
 
#Menu ul li:hover ul{
visibility: visible;
}
 
#Menu li:hover {
background: #09F;
}
 
#Menu ul li:hover ul li a:hover{
background: #ccc;
color: #000;
}
 
#Menu a:hover {
color: #000;
border-width: 0px 0px 3px 0px;
border-style: outset;
border-color: green;
padding: 1px;
 
}

Je l'ai bien fait cette fois?

Édité par Shoot Le 12/03/2013 à 14h37

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 12/03/2013 à 14h55

#125311

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

non, la balise il est normalement utilisé pour regrouper un certain nombre de balise li.

ul = menu
li = élément de ton menu.

pour faire un sous menu, on imbrique le principe

tu y es presque