Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html] obrazek przy tekście, problem z float.
Forum PHP.pl > Forum > Przedszkole
Wieviór
Generalnie staram się osiągnąć coś takiego:



Natomiast wychodzi mi coś takiego:



Kombinuję w ten sposób:

  1. <div class="comment_show">
  2. <div class="cs_srodek">
  3. <div class="cs_avatar"><img src="obrazek" alt="" /></div>
  4. <div class="cs_autor">Wieviór</div>
  5. <div class="cs_data">, 10:27:43</div>
  6. <div class="linia_przerywana_nz_g"></div>
  7. <div class="cs_tekst">Lorem Ipsum</div>
  8. <div class="clear"></div>
  9. </div>
  10. </div>';


Przy czym comment_show, to zawartościowy, cs_srodek to ten, gdzie mam ustawiony border i tło, clear to po prostu { clear: both; }, linia_przerywana_nz_g to ta przerywana linia, ma argument { float: left; }

Teraz:

Kod
.cs_avatar { float: left; height: 50px; width: 50px; border: #999999 1px solid; padding: 1px; margin-right: 5px; margin-bottom: 2px; }
.cs_tekst { font-size: 11px; color: #333333; text-align: justify; margin-bottom: 5px; }
.cs_autor { float: left; font-size: 11px; color: #ca1016; font-weight: bold; }
.cs_data { float: left;    font-size: 11px; color: #333333; }


No i nie do końca mam pomysł jak to rozwiązać. Usunięcie float: left z cs_autor i cs_data daje dobry wynik, ale wtedy data jest pod nazwą użytkownika. Z kolei jak dam <div class="clear"></div> pod linia przerywaną, to mi tekst spada aż pod obrazek.
antstd
Tak na szybko:

  1. <div class="cs_srodek">
  2. <div class="cs_avatar"><img src="obrazek" alt="" /></div>
  3. <div class="razem">
  4. <div class="cs_autor">Wieviór</div>
  5. <div class="cs_data">, 10:27:43</div>
  6. </div>
  7. <div class="cs_tekst">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vehicula lacus eget nunc. Pellentesque nulla est, fermentum at, pretium non, cursus ac, justo. Donec rhoncus velit id libero. In commodo, tellus a tincidunt tincidunt,<div></div></div>
  8. </div>


  1. .cs_srodek {
  2. width: 300px;
  3. border: solid 1px;}
  4.  
  5. .cs_avatar {
  6. float: left;
  7. width: 50px;}
  8.  
  9. .razem {
  10. border: dotted;
  11. border-width: 0 0 1px 0;
  12. margin: 0 0 0 50px;}
  13.  
  14. .cs_autor {
  15. float: left;}


Misisz miec autora i date w oddzielnym divie? Jesli niekoniecznie, to wystarczy uzyc innego znacznika (liniowego) i obejdzie sie bez oblewania.
Wieviór
hmm.. no właśnie dotted mnie niestety nie satysfakcjonuje. Ta linia raczej musi być graficznie bo to jest układ 2 piksele szare, trzy przerwy, w css tego raczej nie zrobię.

W dwóch divach muszę mieć autora i datę, bo mają różne style. Już tak próbowałem, żeby je włożyć do jednego, ale to niewiele pomaga...
antstd
Nie potrzeby Ci jest ten div od kropek. Mozesz poprostu ustawic grafike z kropkami jako tlo tego diva#razem. Ale jesli koniecznie chcesz miec to w oddzielnym bloku, to wsadz go tam gdzie jest autor i data. Choc bedzie to malo poprawnie sematycznie, bedzie dzialac. To ze maja rozne style bloki autor i data, nie konicznie wymaga zastosowanie dwoch divow.

Za chwile pokaze Ci moje rozwiazanie tego problemu.
Wieviór
Hmmm, w sumie rzeczywiście, mogę to dać w jednego diva z float: left, a do rozróżnienia styli dać span. Dzięki za pomoc ;]
antstd
Ok, widze ze juz problem rozwiazales. A ja wlasnie skonczylem przyklad, wiec zamieszcze moze komus innemu sie przyda:

http://antstd.com/wievior/
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.