html
<div class="layout-left">
</div>
<div class="layout-right">
</div>
css
.layout-left {
display: block;
float: left;
width: xxx px;
min-height:xxx px;
}
.layout-right {
display: block;
float: left;
width: xxx px;
min-height:xxx px;
}
ประมาณนี้ได้ป่าว
อ้างถึงจาก: mikeyx ใน 01 มิถุนายน 2013, 14:29:50
float:right;
float:left;
อีกเสียงครับ ไม่ต้องมาหาตำแหน่ง Position ด้วย :wanwan020:
ลืมบอก เวลา Float อย่าลืม Clear:both ด้วยเน้อ :P
อ้างถึงจาก: mikeyx ใน 01 มิถุนายน 2013, 14:29:50
float:right;
float:left;
ตามนี้ ใช่ร่วมกับ display:table จะดีมากๆ
อ้างถึงจาก: chlorophill ใน 01 มิถุนายน 2013, 16:06:27
แนะนำให้ศึกษา Framework ครับ
Bootstrap หรือ Foundation สองตัวนี้เป็นที่นิยม
แล้วการกำหนด layout จะง่ายกว่าเดิมเยอะมาก
เชียร์ให้ใช้ framework (Bootstrap: http://twitter.github.io/bootstrap/) อีกคนครับ :wanwan020:
ทำโครงมาให้ รายละเอียดท่านจัดต่อได้เลย
จริงๆ ตามที่ท่าน chlorophill แนะนำเลยครับ แล้วชีวิตจะง่ายขึ้นเยอะ :wanwan019:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
</head>
<style>
.containner { width:978px;height:500px;}
header { height:100px; width:100%; background:#888; }
content { width:600px; height:100%; background:#CCC; float:left; }
sidebar { width:340px; height:100%; background:#AAA; float:right; }
footer { height:50px; width:100%; background:#888; float:left; }
</style>
<body class="containner">
<header>
<p>Header</p>
</header>
<content>
<p>Display Content</p>
</content>
<sidebar>
<p>Sidebar Start Here</p>
</sidebar>
<footer>
<p>Copyright © Your name</p>
</footer>
</body>
</html>
อ้างถึงจาก: ชนเผ่าอาข่า ใน 01 มิถุนายน 2013, 17:38:23
อ้างถึงจาก: chlorophill ใน 01 มิถุนายน 2013, 16:06:27
แนะนำให้ศึกษา Framework ครับ
Bootstrap หรือ Foundation สองตัวนี้เป็นที่นิยม
แล้วการกำหนด layout จะง่ายกว่าเดิมเยอะมาก
มันคือ ???
คือ HTML framework ครับ มีของคนไทยด้วยชื่อ ใจดี เฟรมเวอร์ค
Jaidee HTML Framework เป็นชุดคำสั่ง CSS และ JS ที่ได้รับการรวบรวมมาเพื่อตอบสนองการสร้างเว็บไซต์แบบ Responsive webdesign ซึ่งกำลังเป็นที่นิยมในปัจจุบัน
Jaidee HTML Framework จัดเป็น HTML Framework ตัวแรกของไทย ซึ่งมีคุณสมบัติทัดเทียมกับ HTML Framework ของต่างชาติ
คุณสมบัติโดยคร่าวๆ
เขียนด้วย HTML5 และ CSS3
เป็นระบบที่สามารถปรับขนาดตัวเองให้เหมาะสมกับหน้าจอในแต่ละอุปกรณ์
มี Jquery plugin ยอดนิยมใช้ เช่น Slideshow, Tab, Modal
มีระบบนำทาง (Site Navigator) ที่ปรับขนาดตัวเองให้รองรับทุกอุปกรณ์
Jaidee HTML Framework มีขนาดเล็กกว่า HTML Framework ตัวอื่นๆ
Free 100 % & Opensource
เยี่ยมชมหน้าโครงการได้ที่ http://develop.karmins.com/jaidee/
ที่มา: http://www.blognone.com/node/42710
อ้างถึงจาก: wasantec ใน 01 มิถุนายน 2013, 15:54:55
html
<div class="layout-left">
</div>
<div class="layout-right">
</div>
css
.layout-left {
display: block;
float: left;
width: xxx px;
min-height:xxx px;
}
.layout-right {
display: block;
float: left;
width: xxx px;
min-height:xxx px;
}
ประมาณนี้ได้ป่าว
ตามนี้ครับผม CSS ลองศึกษาดูอีกนิดเดียวก็ได้แล้วครับ อยู่กับมันเยอะ ๆ หน่อยผมว่าคุณทำได้ครับ ^^
อ้างถึงจาก: wasantec ใน 01 มิถุนายน 2013, 15:54:55
html
<div class="layout-left">
</div>
<div class="layout-right">
</div>
css
.layout-left {
display: block;
float: left;
width: xxx px;
min-height:xxx px;
}
.layout-right {
display: block;
float: left;
width: xxx px;
min-height:xxx px;
}
ประมาณนี้ได้ป่าว
<div class="layout-left">
</div>
<div class="layout-right">
</div>
css
.layout-left {
display: block;
float: left;
width: xxx px;
min-height:xxx px;
}
.layout-right {
display: block;
float: right;
width: xxx px;
min-height:xxx px;
}
ไม่ใช่แบบนี้หรอครับ