[html] obrazek przy tekście, problem z float. Opcje

[-Wieviór-]

Generalnie staram się osiągnąć coś takiego:



Natomiast wychodzi mi coś takiego:



Kombinuję w ten sposób:

[HTML] pobierz, plaintext 
<div class="comment_show">
    <div class="cs_srodek">
        <div class="cs_avatar"><img src="obrazek" alt="" /></div>
        <div class="cs_autor">Wieviór</div>
        <div class="cs_data">, 10:27:43</div>
        <div class="linia_przerywana_nz_g"></div>
        <div class="cs_tekst">Lorem Ipsum</div>
        <div class="clear"></div>
    </div>
</div>';
[HTML] pobierz, plaintext 

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.

Ten post edytował Wieviór 24.02.2008, 13:14:35

[antstd]

Tak na szybko:

[HTML] pobierz, plaintext 
<div class="cs_srodek">
        <div class="cs_avatar"><img src="obrazek" alt="" /></div>
	<div class="razem">
		<div class="cs_autor">Wieviór</div>
		<div class="cs_data">, 10:27:43</div>
	</div>
        <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>
    </div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
.cs_srodek {
	width: 300px;
	border: solid 1px;}
 
.cs_avatar {
	float: left;
	width: 50px;}
 
.razem {
	border: dotted;
	border-width: 0 0 1px 0;
	margin: 0 0 0 50px;}
 
.cs_autor {
	float: left;}
[HTML] pobierz, plaintext 

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/