|
 |
| |
อยากทราบโค้ด เกี่ยวกับการจัดวางรูปภาพ หรือ media ให้มันอยู่ตรงกลาง browser ทั้งแนวตั้งและแนวนอน |
| |
 |
|
|
 |
 |
|
ลอง css ยังครับ
<style type='text/css'>
.box{
text-align: center;
vertical-align: middle;
}
</style>
|
ประวัติการแก้ไข
2010-08-10 13:13:57
 |
 |
 |
 |
| Date :
2010-08-10 13:13:16 |
By :
aknueng |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
มันไม่ได้นะครับ
ลองดูดิครับ
ผมเดาว่า คงต้องเป็น javascript น่าจะชัวร์สุดครับ
รบกวนด้วยครับ อาจารย์ทั้งหลาย
ต้องการโค้ดตัวนี้มากครับ
เพราะจะเอาไปใช้เกี่ยวกับ flash ที่เป็นหน้า intro ก่อนเข้าเว็บน่ะครับ
จะต้องให้มันอยู่ตรงกลาง ในทุก browser เลยอ่ะครับ
|
| |
|
|
| |
| Date :
2010-08-10 13:56:21 |
By :
ปิเก้ |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถามก่อน
อยากแรก size Fix ไหมครับ
เช่น 500*500 ตลอด
หรือมันเปลี่ยนแปลงตลอดเวลาที่ user เข้ามาชม
|
| |
|
|
| |
| Date :
2010-08-10 14:32:14 |
By :
LindyFralin |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไม่ต้องอาจารย์ก็ตอบได้ครับ
Code (PHP)
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
obj_center("div_show");
});
function obj_center(obj){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#"+obj).height();
var popupWidth = $("#"+obj).width();
//centering
$("#"+obj).css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
}
</script>
<div id='div_show' style='border:2px #f00 solid; width:200px; height:200px;'></div>
|
ประวัติการแก้ไข
2010-08-10 14:47:34
| |
|
|
| |
| Date :
2010-08-10 14:47:04 |
By :
aknueng |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.box{
width:300px;
height:300px;
background:red;
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
}
</style>
</head>
<div class="box">
content in this box
</div>
<body>
</body>
</html>
ลองดูว่าใช่ใน แบบที่ต้องการหรือเปล่า ตัวนี้ใช้ CSS อย่างเดียว
concept คือประกาศให้ DIV position เป็น Absolute เพื่อให้มันกำหนดตำแหน่ง โดย ยึดหน้าจอเป็นหลัก
จากนั้น
เราก็ set ตำแหน่งของ top ให้อยู่ตรงกลาง โดยใช้ top:50% และก็ทำ Left ด้วย
จากนั้น ถ้าเรา preview ก็จะเห็นได้ว่า ตำแหน่ง Top ของ div จะอยู่ตรงกลาง ของ หน้าจอ
และของซ้ายของกล่อง ก็จะอยู่ตรงกลาง เหมือนกัน ซึ่งจะยังผิดอยู่
เราต้องหารสอง ขนาดของ กล่องอีกครั้บ เพื่อ ลบไปอย่างละครึ่ง
ก็ใช้ margin เอาครับ
margin-top:-150px; คือ margin ด้านบนให้เอาขึ้นไป 150px; // height / 2
margin-left:-150px; คือ margin ด้านซ้ายครับ ก็ให้มันถอยไปทางซ้าย 150px // height / 2
ก็จะได้และครับผม
ต่อยอด ถ้าเกิดว่า เนื้อหา เกิดไม่ใช้ 300* 300 ตลอดเวลาจะทำยังไง
ก็ไม่ยากครับ ใช้ javascript get ค่า กว้างสูง ออกมาก่อนว่าเนื้อหาใน box นั้นกว้างสูงเท่าไร
ถ้ามี โอกาศได้ใช้ jquery ก็ $('.box').width(); $('.box').height();
จากนั้นก็ set ค่า margin กันเลยครับ $('.box').css({'marginTop': ความสูงของกล่องที่หาได้ /2 })
|
| |
|
|
| |
| Date :
2010-08-10 14:54:20 |
By :
LindyFralin |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้าใช้ jquery ใช้แบบนี้ก็ได้ครับผม.
เวลาเรา Resize Browser ก็ให้มันคำนวนใหม่ด้วยเลย.
จะเอาไปประยุกต์ไว้ทำ Gallery เหมือนของ Ligthbox ก็ดีเหมือนกันนะครับ
ถ้าใช้ JQUERY ใช้แบบนี้ก็ได้ครับ..
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.center = function(init) {
var dxcenter = this;
if(!init) {
dxcenter.css('margin-top', $(window).height() / 2 - this.height() / 2);
dxcenter.css('margin-left', $(window).width() / 2 - this.width() / 2);
//ถ้ามีการ resize ให้ทำการคำนวนใหม่
$(window).resize(function() {
dxcenter.center(!init);
});
} else {
var marginTop = $(window).height() / 2 - this.height() / 2;
var marginLeft = $(window).width() / 2 - this.width() / 2;
marginTop = (marginTop < 0) ? 0 : marginTop;
marginLeft = (marginLeft < 0) ? 0 : marginLeft;
dxcenter.stop();
dxcenter.animate({
marginTop: marginTop,
marginLeft: marginLeft
}, 250, 'swing' );
}
}
$(document).ready(function() {
$('#wrapper').center();
});
</script>
<style>
#wrapper {
border: 1px solid black;
background-color: #E0E0EF;
color:#FFFFFF;
padding:15px;
height:50px;
width:650px;
text-align:center;
}
</style>
<div id="wrapper">
<div id="my-content">
<h1>อิหยังกะได้..แหม่นบ่อ ...!!</h1>
</div>
</div>
อย่าลืมสมัครสมาชิกด้วยหละ คนตั้งกระทู้
|
ประวัติการแก้ไข
2010-08-10 19:40:30
| |
|
|
| |
| Date :
2010-08-10 19:37:09 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
โทษทีนะครับ คุณ deawx ผมใช้ไม่เป็นอ่ะครับ ผมมีโค้ด jquery นี้จะต้องเอาไปแทรกตรงไหนเหรอครับ
ขอบคุณครับ
Code (JavaScript)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="Author" content="Stu Nicholls" />
<link rel="stylesheet" type="text/css" href="pro_drop_1/pro_drop_1.css" />
<script src="pro_drop_1/stuHover.js" type="text/javascript"></script>
</head>
<body>
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
<ul class="sub">
<li><a href="#nogo3" class="fly">Cameras</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li class="mid"><a href="#nogo7" class="fly">Lenses</a>
<ul>
<li><a href="#nogo8">Wide Angle</a></li>
<li><a href="#nogo9">Standard</a></li>
<li><a href="#nogo10">Telephoto</a></li>
<li><a href="#nogo11" class="fly">Zoom</a>
<ul>
<li><a href="#nogo12">35mm to 125mm</a></li>
<li><a href="#nogo13">50mm to 250mm</a></li>
<li><a href="#nogo14">125mm to 500mm</a></li>
</ul>
</li>
<li><a href="#nogo15">Mirror</a></li>
<li><a href="#nogo16" class="fly">Non standard</a>
<ul>
<li><a href="#nogo17">Bayonet mount</a></li>
<li><a href="#nogo18">Screw mount</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo19">Flash Guns</a></li>
<li><a href="#nogo20">Tripods</a></li>
<li><a href="#nogo21">Filters</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
<ul class="sub">
<li><a href="#nogo23">Printing</a></li>
<li><a href="#nogo24">Photo Framing</a></li>
<li><a href="#nogo25">Retouching</a></li>
<li><a href="#nogo26">Archiving</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="#nogo28">Support</a></li>
<li><a href="#nogo29" class="fly">Sales</a>
<ul>
<li><a href="#nogo30">USA</a></li>
<li><a href="#nogo31">Canadian</a></li>
<li><a href="#nogo32">South American</a></li>
<li><a href="#nogo33" class="fly">European</a>
<ul>
<li><a href="#nogo34" class="fly">British</a>
<ul>
<li><a href="#nogo35">London</a></li>
<li><a href="#nogo36">Liverpool</a></li>
<li><a href="#nogo37">Glasgow</a></li>
<li><a href="#nogo38" class="fly">Bristol</a>
<ul>
<li><a href="#nogo39">Redland</a></li>
<li><a href="#nogo40">Hanham</a></li>
<li><a href="#nogo41">Eastville</a></li>
</ul>
</li>
<li><a href="#nogo42">Cardiff</a></li>
<li><a href="#nogo43">Belfast</a></li>
</ul>
</li>
<li><a href="#nogo44">French</a></li>
<li><a href="#nogo45">German</a></li>
<li><a href="#nogo46">Spanish</a></li>
</ul>
</li>
<li><a href="#nogo47">Australian</a></li>
<li><a href="#nogo48">Asian</a></li>
</ul>
</li>
<li><a href="#nogo49">Buying</a></li>
<li><a href="#nogo50">Photographers</a></li>
<li><a href="#nogo51">Stockist</a></li>
<li><a href="#nogo52">General</a></li>
</ul>
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
<ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul>
</li>
<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
</body>
</html>
|
ประวัติการแก้ไข
2010-08-27 02:26:14
| |
|
|
| |
| Date :
2010-08-27 02:25:45 |
By :
tanikul |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ก้อบของผมเข้าไปวางในเว็บได้เลยครับ ลองดูๆ
|
| |
|
|
| |
| Date :
2010-08-27 04:56:52 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เอาแบบอยู่บนสุด อยู่กลางหน้าอ่ะครับ
ขอบคุณครับ
|
| |
|
|
| |
| Date :
2010-08-27 12:02:35 |
By :
tanikul |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองหรือยังหละครับผม ทั้งหมดที่ว่ามาน่ะ
|
| |
|
|
| |
| Date :
2010-08-27 12:27:57 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
หมดแล้วครับ มันมาอยู่ที่กลางห้าอ่ะครับไม่อยู่บนสุด ของผมมันชิดซ้ายอย่างงี้อ่ะครับ อยากให้มันอยู่ตรงกลาง
|
| |
|
|
| |
| Date :
2010-08-27 12:33:12 |
By :
tanikul |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองเอาโค้ดมาแปะ ๆ ดูหน่อยครับผม ผิดตรงใหนหว่า
เอา CSS ด้วยนะ
|
| |
|
|
| |
| Date :
2010-09-11 05:16:39 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เมนูสวยจังเลยคะ :D 
|
| |
|
|
| |
| Date :
2010-10-31 10:19:59 |
By :
unzeen |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2011-05-27 14:52:58 |
By :
ปังปอน |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณคุณ deawx ใช้การได้ดีมากๆ
|
| |
|
|
| |
| Date :
2012-12-02 14:55:39 |
By :
แว่น |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
