Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Iframe jako responsive
piotr485
post 22.04.2016, 16:44:22
Post #1





Grupa: Zarejestrowani
Postów: 292
Pomógł: 0
Dołączył: 10.07.2009

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


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ę
Go to the top of the page
+Quote Post
Tomplus
post 22.04.2016, 17:56:22
Post #2





Grupa: Zarejestrowani
Postów: 1 840
Pomógł: 226
Dołączył: 20.03.2005
Skąd: Będzin

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


Coś takiego?

https://jsfiddle.net/eqow44q8/1/
Go to the top of the page
+Quote Post
piotr485
post 22.04.2016, 18:11:09
Post #3





Grupa: Zarejestrowani
Postów: 292
Pomógł: 0
Dołączył: 10.07.2009

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


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

Ten post edytował piotr485 22.04.2016, 18:27:01
Go to the top of the page
+Quote Post
koodo218
post 22.04.2016, 18:37:06
Post #4





Grupa: Zarejestrowani
Postów: 114
Pomógł: 25
Dołączył: 22.11.2015

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


Usuń parametry width i height z .video iframe.


--------------------
Słaba znajomość (ale się staram): HTML5, CSS3, JavaScript, SQL, Access
Go to the top of the page
+Quote Post
piotr485
post 22.04.2016, 18:43:34
Post #5





Grupa: Zarejestrowani
Postów: 292
Pomógł: 0
Dołączył: 10.07.2009

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


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
Go to the top of the page
+Quote Post
koodo218
post 22.04.2016, 19:41:17
Post #6





Grupa: Zarejestrowani
Postów: 114
Pomógł: 25
Dołączył: 22.11.2015

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


W twoim kodzie masz powtórzony identyfikator #prawa.


--------------------
Słaba znajomość (ale się staram): HTML5, CSS3, JavaScript, SQL, Access
Go to the top of the page
+Quote Post
piotr485
post 22.04.2016, 20:02:43
Post #7





Grupa: Zarejestrowani
Postów: 292
Pomógł: 0
Dołączył: 10.07.2009

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


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....
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: 3.05.2024 - 03:24