Как отделить заголовок от содержимого

Мой заголовок покрывает верхнюю часть содержимого под ним.Как отделить заголовок от содержимого

например:

_________________ | header | | ______________ | ||______________|| | content | |______________|

Как бы я быть в состоянии сделать это так, DIV для заголовка отдельно от DIV для содержания.

конечная цель:

_________________ 
| header   | 
|    | 
|________________| 
_______________ 
|    | 
| content | 
|______________|

Html (Помещенный в DIV для заголовка контента только некоторые фотографии и <p> теги..):

<div class='nav'> 
    <ul class='Menu'> 
     <li><a href='#'><span>Home</span></a></li> 
     <li><a href='#'><span>Blog</span></a></li> 
     <li><a href='#'><span>Contact</span></a></li> 
    </ul>  
    <h3 class='Name'>name</h3> 
    </div>

CSS:

.nav { 
    background-color: #000000; 
    font-style: italic; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    left: 0px; 
} 

.Menu 
{ 
    float: right; 
    text-decoration: none; 
    width: 40%; 
/* padding-top: 5px; */ 
} 
.Menu li{ 
    display: inline; 
    padding-left: 50px; 
    font-size: 20%; 
} 

.Menu li a{ 
    color: #CCCCCC; 
    font-size: 15px; 
    text-decoration: none; 
} 

.Name { 
    display: inline-block 
} 

.Menu li a:hover { 
    color: #FFFFFF; 
} 

.nav h3 { 
    padding-left: 250px; 
    Color: #7A7A99; 
} 

.intro { 
    background: url('http://www.amritray.com/wp-content/uploads/2012/01/foggy-photographs21.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -ms-ie-background-size: cover; 
    background-size: cover; 
    top: 0px; 
    right: 0px; 
    left: 0px; 
    height: auto; 
    overflow: auto; 
    text-align: center; 
}

источник

2014-08-06 Abdullahi Farah

Возможно, у вас есть отрицательные поля или абсолютные позиционированные элементы. Просто не используйте это, и все будет хорошо. – Oriol

Можете ли вы вставить HTML-код, который приводит к тому, что 'header' покрывает верхнюю часть' content'? – Nagra

Я чертовски уверен, что это либо нечистое поплавки, либо позиция абсолютная –

Вы должны использовать

{position:relative}

как для заголовка и содержимого DIV, а не фиксировано.

источник

2014-08-06 20:47:57 MiaMia

Как бы у меня теперь есть заголовок и навигатор, чтобы разделить всю страницу, чтобы белая рамка вокруг нее была покрыта двумя изображениями. Когда у меня была «Позиция: абсолютная», они взяли всю страницу сейчас, когда я изменил ее белую рамку? –

Если на странице есть белая рамка, установите для тега тела значение поля 0px {margin: 0px;} – TyBourque

@AbdullahiFarah Извините, я не совсем уверен, что сейчас понимаю ваш вопрос. Вы имеете в виду, что они (nav и img) не занимают всю страницу и имеют пробел вокруг нее после использования позиции: relative? Если да, попробуйте ли вы установить их ширину как 100% и установив дополнение на 0px? – MiaMia

Просто используйте два divs, единственный способ, которым вы могли бы сделать их перекрытие, - если у вас есть отрицательные поля или элементы, которые равны p либо абсолютный, либо фиксированный. Просто не используйте эти две вещи, которые он должен решить.

Вот простой пример: http://jsbin.com/zakolaca/1/edit

источник

2014-08-06 20:13:41 TyBourque

Как отделить заголовок от содержимого

ответ

Смежные вопросы