Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Obciecie zdjecia - IE dziwnie wyswietla
Forum PHP.pl > Forum > Przedszkole
darth_sidious
27.11.2007, 23:18:55
Witam

Mam taki kod

[HTML] pobierz, plaintext 
  1. <head>
  2.       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
  3.  
  4. <style type="text/css">
  5.  
  6. div.wrapper {
  7. 	margin:10px;
  8. 	position:relative;
  9. 	float:left;
  10. 	vertical-align:top;
  11. }
  12. div.wrapper img{	
  13. 	float:left;
  14. }
  15. div.wrapper div{	
  16. 	position:absolute;
  17. 	width: 7px;
  18. 	height: 7px;
  19. }
  20. div.wrapper div.tl{
  21. 	background:transparent url(l_g.gif) top left no-repeat;
  22. 	left:0;
  23. 	top:0
  24. }
  25. div.wrapper div.tr{
  26. 	background:transparent url(p_g.gif) top right no-repeat;
  27. 	right:0;
  28. 	top:0
  29. }
  30.  
  31. div.wrapper div.bl{
  32. 	background:transparent url(l_d.gif) bottom left no-repeat;
  33. 	left:0;
  34. 	bottom:0
  35. }
  36. div.wrapper div.br{
  37. 	background:transparent url(p_d.gif) bottom right no-repeat;
  38. 	right:0;
  39. 	bottom:0
  40. }
  41.  
  42. </style>
  43.  
  44.  
  45. </head>
  46.  
  47. <body bgcolor="#1c1c1c">
  48.  
  49.   <div class="wrapper"> 
  50.     <div class="tl"></div> 
  51.     <div class="tr"></div> 
  52.     <div class="bl"></div> 
  53.     <div class="br"></div> 
  54.     <img style="width: 226px; height: 78px; background: transparent url('1_mini.jpg') no-repeat; background-position:center center;\" /></div>
  55.  
  56.  
  57. </body>
  58. </html>
[HTML] pobierz, plaintext


Przycina on zdjecie do konkretnej wysokosci (mierzac od srodka) i wyswietla juz przyciety. Problem polega na tym, ze bez problemu wyswietla sie tylko w Operze. W IE oraz FF wstawia jakas mala ikonke i ramke na cale zdjecie... Gdy zamiast <img stye=".... wstawimy zwykly tag <img> nie ma problemu z wyswietlenie we wszystkich 3 przegladarkach... Wiem, ze cos sknocilem... Tylko co? blinksmiley.gif

link do przykladu tutaj

Pozdrawiam
Darth
nevt
28.11.2007, 08:37:09
witam ponownie mój nowy uczniu smile.gif
[PHP] pobierz, plaintext 
  1. <?php
  2. //tutaj...
  3. 	<img style="width: 226px; height: 78px; background: transparent url('1_mini.jpg') no-repeat; background-position:center center;\" />
  4. // po co ten '' na końcu style questionmark.gif
  5. // o ile dobrze przeczuwam co osiągnąć pragniesz, zamień to na
  6. 	<div style="width: 226px; height: 78px; background: transparent url('1_mini.jpg') no-repeat; background-position:center center;" ></div>
  7. // i oczy swe ciesz wynikiem...
  8. ?>
[PHP] pobierz, plaintext

pozdrawiam
darth_sidious
28.11.2007, 09:22:04
Dluga droga jeszcze przede mna, ale kto chce tajniki wszelakie poznac, cierpliwosci i wytrwalosci nauczyc sie musi... Niestety, z ciemna strona ponownie zmierzyc bedzie mi dane... Obraz wyswietla bowiem tak jak chcialem, przyciety, ale bez zaokraglonych rogow... I znow o uzycie Mocy prosic Cie musze... Moze za duzo <div>'ow wkradlo sie w moj kod...

Pozdrawiam
Darth
nevt
28.11.2007, 11:13:38
po prostu przesun w kodzie ten <div> z obrazkiem przed <div>'y z naroznikami...
albo nadaj im wszystkim w stylach właściwość z-index... jak nie ma z-indeks to o nakladaniu elementow pozycjonowanych absolutnie decyduje kolejnosc wystapienia znacznika w kodzie...
pozdrawiam.
darth_sidious
28.11.2007, 20:31:17
Faktycznie.... Przenioslem%2
nevt
28.11.2007, 20:45:11
tutaj:
[PHP] pobierz, plaintext 
  1. <?php
  2. <div class="wrapper">
  3. ?>
[PHP] pobierz, plaintext

nadaj temu elementowi taką samą wysokość jak obrazkowi...
względem niego pozycjonujesz, jego wysokość wynosi 0px (bo w srodku jest wszystko ustawiane absolutnie), a tabelka umieszcza go pośrodku komórki (domyślnie), czyli wzgledem tego elementu top=0px wskazuje na śridek komórki tabeli...
powodzenia.
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.