outmc 1 Zgłoś post Napisano Grudzień 12, 2010 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. Udostępnij ten post Link to postu Udostępnij na innych stronach
regdos 1848 Zgłoś post Napisano Grudzień 12, 2010 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. Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 12, 2010 mozesz przedstawić kod jak to dodajesz ? Udostępnij ten post Link to postu Udostępnij na innych stronach
regdos 1848 Zgłoś post Napisano Grudzień 12, 2010 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. Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 12, 2010 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 Udostępnij ten post Link to postu Udostępnij na innych stronach
virus4 0 Zgłoś post Napisano Grudzień 12, 2010 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. Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 12, 2010 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 Udostępnij ten post Link to postu Udostępnij na innych stronach
regdos 1848 Zgłoś post Napisano Grudzień 12, 2010 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. Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 13, 2010 podglądałem Twoj kod style="background:url(1.jpg) i juz wiem ze nie bedzie działało Udostępnij ten post Link to postu Udostępnij na innych stronach
regdos 1848 Zgłoś post Napisano Grudzień 13, 2010 {image} Ci zwraca już cały <img src ..... ? Nie masz możliwości żeby zwracał tylko url obrazka ? Udostępnij ten post Link to postu Udostępnij na innych stronach
regdos 1848 Zgłoś post Napisano Grudzień 13, 2010 Pod tym samym adresem masz 2 wersje z img a nie z tłem. Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 13, 2010 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 Udostępnij ten post Link to postu Udostępnij na innych stronach
regdos 1848 Zgłoś post Napisano Grudzień 13, 2010 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 . Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 13, 2010 idance.pl/test poprostu zły kod , wstawiając w bądź w jest w miare dobrze Udostępnij ten post Link to postu Udostępnij na innych stronach
d.v 1409 Zgłoś post Napisano Grudzień 13, 2010 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) Udostępnij ten post Link to postu Udostępnij na innych stronach
regdos 1848 Zgłoś post Napisano Grudzień 13, 2010 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. Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 13, 2010 dzieki za pomoc ale nic to nie dało Udostępnij ten post Link to postu Udostępnij na innych stronach
d.v 1409 Zgłoś post Napisano Grudzień 13, 2010 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... Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 14, 2010 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 Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 14, 2010 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 ? Udostępnij ten post Link to postu Udostępnij na innych stronach
regdos 1848 Zgłoś post Napisano Grudzień 14, 2010 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. Udostępnij ten post Link to postu Udostępnij na innych stronach
outmc 1 Zgłoś post Napisano Grudzień 14, 2010 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> Udostępnij ten post Link to postu Udostępnij na innych stronach
d.v 1409 Zgłoś post Napisano Grudzień 14, 2010 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). Udostępnij ten post Link to postu Udostępnij na innych stronach
theONE 526 Zgłoś post Napisano Grudzień 14, 2010 obraźmy się na 50% rynku, oto droga Udostępnij ten post Link to postu Udostępnij na innych stronach
d.v 1409 Zgłoś post Napisano Grudzień 14, 2010 Nie obrażam się na 50% rynku, tylko wk...wia mnie podejście M$. Udostępnij ten post Link to postu Udostępnij na innych stronach