Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] CSS osobny dla każdej z przeglądarek
Kuziu
post
Post #1





Grupa: Zarejestrowani
Postów: 743
Pomógł: 0
Dołączył: 11.11.2003
Skąd: Toruń

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

Witam,
Już wysiadam z tymi stylami, co wstawię w FireFox'ie to pod IE źle co tu to tam...

Wpisuje margin:1px; W mozilli jest 1px w IE 2px no i wkońcu pomyślałem czy nie zrobić 2-3 styli dla IE / Firefox'a / Opery.

Pytanie tylko czy jest to dobre rozwiązanie. I czy Wy męczycie się z dostosowywaniem wszystkiego pod 1 CSS czy też robicie kilka wersji potem php'em wykrywacie jaka to przeglądarka i dajcie odpowiedni CSS.

(IMG:http://forum.php.pl/style_emoticons/default/tiredsmiley.gif)
Go to the top of the page
+Quote Post
revyag
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

Problem z podwójnym marginesem można rozwiązać nadając elementowi styl float.
Zawsze robię jeden plik ze stylami. Nigdy jeszcze nie miałem tak dużych kłopotów żeby dla każdej przeglądarki robić osobny css.
To jest kwestia kompromisu -> z niektórych rzeczy trzeba zrezygnowac,inne inaczej zaprojektować. Przydaje się tu doświadczenie w projektowaniu styli. Znajomość tego jak przeglądarki będą reagować na dany styl, no i w razie kłopotów najlepsza pomoc to google (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
spit
post
Post #3





Grupa: Zarejestrowani
Postów: 135
Pomógł: 0
Dołączył: 1.08.2005

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

Oczywiście można zdefiniować dwa style, jeden dla Opery / Mozilli / FF itd. a inny dla IE. Kod to (wpisz pod umieszczeniem stylu głównego) 
[HTML] pobierz, plaintext 
  1. <!--[if IE]>
  2. <link href="http://twojastrona.pl/styl_ie.css" rel="stylesheet" type="text/css" media="screen">
  3. <![endif]-->
[HTML] pobierz, plaintext
Ale nie polecam tego rozwiązania. Jak napisał kolega wyżej - trzeba szukać kompromisu.

Ten post edytował spit 3.04.2006, 09:47:10
Go to the top of the page
+Quote Post
Kuziu
post
Post #4





Grupa: Zarejestrowani
Postów: 743
Pomógł: 0
Dołączył: 11.11.2003
Skąd: Toruń

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

Jak to zrobić to wiem.

Pytanie właśnie czy tak robić czy nie. I dlaczego.

Dlaczego nie polecasz takiego rozwiązania ?

I czy np. Wyszukiwarki indeksując stronę często podają się za różne przeglądarki nie pomyślą że coś kręce ?

Czytałem że roboty wyszukujące czasami podają się za inne przeglądarki by sprawdzić czy nie przedstawia im się innej wersji strony niż użytkownikom.
Go to the top of the page
+Quote Post
mike
post
Post #5





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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

~spit dlaczego nie polecasz tego rozwiązania? Moim zdaniem jest najlepsze.

~Kuziu a od kiedy roboty indeksują style strony? One indeksują zawartosć, treść strony. I o to chodzi ze sprawdzaniem co im przedstawiasz a co użytkonikom.
Bo może być tak, że robotom pokazujesz stroną nafaszerowaną słowami kluczowymi, linkami i innymi gadżetami a użytkownikom "normalną stronę".
Go to the top of the page
+Quote Post
Kuziu
post
Post #6





Grupa: Zarejestrowani
Postów: 743
Pomógł: 0
Dołączył: 11.11.2003
Skąd: Toruń

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

Mogą sprawdzać czy np. nie mam słów kluczowych wpisanych czcionką 1px czy nie mam słów kluczowych wpisanych kolorem tła których nie widać itp.

mike_mech robiłeś tak kiedyś ?
Go to the top of the page
+Quote Post
mike
post
Post #7





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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

Cytat(Kuziu @ 2006-04-03 14:59:10)
mike_mech robiłeś tak kiedyś ?

Pociąłem już wiele designów. Każdy zawsze dostawał alternatywne style dla badzIEwia.

Przykład:

[PHP] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  4.   <head>
  5. 	<style type="text/css">
  6. 	  html, body {
  7. 		  font: 11px Tahoma, Verdana, sans-serif;
  8. 	  }
  9.  
  10. 	  div {
  11. 		  margin: auto;
  12. 	  }
  13.  
  14. 	  div#siteContainer {
  15. 		  width: 500px;
  16. 		  padding: 10px 0 50px 0;
  17. 		  border: #f00 solid 1px;
  18. 	  }
  19.  
  20. 	  div#width200 {
  21. 		  width: 200px;
  22. 		  height: 13px;
  23. 		  background-color: #f00;
  24. 		  text-align: center;
  25. 		  color: #fff;
  26. 	  }
  27.  
  28. 	  div#width300 {
  29. 		  width: 300px;
  30. 		  height: 13px;
  31. 		  background-color: #00f;
  32. 		  text-align: center;
  33. 		  color: #fff;
  34. 	  }
  35.  
  36. 	  div.spacer {
  37. 		  height: 10px;
  38. 	  }
  39.  
  40. 	  div#box {
  41. 		  width: 200px;
  42. 		  height: 200px;
  43. 		  padding: 50px;
  44. 		  border: #f00 dashed 1px;
  45. 	  }
  46. 	</style>
  47.   </head>
  48.  
  49. <body>
  50.  
  51. <div id="siteContainer">
  52.  
  53.   <div id="width200">200px long</div>
  54.   <div id="width300">300px long</div>
  55.  
  56.   <div class="spacer"></div>
  57.  
  58.   <div id="box">
  59. 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
     Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
    y of type and scrambled it to make a type specimen book. It has survived not only
     five centuries, but also the leap into electronic typesetting, remaining essenti
    ally unchanged. It was popularised in the 1960s with the release of Letraset shee
    ts containing Lorem Ipsum passages, and more recently with desktop publishing sof
    tware like Aldus PageMaker including versions of Lorem Ipsum.
  60.   </div>
  61.  
  62. </div>
  63.  
  64. </body>
  65. </html>
[PHP] pobierz, plaintext


Zerknij na wygląd w przeglądarce i "przeglądarce".
Widzimy dwa najczęściej pojawiające się problemy. Źle obliczona długość i nieumiejętność wycentrowania. Niby mało a strona rozwaliła się w drobny mak.

A wystarczy dodać w sekcji <head> (po powyżej deklaracji styli):
[HTML] pobierz, plaintext 
  1. <!--[if lte IE 6]>
  2.       <style type="text/css">
  3.         html, body {
  4.             text-align: center;
  5.         }
  6.  
  7.         div#box {
  8.             width: 300px;
  9.             text-align: left;
  10.         }
  11.       </style>
  12.     <![endif]-->
[HTML] pobierz, plaintext

... i strona wygląda jak powinna w każdej przeglądarce, nawet w badzIEwiu.

To niech mi teraz ktoś pokaże prostszą metodę (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

----
Tak, wiem że jest tag [ php ] zamiast [ html ] Jak wiecie [ html ] żle formatuje wcięcia, dlatego aby je uwidocznić zastosowałem [ php ]
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: 23.08.2025 - 03:50
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn