ساخت جدول در 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 352 30-07-2014 ساعت 18:28
آخرین ارسال: WWWorker
Note فیت کردن table در HTML The Arrow 1 528 07-05-2014 ساعت 18:03
آخرین ارسال: C0der
Note تبدیل متن به عکس در HTML The Arrow 4 774 08-04-2014 ساعت 23:26
آخرین ارسال: The Arrow
Note ساخت راست کلیک در HTML The Arrow 2 487 08-04-2014 ساعت 21:08
آخرین ارسال: The Arrow
Note فارسی سازی HTML The Arrow 5 792 23-03-2014 ساعت 13:53
آخرین ارسال: The Arrow
Note از کجا بفهمیم کد HTML درست نوشته شده؟ Peyman 1 446 17-03-2014 ساعت 23:41
آخرین ارسال: IR-Webmaster
Note تفاوت تگ(Tag) با المنت(Element) در HTML Babak98 2 596 12-01-2014 ساعت 10:41
آخرین ارسال: Daniel
Note نحوه بکار بردن Jquery در HTML WWWorker 0 371 02-11-2013 ساعت 19:49
آخرین ارسال: WWWorker
Note لیست تگ های HTML THE KNIGHT 0 531 12-10-2013 ساعت 16:32
آخرین ارسال: THE KNIGHT
Note دانلود قالب bamboo html Download95 0 524 23-08-2013 ساعت 23:11
آخرین ارسال: Download95

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