Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z layoutem
Forum PHP.pl > Forum > Przedszkole
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 (ohmy.gif:O sad.gif )

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

  1. position: absolute;
  2. top: 0;
  3. left: 50%;


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
  1. min-width,repeat-x,repeat-y
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
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 :
  1. #header{
  2. position: absolute;
  3. background: url(/images/top_bg.jpg);
  4. width: 100%;
  5. height: 97px;
  6.  
  7. #footerBar{
  8. width: 100%;
  9. height: 80px;
  10. background: #1b1c1d;
  11. }
  12. }


  1. #container{
  2. margin: 0 auto;
  3. width: 1000px;
  4. position: relative;
  5. }


  1. #blueGradient{
  2. background: url(/images/gradient.jpg) 0 0 repeat-x;
  3. width: 100%;
  4. height: 1000px;
  5. position: absolute;
  6. left: 50%;
  7. top: 100px;
  8. z-index: -1; (tak wiem nie powinno byc -1)
  9. }



kod html to nic szczegolnego

  1. <div id="header"></div>
  2. <div id="container"></div>
  3. <div id="blueGradient"></div>
  4. <div id="footerBar"></div>
memory
  1. #header{ position: absolute;
po co to ?
  1. #blueGradient{
  2. background: url(/images/gradient.jpg) 0 0 repeat-x;
  3. width: 50%;
b4rt3kk
Ja by zrobił inaczej z tym gradientem:

  1. #blueGradient{
  2. background: url(/images/gradient.jpg) bottom right repeat-x;
  3. width: 100%;
  4. height: 1000px;
  5. position: absolute;
  6. right: 0px;
  7. bottom: 0px;
  8. z-index: -1; (tak wiem nie powinno byc -1)
  9. }


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 biggrin.gif 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:

  1. <div id="header"></div>
  2. <div class="content">
  3. <div id="container"></div>
  4. </div>
  5. <div id="footerBar"></div>


I dodać css:

  1. .content {
  2. background: #kolor_z_samego_dolu url(/images/gradient.jpg) top right repeat-x;
  3. width: 100%;
  4. z-index: -1; (tak wiem nie powinno byc -1)
  5. }


#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.
jacobson
łałałiła tongue.gif 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ć:

  1. <div id="header"></div>
  2. <div class="content">
  3. <div class="leftHalf"></div>
  4. <div id="container"></div>
  5. </div>
  6. <div id="footerBar"></div>


  1. .leftHalf {
  2. width: 50%;
  3. background: white;
  4. position: absolute; top: 0px; left: 0px;
  5. height: 100%;
  6. z-index: nad_gradientem_pod_trecia;
  7. }
jacobson
tak wlasnie myslalem zeby zamalowac ja bialym boxem. No dobra dzieki wielkie za pomoc smile.gif
pozdrawiam
b4rt3kk
Cytat(jacobson @ 11.10.2012, 23:53:58 ) *
tak wlasnie myslalem zeby zamalowac ja bialym boxem. No dobra dzieki wielkie za pomoc smile.gif
pozdrawiam


Nie ma sprawy. smile.gif Również pozdrawiam i owocnej pracy.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.