web-dev-qa-db-fra.com

Ajouter une image/un logo dans une liste HTML/un menu de navigation

Je crée un menu de navigation flottant pour la liste de pages de mon blog. Dans cette liste, j'essaie de modifier l'un des liens de mon logo. Certains voudraient simplement inclure le logo à l'arrière-plan de ce menu de navigation, mais le problème est que le logo ressemble à un ruban qui recouvre les éléments ci-dessous et qu'il fait partie de l'arrière-plan. 

Voici ce que je veux dire.

Pour le moment, le logo est une image distincte, mais j'aimerais relier les deux et l'inclure en tant que «lien», car sinon, il cache les éléments situés en dessous.

html UTILISÉ:

<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 que 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;
}
htmlcsshtml-listsuinavigationbar
3
Joeono

Placez le logo dans un élément d'image. Si vous souhaitez que le logo soit lié à votre page d'accueil, insérez-le dans un lien.

Voir exemple left et exemple centré .

Pour centrer: Flottez le logo à gauche et donnez une largeur au nav. Divisez la navigation en deux uls et changez l'identifiant de navigation en une classe de navigation.

Placez l'image du logo entre les deux uls.

Ajoutez ceci à votre CSS:

#logo { float: left; }
#nav { width: 1500px; /* Too large, just an example */ }
.navigation { float: left; }

L'image entre vos deux uls de navigation:

#logo {
  float: left;
}

#nav {
  width: 1500px;
  /* Too large, just an example */
}

.navigation {
  float: left;
  list-style: none;
  padding: 0;
}
<div id='nav'>
  <ul class='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>
  </ul>
  <img src="http://placehold.it/152x198" id="logo" />
  <ul class="navigation">
    <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>

1
misterManSam

Vous pouvez ajouter des éléments dans un élément de liste. Jouez avec le code ci-dessous et voyez si cela vous rapproche de ce que vous voulez. Voici le code HTML pour l'élément de la liste qui contient le logo. Il suffit de le glisser entre vos autres éléments de liste, si vous le souhaitez au centre du menu.

<li>
<a href="#">
<span class="span-logo">
<img src="your-logo-goes-here.png" />
</span>
</a>
</li>

Voici le CSS. Vous voudrez peut-être attribuer une hauteur minimale à votre navigation ou laisser la hauteur de côté, car lorsque vous réduisez la page, les éléments de menu commencent par une autre ligne et une hauteur flexible s’agrandit pour inclure tous les éléments de menu.

#nav {
 min-height:66px;
}

.span-logo {
display: inline-block;
vertical-align: top;
height: 118px;
width: 152px;
}

Si vous décidez d'utiliser inline-block pour vos éléments de menu li, rappelez-vous que inline-block nécessite vertical-align: top; et a un petit espace autour de chaque article. L’écart est facile à éliminer et voici un bon article sur inline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why -il-suce/

Utilisation des outils de développement du navigateur

Vous pouvez cliquer sur F12 dans la plupart des navigateurs pour ouvrir les outils de développement. En fonction de votre navigateur, vous pouvez cliquer sur des éléments individuels dans la page pour afficher ses CSS et HTML, et vous pouvez modifier, ajouter ou supprimer le code. Ceci est très utile pour dépanner ou pour voir comment un élément est construit. Vous pouvez modifier le code dans le navigateur et voir les résultats, par opposition à un retour en arrière entre la modification de votre code HTML actuel et l'actualisation du navigateur. Actuellement, CodeSchool.com propose un très bon cours gratuit sur les outils de développement de Chrome: https://www.codeschool.com/courses/discover-devtools . 

2
Talkingrock

Voici la démo JSFiddle :

J'ai également modifié vos structures CSS et HTML.

HTML: 

 <div id='nav'>
   <div class="nav-inner">
    <p class='title'><a href='#'>Space Heroes Fansite</a></p>
    <ul id='navigation'>
        <li><a href='#'>Blog</a></li>
        <li><a href='#'>Crew</a></li>
        <li><a href='#'>Promos</a></li>
        <li><a href='#'>Tricks</a></li>
        <li><a href='#'>Parties</a></li>
        <li class="clear"> </li>
   </ul>

   <div class=" main_logo">
     <a href='#' class="logo_li">
       <span class='span-logo'>
          <img src='http://1.bp.blogspot.com/-5l0RRPCgqfw/UqDmPP5mLnI/AAAAAAAADbk/i4ohihy8wHg/s1600/header+badge3.png'/>
       </span>
     </a>
   </div>

   <ul id='navigation'>
     <li><a href='#'>P.J. Squad</a></li>
     <li><a href='#'>Chat</a></li>
     <li><a href='#'>Fanart</a></li>
     <li><a href='#'>Graphics</a></li>
     <li><a href='#'>Beta</a></li>
     <li class="clear"> </li>
  </ul>
  <div class="clear"></div>
  </div>
</div>

CSS:

#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;
   left:0px;
   right:0px;
 }
 .nav-inner{ 
      width:1373px; 
      margin:auto;
 }
 .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;
    padding:0px; 
    float:left;
    width:auto; 
    margin:0px auto 0px;
 }

 li { 
   display:block;
   float:left;
   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;
 }

.span-logo {
   margin-top:-100px;
   display: inline-block;
   vertical-align: top;
   height: 105px;
   width: 152px;
   margin-top:0px;

}
div.main_logo{ 
    padding:0px; 
    float:left
}
#nav div a.logo_li{ 
  opacity:1
}
.span-logo img{ 
   width:100%; 
   height:auto; 
}
.clear{ 
  width:0px; 
  height:0px; 
  content:''; 
  display:table; 
  clear:both; 
  float:none;
}

J'espère que cela t'aidera.

1
jignesh kheni