[HTML][CSS]Problem z layoutem Opcje

[jacobson]

Witam, mam pewien problem. Sprobuje go slownie naszkicowac ;p

Mam content na srodku (wysrodkowany) i teraz po lewo od contentu background jest bialy (tak jak domyslnie) a po prawej potrzebuje dodac gradient (odpowiadajacy gradientowi z contentu). Jest tylko problem. Jak dodaje po prawo od contentu gradient o szerokosci 100% (zeby powielało sie) to pojawia mi sie suwak na szerokosc (ktory jest problemem - wyjasnienie nizej)

Na tej stronie mam header i footer ktore maja szerokosc 100% (tak zeby caly czas dotykaly obu krawedzi ekranu) jednak kiedy na stronie pojawia sie suwak to po przesunieciu go w prawo okazuje sie ze 100% nie obejmuje juz tego fragmentu ktory przesuwam (:O )

Moze jeszcze dodam ze ten gradient po prawo ustawiam mu css:

[PHP] pobierz, plaintext 
position: absolute;
top: 0;
left: 50%;
[PHP] pobierz, plaintext 

tak wiec gradient zaczyna sie od polowy screena (pod contentem) i dalej sie powiela w prawo dłuuuuuugo za content. Czy ktos moze spotkal sie z taka sytuacja, czy moze jakos ją rozwiązał ? Będę wdzięczny za wszelką pomoc:)

pozdrawiam

[memory]

[PHP] pobierz, plaintext 
min-width,repeat-x,repeat-y
[PHP] pobierz, plaintext 

[jacobson]

musze przyznac ze Twoja wypowiedz za duzo mi nie mowi. Jezeli chodzi o gradient to jest to obrazek o szerokosci 1px i wysokosci jakiejs tam ktory ma opcje repeat-x.
A to min-width to nie wiem za bardzo do ktorego fragmentu sie odnosi.

[memory]

kod html + css będzie łatwiej pomóc
Gradient musi mieć długość np. min-width:1200px

Ten post edytował memory 11.10.2012, 21:27:12

[Damonsson]

Wystaw to online, nie będziemy się domyślać bez sensu, tylko będzie miał od razu rozwiązanie.

[jacobson]

Ok to moze odrobina zdjec + kodu ;p

tutaj widac strone jak wyglada (czerwonym oddzielilem content od gradientu) http://screenshotuploader.com/s/01/og1p5gcvi

tutaj widac ta sama strone tylko przesuniety scroll troche w prawo : http://screenshotuploader.com/s/01/ue3oxuib

tutaj ten czarny pasek na gorze i moze od razu footer :

[PHP] pobierz, plaintext 
#header{
    position: absolute;
    background: url(/images/top_bg.jpg);
    width: 100%;
    height: 97px;
 
#footerBar{
    width: 100%;
    height: 80px;
    background: #1b1c1d;
}
}
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
#container{
    margin:  0 auto;
    width: 1000px;
    position: relative;
}
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
#blueGradient{
    background: url(/images/gradient.jpg) 0 0 repeat-x;
    width: 100%;
    height: 1000px;
    position: absolute;
    left: 50%;
    top: 100px;
    z-index: -1; (tak wiem nie powinno byc -1)
}
[PHP] pobierz, plaintext 

kod html to nic szczegolnego

[PHP] pobierz, plaintext 
<div id="header"></div>
<div id="container"></div>
<div id="blueGradient"></div>
<div id="footerBar"></div>
[PHP] pobierz, plaintext 

[memory]

[PHP] pobierz, plaintext 
 #header{ position: absolute;
[PHP] pobierz, plaintext 

po co to ?

[PHP] pobierz, plaintext 
#blueGradient{
    background: url(/images/gradient.jpg) 0 0 repeat-x;
    width: 50%;
[PHP] pobierz, plaintext 

[b4rt3kk]

Ja by zrobił inaczej z tym gradientem:

[HTML] pobierz, plaintext 
#blueGradient{
    background: url(/images/gradient.jpg) bottom right repeat-x;
    width: 100%;
    height: 1000px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: -1; (tak wiem nie powinno byc -1)
}
[HTML] pobierz, plaintext 

