tekst na obrazku

[outmc 1]

Witajcie

Chciałbym zrobić coś takiego :

http://hyy.pl/images/13tlo_z_napisem.jpg

 

Tekst jak i obrazki będą się zmieniąć automatycznie po dodaniu newsa.

W swoim systemie CMS mogę tak zrobić ale nie wiem jak dodać tekst na obrazek.

 

W kodzie dodaję :

 

{image}

 

i wyświetlane jest podobnie jak na obrazku wyżej. Problem się pojawia wtedy, gdy chce dodać jeszcze tytuł newsa aby był na obrazku. Co mogę zrobić?

 

bardzo proszę o pomoc.

[regdos 1848]

Obrazek dajesz "pod spód" np. jako tło td, div-a lub cokolwiek innego na to nakładasz napis z tłem z obrazkiem czarnym z przezroczystością np. 80% zapisany jako png32, przez co będzie widać trochę tego obrazka z pod spodu lub ustawiasz tło kolor i nadajesz mu opacity.

[outmc 1]

mozesz przedstawić kod jak to dodajesz ? 

[regdos 1848]

Można to zrobić na kilka sposobów i zależy to od tego jak masz to w CMS-ie zrobione, podejrzyj sobie na wp i onecie jak to maja zrobione.

[outmc 1]

oto moj kod :

 

 

 

 

