Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS] Scrolling warstwy, pasek przewijania po prawej stronie
Mostrom
post 11.08.2010, 16:35:28
Post #1





Grupa: Zarejestrowani
Postów: 83
Pomógł: 3
Dołączył: 17.04.2007

Ostrzeżenie: (0%)
-----


Witam! Mam problem z prawidłowym skonfigurowaniem pewnego diva. Chodzi mi o efekt tzw. znaku wodnego, czyli tło nie może się przesunąć, a najbardziej zewnętrzny div ma mieć włączony scroll. Na początku kodzik:
  1. <div class="cont">
  2. <div class="all">
  3. //Zawartość strony, długa, ponad ekran
  4. </div>
  5. </div>


CSS:
Kod
.cont {width: 100%;
    height:  100%;
    overflow: auto;
    position:absolute;}

.all { min-width: 1090; height: auto;
    margin: 0 auto;
    margin-top: 20px;
    position: absolute;
    z-index: 1;
    margin-left: -545px;
    left: 50%;
    border: 4px solid #000000;
    }


No i powyższy kodzik spełnia swoją funkcję, jednak dość brzydko. Mianowicie przez nadanie width i height 100% warstwie CONT, on dodaje pół paska przewijania za ekranem. Jak zrobić, żeby pasek przewijania był tak jak teraz po prawej stronie na końcu ekranu, ale, żeby przylegał swoją krawędzią do krawędzi ekranu??
Go to the top of the page
+Quote Post
Damonsson
post 12.08.2010, 01:59:16
Post #2





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----


  1. .cont {width: 100%;
  2. height: 100%;
  3. overflow: auto;
  4. position:absolute;
  5. margin: -8px -7px;
  6.  
  7. .all { min-width: 1090; height: auto;
  8. margin: 0 auto;
  9. margin-top: 20px;
  10. position: absolute;
  11. z-index: 1;
  12. margin-left: -545px;
  13. left: 50%;
  14. border: 4px solid #000000;
  15. }

O to chodzi?
Go to the top of the page
+Quote Post
Mostrom
post 12.08.2010, 17:22:36
Post #3





Grupa: Zarejestrowani
Postów: 83
Pomógł: 3
Dołączył: 17.04.2007

Ostrzeżenie: (0%)
-----


Dopiero teraz na to wpadłem, po co robić nową warstwę ze scrollingiem, jak w stylu body background można zrobić tak:
Kod
background:  #000000 url(...) 50% 0 fixed no-repeat;

To rozwiązało mój problem. Dzięki dodaniu fixed, obraz zostaje w miejscu a reszta się przesuwa. Oto mi chodziło.
Dzięki
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 24.04.2025 - 05:08