Footer si Header Fix sa nu mai apara peste continut
Coduri intrebari, probleme legate de HTML, XHTML si CSS
-
LOL
- Mesaje:13
Footer si Header Fix sa nu mai apara peste continut
Salut ! Ce ar trebuii sa modific la footer ca sa nu mai apara peste continutul paginii ?
Cod: Selectaţi tot
#footer1 {
position:fixed;
bottom:0;
width:100%;
background:#222;
height:50px;
left:0;
right:0;
margin:0 auto;
border:1px solid #333;
padding:8px 5px;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
box-shadow:0 0 3px rgba(0,0,0,.6);
-moz-box-shadow:0 0 3px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 3px rgba(0,0,0,.6)
}
#footer1 p {
text-align:left;
font-size:11px;
margin-top:25px
}
#footer1 p.right {
text-align:right
}
As vrea ca footerul sa ramana fix. Dar sa nu mai acopere din continutul paginii.
MarPlo
Mesaje:4343
Daca vrei sa ramana fix, si sa nu fie peste continut, trebuie sa modifici setarile de la continut.
Incearca asa, sa pui padding in partea de jos a paginii cat e inaltimea la footer:
LOL
Mesaje:13
REZOLVAT ! Mersi mult
Ca sa fac la fel cu header-ul ce trebuie sa adaug ?
MarPlo
Mesaje:4343
Daca header-ul e setat fix; si sa nu fie peste continut, pune padding sus la body (cat inaltimea header-ului), ca sa impinga mai jos continutul care nu e fix.
Cod: Selectaţi tot
body {
padding-bottom:50px;
padding-top:60px;
}
LOL
Mesaje:13
Uite cum apare acum... ->
s10.postimg.org/8n976gdqh/dsdsdsdsd.png
CSS de la header:
Cod: Selectaţi tot
#header {
position:fixed;
width:100%;
background:#222;
height:90px;
left:0;
right:0;
margin:0 auto;
border:1px solid #333;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
box-shadow:0 0 3px rgba(0,0,0,.6);
-moz-box-shadow:0 0 3px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 3px rgba(0,0,0,.6)
}
#header-inner {
padding:37px 20px
}
MarPlo
Mesaje:4343
Cred ca acel #header vrea si: top:0; la setarile css.