[html + css] "dostosowanie" strony do przeglądarki (?), na FF jest prawie dobrze - na IE... kicha Opcje

[roobik]

Witam!
Postanowiłem się nieco "pobawić" w przezroczyste napisy na zdjęciach:

Kod

<style>
P.photo {
    FONT-SIZE: 10px; FLOAT: left; MARGIN: 1px 0px 1px 1px; POSITION: relative
}
P.photo A {
    COLOR: red
}

P.photo SPAN.box {
     WIDTH: 170px; BACKGROUND: url(OBRAZKI/tlo_gray.png); FILTER: Alpha(Opacity=10)
}


P.photo SPAN.links {
    DISPLAY: block; PADDING-TOP: 1px
}
.photo STRONG {
    DISPLAY: block; FONT-SIZE: 120%; PADDING-BOTTOM: 2px
}
.photo SPAN {
    BACKGROUND-COLOR: url(OBRAZKI/tlo_gray.png) FILTER: Alpha(Opacity=90); WIDTH: 150; HEIGHT: 35; PADDING-RIGHT: 1px; PADDING-LEFT: 0px; LEFT: 1px; PADDING-BOTTOM: 3px; BOTTOM: 3px; PADDING-TOP: 2px; POSITION: absolute
}
</style>



<TABLE width=585 border=1 align=center vAlign=top>
<tr>
<td width=180 align=center>
<DIV>
<P class=photo><A href="111"><IMG  height=130
alt=""
src="OBRAZKI/!testowy.jpg"
width=170><BR></A><SPAN class=box><A href="222"><STRONG>TYTUŁ</STRONG><BR>TEKST</A></SPAN></P>
</DIV>
</td>
</tr>
</table>

częśćjest "zapożyczona" z interii. Celem jest, by zdjęcie miało efekt taki, jaki jest właśnie na interii na stronie głównej ("Warto zobaczyć")
Czy mógłby mnie ktoś naprowadzić co mam źle, że IE tego nie widzi, a na FF i Operze jest niemal ok?

Próbowałem czegoś takiego:

Kod

<script type="text/javascript">

function _opacity(id, o) {
  var obj = document.getElementById(id).style;
  obj.MozOpacity = (o / 100); // Mozilla i FireFox
  obj.KhtmlOpacity = (o / 100); // Safari < 1.2
  obj.opacity = (o / 100); // Safari 1.2, nowszy FireFox i Mozilla
  obj.filter = "alpha(opacity=" + o + ")"; // Internet Explorer
}

</script>

ale to nic nie dało...
Pomóżcie proszę... (IMG:http://forum.php.pl/style_emoticons/default/sadsmiley02.gif)

[tommy4]

Sam używam tego drugiego sposobu.

Kod

function setOpacity(what, opacity)
{
    var objst = document.getElementById(what).style;
    objst.opacity = (opacity / 100);
    objst.MozOpacity = (opacity / 100);
    objst.KhtmlOpacity = (opacity / 100);
    objst.filter = "alpha(opacity=" + opacity + ")";
}

Działa jak natura chciała, więc pewnie masz błąd w innej części skryptu.

Możesz zobaczyc tutaj: http://tommy4.gtacartel.com

Podejrzewam, że musisz po prostu dodać w css:

opacity: <x>;-moz-opacity: <x>; -khtml-opacity: <x>; filter: alpha(opacity="<x>");

BO Z TEGO CO WIDZĘ U CIEBIE WIDNIEJE TYLKO "FILTER: Alpha(Opacity=90);" (działa tylko w IE) i to w dodatku bez średnika na początku oddzielającego background od filtra.

AHA, no i ten kod wyżej to oczywiście funkcja, musisz ją wywołać poprzez setOpacity("id_obiektu", 100), gdzie 100 jest dowolną liczbą z zakresu od 0 do 100. (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) Taka funkcja przydaje się szczególnie przy dynamiczniej zmianie przeźroczystośći obiektu, np. po najechaniu myszą. Ale skoro ty chcesz dodać tylko do CSS to tak jak wyżej.

Ten post edytował tommy4 28.05.2007, 19:08:10

[roobik]

i to w dodatku bez średnika na początku

fakt (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) ale akurat o tym nie wiedziałem .... (czyt. nie doczytałem tego na innych stronach (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) )

No.... teraz jest tak, że na wszystkim oprócz IE śmiga wyśmienicie (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Ale niestety pod IE-zgrozą WOGÓLE nie widać przezroczystości ;(

Czy byłbyś tak dobry i pokazał przykład w jaki sposób w tabeli to wszystko poukładać? Próbowałem na sposób interii.... ale tam są tak namieszane te style, że historia (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował roobik 28.05.2007, 19:40:05

[tommy4]

Spróbuję, choć nic nie obiecuję, bo zaraz idę film oglądać. (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

no ja mam po prostu klase w css ustawiona:

#costam
{
opacity: 0.9;
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
filter: alpha(opacity = 90);
}

Potem tylko <div id="costam">Tekst</div>

Nie wiem dokładnie o co ci chodzi z tą interią, bo ja tam nie widzę żadnych przeźroczystych tekstów. (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Przykład w tabeli hmm.

no możesz zrobić coś w tym stylu:

<div style="width: 200px; height: 100px; text-align: center; vertical-align: bottom; background: url('jakisobrazek.gif'); border: 1px #ff0000 solid;"><div id="costam" style="width: 200px; height: 20px; color: #ffffff; background-color: #000000;"><span>Jakiś tekst</span></div></div>

Jeśli się nie mylę powinno to wyświetlić prostokąt o wymiarach 200px na 100px z wycentrowaną treścią znajdującą się u dołu prostokątu z obrazkiem tła jakisobrazek.gif, ramką czerwoną 1px. Następnie w tym prostokącie jest drugi prostokąt o przeźroczystości 0.9 (czarny o wysokości 20px z białym tekstem) i w nim Jakiś tekst (dosłownie).

Czarny prostokąt powinien prześwitać na obrazek tła. (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[roobik]

W css-ie nie siedzę prawie w ogóle - proszę o wyrozumiałość (w domyśle: za takie "głupie" pytania). Zrobiłem tak jak poleciłeś. Prawie jest ok. Prawie (robie wielką różnicę (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) ) bo pod innymi niż IE to wszystko ładnie śmiga, lecz z tego co widzę internautów, którzy używają IE jest prawie 70%, a nie chcę zrobić strony "tylko pod coś tam oby to nie był IE)...
Więc prawie wszystko, bo pod IE nie ma efektu przezroczystości.

Nie wiem dokładnie o co ci chodzi z tą interią

Na ich stronie głównej jest to największe zdjęcie (jako pierwszy news). Zakładka "Warto zobaczyć". Nie piszę dokładnie, ponieważ co jakiś czas to się zmienia (teraz - gdy to piszę - są to superjedynki)

BTW:

Możesz zobaczyc tutaj: http://tommy4.gtacartel.com

Twoja stronka jest w budowie.... (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

//EDIT
Poradziłem sobie jakoś... jest już tak jak chciałem. Szybko się uczę (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Jednego jeszcze nie wiem: gdzie zmienić aby "Jakiś text" (i to dosłownie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) ) był na dole, a nie u góry?

Ten post edytował roobik 28.05.2007, 21:12:45

[tommy4]

Tak samo jak masz w zewnętrznym divie: "vertical-align: bottom;", to samo dodajesz do wewnętrznego diva.

[roobik]

Niestey (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Nie działa.....
Dalej tekst mam u góry zdjęcia

[tommy4]

u góry zdjęcia, czy u góry czarnego tła?

[HTML] pobierz, plaintext 
<div style="width: 200px; height: 100px; text-align: center; vertical-align: bottom; background: url('jakisobrazek.gif'); border: 1px #ff0000 solid;">
<div id="costam" style="width: 200px; height: 20px; color: #ffffff; background-color: #000000; vertical-align: bottom;"><span>Jakiś tekst</span>
</div>
</div>
[HTML] pobierz, plaintext 

Jeśli to nie działa to spróbuj:

[HTML] pobierz, plaintext 
<div style="width: 200px; height: 100px; text-align: center; vertical-align: bottom; background: url('jakisobrazek.gif'); border: 1px #ff0000 solid;">
<div id="costam" style="width: 200px; height: 20px; color: #ffffff; background-color: #000000; margin-top: 9px;"><span>Jakiś tekst</span>
</div>
</div>
[HTML] pobierz, plaintext 

Czyli dodajesz po prostu miejsce u gory (dalem 9px, ale mozesz go dowolnie zmieniac).

Ten post edytował tommy4 30.05.2007, 09:14:44

[roobik]

Kolejny dzien mija... i dalej top samo (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
Zrobiłem w końcu tak:

[HTML] pobierz, plaintext 
<div style="width: 170px; height: 130px; text-align: center;  vertical-align: bottom; background: url('OBRAZKI/!testowy.jpg'); border: 1px #ff0000 solid;">
<div id="costam" style="width: 170px; height: 20px; color: #ffffff;  vertical-align: bottom; background: url(OBRAZKI/tlo_gray.png); ">
<font face=verdana size=1 color=lightgrey><span><B>Jakiś tekst</B></span></font>
[HTML] pobierz, plaintext 

efekt jest taki jak na załączonym obrazku:
(IMG:http://www.exxec.neostrada.pl/przezr.JPG)

u góry zdjęcia, czy u góry czarnego tła?

tlo napisu (tlo_gray.png) wraz z napisem "Jakiś tekst" powinno być u dołu zdjęcia

[tommy4]

No to skoro vertical-align: bottom nie działa, to daj marginesy u góry.