Заголовок редактирования нижнего края?

Question

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

Код:

http://www.codecademy.com/courseBlaster14854_53a1c3f8631fe99231000802_deleted_53a1c3f8631fe99231000802_deleted/codebits/gioGOU/edit

Answer 1

без перемещения элемента из потока, может быть, делать что-то вроде:

удалить радиус границы и фона из заголовка и дать h1 класс, переместите следующие CSS там:

h1.heading{ 
    background-color: #3c4543; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
} 

удалить CSS из заголовка

#header { 
    position: relative; 
} 

своп заголовок и Navbar:

<div id="header"> 
<h1 class="heading" align="center", style="font-family:cursive"><font size="7">Risebush</font></h1> 
<div id="navbar"> 
<ul> 
<li><a href=#">Home</li> 
<li><a href=#">About Us</li> 
<li><a href=#">Become a Member</li> 
<li><a href=#">Contact Us</li> 
<li><a href=#">Games</li> 
<li><a href=#">Movies</li> 
</ul> 
</div> 
</div> 

Answer 2

#navbar{ 
padding-top: 50px; 
    margin-bottom: -20px; 
} 

Navbar находится внутри заголовка. Таким образом, padding определяет расстояние от заголовка div, а не от вершины (тела). Затем, чтобы уменьшить расстояние между навигационной панелью и текстом, уменьшите границу. Установите значение пикселя для всего, что вы хотите. Я установил его на 50

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

#header{ 
top:0; 
}