Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1154 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  nav déclaré dans header s'affiche en dehors...

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

nav déclaré dans header s'affiche en dehors...

n°2162464
absrv
Posté le 04-11-2012 à 15:32:48  profilanswer
 

Bonjour la communauté,
je ne comprends pas pourquoi mon nav, déclaré dans le header, s'affiche en dessous...
 
html :
<header>
    <nav>
        <ul>
            <li><a href="#">Home</a>
       <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
     <li><a href="#">4</a></li>
    </ul></li>
            <li><a href="#">Example 1</a></li>
            <li><a href="#">Example 2</a></li>
            <li><a href="#">Example 3</a></li>
        </ul>
    </nav>
</header>
 
.css
header, section, article, footer {
 padding:10px 20px 20px;
 margin:10px;
 border:1px solid #e7e2d7;
 border-radius:8px;
 -webkit-border-radius:.8em;
 -moz-border-radius:.8em;
}
 
header {
 display:block;
 position:relative;
 text-align:left;
}
 
header img {
 position:absolute;
 left:20px;
 top:18px;
}
nav a{
    display:block;
 text-align: center ;
    color: #444444;  
    text-decoration:none;  
}
nav li, nav li li  {
    position: relative;  
    display:inline-block;  
    padding: 6px 15px;  
    background-color: #111;  
    background-image: linear-gradient(#aaa, #222 50%, #111 50%,#333);  
}
nav li li { background: transparent none; }  
nav li li a {
 color: #444;
    text-align: left ;
}  
nav li li:hover { background:#eee; }  
nav li:first-child {  
    border-radius: 8px 8px 8px 8px;  
}  
nav li + li {  
    border-radius: 8px 8px 8px 8px;  
}  
nav li:last-child {  
    border-radius: 8px 8px 8px 8px ;  
}  
nav li:hover {  
    background-color: #999;  
    background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);  
}  
nav ul {  
    position: absolute;  
    top: 2em; left:0;  
    max-height:0em;  
    margin:0; padding:0;  
    background-color:#ddd;  
    background-image: linear-gradient(#fff,#ddd);  
    overflow:hidden;  
    transition: 1s max-height 0.3s;  
    border-radius: 8px 8px 8px 8px;  
}  
nav li:hover ul {  
    max-height:20em;  
}  
 
Un aperçu avec firebug : http://imageshack.us/photo/my-images/18/navexq.png/
Merci aux bonnes âmes...


Message édité par absrv le 04-11-2012 à 16:07:40
mood
Publicité
Posté le 04-11-2012 à 15:32:48  profilanswer
 

n°2162468
absrv
Posté le 04-11-2012 à 18:56:40  profilanswer
 

J'ai trouvé des solutions en changeant certains "display". Je ne sais pas si je reste dans la norme, mais cela fonctionne.

n°2163013
Lastwish
Posté le 07-11-2012 à 14:41:53  profilanswer
 

Tu devrais mettre ton nav dans une balise <div id="nav"></div> et dans ton css tu met #nav {position: absolute; left: ()se que tu veux) px; top: (idem)px; ...etc} je suppose que tu souhaite garder ton navigateur sur plusieurs pages, donc pour moi c'est le meilleurs moyen. je n'ai pas regarder tout ton code j'ai pas encore dormis (dur,dur) mais il me semble que tu as oublier une balise fermente </li> en haut de ton nav.

n°2163019
KLeMiX
Laisse pas trainer ton site
Posté le 07-11-2012 à 15:03:42  profilanswer
 

Le header c'est pour donner des info a ton navigateur, c'est pas ton entete de site.
 
Le htlm c'est dans le body


---------------
www.pronovolley.fr Faites vos prono sur la ligue de Volley et défiez vos amis. Des cadeaux en fin d'année  www.levoll.fr
n°2163149
gatsu35
Blablaté par Harko
Posté le 08-11-2012 à 05:52:20  profilanswer
 

KLeMiX, on est en 2012 et en 2012 on utilise la balise <header> qui fait partie des nouvelles balises du HTML5 :), on ne parlait pas de <head>


---------------
Blablaté par Harko
n°2163174
Lastwish
Posté le 08-11-2012 à 11:38:52  profilanswer
 

Oui c'est les balises structurantes<header>, <footer>, <nav>, <section>..etc, qui se trouves dans le <body>.

 

Ducoup enfaite pas besoin de div (chui con) tu as juste besoin de positionné ton nav donc dans ton css tu utilise : nav
                                                                                                                                                          {
                                                                                                                                                             position: absolute;
                                                                                                                                                             left: 10px; (10 px à titre d'exemple)
                                                                                                                                                             top: 10px;
                                                                                                                                                           }
et logiquement ça devrais le faire. Un conseil, pense à bien indenté ton code même pour ton css


Message édité par Lastwish le 08-11-2012 à 11:59:09
n°2163179
KLeMiX
Laisse pas trainer ton site
Posté le 08-11-2012 à 12:26:43  profilanswer
 

gatsu35 a écrit :

KLeMiX, on est en 2012 et en 2012 on utilise la balise <header> qui fait partie des nouvelles balises du HTML5 :), on ne parlait pas de <head>


 [:panzemeyer]  
 
Je vais me mettre a jour ;)


---------------
www.pronovolley.fr Faites vos prono sur la ligue de Volley et défiez vos amis. Des cadeaux en fin d'année  www.levoll.fr

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  nav déclaré dans header s'affiche en dehors...

 

Sujets relatifs
Différence d'affichage d'un tableau dans une div avec IE et Safaridifférence de perfs énorme entre Linux/Windows avec CUDA
Différence de chargement d'une API entre exécution class et JarDifférence entre strong/em/mark
La différence entre "ejb-jar_3_1.xsd" et "ejb-jar.xml" ? la différence entre le test de charge et le test de monté en charge
Calculer la différence entre deux dates (VBA)différence arbre binaire et arbre binaire de recherche
Différence d'affichage d'un navigateur à l'autreDifférence finie sous Excel
Plus de sujets relatifs à : nav déclaré dans header s'affiche en dehors...


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR