Мой серебряный корпус не появляется

Question

HTML:

body{background-color:#0BC;} 
 

 
    .fixed-nav-bar{position: fixed; 
 
     top:0; 
 
     left:0; 
 
     right:0; 
 
     z-index:9999; 
 
     width:100%; 
 
     height:auto; 
 
     text-align: center; 
 
     background-color:#FFF;} 
 

 
    /*display the text on the same line*/ 
 
     #topnav li{display:inline;list-style-type:none;padding:20px} 
 

 
    /*removes underline format*/ 
 
     #topnav a{text-decoration:none;color:#00F;padding:5px;} 
 

 
    /*set hover effect*/ 
 
     #topnav a:hover{background-color:blue;color:#FFF;} 
 

 
    /*set background of about-box*/ 
 
     .silver-background{background-color:silver;} 
 

 
    /*create a bottom bar*/ 
 
     .bottom-bar {width:fluid; 
 
     padding:20px; 
 
     bottom:0; 
 
     left:0; 
 
     right:0; 
 
     position:absolute; 
 
     height:50px; 
 
     text-align:center; 
 
     background-color:#FFF;}

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 
 

 
    <nav class="fixed-nav-bar" id="topnav"> 
 
    <ul> 
 
     <p style="font-family:Lobster;font-size:30px;text">Stark</p> 
 
     <li><a href="top">About</li> 
 
     <li><a href="Portfolio">Portfolio</li> 
 
     <li><a href="Contact">Contact</li> 
 
    </ul> 
 
    </nav> 
 

 
    <div class="silver-background"> 
 
    <p>This is a column for personal background</p> 
 
    </div> 
 
    
 
    <div class="bottom-bar"> 
 
    <p>stark copyright 2016. All Rights Reserved.</p> 
 
    </div>

Я намеревался создать веб-страницы с Div элементов для тела. Используя приведенные выше коды, мне удалось создать верхний и нижний столбцы. Однако «серебристый фон» не выходит. Здесь нужны некоторые рекомендации.

Обновление: Вопрос о position:fixed был поднят многими пользователями здесь. Хотя я ценю комментарии и понимал проблему, из-за которой тело не появлялось, я хотел бы отметить, что намерение зафиксировать позицию фиксировано, потому что я хочу, чтобы верхняя панель меню всегда отображалась на экране во время прокрутки. Если кто-то захочет предоставить какие-либо советы о том, как сохранить его, при решении проблемы с телом, я был бы признателен.

Answer 1

попробовать это ..

body{ 
 
    background-color:#0BC; 
 
} 
 

 
.fixed-nav-bar{ 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    z-index:999; 
 
    width:100%; 
 
    
 
    text-align: center; 
 
    background-color:#FFF; 
 
    position: fixed; 
 
} 
 

 
/*display the text on the same line*/ 
 
#topnav li{ 
 
    display:inline; 
 
    list-style-type:none; 
 
    padding:10px; 
 
} 
 

 
/*removes underline format*/ 
 
#topnav a{ 
 
    text-decoration:none; 
 
    color:#54d; 
 
    padding:5px; 
 
} 
 

 
/*set hover effect*/ 
 
#topnav a:hover{ 
 
    background-color:blue; 
 
    color:#FFF; 
 
} 
 

 
/*set background of about-box*/ 
 
.silver-background{ 
 
    margin-top: 100px; 
 
    padding:20px; 
 
    background-color:silver; 
 
    min-height:500px; 
 
    text-align:center; 
 
} 
 

 
/*create a bottom bar*/ 
 
.bottom-bar { 
 
    width:fluid; 
 
    padding:20px; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    position:relative; 
 
    height:50px; 
 
    text-align:center; 
 
    background-color:#FFF;}

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 
 
<div> 
 
<nav class="fixed-nav-bar" id="topnav"> 
 
    <ul> 
 
     <p style="font-family:Lobster;font-size:30px;text">Stark</p> 
 
     <li><a href="top">About </a></li> 
 
     <li><a href="Portfolio">Portfolio </a></li> 
 
     <li><a href="Contact">Contact </a></li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
    
 

 
    <div class="silver-background"> 
 
    <p>This is a column for personal background</p> 
 
    </div> 
 
    
 
    <div class="bottom-bar"> 
 
    <p>stark copyright 2016. All Rights Reserved.</p> 
 
    </div

Answer 2

Ваш <nav> элемент имеет position: fixed; и высокий Z-индекс. Он расположен вручную в том же месте, что и серебро <div> и поднят над ним.

Есть несколько способов остановить это: вы можете отключить фоновый цвет в <nav>, так что элементы за ним показывают.

Вы можете снизить индекс z, хотя обратите внимание, что z-index уже слишком высок, поэтому вы не можете просто отключить его, вам придется установить его на низком уровне; -1 работает.

Вы можете удалить позиционирование fixed, хотя это также испортит макет.

Answer 3

Попробуйте удалить position: absolute; из .fixed-nav-bar CSS класс

HTML

<nav class="fixed-nav-bar" id="topnav"> 
    <ul> 
    <p style="font-family:Lobster;font-size:30px;text">Stark</p> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Portfolio</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

<div id="silver-background"> 
    This is a column for personal background 
</div> 

<div class="bottom-bar"> 
    <p>stark copyright 2016. All Rights Reserved.</p> 
</div> 

CSS

body { 
    background-color: #0BC; 
} 

.fixed-nav-bar { 
    //position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 9999; 
    width: 100%; 
    height: auto; 
    text-align: center; 
    background-color: #FFF; 
} 
/*display the text on the same line*/ 

#topnav li { 
    display: inline; 
    list-style-type: none; 
    padding: 20px 
} 
/*removes underline format*/ 

#topnav a { 
    text-decoration: none; 
    color: #00F; 
    padding: 5px; 
} 
/*set hover effect*/ 

#topnav a:hover { 
    background-color: blue; 
    color: #FFF; 
} 
/*set background of about-box*/ 

#silver-background { 
    background-color: silver; 
} 
/*create a bottom bar*/ 

.bottom-bar { 
    width: fluid; 
    padding: 20px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    position: absolute; 
    height: 50px; 
    text-align: center; 
    background-color: #FFF; 
    color: blue 
} 

Answer 4

Ладно, ребята, я понял, что серая коробка не появляется, потому что я сделал не определять границу, вызывая ее b e покрывается заголовком. Задача решена. Спасибо, ребята, за помощь!