Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z pozycjonowanie
Forum PHP.pl > Forum > Przedszkole
Czapla
27.10.2008, 13:55:39
Fragment CSS:
[HTML] pobierz, plaintext 
  1. body {
  2. background-color: #000;
  3. color: #8D8D8D;
  4. font-family:"Verdana", sans-serif;
  5. }
  6.  
  7. div{
  8. background-color: #fff; /* ramka */
  9. border: solid #000 0px;
  10. margin-top: 1px;
  11. padding: 2px 2px 2px 2px
  12. }
  13.  
  14. div#pudlo {
  15. width: 500px;
  16. margin: 0 auto;
  17. }
  18.  
  19. div#v { /* vertical menu */
  20. font-size: 14px;
  21. color: #000;
  22. float: left;
  23. overflow: hidden;
  24. position: relative;
  25. }
  26.  
  27. div#tresc {
  28. font-size: 10px;
  29. color: #6E6E6E;
  30. float: right;
  31. overflow: hidden;
  32. }
[HTML] pobierz, plaintext


HTML:

[HTML] pobierz, plaintext 
  1. <head> 
  2.  // meta
  3. </head> 
  4. <body> 
  5. <div id="pudlo"> 
  6.  <div id='naglowek'> SITE</div>  
  7.  <div id='v'><a href=index.php?strona=0>CZYTAJ TO!</a><br> <a href=index.php?strona=1>KONTAKT</a><br></div> 
  8.  <div id="tresc"> 
  9. 		<p>In tristique convallis erat. In pharetra, ligula vitae fringilla ultrices, turpis tellus scelerisque magna, vitae imperdiet nibh quam nec justo. Etiam diam purus, vestibulum id, placerat nec, varius et, augue. Maecenas vitae nulla et est iaculis scelerisque. Mauris tempus sagittis ligula. Nunc consectetuer sem vitae nisl. Praesent sit amet turpis. Sed rutrum blandit tellus. Suspendisse in enim. Ut vel mi.</p> 
  10.  </div>
  11.   <div id="stopka"> 
  12.   <a href="...?subject=test">Kontakt</a> | <a href="info.php">Statystyki</a> 
  13.   </div> 
  14. </div> 
  15. </body> 
  16. </html>
[HTML] pobierz, plaintext


Problem jest: tak wyświetla mi IE



Tak inne przeglądarki:



Jak usunę z css:
[HTML] pobierz, plaintext 
  1. div#tresc {
  2. font-size: 10px;
  3. color: #6E6E6E;
  4.  /* float: right; */
  5. overflow: hidden;
  6. }
[HTML] pobierz, plaintext


to sytuacja jest odwrotna - wyświetla poprawnie na wszystkich przeglądarkach poza IE. W jaki sposób zrobić aby pozycjonowanie było kompatybilne na wszystkich przeglądarkach? Czy da się to zrobić bez dodawania specjalnych reguł css dla IE?

Pozdrawiam
_olo_1984
27.10.2008, 14:38:18
jak już będziesz dość zdesperowany możesz zawsze zrobić:
[HTML] pobierz, plaintext 
  1. <!--[if lt IE 7]><link href="./css/style_ie6_.css" rel="stylesheet" type="text/css" /><![endif]-->
  2. <!--[if IE 7]> <link href="./css/style_ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
  3. <!--[if !IE]>--> <link href="./css/style.css" rel="stylesheet" type="text/css" /> <!--<![endif]-->
[HTML] pobierz, plaintext


pozdr
grzesiek_g
27.10.2008, 14:50:46
Sposób podany przez @_olo_1984 jest dobry, jednak kolejność plików CSS powinna być inna:
1. style dla wszystkich przeglądarek i nie dajemy tego w żadnych komentarzach warunkowych
2. style dla IE6 w komentarzu warunkowym - oczywiście tylko te które mają nadpisać style z pierwszego pliku
3. analogicznie dla IE7 jeśli zajdzie taka potrzeba

Na tym m.in. polega kaskadowość CSS.
hiszpanespaniol
27.10.2008, 17:45:57
stopce daj "clear: both", choć pewnie masz, ale nie wkleiłeś tu. poza tym koniecznie szerokość nadaj elementom które float'ujesz. inaczej robią co chcą. pozliczaj paddingi i bordery i marginesy i w ten sposób oblicz szerokość dla menu i treści. ku pewności dla menu możesz dodać jeszcze clear: left, a dla tekstu float: left zamiast right, ale to już od Ciebie zależy bo może być i right.
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.