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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : nav déclaré dans header s'affiche en dehors...

absrv

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

Publicité

absrv

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

Lastwish

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.

KLeMiX

Laisse pas trainer ton site

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

gatsu35

Blablaté par Harko

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>

Message cité 1 fois

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

Lastwish

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

KLeMiX

Laisse pas trainer ton site

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

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 Safari	différence de perfs énorme entre Linux/Windows avec CUDA
Différence de chargement d'une API entre exécution class et Jar	Diffé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'autre	Différence finie sous Excel
Plus de sujets relatifs à : nav déclaré dans header s'affiche en dehors...

Page générée en 0.043 secondes