Jak to to pokroic Opcje

[aiel]

Hej, może zaczne od tego że css znam na słabym poziomie
i mam mały problem chce zrobić taki wygląd graficzny komentarzy tylko nie mam pojęcia jak tego dokonać
Chodzi o trójkątna część dymka za nic niemoge wymyślić jak ją wstawić
ten "dymek" musi być dynamiczny (powiększać sie wraz z tekstem) na obrazku zaznaczyłem linie jak chce tabelke zbudować


Ten post edytował aiel 18.04.2010, 15:10:27

[aiel]

Pewnie mnie zlinczujecie ale zrobiłem to w tabelach -
wystarczyło przedłuzyć lewy bok z dymkiem o kilka cm
limit znaków w komentarzu nie pozwoli iść dalej żeby sie nie urwało
kolor zmienia się sam razem z kolorem tabeli
border można dodać (troche w obrazkach i troche w kodzie)
wygląd tutaj > http://japierdziele.pl/test/strona.html

i kod :
CSS

[HTML] pobierz, plaintext 
table
{
border-collapse:collapse;
}
td.katlg
{
background-image:url(http://www.japierdziele.pl/katlg.png);
background-position: top right;
background-repeat:no-repeat;
align:right;
}
td.katld
{
background-image:url(http://www.japierdziele.pl/katld.png);
background-position: top right;
background-repeat:no-repeat;
 
align:right;
} 
 
td.katpd
{
background-image:url(http://www.japierdziele.pl/katpd.png);
background-position: top right;
background-repeat:no-repeat;
align:right;
}
td.katpg
{
background-image:url(http://www.japierdziele.pl/katpg.png);
background-position: top right;
background-repeat:no-repeat;
align:right;
}
td.bokl
{
 
background-image:url(http://www.japierdziele.pl/bokl.png);
} 
td.text
{
vertical-align:text-top;
} 
[HTML] pobierz, plaintext 

HTML

[HTML] pobierz, plaintext 
<table border=0 width=570 style='background-color:#000000;'><tr>
<td rowspan=3 style='background-color:white;' valign=top align=center><img src="http://japierdziele.pl/profil.png" width=70 height=70>
<br>~a1el</td>
<td align=right class="katlg" width=14 height=7></td><td valign=top></td><td class="katpg" width=5 height=7></td>
</tr><tr>
<td valign=top class="bokl" width=14></td><td class="text"><font size=1 color=white>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum rutrum faucibus. Ut tristique, ligula a mollis elementum, libero arcu pretium lacus, sit amet pellentesque felis dolor vel arcu. Pellentesque hendrerit, neque sed vehicula commodo, erat lectus blandit mauris, eget fermentum dui leo sed purus. Duis tellus erat, euismod ac molestie et, tincidunt a massa. Mauris fermentum porta sem vitae venenatis. Curabitur vitae facilisis leo. Phasellus at libero mauris, vel ullamcorper lectus. Phasellus quis metus vitae eros porttitor mollis. Nulla iaculis rutrum nulla, ut ullamcorper metus vestibulum ac. Phasellus cursus est quis velit rutrum vulputate. Ut porttitor justo sed purus lobortis quis porta metus lobortis. Vestibulum tellus lectus, elementum eget pulvinar at, hendrerit sit amet ipsum. Donec interdum nisl eget augue molestie bibendum.</td></tr><tr>
<td valign=top class="katld" width=14 height=7></td><td></td><td class="katpd" width=5 height=7></td></tr></table>
[HTML] pobierz, plaintext