Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Divy wyrzucane poza przeźroczyste section
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
ktostam
Witam, właśnie zrobiłem przeźroczysty section, a w nim są divy. Problem jest taki, że gdy divy mają być obok siebie i ustawiam im float, to wtedy divy wyrzucane są poza tego diva przeźroczystego, gdy jeden div ma float: left, a drugi nic, to są oba w przeźroczystym section, ale są pod sobą, więc jest źle. A powinny być obok siebie w section przeźroczystym, czy ma ktoś pomysł, jak to naprawić?

Te dwa divy, są wyrzucane poza przeźroczysty game_description, natomiast h1 jest nadal w przeźroczystym section gdy nie ma ustawionego float.

  1. <div id="game_panel_left">
  2. <p class="panel_left_paragraph">tekst</p>
  3. </div>
  4. <div id="game_panel_right">
  5. <p class="panel_right_paragraph">cos tam</p>
  6. </div>


Tutaj zaczyna się kod strony

  1. <section id="game_description">
  2. <div id="game_logo">
  3. <img src="images/obrazek.png" alt="" />
  4. </div>
  5. <div id="game_info">
  6. <h1>Jakis tekst</h1>
  7. <div id="game_panel_left">
  8. <p class="panel_left_paragraph">tekst</p>
  9. </div>
  10. <div id="game_panel_right">
  11. <p class="panel_right_paragraph">cos tam</p>
  12. </div>
  13. </div>
  14. </section>


  1. #game_description {
  2. background-color: #000;
  3. width: 700px;
  4. height: auto;
  5. /*-khtml-opacity:.50;
  6. -moz-opacity:.50;
  7. -ms-filter:"alpha(opacity=50)";
  8. filter:alpha(opacity=50);
  9. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  10. opacity:.50; */
  11. color: #fff;
  12. margin: 0 auto;
  13. padding: 0 auto;
  14. display: block;
  15. /* For IE 5.5 - 7 */
  16. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#fff);
  17. /* For IE8 */
  18. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#fff)";
  19. /* 50% opacity */
  20. background: rgba(0, 0, 0, 0.43);
  21. -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
  22. }
  23.  
  24. #game_info {
  25.  
  26. }
  27.  
  28. #game_logo {
  29. padding-top: 50px;
  30. margin: 50px;
  31. }
  32.  
  33. #game_panel_right {
  34. width: 199px;
  35. float: left;
  36. }
  37.  
  38. #game_panel_left {
  39. float: left;
  40. width: 500px;
  41. }
Olsz4k
Dziwne, skopiowałem kod i panel_left, oraz panel_right ładnie siedzą w section. Sprawdź kod jeszcze raz czy masz wszystko podomykane.
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.