[CSS] Nie mam koncepcji jak zakodować stopkę strony


(1q2w3e4r) #1

Witam,

Pobrałem darmowy .psd w sieci, który odpowiada mi graficznie. Niestety ktoś do d**y zaprojektował stopkę strony. Nie mam koncepcji jak to zakodować.

Nagłówek i stopka są rozciągnięte na 100% ekranu. Nagłówek już zakodowałem. Treść strony również (rozciąga się w zależności od tekstu). Problem mam ze stopka ponieważ nie wiem jak zrobić aby tekst wchodził stopkę. Tekst zatrzymuje się na wysokości najwyższej budowli. Macie jakiś pomysł jak to zakodować?

Niżej daję screen z .psd:


(manieKMP) #2

Próbowałeś ustawić minusową wartość marginesu górnego dla stopki?


(1q2w3e4r) #3

Dziękuję za odpowiedź.

Ten sposób działa ale tylko wtedy gdy w

testowy tekst

testowy tekst

testowy tekst

jest dam tekst. Jeśli pojawią się jakieś inne zagnieżdżone divy niestety przestaje działać :frowning:


(manieKMP) #4

Wstawiasz te div’y po za “content”?

Bez kodu można jedynie zgadywać (nie wiem jak zakodowałeś stronę), więc na razie dam przykład (dla “content” jest dodatkowy parametr, jako komentarz, “zdejmij” z niego “/*” i “*/”, aby zobaczyć efekt…). Ogólnie w przykładzie dalej jest zabawa marginesem :wink: (dla stopki margin-top: -50px; i “wyłączone” komentarzem margin-bottom: -50px; dla “content”).


(1q2w3e4r) #5

Niestety nadal nie chce działać gdy dodałem do div’u content inne div’y: left i right. Po ich usunięciu działa poprawnie.

Niżej daje przykład:

http://jsfiddle.net/1q2w3e4r/ZXvS4/12/

Tekst “ccccccccc” powinien wchodzić na stopkę.


(manieKMP) #6

Problemem było najwyraźniej nadanie “clear:both;” dla stopki (wydzieliłem to do osobnego div’a)…

Zobacz tą poprawkę i porównaj ze swoim (background-color: rgba(0,0,0,0.2); do content dodałem dla własnego “rozeznania”…)


(1q2w3e4r) #7

Usuwałem “clear:both;” za stopki ale wtedy leciała na sama górę. Nie wiedziałem, że trzeba do wydzielić do osobnego div’a. Teraz będę zwracał na to uwagę.

Działa tak jak powinno. Bardzo Ci dziękuję.