Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [css] Skalowanie DIV w pionie względem rozmiaru okna, obrazek w DIV się skaluje, a sam DIV nie
rozny
post
Post #1





Grupa: Zarejestrowani
Postów: 116
Pomógł: 0
Dołączył: 14.01.2004
Skąd: Zielona Góra

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


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 (IMG:style_emoticons/default/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.

Ten post edytował rozny 30.09.2013, 21:40:05
Go to the top of the page
+Quote Post
kropamk
post
Post #2





Grupa: Zarejestrowani
Postów: 156
Pomógł: 12
Dołączył: 30.11.2011
Skąd: Gdańsk

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


nie możesz bawić się height min i max, dla slidera pobaw się paddingiem pionowym ustalonym w %

i mam pytanie, po co tyle absolutow (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
rozny
post
Post #3





Grupa: Zarejestrowani
Postów: 116
Pomógł: 0
Dołączył: 14.01.2004
Skąd: Zielona Góra

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


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.
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 11.01.2026 - 02:55