zorro997
4 Grudzień 2016 01:50
#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
5 Grudzień 2016 02:08
#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
zorro997
5 Grudzień 2016 08:40
#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.
Domker
5 Grudzień 2016 16:22
#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;** /
}
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.
