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

FAQFAQ  SzukajSzukaj  UżytkownicyUżytkownicy  GrupyGrupy
RejestracjaRejestracja  ZalogujZaloguj  DownloadDownload

Poprzedni temat «» Następny temat
Problem z footerem i headerem strony
Autor Wiadomość
pierog 
Znawca



Pomógł: 9 razy
Dołączył: 20 Maj 2009
Posty: 158
Skąd: Opole
Wysłany: 15 Maj 2011, 19:42   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 



Pomógł: 205 razy
Dołączył: 01 Sty 2011
Posty: 3129
Skąd: Kraków
Wysłany: 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 
Znawca



Pomógł: 9 razy
Dołączył: 20 Maj 2009
Posty: 158
Skąd: Opole
Wysłany: 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 
Doradca


Pomógł: 12 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 122
Skąd: Kędzierzyn-Koźle
Wysłany: 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 
Znawca



Pomógł: 9 razy
Dołączył: 20 Maj 2009
Posty: 158
Skąd: Opole
Wysłany: 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 
Doradca


Pomógł: 12 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 122
Skąd: Kędzierzyn-Koźle
Wysłany: 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.).
 
 
 
Wyświetl posty z ostatnich:   
Odpowiedz do tematu
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Możesz ściągać załączniki na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB modified by Przemo © 2003 phpBB Group
Nowe zasady dotyczące cookies. Wykorzystujemy pliki cookies, aby nasz serwis lepiej spełniał Państwa oczekiwania. Można zablokować zapisywanie cookies, zmieniając ustawienia przeglądarki.
         
Strona wygenerowana w 0.1 sekundy. Zapytań do SQL: 13