• ساخت جدول در HTML
    #1
    Note 
    سلام ، کد ساخت جدولی مثل جدول زیر چیه ؟
    [تصویر:  20140402-869-cssd.png]

    چطوری هلال شده ؟
    چطوری اون مثلث کوچولو اون بالا سمت راست ایجاد شده ؟
    چطوریه که وقتی پیام نوشتاری زیاد بود ،میره سطر بعد و جدول رو از پایین دراز میکنه ؟
    یعنی این پیام رو >
    کد:
    salaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaamaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    چطوری جای اون ساعت ها عوض نمیشه ؟
    چطوریه که توی پیام آخری ساعتِ تشخیص داده و اومده پایین؟

    ممنون میشم اگه کمک کنید

    See your dreams every where  and every time , try to remember your dreams because a man lives with his dreams forever
    پاسخ
    #2
    Note 
    درود
    نقل قول: چطوری اون مثلث کوچولو اون بالا سمت راست ایجاد شده ؟
    [CSS].bubble:after
    {
    content: "";
    position: absolute;
    top: 15px;
    left: 405px;
    border-style: solid;
    border-width: 8px 0 8px 15px;
    border-color: rgba(221, 238, 248, 0) #DDEEF8;
    display: block;
    width: 0;
    z-index: 1;
    }[/CSS]

    نقل قول: چطوریه که وقتی پیام نوشتاری زیاد بود ،میره سطر بعد و جدول رو از پایین دراز میکنه ؟
    [CSS]word-break: break-all;[/CSS]

    نقل قول: چطوری جای اون ساعت ها عوض نمیشه ؟
    وقتی که width رو تعیین کنی و word-break: break-all; بذاری.


    نقل قول: چطوریه که توی پیام آخری ساعتِ تشخیص داده و اومده پایین؟
    [CSS]vertical-align: bottom;[/CSS]


    یه چیزی شبیه همون البته با راههای مختلف میشه چنین چیزی درست کرد بدون استفاده از جدول هم میشه.
    [HTML]<style>
    body {
    background: #9B9171;
    }

    #speech-cont {
    width: 100%;
    font: 13px tahoma;
    padding: 5px;
    }

    #speech-cont tr td {
    padding: 5px;
    }

    #speech-cont tr td:first-child {
    width: 85%;
    word-break: break-all;
    }

    #speech-cont tr td:last-child {
    vertical-align: bottom;
    }

    #speech-cont tr td {
    border-bottom: 1px solid #E4E1E1;
    }

    #speech-cont tr:last-child td {
    border-bottom: none;
    }

    .bubble {
    position: relative;
    width: 405px;
    padding: 0px;
    background: #DDEEF8;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    }

    .bubble:after
    {
    content: "";
    position: absolute;
    top: 15px;
    left: 405px;
    border-style: solid;
    border-width: 8px 0 8px 15px;
    border-color: rgba(221, 238, 248, 0) #DDEEF8;
    display: block;
    width: 0;
    z-index: 1;
    }
    </style>

    <div class="bubble">
    <table id="speech-cont">
    <tbody>
    <tr>
    <td>hello</td>
    <td>20:00</td>
    </tr>
    <tr>
    <td>hello</td>
    <td>20:00</td>
    </tr>
    <tr>
    <td>helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</td>
    <td>20:00</td>
    </tr>
    </tbody>
    </table>
    </div>[/HTML]

    پاسخ
    #3
    Note 
    دمت گرم داداش، اگه بخوام اون مثلثه بیاد سمت چپ چی؟
    و راستی اگه بخوام کناره اون مثلثه یه عکس 64x64 هم بیاد چیکار کنم؟(یعنی هر بار مثلثه وجود داشت بیاد)

    See your dreams every where  and every time , try to remember your dreams because a man lives with his dreams forever
    پاسخ
    #4
    Note 
    pashmak نوشته است:دمت گرم داداش، اگه بخوام اون مثلثه بیاد سمت چپ چی؟
    و راستی اگه بخوام کناره اون مثلثه یه عکس 64x64 هم بیاد چیکار کنم؟(یعنی هر بار مثلثه وجود داشت بیاد)
    1:
    [CSS]
    .bubble:after {
    content: "";
    position: absolute;
    top: 15px;
    right: 405px;
    border-style: solid;
    border-width: 8px 15px 8px 0px;
    border-color: rgba(221, 238, 248, 0) #DDEEF8;
    display: block;
    width: 0;
    z-index: 1;
    }
    [/CSS]

    2: background-image بذار.
    البته نمیشه خوب نمایش داد میشه بگی واسه چی میخوای؟
    مثال:
    [CSS]
    background: url('http://www.softafzar.net/images/misc/im_yahoo.gif') no-repeat center center;
    [/CSS]

    HAPPY CODING
    پاسخ
    #5
    Note 
    ممنون،
    واسه مسنجر !!!
    با استفاده از کدهایی که دادی میشه به زیبایی چت فرم ساخت :دی
    اما یه بدی داره اونم اینه که اون مثلثه رو توی چت فرم نشون نمیده و اصلا اشکالی نداره ، چون با گذاشتن این خط کد ، عکس دقیقا وسط اولین پیام میوفته>
    [CSHARP]
    <tbody><center><img src="http://www.softafzar.net/images/misc/im_yahoo.gif" /></center><tr><td>
    [/CSHARP]

    ممنونم

    See your dreams every where  and every time , try to remember your dreams because a man lives with his dreams forever
    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    موضوعات مرتبط با این موضوع...
    موضوع نویسنده پاسخ بازدید آخرین ارسال
    Note HTML: گذاشتن آیکن کنار نوار آدرس WWWorker 0 452 30-07-2014 ساعت 18:28
    آخرین ارسال: WWWorker
    Note فیت کردن table در HTML The Arrow 1 631 07-05-2014 ساعت 18:03
    آخرین ارسال: C0der
    Note تبدیل متن به عکس در HTML The Arrow 4 944 08-04-2014 ساعت 23:26
    آخرین ارسال: The Arrow
    Note ساخت راست کلیک در HTML The Arrow 2 620 08-04-2014 ساعت 21:08
    آخرین ارسال: The Arrow
    Note فارسی سازی HTML The Arrow 5 1,009 23-03-2014 ساعت 13:53
    آخرین ارسال: The Arrow
    Note از کجا بفهمیم کد HTML درست نوشته شده؟ Peyman 1 565 17-03-2014 ساعت 23:41
    آخرین ارسال: IR-Webmaster
    Note تفاوت تگ(Tag) با المنت(Element) در HTML Babak98 2 756 12-01-2014 ساعت 10:41
    آخرین ارسال: Daniel
    Note نحوه بکار بردن Jquery در HTML WWWorker 0 475 02-11-2013 ساعت 19:49
    آخرین ارسال: WWWorker
    Note لیست تگ های HTML THE KNIGHT 0 620 12-10-2013 ساعت 16:32
    آخرین ارسال: THE KNIGHT
    Note دانلود قالب bamboo html Sajjad95 0 648 23-08-2013 ساعت 23:11
    آخرین ارسال: Sajjad95

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان