Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML]Błędne wyświetlanie grafiki w IE, nie można ustawić jej w jednej linii z tekstem
mefistofeles
post 7.05.2010, 06:07:39
Post #1





Grupa: Zarejestrowani
Postów: 255
Pomógł: 0
Dołączył: 23.06.2009

Ostrzeżenie: (10%)
X----

Mam taki kodzik:

[HTML] pobierz, plaintext 
  1. <strong>Ocena:</strong> <span class="pokaz-w-linii">
  2. <ul class="ocenianie-gwiazdki male-gwiazdki">
  3. <li class="aktualna-ocena" style="width:'.$widthoce.'%;" title="Aktualna ocena to '.$ocena[$i].'">Aktualna ocena to '.$ocena[$i].'</li>
  4. </ul>
  5. </span>
[HTML] pobierz, plaintext



Oraz taki css do niego:

[CSS] pobierz, plaintext 
  1. .pokaz-w-linii{ display:-moz-inline-block; display:-moz-inline-box; display:inline-block; vertical-align: middle; }
  2. .ocenianie-gwiazdki { position:relative; width:125px; height:25px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; }
  3. .ocenianie-gwiazdki li { display: inline; }
  4. .ocenianie-gwiazdki a, .ocenianie-gwiazdki .aktualna-ocena{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; line-height:25px; outline:none; overflow:hidden; border: none; }
  5. .ocenianie-gwiazdki a:hover, .ocenianie-gwiazdki a:active, .ocenianie-gwiazdki a:focus{ background-position: left bottom;}
  6. .ocenianie-gwiazdki .aktualna-ocena{ z-index:1; background-position: left center; }
  7. .ocenianie-gwiazdki a.gwiazdka-j { width:20%; z-index:6; }
  8. .ocenianie-gwiazdki a.gwiazdka-d { width:40%; z-index:5; }
  9. .ocenianie-gwiazdki a.gwiazdka-t { width:60%; z-index:4; }
  10. .ocenianie-gwiazdki a.gwiazdka-c { width:80%; z-index:3; }
  11. .ocenianie-gwiazdki a.gwiazdka-p { width:100%; z-index:2; }
  12. .male-gwiazdki { width:70px; height:14px; }
  13. .male-gwiazdki, .male-gwiazdki a:hover, .male-gwiazdki a:active, .male-gwiazdki a:focus, .male-gwiazdki
  14. .aktualna-ocena { background-image: url(images/gwiazdki_kategory.gif); line-height: 14px; height: 14px; }
[CSS] pobierz, plaintext



Problem polega na tym, że koło napisu "Ocena:" w tej samej linii mają pojawić się gwiazdki.
W FF i Operze wszystko jest ok, w nieszczęsnym IE gwiazdki spadają do nowej linii i mimo różnych kombinacji nie mogę uzyskać w IE
zadowalającego efektu.

Z góry dziękuję za pomoc.
Powód edycji: [Ociu]:
Go to the top of the page
+Quote Post
darophp
post 7.05.2010, 06:16:31
Post #2





Grupa: Zarejestrowani
Postów: 309
Pomógł: 20
Dołączył: 13.02.2010
Skąd: Kęty

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

Ja już nie mogę: 

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
[PHP] pobierz, plaintext


Dodawajcie DOCTYPE Strict na początku sciana.gif


--------------------
Fotografia, projektowanie stron WWW | web-coding.pl - HTML 5 i CSS 3 - już w krótce ;)
Go to the top of the page
+Quote Post
mefistofeles
post 7.05.2010, 06:28:40
Post #3





Grupa: Zarejestrowani
Postów: 255
Pomógł: 0
Dołączył: 23.06.2009

Ostrzeżenie: (10%)
X----

Mam doctype strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Proszę o jakieś sensowne rady.
Go to the top of the page
+Quote Post
pedro84
post 7.05.2010, 09:51:21
Post #4





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Po co Ci ten <span> (w którym jest lista). No i może nadaj liście display:inline ?


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
essey
post 7.05.2010, 10:19:08
Post #5





Grupa: Zarejestrowani
Postów: 118
Pomógł: 5
Dołączył: 9.07.2003
Skąd: Wołów/Wrocław

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

Aleś naładował tam tych styli...

Aby TO zadziałało, wsadź strongi w diva z parametrem float:left. (możesz przenieść go do class oczywiście winksmiley.jpg.
Kod
<div style="float:left"><strong>Ocena:</strong></div>


Oraz dodaj taki sam parametr dla listy. Dzięki temu ustawi się cała lista na prawo od napisu strong.
Kod
.ocenianie-gwiazdki { float: left }


I usuń ten span winksmiley.jpg
Go to the top of the page
+Quote Post
mefistofeles
post 7.05.2010, 12:12:43
Post #6





Grupa: Zarejestrowani
Postów: 255
Pomógł: 0
Dołączył: 23.06.2009

Ostrzeżenie: (10%)
X----

Zmodyfikowałem ten kod tak jak mówiłeś.

Teraz mam:

[HTML] pobierz, plaintext 
  1. <div style="float:left"><strong>Ocena:</strong></div> 
  2. <ul class="ocenianie-gwiazdki male-gwiazdki">
  3. </ul>
[HTML] pobierz, plaintext


i css:

[CSS] pobierz, plaintext 
  1. .ocenianie-gwiazdki {float: left; position:relative; width:125px; height:25px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; }
  2. .ocenianie-gwiazdki li {float: left; display: inline; }
  3. .ocenianie-gwiazdki a, .ocenianie-gwiazdki .aktualna-ocena{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; line-height:25px; outline:none; overflow:hidden; border: none; }
  4. .ocenianie-gwiazdki a:hover, .ocenianie-gwiazdki a:active, .ocenianie-gwiazdki a:focus{ background-position: left bottom;}
  5. .ocenianie-gwiazdki .aktualna-ocena{ z-index:1; background-position: left center; }
  6. .ocenianie-gwiazdki a.gwiazdka-j { width:20%; z-index:6; }
  7. .ocenianie-gwiazdki a.gwiazdka-d { width:40%; z-index:5; }
  8. .ocenianie-gwiazdki a.gwiazdka-t { width:60%; z-index:4; }
  9. .ocenianie-gwiazdki a.gwiazdka-c { width:80%; z-index:3; }
  10. .ocenianie-gwiazdki a.gwiazdka-p { width:100%; z-index:2; }
  11. .male-gwiazdki { width:70px; height:14px; }
  12. .male-gwiazdki, .male-gwiazdki a:hover, .male-gwiazdki a:active, .male-gwiazdki a:focus, .male-gwiazdki
[CSS] pobierz, plaintext


I ciągle gwiazdki zjeżdżają na dół ...
Powód edycji: [Ociu]:
Go to the top of the page
+Quote Post
programista20
post 7.05.2010, 18:19:30
Post #7





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 15.01.2010

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

A jak wygląda gwiazdka do wyświetlenia... Jaki kod tworzy zmienna $ocena[$i] questionmark.gif

Moim zdaniem problem tkwi tutaj pewnie wyświetlasz zamiast img coś innego np. div i powoduje to przeskoczenie grafiki do nowej linii
Go to the top of the page
+Quote Post
mefistofeles
post 8.05.2010, 12:25:11
Post #8





Grupa: Zarejestrowani
Postów: 255
Pomógł: 0
Dołączył: 23.06.2009

Ostrzeżenie: (10%)
X----

Pominelem ta czesc kodu dla ulatwienia i nie ma juz tej zmiennej teraz jest:


[HTML] pobierz, plaintext 
  1.  <div style="float:left"><strong>Ocena:</strong></div>
  2.  
  3.       <ul class="ocenianie-gwiazdki male-gwiazdki">
  4.  
  5.       </ul>
[HTML] pobierz, plaintext


i mimo wszystko dalej przeskakuje na dół, ale jedynie w IE w pozostałych przeglądarkach jest tak jak trzeba.
Go to the top of the page
+Quote Post
Ociu
post 8.05.2010, 12:40:35
Post #9





Grupa: Moderatorzy
Postów: 1 566
Pomógł: 37
Dołączył: 14.05.2003
Skąd: Kraków
@mefistofeles do kodu css posiadamy odpowiednie bbCode - [ css] Proszę zacząc go stosować, aby kod był czytelniejszy.

Pozdrawiam.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 14.08.2025 - 12:19
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn