Остановить навигацию с перекрытием нижнего колонтитула

0

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

вот мой CSS для моей навигации и нижнего колонтитула:

#playerMenu{
    position:absolute;
    left:10px;
    top:245px;
    list-style-type:none;
    text-align: center;
    color: white;
    width:240px;
    font-family: sans-serif;
    font-size: small;
    background: #4b4d59;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    background: linear-gradient(top, #535561 0%, #1f1f23 100%);
    background: -moz-linear-gradient(top, #535562 0%, #202023 100%);
    background: -webkit-linear-gradient(top, #535562 0%, #202023 100%);
    background: -ms-linear-gradient(top, #535562 0%, #202023 100%);
}



#playerMenu ul {
    list-style-type:none;
    padding:0;
}

#playerMenu li a{
    transition: color .3s ease;
    -moz-transition: color .3s ease;
    -webkit-transition: color .3s ease;
    -ms-transition: color .3s ease;
    border-bottom: : 1px solid #393942;
    border-top: 1px solid #393942;
}

#playerMenu a {
    display:block;
    color: white;
    padding: 4px 4px;
    text-decoration: none;
    font-family: sans-serif;
} 




.footer {
    width: 680px;
    height: 20px;
    margin:auto;
}

.footerContent {
    font-family: sans-serif;
    color: #FFF;
    float:left;
    width:100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: linear-gradient(top, #535561 0%, #1f1f23 100%);
    background: -moz-linear-gradient(top, #535562 0%, #202023 100%);
    background: -webkit-linear-gradient(top, #535562 0%, #202023 100%);
    background: -ms-linear-gradient(top, #535562 0%, #202023 100%);   
}

.footer p {
    float:left; width:100%; text-align:center;
}
  • 1
    Пожалуйста, НЕ связывайтесь с вашим сайтом. И вот почему: meta.stackexchange.com/questions/125997/…
  • 0
    Подсказка: не используйте абсолютное позиционирование, если вы не хотите перекрытия.
Показать ещё 2 комментария
Теги:

1 ответ

0

Поместите весь контент в контейнер-контейнер, а затем поместите нижний колонтитул в другой div:

<body>
<containerdiv>
<!-- All content -->
</containerdiv>
<footer>
</footer>
</body>
  • 0
    сделал это, однако, это, кажется, не работает, я должен удалить / добавить дополнительное позиционирование?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню