Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak to to pokroic
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
aiel
17.04.2010, 23:56:58
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ć
pedro84
18.04.2010, 00:06:33
Dynamiczna? Nie możesz po prostu dać obrazka o stałych rozmiarach?
krzysztof_kf
18.04.2010, 07:38:30
Przytnij górę i dól to znaczy górę wytnij na wysokości tej strzałeczki w poziome cały kawałek i dól do momentu zaokrąglenia dajesz potem border-left i border right dla lini po lewej stronie żeby niezależnie od wielkości komentarza żeby sam się dostosowywał .
aiel
18.04.2010, 15:13:17
Cytat(pedro84 @ 18.04.2010, 01:06:33 ) *
Dynamiczna? Nie możesz po prostu dać obrazka o stałych rozmiarach?


Hmm myśle że bedzie bardziej estetycznie jak bedzie dynamicznie się powiekszał wraz z wielkością komentarza
żeby przy 10znakowym komentarzu niebyło dymka o wysokości 5cm


Cytat(krzysztof_kf @ 18.04.2010, 08:38:30 ) *
Przytnij górę i dól to znaczy górę wytnij na wysokości tej strzałeczki w poziome cały kawałek i dól do momentu zaokrąglenia dajesz potem border-left i border right dla lini po lewej stronie żeby niezależnie od wielkości komentarza żeby sam się dostosowywał .


To by wyglądało okropnie zresztą zobacz
pedro84
18.04.2010, 15:22:43
Nie wiem, jak chcesz, ale będziesz miał z tym ogromne problemy. Wszędzie takie trójkąty są stałych rozmiarów.
Crozin
18.04.2010, 16:03:56
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;
        }
moto0095
18.04.2010, 16:32:47
Fajnie by to wyglądało smile.gif
Ja bym to zrobił tak (wiem, że to fatalne rozwiązanie):

[HTML] pobierz, plaintext 
  1. <TABLE>
  2. <TR>
  3.  <TD>[Pusto]</TD>
  4.  <TD>[zdjęcie z rogiem]</TD>
  5.  <TD>[tytaj tło koloru zdjęć z rogiem]</TD>
  6.   <TD>[zdjęcie z rogiem]</TD>
  7. </TR>
  8. <TR>
  9.  <TD>[Avatar]</TD>
  10.  <TD>[tytaj tło koloru zdjęć z rogiem]</TD>
  11.  <TD>[Treść]</TD>
  12.   <TD>[zdjęć z rogiem]</TD>
  13. </TR>
  14. <TR>
  15.  <TD>[Pusto]</TD>
  16.  <TD>[zdjęć z rogiem]</TD>
  17.  <TD>[tytaj tło koloru zdjęć z rogiem]</TD>
  18.  <TD>[zdjęć z rogiem]</TD>
  19. </TR>
  20. </TABLE>
[HTML] pobierz, plaintext
pedro84
18.04.2010, 16:38:13
Cytat(moto0095 @ 18.04.2010, 17:32:47 ) *
Fajnie by to wyglądało smile.gif
Ja bym to zrobił tak (wiem, że to fatalne rozwiązanie):

[HTML] pobierz, plaintext 
  1. <TABLE>
  2. <TR>
  3.  <TD>[Pusto]</TD>
  4.  <TD>[zdjęcie z rogiem]</TD>
  5.  <TD>[tytaj tło koloru zdjęć z rogiem]</TD>
  6.   <TD>[zdjęcie z rogiem]</TD>
  7. </TR>
  8. <TR>
  9.  <TD>[Avatar]</TD>
  10.  <TD>[tytaj tło koloru zdjęć z rogiem]</TD>
  11.  <TD>[Treść]</TD>
  12.   <TD>[zdjęć z rogiem]</TD>
  13. </TR>
  14. <TR>
  15.  <TD>[Pusto]</TD>
  16.  <TD>[zdjęć z rogiem]</TD>
  17.  <TD>[tytaj tło koloru zdjęć z rogiem]</TD>
  18.  <TD>[zdjęć z rogiem]</TD>
  19. </TR>
  20. </TABLE>
