Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Jak to to pokroic
aiel
post
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
Go to the top of the page
+Quote Post
pedro84
post
Post #2





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

Dynamiczna? Nie możesz po prostu dać obrazka o stałych rozmiarach?
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #3





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

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ł .
Go to the top of the page
+Quote Post
aiel
post
Post #4





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 24.01.2010

Ostrzeżenie: (0%)
-----

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
(IMG:http://japierdziele.pl/krojenie.jpg)
Go to the top of the page
+Quote Post
pedro84
post
Post #5





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

Nie wiem, jak chcesz, ale będziesz miał z tym ogromne problemy. Wszędzie takie trójkąty są stałych rozmiarów.
Go to the top of the page
+Quote Post
Crozin
post
Post #6





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;
        }
Go to the top of the page
+Quote Post
moto0095
post
Post #7





Grupa: Zarejestrowani
Postów: 247
Pomógł: 9
Dołączył: 12.03.2010

Ostrzeżenie: (0%)
-----

Fajnie by to wyglądało (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
pedro84
post
Post #8





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

Cytat(moto0095 @ 18.04.2010, 17:32:47 ) *
Fajnie by to wyglądało (IMG:style_emoticons/default/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?
Go to the top of the page
+Quote Post
moto0095
post
Post #9





Grupa: Zarejestrowani
Postów: 247
Pomógł: 9
Dołączył: 12.03.2010

Ostrzeżenie: (0%)
-----

1. A to jakoś przeszkadza (IMG:style_emoticons/default/questionmark.gif)
2. Wiem
Go to the top of the page
+Quote Post
aiel
post
Post #10





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 24.01.2010

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/winksmiley.jpg)
A wiesz może jak w digiart zrobili border na tym?
Go to the top of the page
+Quote Post
Crozin
post
Post #11





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

Ostrzeżenie: (0%)
-----

Nie wiem, nie patrzyłem w kod, ale pewnie mógłbyś to zrobić poprzez.... CSSowy border?
Go to the top of the page
+Quote Post
aiel
post
Post #12





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 24.01.2010

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
pedro84
post
Post #13





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

Mamy Cię linczować? Bez przesady, to Twoja sprawa czego używasz, ale też świadczy o Tobie jako programiście (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
aiel
post
Post #14





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 24.01.2010

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/smile.gif)

Ogólnie czemu nie wypada stosować tabelek?
Niby są do czego innego ale działaja świetnie prawie do wszystkiego
Go to the top of the page
+Quote Post
moto0095
post
Post #15





Grupa: Zarejestrowani
Postów: 247
Pomógł: 9
Dołączył: 12.03.2010

Ostrzeżenie: (0%)
-----

Fajnie to wygląda (IMG:style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
aiel
post
Post #16





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 24.01.2010

Ostrzeżenie: (0%)
-----

Cytat(moto0095 @ 18.04.2010, 19:55:16 ) *
Fajnie to wygląda (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
pedro84
post
Post #17





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/smile.gif) Analogiczna sytuacja, tabele służą do przedstawiania danych tebelarycznych i żadnych innych.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.09.2025 - 05:12
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn