разделы разделов CSS, перекрывающиеся

Я пытаюсь собрать страницу с заголовками навигации, которые плавают в нижней части заголовка, содержимого тела, а затем нижнего колонтитула. Это должно быть довольно легко, но я столкнулся с каким-то странным результатом.разделы разделов CSS, перекрывающиеся

Меню должно плавать над изображением заголовка, так как это изображение может быть статическим или может быть слайдером ... или это может быть встроенная карта Google.

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

Вот мой код.

Поблагодарите кого-нибудь умнее, чем я, посмотрев на это и сделав какие-либо предложения.

<style> 
#header{ 
    width: 100%; 
    height: 350px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding:0; 
    margin: 0; 
} 
#header > img{ 
    width: 100%; 
} 

.mynavigation{ 
    margin-left: auto; 
    margin-right: auto; 
    color: #fff; 
} 

.mynavigation li { 
    display: inline-block; 
    text-decoration: none; 
    padding: 15px 25px 30px 25px; 
    z-index: 100; 
    color: #fff; 
    margin-top: 310px; 
    font-family: avenirltstd-black; 
    text-transform: uppercase; 
    letter-spacing: 5px; 
} 

.mynavigation li.is-active { 
    color: #474747; 
    background-color: #fff; 
} 

.mynavigation li a{ 
color: #fff; 
} 

.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: #474747; 
    text-align: center; 
} 


</style> 



<div id="header"> 
    <img src="/images/myimage" /> 
</div> 


<div id="mynavigation"> 
    <!-- css makes this a tab menu and it needs to position at the bottom of the image <div> --> 
    <!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together --> 
    <ul> 
     <li>Home</li> 
     <li>Examples</li> 
     <li>Other</li> 
     <li>Last</li> 
    </ul> 
</div> 


<div id="bodycontent"> 
    <!-- page content goes here and has a white background --> 
</div> 


<div id="footer"> 
    <!-- footer content here --> 
</div>

источник

2014-11-30 crowsfeet

сделайте JS Fiddle пожалуйста. – Rafael

Имеет ли ваш высоту 100%? значение переполнения? –

сделать структуру HTML следующим образом:

<html> 
    <head> 
    </head> 
    <body> 
     <div id="header"></div> 
     <div id="mynavigation"></div> 
     <div id="content"> 
      <!-- CONTENT STUFF --> 
     </div> 
     <div id="footer"><!-- FOOTER STUFF --></div> 
    </body> 
</html>

... А ваш CSS вот так:

html{ 
    padding: 0; 
    margin: 0; 
} 

body{ 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    position: relative; 
} 

#header{ 
    width: 100%; 
    height: 350px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

#mynavigation{ 
    position: absolute; 
    top: 350px; 
    height: 50px; 
    width: 100%; 
} 

#content{ 
    position: absolute; 
    top: 350px; 
    bottom: 100px; 
    width: 100%; 
    overflow: auto; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100px; 
}

источник

2014-11-30 05:57:06 ChrisA

Рабочая скрипку http://jsfiddle.net/u2qL4j8a/2/ Вы ошибочно упомянули CSS селектор для навигации и нижний колонтитул как классы, тогда как в HTML вы упомянули их как идентификаторы.

#header{ 
    width: 100%; 
    height: 350px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding:0; 
    margin: 0; 
} 
#header > img{ 
    width: 100%; 
} 

#mynavigation{ 
    margin-left: auto; 
    margin-right: auto; 
    color: #fff; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

#mynavigation li { 
    display: inline-block; 
    text-decoration: none; 
    padding: 15px 25px 30px 25px; 
    /*z-index: 100; 
    color: #fff; 
    margin-top: 310px;*/ 
    font-family: avenirltstd-black; 
    text-transform: uppercase; 
    letter-spacing: 5px; 
} 

#footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: #474747; 
    text-align: center; 
}

источник

2014-11-30 07:26:47 Diptendu

разделы разделов CSS, перекрывающиеся

ответ

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