[HTML] pobierz, plaintext


Fatalne? To jakaś tragedia, przez wielkie T.

1. Znaczniki piszemy małą literą
2. Wiesz do czego służą tabele, prawda?
moto0095
18.04.2010, 16:41:14
1. A to jakoś przeszkadza questionmark.gif
2. Wiem
aiel
18.04.2010, 16:47:15
Cytat(Crozin @ 18.04.2010, 17:03:56 ) *
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;
        }



Super wszystko działa dzięki winksmiley.jpg
A wiesz może jak w digiart zrobili border na tym?
Crozin
18.04.2010, 17:26:03
Nie wiem, nie patrzyłem w kod, ale pewnie mógłbyś to zrobić poprzez.... CSSowy border?
aiel
18.04.2010, 18:44:35
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 
  1. table
  2. {
  3. border-collapse:collapse;
  4. }
  5. td.katlg
  6. {
  7. background-image:url(http://www.japierdziele.pl/katlg.png);
  8. background-position: top right;
  9. background-repeat:no-repeat;
  10. align:right;
  11. }
  12. td.katld
  13. {
  14. background-image:url(http://www.japierdziele.pl/katld.png);
  15. background-position: top right;
  16. background-repeat:no-repeat;
  17.  
  18. align:right;
  19. } 
  20.  
  21. td.katpd
  22. {
  23. background-image:url(http://www.japierdziele.pl/katpd.png);
  24. background-position: top right;
  25. background-repeat:no-repeat;
  26. align:right;
  27. }
  28. td.katpg
  29. {
  30. background-image:url(http://www.japierdziele.pl/katpg.png);
  31. background-position: top right;
  32. background-repeat:no-repeat;
  33. align:right;
  34. }
  35. td.bokl
  36. {
  37.  
  38. background-image:url(http://www.japierdziele.pl/bokl.png);
  39. } 
  40. td.text
  41. {
  42. vertical-align:text-top;
  43. } 
[HTML] pobierz, plaintext

HTML
[HTML] pobierz, plaintext 
  1. <table border=0 width=570 style='background-color:#000000;'><tr>
  2. <td rowspan=3 style='background-color:white;' valign=top align=center><img src="http://japierdziele.pl/profil.png" width=70 height=70>
  3. <br>~a1el</td>
  4. <td align=right class="katlg" width=14 height=7></td><td valign=top></td><td class="katpg" width=5 height=7></td>
  5. </tr><tr>
  6. <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>
  7. <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
pedro84
18.04.2010, 18:48:55
Mamy Cię linczować? Bez przesady, to Twoja sprawa czego używasz, ale też świadczy o Tobie jako programiście smile.gif
aiel
18.04.2010, 18:50:35
Cytat(pedro84 @ 18.04.2010, 19:48:55 ) *
Mamy Cię linczować? Bez przesady, to Twoja sprawa czego używasz, ale też świadczy o Tobie jako programiście smile.gif

Ogólnie czemu nie wypada stosować tabelek?
Niby są do czego innego ale działaja świetnie prawie do wszystkiego
moto0095
18.04.2010, 18:55:16
Fajnie to wygląda winksmiley.jpg
aiel
19.04.2010, 03:32:23
Cytat(moto0095 @ 18.04.2010, 19:55:16 ) *
Fajnie to wygląda winksmiley.jpg

Jak ci się podoba to jeszcze do kompletu zrobiłem
http://japierdziele.pl/komentarze.php
dymek dodawania komentarzy
napisz na pw to ci prześle kod
pedro84
19.04.2010, 08:45:03
Cytat(aiel @ 18.04.2010, 19:50:35 ) *
Ogólnie czemu nie wypada stosować tabelek?
Niby są do czego innego ale działaja świetnie prawie do wszystkiego


A czy używasz telefonu do wbijania gwoździ? Przecież też się świetnie nadaje smile.gif Analogiczna sytuacja, tabele służą do przedstawiania danych tebelarycznych i żadnych innych.
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.