Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Problem z pozycjonowanie
Czapla
post
Post #1





Grupa: Zarejestrowani
Postów: 130
Pomógł: 3
Dołączył: 10.12.2007
Skąd: Bielsko-Biała

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

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

(IMG:http://images31.fotosik.pl/389/6d68fdefb8f89427m.jpg)

Tak inne przeglądarki:

(IMG:http://images31.fotosik.pl/389/7ed3f851e5aba2a9m.jpg)

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

Ten post edytował Czapla 27.10.2008, 13:57:00
Go to the top of the page
+Quote Post
_olo_1984
post
Post #2





Grupa: Zarejestrowani
Postów: 289
Pomógł: 77
Dołączył: 5.08.2006

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

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
Go to the top of the page
+Quote Post
grzesiek_g
post
Post #3





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

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

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.
Go to the top of the page
+Quote Post
hiszpanespaniol
post
Post #4





Grupa: Zarejestrowani
Postów: 213
Pomógł: 39
Dołączył: 7.04.2008
Skąd: 3city

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

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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 16.09.2025 - 17:40
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn