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
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:

Cod: Selectaţi tot

body { padding-bottom:50px;}

LOL
REZOLVAT ! Mersi mult :) :D
Ca sa fac la fel cu header-ul ce trebuie sa adaug ?

MarPlo
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
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
Cred ca acel #header vrea si: top:0; la setarile css.

Subiecte similare