web-dev-qa-db-ja.com

HTMLリスト/ナビゲーションメニューに画像/ロゴを追加する

ブログのページリストにフローティングナビゲーションメニューを作成していて、そのリスト内でリンクの1つをロゴに変更しようとしています。このナビゲーションメニューの背景にロゴを含めるだけの場合もありますが、私の問題は、ロゴが下のものと重なるリボンのようなものであり、背景の一部である場合は切り取られることです。

ここに 私が言っていること。

現時点では、ロゴは別の画像ですが、両方を接続し、別の「リンク」として含めたいと思います。そうしないと、下にあるものが隠れてしまうためです。

使用される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>

そして私が使用した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;
    }

.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

画像要素にロゴを配置します。ロゴをホームページにリンクする場合は、リンクで囲みます。

左の例 および 中央の例 を参照してください。

中央に配置するには：ロゴを左にフロートさせ、ナビゲーションに幅を与えます。ナビゲーションを2つのulに分割し、ナビゲーションのIDをナビゲーションのクラスに変更します。

2つのulの間にロゴ画像を配置します。

これをCSSに追加します。

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

2つのナビゲーションulの間にある画像：

#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

リストアイテム内に要素を追加できるので、以下のコードを試してみて、これが目的に近づくかどうかを確認してください。これがロゴを含むリストアイテムのhtmlです。メニューの中央に配置したい場合は、他のリストアイテムの間にスライドさせるだけです。

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

これがCSSです。ページを縮小するとメニュー項目が別の行を開始し、柔軟な高さがすべてのメニュー項目を含むように拡張されるため、ナビゲーションに最小の高さを割り当てるか、高さを省略します。

#nav {
 min-height:66px;
}

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

Liメニュー項目にinline-blockを使用する場合は、inline-blockにvertical-align：topが必要であることを忘れないでください。各アイテムの周りに小さなギャップがあります。ギャップは簡単に取り除くことができます。インラインブロックに関する優れた記事は次のとおりです。 http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and -why-it-sucks /

ブラウザの開発者ツールの使用

ほとんどのブラウザでF12をクリックして、開発ツールを開くことができます。ブラウザに応じて、ページ内の個々の要素をクリックしてCSSとHTMLを表示したり、コードを編集、追加、または削除したりできます。これは、トラブルシューティングを行うとき、または要素がどのように構築されるかを確認するときに非常に役立ちます。実際のhtmlコードを編集してからブラウザーを更新するまでの間を行ったり来たりするのではなく、ブラウザーでコードを編集して結果を確認できます。現在、CodeSchool.comは、Chromeの開発者ツールに関する非常に優れた無料コースを提供しています： https://www.codeschool.com/courses/discover-devtools 。

2
Talkingrock

これが JSFiddleデモ ：

CSSと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;
}

これがお役に立てば幸いです。

1
jignesh kheni