***เขียน css layout 2 คอลัมน์เขียนกันอย่างไรดี งงครับ

hastyman

มี body width 978 px อยู่ตรงกลาง
มีส่วนหัว width 978 px
มี content width 600px อยู่ซ้าย
มี sidebar width 340px อยู่ขวา
มี footer width 978 px

จะใช้อย่างไรดี
ระหว่าง float ซ้าย-ขวา
หรือใช้ Position บอกตำแหน่ง
หรือจะใช้ display block เพื่อทำ Layout

ควรจะเลือกอย่างดีครับ

mikeyx

float:right;
float:left;

kiraoji

มี content width 600px อยู่ซ้าย float:left
มี sidebar width 340px อยู่ขวา float:right

wasantec

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;
}

ประมาณนี้ได้ป่าว

chlorophill

แนะนำให้ศึกษา Framework ครับ
Bootstrap หรือ Foundation สองตัวนี้เป็นที่นิยม
แล้วการกำหนด layout จะง่ายกว่าเดิมเยอะมาก

awayhost

อ้างถึงจาก: mikeyx ใน 01 มิถุนายน 2013, 14:29:50
float:right;
float:left;

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

ลืมบอก เวลา Float อย่าลืม Clear:both ด้วยเน้อ

max30012540

อ้างถึงจาก: mikeyx ใน 01 มิถุนายน 2013, 14:29:50
float:right;
float:left;

ตามนี้ ใช่ร่วมกับ display:table จะดีมากๆ

ชนเผ่าอาข่า

อ้างถึงจาก: chlorophill ใน 01 มิถุนายน 2013, 16:06:27
แนะนำให้ศึกษา Framework ครับ
Bootstrap หรือ Foundation สองตัวนี้เป็นที่นิยม
แล้วการกำหนด layout จะง่ายกว่าเดิมเยอะมาก

มันคือ

gigkokman

อ้างถึงจาก: chlorophill ใน 01 มิถุนายน 2013, 16:06:27
แนะนำให้ศึกษา Framework ครับ
Bootstrap หรือ Foundation สองตัวนี้เป็นที่นิยม
แล้วการกำหนด layout จะง่ายกว่าเดิมเยอะมาก

เชียร์ให้ใช้ framework (Bootstrap: http://twitter.github.io/bootstrap/) อีกคนครับ

l3adtzl3oy

ทำโครงมาให้ รายละเอียดท่านจัดต่อได้เลย
จริงๆ ตามที่ท่าน chlorophill แนะนำเลยครับ แล้วชีวิตจะง่ายขึ้นเยอะ

<!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

execter

960 grid system กับ bootstrap ลองศึกษาดูไม่ยาก

Pink.in.th

อ้างถึงจาก: 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 ลองศึกษาดูอีกนิดเดียวก็ได้แล้วครับ อยู่กับมันเยอะ ๆ หน่อยผมว่าคุณทำได้ครับ ^^

vanavat

อ้างถึงจาก: 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;
}

ไม่ใช่แบบนี้หรอครับ

hastyman

+1 ทุกท่านครับ

ขอบคุณครับ

ความจริงอยากได้ layout เป็น html 5 + css ครับ

แต่ไม่เป็นไรครับ ขอบคุณอีก...