<style>
div.image { overflow: hidden; position: relative; }
div.image span.image-desc { position: absolute; display: block; bottom: 0; left: 0; right: 0; padding: 10px; background: #000; color: #f80; opacity: 0.6; }
</style>
<ul id="news">
  <li>
<div class="image">
  {image}
   <span class="image-desc">Opis do obrazka</span>
</div>
       </li>
</ul>

 

 

 

 

i tak to sie wyswietla :

 

http://hyy.pl/images/20t1.jpg

[virus4 0]

Nie wiem czy dobrze rozumiem, ale postaram się pomóc.

 

Jeśli chodzi o rozmiar tego tekstu (wraz z tłem) na obrazku, np mają taki obrazek http://t3.gstatic.com/images?q=tbn:ANd9GcRSM1du77ZuZ8uPFG37f_J-6KSphkbncI1tpuxdBxTSAxbmZ8htWA kod powinien wyglądać tak:

<style>
div.image { overflow: hidden; position: relative; width:265;}
div.image span.image-desc { position: absolute; display: block; bottom: 0; left: 0; right: 0; padding: 10px; background: #000; color: #f80; opacity: 0.6; height: X;}
</style>

<ul id="news">
  <li>
<div class="image">
  <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRSM1du77ZuZ8uPFG37f_J-6KSphkbncI1tpuxdBxTSAxbmZ8htWA" />
   <span class="image-desc">Opis do obrazka</span>
</div>
       </li>
</ul>

 

 

Za height: X; (tzn. za X) podajesz wysokość jaką ma mieć ten opis, a za width: 265px; (265px) podajesz szerokość obrazka. Jeśli chcesz ten opis pokryć idealnie z obrazkiem musisz pobawić się pozycjonowaniem w CSS (pozmieniać wartości odpowiednio przy pozycjonowaniu absolutnym, które masz w Twoim kodzie.

 

Pozdrawiam, Kamil.

[outmc 1]

  virus4 niestety nie dało to zadnego efektu 

 

obrazki są jeden pod drugim zamiast obok siebie 

 

 

 

 

Jesli kogoś to interesuje to dodałem ogłoszenie płatne w giełdzie 

[regdos 1848]

http://boski.regdos.com/test/

 

2 górne poprzez opacity, 2 dolne poprzez półprzezroczytego png. Opacity ma tą wadę, że tekst też jest przezroczysty.

[outmc 1]

podglądałem Twoj kod 

 

style="background:url(1.jpg)

 

i juz wiem ze nie bedzie działało 

[regdos 1848]

{image} Ci zwraca już cały <img src ..... ? Nie masz możliwości żeby zwracał tylko url obrazka ?

[regdos 1848]

Pod tym samym adresem masz 2 wersje z img a nie z tłem.

[outmc 1]

efekt jest taki : http://hyy.pl/images/27n2.jpg

 

Wstawiłem kod:

 

<style type="text/css">
<!--
* {font-family:Arial}
#container {width:324px; border:1px solid red; overflow:auto}
#container2 {width:324px; border:1px solid red; overflow:auto}
.obraz {width:150px; height:100px; margin:5px; border:1px solid green; float:left; position:relative;overflow:hidden}
.obraz a { font-size:12px; font-weight:bold;color:#FFFFFF; display:block; text-decoration:none; position:absolute; bottom:0px; padding:5px;width:140px; }
.obraz a.test1{background-color:#000000; opacity:0.7; filter: alpha(opacity=70); }
.obraz a.test2{background:url(bg.png); }
-->
</style>

<div id="container2">
<div class="obraz">{image}
<a class="test1" href="#">{title}</a>
</div>

</div>

 

czyli cały czas są jeden pod drugim zamiast obok siebie 

[regdos 1848]

To coś robisz źle bo u mnie jest dobrze czyli obok, podaj najlepiej link do strony wtedy można coś więcej powiedzieć ale wydaje mi się że niepotrzebnie wstawiasz 2 razy #container2 bo na zrzucie masz 2 czerwone ramki a powinna być jedna .

[outmc 1]

idance.pl/test

 

poprostu zły kod , wstawiając w

bądź w

jest w miare dobrze 

[d.v 1409]

http://golgraf.eu/obrazekztxt/

 

Tak działa (pod Operą, FF i Chrome - każda trochę inaczej renderuje warstwę z tekstem, najlepiej robi to Opera, ale ogólnie na tych przeglądarkach działa, shIEt warstwy z tekstem nie renderuje w ogóle). (w pliku 1.html masz goły kod do skopiowania)

[regdos 1848]

idance.pl/test

poprostu zły kod , wstawiając w <tr> bądź w <li> jest w miare dobrze

Tak jak pisałem wyżej masz dwa razy zawsze diva z id container2, musisz jakoś pobawić się pętlą w CMS-ie żeby div nadrzędny dla obu obrazków był tylko jeden. Bo w końcu div jest blokowym elementem. Przy okazji trzeba by zmienić id-a na class bo element z danym id powinien być tylko jeden na stronie.

 

Wydaje mi się, że wszystko masz i teraz powinieneś trochę posiedzieć nad tym i zrobić sobie.

 

@d.v

I dlatego właśnie lepiej zrobić na półprzezroczystym obrazku zamiast na opacity, bo wszędzie wygląda dobrze i nie ma problemów z renderowaniem i działa wszędzie.

[outmc 1]

dzieki za pomoc ale nic to nie dało 

[d.v 1409]

Regdos: i tu możemy się kłócić, że w zasadzie to na przeglądarkach ta metoda działa, nie działa tylko na najgorszym syfiarzu internetowym... Niestety wszyscy wiemy, jak wielu ludzi nadal z tego cholerstwa korzysta i że trzeba się do tych zagubionych duszyczek dostosowywać :/

 

outmc: może nie zauważyłeś, ale oba obrazki są umieszczone w jednym DIVie "container". U Ciebie każdy obrazek jest w osobnym kontenerze, stąd problem...

[outmc 1]

według mnie problem jest cały czas w kodzie .wstawiłem w

bądź w

i lepiej działa dlatego dajmy sobie już spokoj 

[outmc 1]

a więc mam coś takiego : http://www.idance.pl/test/

 

oto kod :

 

<style>
 ul {
list-style-type: none; display: inline;
margin: 0px;
padding: 0px;
}
.tekst_mini_news {font-size:12px; }
.tekst_mini_news a { font-size:12px; font-weight:bold;color:#FFFFFF; display:block; text-decoration:none; position:absolute; bottom:0px; padding:5px;width:140px; }
.tekst_mini_news a.test1{background-color:#000000; opacity:0.7; filter: alpha(opacity=70); }
 </style>

 <ul>
  <div class="tekst_mini_news">
  {image}

  <a class="test1" href="#">{title}</a></div>

  </ul>

 

Jak obniżyć tytuł aby był na obrazku ? 

[regdos 1848]

Regdos: i tu możemy się kłócić, że w zasadzie to na przeglądarkach ta metoda działa, nie działa tylko na najgorszym syfiarzu internetowym... Niestety wszyscy wiemy, jak wielu ludzi nadal z tego cholerstwa korzysta i że trzeba się do tych zagubionych duszyczek dostosowywać :/

 

Przesadzasz trochę z oceną IE w tym wypadku z prostego powodu, "opacity" jest z CSS3 i IE jeszcze go nie obsługuje i dlatego trzeba dla niego zrobić "filter:alpha(xx)" i dlatego uważam, że rozwiązanie z obrazkiem jest lepsze w tym wypadku, bo nie ma problemu z renderowaniem a dodatkowo font jest wtedy 100% a w przypadku opacity jest tak samo przezroczysty jak warstwa i słabo to wygląda.

 

@outmc

Owszem jest problem w kodzie ale na Twojej stronie, po prostu nie umiesz poprawnie zaaplikować działającego rozwiązania, które Ci podałem.

[outmc 1]

pobawiłem się i inaczej to zrobiłem i "prawie" działa .

Teraz tylko mam problem z odpowiednią pozycją tekstu i tyle

 

<style>
 ul {
list-style-type: none; display: inline;
margin: 0px;
padding: 0px;
}
.tekst_mini_news {font-size:12px; }
.tekst_mini_news a { font-size:12px; font-weight:bold;color:#FFFFFF; display:block; text-decoration:none; position:absolute; bottom:0px; padding:5px;width:140px; }
.tekst_mini_news a.test1{background-color:#000000; opacity:0.7; filter: alpha(opacity=70); }
 </style>

 <ul>
  <div class="tekst_mini_news">
  {image}

  <a class="test1" href="#">{title}</a></div>

  </ul>

[d.v 1409]

Przesadzasz trochę z oceną IE w tym wypadku z prostego powodu, "opacity" jest z CSS3 i IE jeszcze go nie obsługuje i dlatego trzeba dla niego zrobić "filter:alpha(xx)"(...)

 

Nie przesadzam. Co innego pisałbym, gdybym skorzystał z IE7 czy nawet 8, ale żeby najnowsza beta IE9 nadal była tak zacofana? To jest cały czas ten sam obciach, co 10 lat temu. M$ co kilka miesięcy kłamie, że IE już niedługo, już w kolejnej wersji będzie zgodny z obowiązującymi standardami... A tu, jak sam napisałeś "jeszcze czegoś nie obsługuje". I tak od lat...

A tak w ogóle to parametr "opacity" nie pojawił się w CSS3, tylko wcześniej, po prostu inaczej był wywoływany (jak sam napisałeś przez "filter:alpha(opacity=x)") ale w IE nigdy nie został prawidłowo zaimplementowany (M$ zawsze miało względem tego własną politykę i przy niej zostali).

[theONE 526]

obraźmy się na 50% rynku, oto droga

[d.v 1409]

Nie obrażam się na 50% rynku, tylko wk...wia mnie podejście M$.