Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Skalowanie DIV w pionie względem rozmiaru okna
Forum PHP.pl > Forum > Przedszkole
rozny
Witam, mam mały problem, przez który stoję w miejscu.

Mam div'a ze sliderem. W środku przewijają się duże obrazki (535px wysokości). Przy mojej natywnej rozdziałce 1366x768 wszystko jest ładnie pięknie, ale przy skalowaniu okna do mniejszych rozdzielczości obrazek ładnie się skaluje, a DIV cały czas tkwi w stałej wysokości 535px. Próbowałem już kombinować z min-height, max-height itd, ale bez skutku. Albo obrazek jest przyklejony na stałe do DIV i się nie skaluje, albo skaluje się sam obrazek a reszta bloku trzyma stałą wartość.

Tutaj jest strona:

www.rodan-expert.pl

Kod diva ze sliderem i menu:

  1. <section class="top_slider">
  2.  
  3. <div id="slideshow">
  4.  
  5. <div class="slides"><img src="frontend/gfx/zagle.png" class="slide_img" /></div>
  6. <div class="slides"><img src="frontend/gfx/wiatraki.png" class="slide_img" /></div>
  7.  
  8. </div>
  9.  
  10. <nav class="main_menu">
  11.  
  12. <ul>
  13.  
  14. <li><a href="#">O NAS</a></li>
  15. <li><a href="#">OFERTA</a></li>
  16. <li><a href="#">PORTFOLIO</a></li>
  17. <li><a href="#">KONTAKT</a></li>
  18.  
  19. </ul>
  20.  
  21. </nav>
  22.  
  23. </section>


CSS:

  1. .top_slider {
  2.  
  3. position: relative;
  4. width: 100%;
  5. min-width: 480px;
  6. height: 100%;
  7. min-height: 537px; <!-- tu kombunuję, jak ustawię wartość mniejszą to obrazek nie jest widoczny w całości, jak w ogóle usunę to znika cały DIV ze sliderem i menu -->
  8. max-height: 537px;
  9. background-color: #000;
  10. overflow: hidden;
  11.  
  12. }
  13.  
  14. .slide_img {
  15.  
  16. display: block;
  17. position: relative;
  18. width: 100%;
  19. height: auto;
  20. min-width: 480px;
  21. min-height: 200px;
  22. max-width: 1366px;
  23. max-height: 537px;
  24. overflow: hidden;
  25.  
  26. }


Strona jest moja - to nie jest żadne komercyjne zlecenie - jakby ktoś miał wątpliwości wink.gif

Proszę o jakąś wskazówkę jak to ugryźć bo już skończyły mi się pomysły. Nie chcę używać JS, bo wiem że można takie proste skalowanie załatwić CSS.
kropamk
nie możesz bawić się height min i max, dla slidera pobaw się paddingiem pionowym ustalonym w %

i mam pytanie, po co tyle absolutow questionmark.gif
rozny
Dzięki, padding-bottom pomógł.

Co do absolutów to ile tyle? Mam 3 kontenery pozycjonowane absolutnie. Menu względem boxu ze sliderem, żeby zawsze było przy dolnej krawędzi slidera i dwa divy pozycjonowane absolutnie względem okna przeglądarki (w jednym jest odtwarzacz, w drugim logo) - ale zobaczę czy zostaną - na razie wyleciały z indexu.
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.