Добавить изображение/логотип в HTML-список/Меню навигации

Question

Я создаю плавающее меню навигации для своего списка страниц в своем блоге, и в этом списке я пытаюсь изменить одну из ссылок на свой логотип. Некоторые из них просто включают логотип на фоне этого меню навигации, но моя проблема заключается в том, что логотип похож на ленту, которая перекрывает все, что находится ниже, и если бы она была частью фона, она была бы отключена.

Here's что я имею в виду.

В настоящий момент логотип представляет собой отдельное изображение, но я хотел бы связать их и включить в него как «ссылку», потому что иначе он скрывает вещи под ним.

HTML USED:

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

Answer 1

Поместите логотип в элементе изображения. Если вы хотите, чтобы логотип был привязан к вашей домашней странице, оберните его ссылкой.

См. example left и example centered.

В центре: поместите логотип влево и дайте навигационной ширине. Разделите навигацию на два uls и измените идентификатор навигации на класс навигации.

Поместите изображение логотипа между двумя uls.

Добавьте это в CSS:

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

Образ между вашими двумя навигационными ULS:

#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>

Answer 2

Вы можете добавлять элементы внутри элемента списка, так что играть вокруг с кодом ниже и посмотреть, приближается ли это к тому, что вы хотите. Вот 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; 
} 

Если вы решили использовать встроенный блок для пунктов меню Ли, помните встроенный блок необходим вертикальный выравнивать: сверху; и имеет небольшой промежуток вокруг каждого элемента. Зазор легко удалить, а вот хорошая статья на встроенный блок: 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.

Answer 3

Вот JSFiddle demo:

Я сделал изменения в ваших 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; 
} 

Я надеюсь, что это поможет.