Ajouter une image/logo dans une page HTML-de la liste/menu de Navigation

Je suis de la création d'un flottant menu de navigation pour ma page liste dans mon blog, et à l'intérieur de cette liste, je suis en train de changer l'un des liens dans mon logo. Certains auraient suffit d'inclure le logo à l'arrière-plan de ce menu de navigation, mais mon problème est que le logo est comme un ruban qui chevauche les choses ci-dessous, et si elle faisait partie de l'arrière-plan, il sera coupé.

Voici ce que je veux dire.

Au moment où le logo est une image distinct, mais je voudrais le connecter à la fois, et d'inclure comme une autre "lien" parce que sinon, c'est de cacher les choses en dessous.

html:

<div id='nav'>
  <p class='title'><a href='#'></a></p>
  <ul id='navigation'>
    <li class='navigation-Blog'><a href='#'>Blog</a></li>
    <li class='navigation-Crew'><a href='#'>Crew</a></li>
    <li class='navigation-Promos'><a href='#'>Promos</a></li>
    <li class='navigation-Tricks'><a href='#'>Tricks</a></li>
    <li class='navigation-Parties'><a href='#'>Parties</a></li>
    <li class='navigation-P.J.Squad'><a href='#'>P.J. Squad</a></li>
    <li class='navigation-Chat'><a href='#'>Chat</a></li>
    <li class='navigation-Fanart'><a href='#'>Fanart</a></li>
    <li class='navigation-Graphics'><a href='#'>Graphics</a></li>
    <li class='navigation-Beta'><a href='#'>Beta</a></li>
  </ul>
</div>

et le CSS, j'ai utilisé:

 #nav
     {
      background: url(http://4.bp.blogspot.com/-dVtgikk-    kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top center;     background-color: none;
     width:100%;
     height:66px;
      box-shadow: 0px 1px 10px #5E5E5E;
      position:fixed;
      top:0px;
    }

.title
 {
display:none;
 color:#EDEDED;
 font-family:verdana;
 font-size:25px;
 width:350px;
 margin-top:6px;
 margin-left:150px;
 font-weight:bold;
 float:left;
}


#navigation
{
 list-style-type:none; 
}


li 
{ 

display:inline;
 padding:15px;
 }
#nav a
{
font-size: 1.6em;
text-transform: uppercase;
text-shadow: 0 0 0.3em #464646;
 font-weight: bold;
 font-family:century gothic;
  text-decoration:none;
 color:#262626;
 opacity:0.26;
} 
 #nav a:hover 
{
opacity:0.36;
}
  • pouvez-vous créer jsfiddle ?
  • Ouais, ici: jsfiddle.net/aSsy9 Aussi, min-height était une bonne idée, mais ne fonctionne pas désolé de le dire!
  • j'ai mis à jour jsfiddle et le code que je vous donne espère que cela va vous aider. @joeono
InformationsquelleAutor Joeono | 2013-12-06