Pourquoi ma barre de navigation est-elle brouillée lorsque l'écran est tendu? Aussi, pourquoi mes entêtes interfèrent-elles avec?

Question

Voici le jsFiddle pour elle http://jsfiddle.net/8PcxE/

<div id="container"> 
     <div id="header"> 
       <div id="nav-container"> 
        <ul id ="nav-list"> 
         <li id=nav-title>lymbo</li> 
         <li><a href="#">Playmaps</a></li> 
         <li><a href="../map.html">Map</a></li> 
         <li><a href="../about.html">About</a></li> 
         <li><a href="#">My Account</a></li> 
         <li><a href="#">Log Out</a></li> 
        </ul> 
       </div> 
     </div> 

Il est très bien sur une page plus large, mais quand je le lance sur une petite page est tout à l'étroit et les options s'accolés faire un modèle semblable à fermeture à glissière.

Mon autre problème est que lorsque je tape quelque chose dans mes en-têtes ou dans mes paragraphes, ce sera en haut et en intersection avec ma barre de navigation, ce qui me donne l'impression d'être en désordre.

Mon but est de faire une sorte de barre de navigation à la recherche d'un dégradé, d'où les ombres. Mais cela ne semble pas non plus bien paraître. Si quelqu'un peut me donner son avis, ce serait très apprécié.

J'ai trouvé qu'après avoir changé mon CSS nav-container à la position: relative de la position: fixed cela fonctionne. Y a-t-il des effets négatifs de faire cela?

Answer 1

Puisque vous avez changé tous les <li>-inline, la solution la plus simple serait d'empêcher l'emballage sur le <ul>:

#nav-list { 
    white-space: nowrap; 
    /* ... */ 
} 

http://jsfiddle.net/mblase75/Lt72p/