2015-04-15 3 views
-2

Я пытаюсь воспроизвести заголовок/nav (от www.mineplex.com) для моего сайта, но мне нужна помощь. Я пытаюсь, но он не работает. Помощь ваших ребят будет очень благодарна. Вот код, который у меня есть.Регулировка высоты и центрирования

body { 
 
    font-family: Helvetica; 
 
    margin: auto; 
 
    width: 100%; 
 
} 
 

 
#header { 
 
    background: #383838; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
#container { 
 
    margin: 0 auto; 
 
} 
 

 
#logo { 
 
    color: white; 
 
    font-size: 15; 
 
    text-align: center; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Website</title> 
 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
 
    </head> 
 
\t 
 
    <body> 
 
    <!-- IGNORE THIS! THIS IS FOR LiveReload --> 
 
    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> 
 
    <!-- IGNORE THIS! THIS IS FOR LiveReload --> 
 
\t \t 
 
    <div id="header"> 
 
     <div id="container"> 
 
     <div id="logo"> 
 
      <h1>WEBSITE</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

+0

Там, кажется, не будет много работы сделано до сих пор. Постарайтесь хотя бы поместить ваши элементы в заголовок вместо текста заполнителя. – austinthedeveloper

+0

@austinthedeveloper Ok. Можете ли вы рассказать мне, как добавить темный div под заголовком? – tristianchase

+1

Вы можете много узнать о компонентах сайта через ** проверить элемент ** .. если вы еще не пробовали этого. – shaneparsons

ответ

0

Вот как добавить темный бар в вашем заголовке. DEMO

HTML:

<div id="header"> 
<div id="container"> 
    <div id="logo"> 
      <h1>WEBSITE</h1> 

    </div> 
</div> 
<div class="header-bottom"></div> 
</div> 

CSS:

body { 
font-family: Helvetica; 
margin: auto; 
width: 100%; 
} 
#header { 
background: #383838; 
position: fixed; 
top: 0; 
width: 100%; 
} 
#container { 
margin: 0 auto; 
} 
#logo { 
color: white; 
font-size: 15; 
text-align: center; 
} 
.header-bottom { 
width:100%; 
height:25px; 
background:#1E2224; 
box-shadow: 0px 5px 5px #888888; 
} 
Смежные вопросы