Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z position:relative w Google Chrome?
Forum PHP.pl > Forum > Po stronie przeglądarki
f4ll3ns3raf1n
Witam,
po krótce, poniżej zdjęcia tego, jak wygląda wyświetlenie strony na 3 przykładowych przeglądarkach:




zasadnicze pytanie: co chromik robi nie tak, że biało-niebieski DIV wchodzi na pomaranczowy sidebar?
jak to zniwelować?
poniżej zamieszczam 2 listingi:

  1. body { background: #f3f4df; font-family: verdana, tahoma; font-size: 12pt; color: black; }
  2. #pageBody { width: 1024px; }
  3.  
  4. #header { height: 353px; margin-top: 47px; background: url('images/header_bg_gradient.jpg') repeat-x 0 84px; }
  5. #header #logo { position: absolute; width: 266px; height: 219px; background: #4a7db9; margin: 0 0 0 16px; }
  6. #header #menu { position: absolute; width: 734px; height: 63px; margin: 22px 0 0 290px; }
  7. #header #image { position: absolute; width: 742px; height: 269px; margin: 84px 0 0 282px; }
  8.  
  9. #top_menu_list ul { }
  10. #top_menu_list li { display: box; float: left; width: 142px; height: 62px; margin-left: 2px; }
  11. #top_menu_list #home { background: #6633cc }
  12. #top_menu_list #o_firmie{ background: #006699 }
  13. #top_menu_list #oferta { background: #cc6633 }
  14. #top_menu_list #sklep { background: #669900 }
  15. #top_menu_list #kontakt { background: #ec8014 }
  16.  
  17. #sidebar { position: absolute; width: 226px; margin: -62px 0 0 36px; border: #ff7801 solid; /**/height: 400px; }
  18.  
  19. #content { width: 717px; position: relative; margin: 26px 0 0 272px; }
  20. #content #mp_topbox { background: #bddef1; }
  21. #content #mp_bottombox { background: white; }
  22.  
  23. #footer { height: 30px; background-color: #333399; color: white; font-size: 10px; }
  24. #footer a { font-weight: bold; color: white; }


  1. <center><div id="pageBody">
  2. <div id="header">
  3. <div id="logo">LOGO</div>
  4. <div id="menu">
  5. <ul id="top_menu_list">
  6. <li id="home">Home</li>
  7. <li id="o_firmie">O firmie</li>
  8. <li id="oferta">Oferta</li>
  9. <li id="sklep">Sklep</li>
  10. <li id="kontakt">Kontakt</li>
  11. </ul>
  12. </div>
  13. <div id="image">Image</div>
  14. </div>
  15. <div id="sidebar">
  16. SIDEBAR<?php // get_sidebar(); ?>
  17. </div>
  18. <div id="content">
  19. <div id="mp_topbox">Witajcie na naszej stronie</div>
  20. <div id="mp_bottombox">W naszej ofercie ujrzycie panstwo</div>
  21. </div>
  22. <div class="clr"></div>
  23. <div id="footer">FOOTER<?php get_footer(); ?></div>
  24. </div></center>



DIV Content ma być ze zmienną wysokością, która zawsze będzie przewyższać sidebar, dlatego nie może to być position: absolute;
czy ma ktoś jakiś pomysł, jak to rozwiązać?
przykład strony tutaj: http://uslugi-dekarskie.one.pl/
gigzorr
za duzo position:absolute,relative zacznij uzywac floatow i clearowania bo pod kazda bedzie zle.
f4ll3ns3raf1n
rzeczywiście proste rozwiązanie :-)
  1. #content { width: 717px; float:right ; margin: 26px 29px 0 272px; }


wczoraj najwidoczniej nie była pora na kodzenie, serdeczne dzięki!
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.