พี่ๆครับช่วยดู css ผมหน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา พี่ๆครับช่วยดู css ผมหน่อยครับ

พี่ๆครับช่วยดู css ผมหน่อยครับ

จากรูปเลยครับผมอยากให้ กล่องข้อความขึ้นไปอยู่เสมอกันกับกล้องทางด้านซ้ายมื่ออ่ะครับ css ที่ใช้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
นี้คือกลอ่งด้านซ้ายน่ะครับ css
<div id="lttl34sp">
                                              <div id="lttl34"></div>
                                        </div>
                                            <div id="lbd33">
                                                <div class="lb">
                                                    <div class="lr">
                                                      <div class="ll">
                                                        <div class="bod">
                                                         
                                                            <div class="floatLeft">
                                                                <div style="margin:5px">
                                                                    <img src="images/oon-images/icon6.jpg" width="64" height="64" class="imgstyle" />
                                                                    <a href="Mother-Day53.php" target="_blank"><h6>บรรยากาศกิจกรรมวันแม่</h6>
                                                                    </a> ภาพบรรยากาศกิจกรรมวันแม่่ แม่ ลูก ร่วมทำบุญตักบาตรวันที่ 11 กรกฎาคม 2553 เวลา 09.30                                                                                                              </BR>
                                                                    <div align="right">11-08-2553</div> 
                                                                                                                                                                             
                                                              </div>
                                                             
                                                            <div style="clear:both;"></div>
                                                           
                                                            <div style="margin:5px">
                                                              <img src="images/oon-images/icon7.JPG" width="64" height="64" class="imgstyle" />
                                                              <a href="swimming53.php" target="_blank">
                                                              <h6>ขอแสดงความยินดี</h6></a>
                                                                ทับนักกีฬาว่ายน้ำของโรงเรียน เข้าร่วมการแข่งขันว่ายน้ำ ม.วลัยลักษณ์ สปริ้นครั้งที่1 ที่จังหวัดนครศรีธรรมราช คว้า 3 เหรียญ                                                               ทองแดง จากการแ่ข่งขันประเภท ฟรีสไตล์/แตะขาฟรี/กรรเชียง
                                                                 </BR>
                                                            <div align="right">21-07-2553</div>                                                                                                                                                                             </div>
                                                            <div style="clear:both;"></div>
                                                             
                                                          <div style="clear:both;"></div>
                                                          <div style="margin:5px">
                                                          <img src="images/oon-images/icon8.JPG" width="64" height="64" class="imgstyle" />
                                                          <a href="gallery.php" target="_blank">
                                                          <h6>แข่งขันกีฬาอำเภอ ประจำปี2553</h6> </a>
                                                            ขอแสดงความยินดี กับทับนักกรีฑาของโรงเรียนที่คว้าเหรียญรางวัล 1 เหรียญทอง 1 เหรียญเงิน 5 เหรียญทองแดง   
                                                          </BR>
                                                                    <div align="right"> 13-07-2553</div>
                                                          </div>                                                 
                                                          
                                                            <div style="clear:both;"></div>
                                                          <div style="margin:5px">
                                                          <img src="images/oon-images/icon.JPG" width="64" height="64" class="imgstyle" />
                                                          <a href="stopoil.php" target="_blank">
                                                          <h6>Stop Oil Drilling</h6> </a>
                                                            อุ่นรักร่วมจับมือรอบเกาะสมุย เพื่อแสดงพลังปฏิเสธอุตสาหกรรมปิโตรเคมีที่กำลังรุกคืบเข้าสู่เกาะสมุย เกาะพะงัน เกาะเต่า    
                                                            ประกาศมาตรการต่อไปเตรียมร้องศาลปกครองเหมือนกรณีมาบตาพุด  พร้อมสร้างแนวร่วมกับองค์กรต่างๆทั่วประเทศ
                                                            และศึกษาข้อมูลเพิ่มเติมเพื่อสร้างความเข้าใจกับประชาชน  
                                                          </BR>
                                                                    <div align="right">31-07-2553</div>
                                                          </div> 
                                                                 
                                                            </div><!--floatLeft -->
                                                           
                                                        </div>
                                                      </div>
                                                    </div>
                                                </div>
                                            </div>
 
ส่วนกล่องข้อความด้านขวา css
<div id="lttl36sp">
                                          <div id="lttl36"></div>
                                        </div>
                                                <div id="lbd352">
                                                    <div class="lb">
                                                        <div class="lr">
                                                            <div class="ll">
                                                              <div class="bod">
                                                              <p><a href="#">กำหนดวันสอบกลางภาคระดับประถม 23-24 กันยายน 2553<h>|| 2-09-2010</h></a></p>                                                    <p><a href="#">กำหนดวันประกาศผลสอบระดับประถม  วันที่ 1 ตุลาคม 2553 <h>|| 21-09-2010</h></a></p>                                                      <p><a href="#">กำหนดวันประกาศผลสอบระดับอนุบาล วันที่ 30 กันยายน 2553 <h>|| 21-09-2010</h></a></p>
                                                              <p><a href="#">กำหนดวันปิดภาคเรียน วันที่ 1 ตุลาคม 2553 ถึง วันที่่ 26 ตุลาคม 2553<h>|| 2-09-2010</h></a></p>
                                                              <p><a href="javascript:;" class="style4" onClick="MM_openBrWindow('newparent.php','view','status=yes,scrollbars=yes,width=750,height=550')">
                                                              โรงเรียนอุ่นรักเกาะสมุย เปิดคอร์สสอนว่ายน้ำSwimming Course รายละเอียดดังนี้
                                                                <h>|| 2-09-2010</h>
                                                              </a></p>                                                         
 
 
                                                                 
                                                                
                                                            </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                 
                        

