Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]rózne wyglądy..
Forum PHP.pl > Forum > Przedszkole
Michał90
Witam,
Dlaczego to jest inaczej pod inną przeglądarką. Jak zrobić, żeby było to tak jak na IE ?




  1. #logotl{
  2. background-image : url('images/logotl.gif');
  3. background-repeat : repeat -x;
  4. height : 163px;
  5. margin : 0px 0px 0px 0px;
  6. width : auto;
  7. }
  8. #logo{
  9. background-image : url('images/logo.gif');
  10. background-repeat : repeat -x;
  11. height : 163px;
  12. margin : 0px 0px 0px 0px;
  13. width : 276px;
  14. }
  15.  
  16. #str{
  17. background-image : url('images/st.gif');
  18. height : 20px;
  19. margin : 0px 5px 0px 0px;
  20. float:right;
  21. width : 108px;
  22. }
  23. #grafika{
  24. background-image : url('images/gr.gif');
  25. height : 20px;
  26. margin : 0px 5px 0px 0px;
  27. float:right;
  28. width : 57px;
  29. }
  30. #inne{
  31. background-image : url('images/inne.gif');
  32. height : 20px;
  33. margin : 0px 5px 0px 0px;
  34. float:right;
  35. width : 79px;
  36. }
  37. #kontakt{
  38. background-image : url('images/kontakt.gif');
  39. height : 20px;
  40. margin : 0px 20px 0px 0px;
  41. float:right;
  42. width : 56px;
  43. }


  1. <div id = "logotl"><div id = "logo"></div>
  2. <div id = "kontakt"></div>
  3. <div id = "inne"></div>
  4. <div id = "grafika"></div>
  5. <div id = "str"></div>
  6. </div>


jestem początkującym w css smile.gif

Pozdrawiam
no_face
Tylko dlatego to wyglada inaczej, gdyz przegladarki na wlasny sposob interpretujac kod. By wygladalo to podobnie stosuje sie rozne sztuczki, ktorych zastosowanie nie powinno miec miejsca, wszystkie przegladarki wg mnie powinny reprezentowac b. podobnie stronny www.
jinchuriki
Musiał byś zrobić osobne style do IE i FF.
Gryf
poco osobne style?
wystarczy dodać br ze właściwością clear ustawioną na both
po #str
tak to jest gdy stosuje się float (a ten efekt wynika ze specyfikacji)
PawelC
ja w takim wypadku stosuje dla mozilli normalnie np width:300px; a dla IE *width:280px; oczywiście w tym samym pliku css, bo jakbym dał 300px dla IE to za duże by było. Z tą * tylko IE interpretuje smile.gif
Michał90
To czym zamienić float ?
Jak ma wyglądać ten kod, żeby występował ten sam efekt na każdej przeglądarce?
hiszpanespaniol
elementy nawigacyjne to nie są div'y lecz odnośniki.
Stwórz listę <ul> odnośników, tylko jej nadaj "id". Kolejnym pozycjom listy nadaj klasę (czyli pozamieniaj np #kontakt na .kontakt) i wtedy:
  1. #menu {
  2. float: right;
  3. margin: 0;
  4. height: 20px;
  5. clear: both;
  6. padding: 0 20px 0 0;
  7. list-style-type: none;
  8. }
  9. #menu li {
  10. margin: 0;
  11. height: 20px;
  12. float: left; /*żebyś w kodzie nie musiał pisać od końca */
  13. }
  14. #menu li a {
  15. display: block;
  16. height: 100%;
  17. float: left; /* to dla ie6 */;
  18. text-align: left;
  19. text-indent: -999em;
  20. background-position: left top;
  21. background-repeat: no-repeat;
  22. }

jeśli lelementy są floatowane, to szerokości już nie mają na 100%, każdy ma "auto". teraz używasz tych klas które zrobiłeś z "id" i definiujesz w nich tylko szerokość elementu i obrazek tła.
  1. li.kontakt a {
  2. background-image: url('images/kontakt.gif');
  3. width: 56px;
  4. }

jedyne co może się inaczej wyświetlać pod ie i pod Fx, to paddingi i marginesy całej listy. Poczytaj o odpowiednich deklaracjach typu dokumentu i wtedy będzie git wszędzie.

Nie ucz się niewłaściwego stosowania znaczników. Teraz (w Twoim kodzie) jak wyłączysz css, to menu znika, a powinno być czytelne i dostępne.

edit:
jeszcze osobną kwestią pozostaje to, czy jest sens tworzyć obrazki jeśli jest na nich właściwie tylko tekst.
Michał90
Czy będzie ktoś tak miły, uprzejmy i mi sklei laya?

Pozdr.
hiszpanespaniol
ja mogę bardzo chętnie, oczywiście nie za darmo. odezwij się na pw jeśli jesteś zainteresowany. Ewentualnie napisz post na giełdzie, ktoś się zainteresuje.
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.