Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] opływanie obrazka, diva, który jest bottom right
Forum PHP.pl > Forum > Przedszkole
runner
Cześć

Mam problem i nie mogę sobie z tym poradzić,...do rzeczy

mamy diva "kontener"... do którego ładowany jest div "obrazek" (tlo obrazek jest : bottom right) wczytywany jest również tekst który ma opływać ten pozycjonowany obrazek. poniższy przykład przedstawia mniej więcej powyższy opis.

  1.  
  2. <div class="kontener">
  3. <div class="obrazek"><p>jakis tam tekst</p></div>
  4. </div>
  5.  
  6.  
  7.  
  8. teraz css
  9.  
  10. .kontener
  11. {
  12. width:508px;
  13. height:458px;
  14. margin-left:auto;
  15. margin-right:auto;
  16.  
  17. }
  18.  
  19. .obrazek {
  20. width:508px;
  21. height:458px;
  22. background-image:url(images/wet.jpg);
  23. background-repeat:no-repeat;
  24. background-position:right bottom;
  25. }


TERAZ moje pytanie co zrobić aby ten tekst opływał ten obrazek co jest (i musi być) w prawym dolnym rogu diva "kontener"
w tej chwili tekst przykrywa obrazek, a nie o to mi chodzi...


próbowałem już wstawiać poprzez img ale nadal nie mogę osiągnąć oczekiwanego efektu

thek
Jeśli coś jest tłem to jak Ty chcesz nakazać tekstowi to opływać? Tekst musi mieć świadomość istnienia w konkretnym miejscu elementu. Albo więc walisz obrazek pozycjonowany, albo nakładasz na ów obrazek warstwę o jego wymiarach, która zasymuluje obecność tam jakiegoś elementu. W ten sposób tekst będzie oszukany bo "coś będzie widział".
runner
Cytat(thek @ 13.01.2011, 21:48:42 ) *
Jeśli coś jest tłem to jak Ty chcesz nakazać tekstowi to opływać? Tekst musi mieć świadomość istnienia w konkretnym miejscu elementu. Albo więc walisz obrazek pozycjonowany, albo nakładasz na ów obrazek warstwę o jego wymiarach, która zasymuluje obecność tam jakiegoś elementu. W ten sposób tekst będzie oszukany bo "coś będzie widział".


obrazek pozycjonowany np. <img src="images/obrazek.jpg" width="250" height="330" align="right" style="margin:10px;" alt="obrazek"/>
jaki parametr mam jeszcze dodaćquestionmark.gif?

a co masz na myśli pisząc o warstwie?
z-index
questionmark.gif?
thek
Jeśli jest tak jak teraz (jako background) to musisz wrzucić dodatkowy div idealnie nad obrazkiem, który zablokuje wpływanie tekstu na tło, dla mnie bezsens, bo nie po to powstały tła winksmiley.jpg Jeśli robisz osobny img, czyli sensowniejsze tu rozwiązanie, to nadajesz kontenerowi pozycjonowanie relatywne, obrazkowi absolutne i możesz się bawić.
runner
Cytat(thek @ 14.01.2011, 08:49:02 ) *
Jeśli jest tak jak teraz (jako background) to musisz wrzucić dodatkowy div idealnie nad obrazkiem, który zablokuje wpływanie tekstu na tło, dla mnie bezsens, bo nie po to powstały tła winksmiley.jpg Jeśli robisz osobny img, czyli sensowniejsze tu rozwiązanie, to nadajesz kontenerowi pozycjonowanie relatywne, obrazkowi absolutne i możesz się bawić.



zrobiłem twoją drugą wersję i mi nie działa

.kontener{
width:508px;
height:458px;
position:relative;
}

<div class="kontener"><p>jakis tam tekst</p>
<img src="obrazek.jpg" width="150" height="224" align="right " style="position:absolute;" alt="obrazek"/>
</div>
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.