ไม่ทราบต้องปรับเปลี่ยน โค๊ด css ยังไงครับให้กล่องข้อความอยู่ระดับเดียวกันทั้งสองอ่ะครับ

 



Boy415 09-10-2010 00:09:48

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1

โทษครับ ส่วนนี้เป็นโค๊ด css ที่ใช้กับกล่องข้อความด้านซ้าย

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
#lttl34sp {
    position:relative;
    float:left;
    clear:both;
    width:555px;
    height:40px;
    background:transparent;
    font-size:1px;
}
#lttl34 {
    position:relative;
    float:left;
    clear:both;
    top:5px;
    width:555px;
    height:30px;
    background:url("images/Whats-New.gif") no-repeat;
    font-family:arial,helvetica,sans-serif;
    font-weight:bold;
    font-size:14px; color:#FFFFFF;
     
}
#lttl34 .comment {
    position:relative;
    /*position:absolute;*/
    text-align:left;
    left:20px;
    width: 510px;
    top:5px;
     
}
#lttl34 .comment img1 {
    float:right;
    border:solid 1px #999966;
    padding:5px;
    margin-right:10px;
}
#lbd33 {
    position:relative;
    float:left;
    clear:both;
    width:555px;
    height:385px;
    background:#FFFFFF url("images/udp4.gif") repeat-x;
    font-size:10px;
}
#lbd33 .lb {
    position:relative;
    float:left;
    background: url("images/dot5.gif") 0 100% repeat-x;
    width:100%;
    height:385px;
}
#lbd33 .lr {
    position:relative;
    float:left;
    background: url("images/dot5.gif") 100% 0 repeat-y;
    width:100%;
    height:385px;
}
#lbd33 .ll {
    position:relative;
    float:left;
    background: url("images/dot5.gif") 0 0 repeat-y;
    width:100%;
    height:385px;
}
#lbd33 .bod {
    position:relative;
    color:#000000;
    background:transparent;
    height:285px;
    font-family:arial;
    font-size:11px;
    margin:0;
    padding:0px 0px 0px 0px;
 
}
#lbd33 .bod a {
    text-decoration:none;
    color:#0099FF;
}

และส่วนของกล่องข้อความด้านขวาหรือ รูปกล่องด้านล่าง css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
#lttl36sp {
    position:relative;
    float:right;
    clear:both;
    width:435px;
    height:35px;
    background:transparent;
    font-size:1px;
    top:2px;
}
#lttl36 {
    position:relative;
    float:right;
    width:435px;
    height:35px;
    /*background: url("images/Newparents.gif") no-repeat;*/
    background:url(images/NewParents.gif) no-repeat;
    font-family:arial,helvetica,sans-serif;
    font-weight:bold; font-size:14px;
    color:#FFFFFF;
}
#lttl36 .comment {
    /*position:relative; */
    position:absolute;
    text-align:right;
    left:32px;
    top:1px;
    width:430px;
    height:35px;
}
#lbd352 {
    position:relative;
    float:right;
    clear:both;
    width:435px;
    height:250px;
    background:#FFFFFF url("images/udp6.gif") repeat-x;
    font-size:10px;
}
#lbd352 .lb {
    position:relative;
    float:right;
    background: url("images/dot5.gif") 0 100% repeat-x;
    width:100%;
    height:230px;
     
}
#lbd352 .lr {
    position:relative;
    float:right;
    background: url("images/dot5.gif") 100% 0 repeat-y;
    width:100%;
    height:230px;
     
}
#lbd352 .ll {
    position:relative;
    float:left;
    background: url("images/dot5.gif") 0 0 repeat-y;
    width:100%;
    height:230px;
 
}
#lbd352 .bod {
    position:relative;
    color:#000000;
    background:transparent;
    height:230px;
    font-family:arial;
    font-size:10px;
    margin:10px;
    padding:2px 2px 2px 2px;
     
}
#lbd352 p{
border-bottom:solid 1px #ccc;
/*border-bottom:dashed 1px #ccc;*/
font-size:12px !important;
padding-left:15px;
background:url(images/li81.gif) no-repeat;
background-position:center left;
background-repeat:no-repeat;
color:#666666;
 
}
 
#lbd352.p h{
float:right;
font-size:10px;
color:#000000;
}/* HOT CRIPT*/

 

 



boy415 09-10-2010 00:15
 ความคิดเห็นที่ 2

คลิกขวาวิวซอร์ส จากตัวอย่าง https://www.ninenik.com/demo/css_layout_set.php



ninenik 09-10-2010
 ความคิดเห็นที่ 3

พี่ครับตอนนี้ผมแก้ บรรทัด clear:both; จะได้ดังรูป

ขนาดความสุงนิดหนอ่ย ผมเคลียร์บรรทัดของ clear:both;  ของโค๊ด css ด้านล่าง อ่ะครับ จะได้ดังรูปแต่จะเพี้ยนขนาดของสวนสูงนิดนหน่อย



boy415 09-10-2010 01:12
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