Zobacz temat - Problem z footerem i headerem strony

Corel FORUM
Forum użytkowników programów firmy Corel. Grafika wektorowa, rastrowa i obróbka zdjęć cyfrowych

Webdesign, layout - Problem z footerem i headerem strony

pierog - 15 Maj 2011, 19:42
Temat postu: Problem z footerem i headerem strony

Witam!

Tworzę sobie portfolio i napotkałem na taki problem ,chciałbym aby footer i header strony rozciągał mi się po osi y ,tak by użytkownik który wchodzi na strone i ma np dużą rozdzielczość albo pomniejszone okno nie widział ukruconych elementów ,próbowałem na kilka sposobów to rozwiązać ,ale mi nie wychodzi ,może ktoś bardziej się zna i mi pomoże ,bo ja dopiero raczkuje w tych sprawach :)

adres strony: www.art-ur.pl

JAK KTOS NIE WIE O CO MI CHODZI ZAMIESZCZAM PONIŻEJ .JPGI

http://www.fotoszok.pl/upload/6c3216b8.jpg

http://www.fotoszok.pl/upload/1e67c85b.jpg

Cysorz - 15 Maj 2011, 23:47

Nie wiem co masz wpisane w "style.css", ale jeżeli strona jest na czystym html to taką stronę trzeba zrobić na ramkach, gdzie we właściwościach tabeli musisz mieć podany rozmiar procentowy a nie piksle na sztywno. I oczywiście nie powinieneś wtedy używać znaku łamania wiersza.

pierog - 16 Maj 2011, 00:27

firefox ma firebuga ,którym można sprawdzić cały kod witryny ,więc tym śmiało można zaglądnąc w mój kod.Stronka jest oparta na stylach css.

ABu - 16 Maj 2011, 15:57

Łatwiej mi napisać kod niż objaśnić :)

Kod:

<html>
<head>
<style>
html body
{
padding: 0px;
margin: 0px;
}

#header
{
height: 200px;
background-color: #808080;
border-bottom: solid 1px #FFFFFF;
background: url("images/header.jpg") repeat-x scroll 0px 0px;
}

#header_content
{
width: 1000px;
height: 200px;
margin: 0px auto;
background: url("images/header_content.jpg") no-repeat scroll 0px 0px;
}

#content
{
width: 1000px;
margin: 0px auto 0px;
background-color: #B0B0B0;
}

#footer
{
height: 100px;
background-color: #808080;
border-top: solid 1px #FFFFFF;
background: url("images/footer.jpg") repeat-x scroll 0px 0px;
}

#footer_content
{
width: 1000px;
height: 100px;
margin: 0px auto;
background: url("images/footer_content.jpg") no-repeat scroll 0px 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="header_content"></div>
</div>
<div id="content">
Tresc...
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>

Działająca strona:
http://test.webkoncept.pl/szablon/

Na tej samej zasadzie (ale bez podziału na stopkę i nagłówek) zrobiłem to:
http://webkoncept.pl

Powodzenia, jakby było trzeba - służę dodatkowym opisem.

pierog - 17 Maj 2011, 23:49

hmm więc tak to wygląda ,już rozumiem dzięki temu wszystko zawsze będzie na swoim miejscu nie zależnie od tego czy okno przeglądarki będziemy zmniejszać czy nie i widzę ,że jest coś takiego jak "repeat-x scroll 0px 0px" co oznaczają te wartości aby zaczynał od górnego lewego rogo divu ? powiedz mi jeszcze jak pozycjonujesz elementy na stronie ? bo słyszałem ,że lepiej jest za pomocą floatów i jak tylko mogę to najlepiej tak to robić. Możesz mi dac jakiś fajny przykład ?

Ps. I nie usuwaj jeszcze tego testu ,bo jutro będe przebudowywał swoją stronę na ten styl

Dzięki Abu :)

ABu - 19 Maj 2011, 10:12

pierog napisał/a:

"repeat-x scroll 0px 0px" co oznaczają te wartości

repeat-x - powtarzanie obrazka w poziomie
scroll - ma być scrollowane razem ze stroną
0px 0px - przesunięcie lewego górnego rogu tła

Dwa ostatnie można pominąć.

pierog napisał/a:

powiedz mi jeszcze jak pozycjonujesz elementy na stronie ? bo słyszałem ,że lepiej jest za pomocą floatów i jak tylko mogę to najlepiej tak to robić. Możesz mi dac jakiś fajny przykład ?

Pozycjonuję na wszystkie sposoby w zależności od potrzeb.

float - w szczególności wtedy, kiedy mam mieć kilka elementów koło siebie, jakiś układ kolumnowy strony, galerie obrazków, ale czasami zdarzają się rzeczy, których floatami nie zrobię, albo jest to bardzo uciążliwe. Wtedy jadę z pozycjami absolute, relative, fixed.

absolute - jeśli element ma mieć stałe miejsce względem lewego górnego rogu bloku nadrzędnego i ma się przewijać razem ze stroną, (np.: www.webkoncept.pl - wszystkie bloki tekstów, menu, animacja laptopa).

relative - jeśli element ma być tylko przesunięty względem prawdziwego położenia, np. chcę go 'pchnąć' kilka px w lewo. (np.: www.kkozle.info - bloczek z reklamą OURSCREEN pchnięty w prawo o 3px).

fixed - jeśli element ma mieć stałe miejsce względem okna przeglądarki i nie ma się przewijać
(np.: www.parafiakozle.pl - znaczek "wersja dla niedowidzących", różnego typu menu itp.).