2016-05-25 2 views
1

Я пытаюсь получить навигационную панель, чтобы показать вверху веб-страницы, с горизонтальными кнопками внутри чистой коробки. Очень похоже на навигатор, найденный по адресу http://www.apple.com/. Мне кажется, что я должен знать, как это сделать, но, видимо, я этого не делаю. Любая помощь очень ценится, или даже точки и советы. Спасибо, а ниже - код, который у меня есть. Сначала показан Css, а затем мой HTML. HTML-панель навигации, закрепленная в верхней части веб-страницы, горизонтальные окна (кнопки)

body{ 
 
    border: solid; 
 
    background-color: white; 
 
    color: black; 
 
    text-align: center; 
 
} 
 

 
table.slideshow{ 
 

 

 
} 
 
th.slideshowtitle{ 
 
    text-align: center; 
 

 
} 
 

 
footer{ 
 
    border-top: solid 10px; 
 

 

 
} 
 

 
/*nav bar*/ 
 
.navbar-inverse { 
 
    background-color:black; 
 
}
<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <link href="C:\Users\Chester Szydlowski\Desktop\HOF\stylesheet.css" type="text/css" rel= "stylesheet" /> 
 
<title> 
 
    Hall Of Framers 
 
</title> 
 
</head> 
 
<body> 
 

 
<nav class ="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <u1 class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="C:\Users\Chester Szydlowski\Desktop\HOF\public_html\EmailList.html">Email List</a></li> 
 
      <li><a href="">Custom Frames</a></li> 
 
      <li><a href="">News</a></li> 
 
      <li><a href="">Silent Auction</a></li> 
 
      <li><a href="">Upcoming and Past Events</a><li> 
 
      <li><a href="">i dont know</a></li> 
 
     </u1> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 

 
<p> Products </p> 
 

 
</table> 
 
</body>

+0

У вас есть позиция: исправлена; в вашем css, или это единственный css, который я вижу выше? и где ваш javascript? – mlegg

ответ

1

Если добавить селектор отображения CSS к элементам «Ли», он будет делать трюк

Добавьте следующие строки в CSS.

li{ 
    display:inline-block; 
    } 

Это перемещает элементы рядом друг с другом, и вы можете отстроить их дальше оттуда. Удачи

+0

Спасибо! Это сработало сразу. –

+1

Нет проблем! Сообщите мне, нужна ли вам дополнительная помощь по стилю. – Noah

1

Похоже, ваш навигатор использует классы boostrap. Если да, просто загрузите и включите boostrap.css.

+0

Я рассмотрю это, поскольку я не знаком с классами начальной загрузки, спасибо! –