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

[Crozin]

Chodzi chyba o to, by cały "dymek" miał dynamiczną wysokość, a trójkącik stałą, na danej wysokości - dokładnie coś takiego jest na: Digart.pl (komentarze: http://crozin.digart.pl/). W zależności jak to graficznie wygląda może to różnie wyglądać, jednak taki ogólny szkielet mógłby się prezentować następująco:

Kod

    <ul>
        <li>
            <div class="meta">
                <a href="#"><span>Crozin</span><img src="http://forum.php.pl/uploads/av-16943.jpg" alt="Crozin" /></a>    
            </div>
            <blockquote>
                <p>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.</p>
            </blockquote>
        </li>
    </ul>

Kod

        ul {
            display: table;
            width: 500px;
            padding: 20px;

            background: #444;
        }

        ul li {
            display: table-row;
        }

        ul li .meta {
            display: table-cell;
            width: 125px;

            background: url(http://www.pmpinc.net/images/gray_triangle.jpg) no-repeat right 30px;
        }

        ul li blockquote {
            min-height: 40px;
            padding: 10px;

            display: table-cell;
            background: #666;
            border-radius: 5px;
        }