2014-11-04 2 views
-3

Я попытался поместить навигатор в заголовок, но не успел. Я искал этот сайт, но я не смог найти ответ.Navbar на заголовке?

EDITED: добавлена ​​разметка html.

Here the picture

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>"New York City"</title> 
<meta charset="uft-8"> 
<style> 


@font-face { 
    font-family: Breamcatcher; src: url('Breamcatcher.ttf'); 
} 

body { 
    background: url("New York City Night.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
} 

#header { 
    margin: auto; 
    background-color: black; 
    /*Opacity start*/ 
    opacity: 0.8; 
    filter: alpha(opacity=80); /* For IE8 and eariler */ 
    /*Opacity end*/ 
    font-family: Breamcatcher, san-serif; 
    font-size: 500%; 
    text-align: center; 
    top: 0; 
    left: 0; 
    width: 1000px; 
    height: 300px; 
    padding: 0; 
} 

span.header2 { 
    margin: auto; 
    color: orange; 
    font-size: 185%; 
} 

    </style> 
    </head> 
    <body> 

    <div id="header"><span class="header2"> New York City </span></div> 

    </body> 
    </html> 

Как поместить ее в заголовке? Также как добавить логотип? Спасибо!

Here the picture

+1

Есть ли какой-нибудь html для публикации? – starvator

+1

Поделитесь своей разметкой HTML слишком – DaniP

+1

ссылка на ваш сайт, если она опубликована –

ответ

0

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

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

<div id="header"> 
    <span class="header2">New York City</span> 
    <nav> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Press</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</div> 

Затем вам нужно добавить некоторые CSS, так что list items отображение в одной горизонтальной линии, как это:

nav ul > li { 
    display:inline-block; 
    font-size:16px; 
} 

Вы можете увидеть пример (без фона изображение) here. Оттуда вы можете добавить еще несколько CSS, чтобы они выглядели так, как вы хотите.

Вы также упомянули о том, что хотите добавить логотип, вы имели в виду в дополнение к span, который у вас есть в заголовке? Я бы назвал «Нью-Йорк Сити» span «логотипом». Дайте нам еще несколько кодов/деталей, если вам нужна дополнительная помощь.

Наконец-то у вас есть кавычки вокруг «Нью-Йорка» в теге title. Эти кавычки не нужны, если вы не предназначались для них.