![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 30 Pomógł: 0 Dołączył: 24.01.2010 Ostrzeżenie: (0%) ![]() ![]() |
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 |
|
|
![]() |
![]()
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 476 Pomógł: 1306 Dołączył: 6.08.2006 Skąd: Kraków Ostrzeżenie: (0%) ![]() ![]() |
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; } |
|
|
![]() ![]() |
![]() |
Aktualny czas: 10.10.2025 - 21:00 |