Tylko jeszcze kwestia tego jak wygląda ten gradient? Tj. tak, div z gradientem z pozycją na prawy, dół, tak samo owy obrazek tła, prawy dół, szerokość ma być 50%? I chyba może taka zostać.

[jacobson]

No tak nie wiem czemu tam bylo 100% ... 50% i wszystko smiga. Mam jeszze jedno pytanie... z tej samej beczki ale dotyczy innego problemu. Otoz takie rozwiazanie jak jest teraz powoduje ze tresc strony (content) ma ograniczona wysokosc (poniewaz gradient sie nie bedzie powielal po Y .

Tutaj jest screen: http://screenshotuploader.com/s/01/rivxobi3y

chcialem zrobic cos w stylu zeby gradient uciac na wysokosci tej zielonej linii i ponizej w czesci contentu dac poziomy gradient powtarzalny po Y (repeat-y) a po stronie gradientu diva z backgroundem koloru pasujacego do prawej krawedzi tego gradientu. I ok powiedzmy ze to rozwiazanie by dzialalo z jednym mankamentem. Otoz ta czesc gradient + div z kolorem nie sa w zaden sposob zalezne od wysokosci contentu tak wiec nawet jezeli content bedzie sie zwiekszal to nie bedzie powodowalo zmiany wysokosci tego diva z kolorem tla ustalonym po prawo (bo on mialby sie rozciagac razem z containerem zeby utrzymac jednolity kolor).

Jak moglbym uzaleznic te wysokosci ? czy zrobic to przy pomocy js pobierajac wartosci wysokosci elementow bo nie moge jakos wpasc na rozwiazanie zeby zrobic to tylko z html + css

[b4rt3kk]

Musisz zmienić nieco układ strony:

[HTML] pobierz, plaintext 
<div id="header"></div>
<div class="content">
<div id="container"></div>
</div>
<div id="footerBar"></div>
[HTML] pobierz, plaintext 

I dodać css:

[HTML] pobierz, plaintext 
.content {
    background: #kolor_z_samego_dolu url(/images/gradient.jpg) top right repeat-x;
    width: 100%;
    z-index: -1; (tak wiem nie powinno byc -1)
}
[HTML] pobierz, plaintext 

#kolor_z_samego_dolu - chodzi oczywiście o kolor gradientu, pobierasz w PS próbnikiem i taki ustawiasz.

Gradient nie może być przezroczysty, musi być z tym białym tłem, inaczej spod spodu będzie widać ustawiony kolor.

Wywalasz też height, by kontener rozszerzał się automatycznie.

Tak w ogóle to nie rozumiem czemu footer i header mają position absolute, z powodzeniem można zastosować static.

Ten post edytował b4rt3kk 11.10.2012, 22:22:50

[jacobson]

łałałiła ale sie podziało juz prawie zasmigało. To rozwiazanie juz w 99% zadzialalo tylko rozciaga mi na cala szerokosc ten gradient : http://screenshotuploader.com/s/01/s66x7rgy3

szukam wlasnie jakiegos sposobu zeby "ograniczyc ten gradient do polowy" ale nie wiem czy to przez pore moj mozg sie wylaczyl czy o co chodzi ;p

[b4rt3kk]

To już niestety musisz się nieco pobawić:

[HTML] pobierz, plaintext 
<div id="header"></div>
<div class="content">
<div class="leftHalf"></div>
<div id="container"></div>
</div>
<div id="footerBar"></div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
.leftHalf {
width: 50%;
background: white;
position: absolute; top: 0px; left: 0px;
height: 100%;
z-index: nad_gradientem_pod_trecia;
}
[HTML] pobierz, plaintext 

[jacobson]

tak wlasnie myslalem zeby zamalowac ja bialym boxem. No dobra dzieki wielkie za pomoc
pozdrawiam

[b4rt3kk]

tak wlasnie myslalem zeby zamalowac ja bialym boxem. No dobra dzieki wielkie za pomoc
pozdrawiam

Nie ma sprawy. Również pozdrawiam i owocnej pracy.