Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Iframe jako responsive
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
piotr485
Witam, mam taki problem otóż mam taki układ strony:
Z lewej długi wysoki div, a z prawej dwa o połowę niższe divy przylegające do niego.

Oto mój kod:
  1. <style type="text/css">
  2.  
  3. body {
  4.  
  5. margin:0 auto;
  6. max-width: 1200px;
  7. padding:0px;
  8. outline:none
  9. font-size: 12px;
  10. color: white;
  11. font-family: Verdana;
  12. background: #ebf1f8;
  13. color: #949494;
  14. }
  15.  
  16.  
  17. #lewa {
  18.  
  19. float: left;
  20. width: 50%;
  21.  
  22. }
  23.  
  24. #prawa {
  25.  
  26. float: left;
  27. width: 50%;
  28.  
  29.  
  30. }
  31.  
  32. .video {
  33. position: relative;
  34. padding-bottom: 56.25%;
  35. padding-top: 0px;
  36. height: 0;
  37. overflow: hidden;
  38. }
  39.  
  40. .video iframe {
  41. position: absolute;
  42. top:0;
  43. left: 0;
  44. width: 100%;
  45. height: 50%;
  46. }
  47.  
  48.  
  49.  
  50. </style>
  51.  
  52.  
  53. <div id="lewa"><img src="images/reklama_lewa.jpg" style="width: 100%; max-width: 600px;"></div>
  54. <div class="video" id="prawa">
  55. <iframe height="258" width="600" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
  56. </div>
  57.  
  58. <div class="video" id="prawa"><iframe src="iframe.html" height="258" width="600"></iframe></div>
  59.  
  60.  


Klasę video znalazłem na internecie i nie do końca ją rozumiem, ale działa dobrze z tym, że w tym przypadku nie do końca - źle się układają divy.

Przy tym kodzie z lewej jest reklama, a z prawej ramka z tym, że druga ramka nie jest tuż pod spodem tylko z wielką luką.

Jak usunę class="video" z diva to układa się prawidłowo więc gdzies jest problem z tą klasą tylko nie bardzo wiem jak to poprawić.

Teraz wygląda tak:


a chodzi o to aby ta niebieska iframe byla pod zielonym.

Ktoś pomoże?

Z góry dziękuję
Tomplus
Coś takiego?

https://jsfiddle.net/eqow44q8/1/
piotr485
Cytat(Tomplus @ 22.04.2016, 18:56:22 ) *


No prawie tylko, że niestety wysokość tych dwóch iframe powinna mieć wysokość lewej reklamy i być automatycznie dopasowywana a teraz wogóle nie reaguje sad.gif
koodo218
Usuń parametry width i height z .video iframe.
piotr485
Cytat(koodo218 @ 22.04.2016, 19:37:06 ) *
Usuń parametry width i height z .video iframe.


usunełem wtedy wysokość się poprawia, ale w tym kodzie podanym przez tomplus już szerokość i wysokość nie jest responsive sad.gif
koodo218
W twoim kodzie masz powtórzony identyfikator #prawa.
piotr485
Cytat(koodo218 @ 22.04.2016, 20:41:17 ) *
W twoim kodzie masz powtórzony identyfikator #prawa.


Toć to nie ma znaczenia ... po za tym w kodzie od tomplus nie ma juz powtorzenia...

Ktoś pomoże ? walczę już z tym 4 godziny i mnie szlak bierze....
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-2024 Invision Power Services, Inc.