Wyśrodkowanie stopki


(zorro997) #1

Witam.

 

Walczyłem dzisiaj z wyśrodkowaniem stopki na stronie i wynik jest dosyć fajny ale jednak nie na tyle fajny, żebym był bardzo zadowolony.

 

Strona się rozciąga i na dole pojawia mi się suwak do przesuwania strony w bok. Jak zrobić tego ccs’a żeby to działało? Chciałem zmniejszyć trochę szerokość body np. ale to nic nie dało.

 

html{

  background: url(indeks.png) no-repeat center center fixed;

  background-size: cover;



  

    }



html, body {

	margin:0;

	padding:0;

	height: 75%;

	

	font-size: 18px;

		       

		       

}





body {

	

	font-family: Arial, Verdana;





}





.kontener{

	max-width:1020px;

    margin: auto;

    height: 600px;

    margin-top: 2em;

    position: relative;

    border: 1px solid black;



 }



.footer{

	position: absolute;

	bottom: 0;

	margin: 0 auto;

	text-align: center;

	width: 100%;

    border: 1px solid black;

}

 

stopka jest w kontenerze.

 


(Domker) #2
clear: both;

overflow: auto;

margin: 0 auto;

padding: 5px 5px 5px 5px;

 

Padding według uznania (wewnętrzne marginesy).

WordPress ma tak zazwyczaj wyśrodkowane i ładnie się sprawdza :slight_smile:


(zorro997) #3

Nie działa i tak. footer jest w html na samym dole strony zagnieżdżone.

 

.footer{



	



	position: absolute;



	bottom: 0;



    border: 1px solid black;



    clear: both;



    margin: 0 auto;



	overflow: hidden;



	width: 100%;



	text-align: center;







}

Nie chce mieć tych pasków do przesuwania. Problem pojawia się przy szerokości width: 100% wtedy to się rozchodzi.

Screenshot_1.png


(Domker) #4

Problem ze suwakiem powodują Ci:

  • parametry “position”
  • width: 100% w stopce z tego, co zauważyłem

http://i.imgur.com/1HLHhBP.png

http://i.imgur.com/MhbpQAC.png

(dolny suwak się nie pojawia)

Zmodyfikowane poniżej - zachowuje się dobrze przy zmianie rozmiaru jak i zachowuje rozmiar max-width.

.kontener {

clear: both;

overflow: auto;

margin: 0 auto;

max-width: 1024px;

border-top: 1px solid #dfdfdf;

padding-top: 2em;

/ **background-color: red;** /

 }



.footer { 

clear: both;

float: none;

margin: 0 auto;

text-align: center;

border: 1px solid black;

/ **background-color: blue;** /

}

 

 

 


#5

Padding powiększa ci kontener aby go ustawić na max-width: 1020px dodaj box-sizing:border-box; to zapewni, że zawsze konteren mieć będzie 2010px, a padding nie powiększy jego wymiarów. Sprawdź to bo powinno Ci to rozwiązać problem.