Mam listę nawigacyjną po lewej stronie ekranu, jednak ta lista pokrywa się ze stopką. Chcę umieścić stopkę centralnie u dołu strony, poniżej nawigacji.
tutaj jest mój CSS dla mojej nawigacji i stopki:
#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;
}
Odpowiedzi:
0 dla odpowiedzi № 1Umieść całą zawartość w div pojemnika, a następnie umieść stopkę w innym dziale div:
<body>
<containerdiv>
<!-- All content -->
</containerdiv>
<footer>
</footer>
</body>