Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > มีปัญหาเนื้อหาด้านล่างไม่ยอมเลื่อนลงตามเนื้อหาด้านบนที่เพิ่มขึ้นครับ รบกวนดูทีครับ มีรายละเอียดเต็มเลย

มีปัญหาเนื้อหาด้านล่างไม่ยอมเลื่อนลงตามเนื้อหาด้านบนที่เพิ่มขึ้นครับ รบกวนดูทีครับ มีรายละเอียดเต็มเลย

เริ่มหัวข้อใหม่

masarez

โพสกระทู้ ( 65 )
บทความ ( 0 )

อันนี้โค้ดของหน้านี้ครับ

Code (PHP)

<body>
<div class="container"> <!-- Start Container -->
<div class="menucontainer">
	<ul id="menutabs" class="nav nav-tabs"> <!-- Tab -->
    	<li><a href="#uploadimg" data-toggle="tab"><i class="icon-picture"></i> อัพโหลดรูปภาพ</a></li>
    	<li><a href="#artedit" data-toggle="tab"><i class="icon-font"></i> แก้ไขบทความ</a></li>
    </ul> <!-- End tab -->
    <div id="menutabsContent" class="tab-content"> <!-- Tab content container -->
   		<div class="tab-pane fade active in" id="uploadimg"> <!-- Image upload -->
        	<h2 class="uploadheader">รูปภาพทั้งหมด</h2>
        	<div class="allimagecontainer"> <!-- All image -->
            	<ul class="nodot">
                	<?php
					include('db_config.php');
					$imgsql="select*from image";
					mysql_query("SET NAMES utf8");
					$imgsqlquery=mysql_db_query($dbname,$imgsql);
					while($img=mysql_fetch_array($imgsqlquery)){
						$id=$img['id'];	
						$desc=$img['description'];
						echo "<li>";
						echo "<div class='placeimage'>";
						echo "<a href='#".$id."Modal' data-toggle='modal'><img src=\"readimage.php?id=$id\" style='width:150px; height:150px;' /></a>";
					
						echo "</div>";
						echo "</li>";	
						// Modal
							echo "<div id='".$id."Modal' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='".$id."ModalLabel aria-hidden='true'>";
								echo "<div class='modal-header'>";
									echo "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>x</button>";
									echo "<h3 class='modaltitle' id='myModalLabel'>ภาพและรายละเอียด</h3>";
								echo "</div>";
								echo "<div class='modal-body'>";
									echo "<img src=\"readimage.php?id=$id\" style='width:auto; height:350px;' />";
									echo "<hr/>";
									echo "<p id='imagecaption' class='modalcaption'>$desc</p>";
									echo "<a id='editimgcap' class='btn btn-mini btn-info' href='editimagedescription.php?id=$id'>แก้ไขคำอธิบาย</a>&nbsp;";
									echo "<a class='btn btn-mini btn-danger' href='deleteimage.php?id=$id'>ลบภาพนี้</a>";
								echo "</div>";
							echo "</div>";
					}
					mysql_close();
					?>
            	</ul> 
                 
           </div> <!-- End all image -->
           
          	<form class="formupload" method="post" enctype="multipart/form-data" action="uploadimage.php">
            	<input type="file" id="imgupload" name="imgupload" />
                <textarea class="txtdesc" rows="4" id="imgdesc" name="imgdesc" placeholder="คำอธิบายรูปภาพ"></textarea><br/>
                <input class="btn btn-small btn-primary" type="submit" id="submit" name="submit" value="อัพโหลด" />
            </form>
         
        </div> <!-- End image upload -->
        
    	<div class="tab-pane fade" id="artedit">FUCK SURE</div>
    </div> <!-- End tab content container -->
</div>
</div> <!-- End Container -->
<!-- ===============================================================================
                               JAVASCRIPT INJECTION ZONE
================================================================================ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <!-- Google Load of jQuery -->
<script src="js/bootstrap.js"></script> <!-- Bootstrap JS -->
<script type="text/javascript">
$('#menutabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

//$('#menutabs a[href="#uploadimg"]').tab('show');
</script>
</body>

คือสังเกตตรงที่มีปัญหาคือตั้งแต่บรรทัด <div class="allimagecontainer">.........</div> นะครับ คือผมจะทำให้รูปภาพทั้งหมดที่ดึงมาจากฐานข้อมูลนั้นอยู่ในแท็กนี้ทั้งหมด ซึ่งก็คือแท็ก <ul><li>.......</li></ul> นั่นเองครับ ซึ่งผมกำหนดแท็ก <ul>....</ul> ไว้ในภาษา html ก่อนเข้าสู่การดึงข้อมูลครับ ซึ่งการดึงข้อมูลภาพก็จะดึงโดยใช้ mysql_fetch_array วนลูปเฉพาะส่วน <li>.....</li> ซึ่งมันก็จะเก็บภาพไว้ในนั้น ทีนี้ในระหว่างนี้ผมได้ใช้ลูปนี้สร้าง dialog box ของแต่ละอันไว้ในแท็ก <li> ด้วย ซึ่งอันนี้ไม่รู้ว่าเป็นปัญหาหรือเปล่าแต่จากการทดสอบ ไม่มีปัญหาครับ

ทีนี้ถัดจากการแสดงรูปภาพ ส่วนนี้คือส่วนที่เป็นปัญหาใหญ่ครับ คือผมได้สร้างฟอร์มสำหรับอัพโหลดภาพไว้ด้านล่างของภาพ ซึ่งมันอยู่ถัดจาก div ที่เก็บรูปภาพไว้ทั้งหมด พอรูปภาพมันขึ้นแถวที่สามปุ๊บมันจะเกยลงมาในส่วนที่เป็นฟอร์ม แทนที่จะดันส่วนที่เป็นฟอร์มลงมาด้านล่างตามจำนวนแถวรูปภาพที่เพิ่มขึ้น นี่เป็นรูปครับ เป็นแบบนี้

problem

ผมไม่รู้ว่าจะแก้ยังไงครับ แต่ผมมีส่วนที่เป็น css ซึ่งกำหนดทั้งฟอร์มและ div ที่บรรจุ <ul><li>.......</li></ul> ที่แสดงรูปภาพไว้ด้วยครับ อันนี้นะครับ เป็น css ในส่วนนี้ทั้งหมด

Code (PHP)

.uploadheader {
	font-family:'thaisans_neuebold';
	color:#000;
	margin-left:10px;
}

.allimagecontainer {
	width:890px;
	margin-top:20px;
	margin-left:80px;
}

.menucontainer {
	width:890px;
	margin-top:50px;
}

.formupload {
	width:390px;
	margin-top:400px;
	margin-left:300px;
}

.txtdesc {
	width:300px;
}

ยังไงรบกวนทีนะครับ ตอนนี้เครียดมาก แก้ไม่ได้สักที

Tag : PHP, HTML/CSS, jQuery

Date : 2013-07-28 20:25:41

By : aslscarecrow

View : 920

Reply : 1

No. 1

ไม่ใช่เจ้าชาย อย่าเยอะ

โพสกระทู้ ( 913 )
บทความ ( 2 )

</div> 
เพิ่ม
<div style="clear:both"></div>

Date : 2013-07-29 09:02:03

By : teez1232002

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : มีปัญหาเนื้อหาด้านล่างไม่ยอมเลื่อนลงตามเนื้อหาด้านบนที่เพิ่มขึ้นครับ รบกวนดูทีครับ มีรายละเอียดเต็มเลย

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01

Registered : 109,037

No. 1

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice