nav déclaré dans header s'affiche en dehors...
nav déclaré dans header s'affiche en dehors... - HTML/CSS - Programmation
Marsh Posté le 04-11-2012 à 18:56:40
J'ai trouvé des solutions en changeant certains "display". Je ne sais pas si je reste dans la norme, mais cela fonctionne.
Marsh Posté le 07-11-2012 à 14:41:53
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.
Marsh Posté le 07-11-2012 à 15:03:42
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
Marsh Posté le 08-11-2012 à 05:52:20
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
Marsh Posté le 08-11-2012 à 11:38:52
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
Marsh Posté le 08-11-2012 à 12:26:43
| gatsu35 a écrit : KLeMiX, on est en 2012 et en 2012 on utilise la balise <header> qui fait partie des nouvelles balises du HTML5 |
![[:panzemeyer]](https://forum-images.hardware.fr/images/perso/panzemeyer.gif "[: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
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
Marsh Posté le 04-11-2012 à 15:32:48
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