ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Free Site***เขียน css layout 2 คอลัมน์เขียนกันอย่างไรดี งงครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ***เขียน css layout 2 คอลัมน์เขียนกันอย่างไรดี งงครับ  (อ่าน 2289 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
hastyman
ก๊วนเสียว
*

พลังน้ำใจ: 13
ออฟไลน์ ออฟไลน์

กระทู้: 252



ดูรายละเอียด
« เมื่อ: 01 มิถุนายน 2013, 14:27:04 »

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

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

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


« แก้ไขครั้งสุดท้าย: 01 มิถุนายน 2013, 15:04:55 โดย hastyman » บันทึกการเข้า
mikeyx
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 268
ออฟไลน์ ออฟไลน์

กระทู้: 4,007



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 01 มิถุนายน 2013, 14:29:50 »

float:right;
float:left;
บันทึกการเข้า
kiraoji
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 226
ออฟไลน์ ออฟไลน์

กระทู้: 1,681



ดูรายละเอียด
« ตอบ #2 เมื่อ: 01 มิถุนายน 2013, 15:25:45 »

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


บันทึกการเข้า
wasantec
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 586
ออฟไลน์ ออฟไลน์

กระทู้: 2,613



ดูรายละเอียด
« ตอบ #3 เมื่อ: 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;   
}

ประมาณนี้ได้ป่าว
บันทึกการเข้า
chlorophill
คนรักเสียว
*

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 162



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 01 มิถุนายน 2013, 16:06:27 »

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

awayhost
คนรักเสียว
*

พลังน้ำใจ: 11
ออฟไลน์ ออฟไลน์

กระทู้: 192



ดูรายละเอียด
« ตอบ #5 เมื่อ: 01 มิถุนายน 2013, 16:18:58 »

float:right;
float:left;

อีกเสียงครับ ไม่ต้องมาหาตำแหน่ง Position ด้วย  wanwan020
ลืมบอก เวลา Float อย่าลืม Clear:both ด้วยเน้อ  Tongue
บันทึกการเข้า

max30012540
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 196
ออฟไลน์ ออฟไลน์

กระทู้: 1,310



ดูรายละเอียด
« ตอบ #6 เมื่อ: 01 มิถุนายน 2013, 17:07:26 »

float:right;
float:left;
ตามนี้ ใช่ร่วมกับ display:table จะดีมากๆ
บันทึกการเข้า
ชนเผ่าอาข่า
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 158
ออฟไลน์ ออฟไลน์

กระทู้: 1,444



ดูรายละเอียด
« ตอบ #7 เมื่อ: 01 มิถุนายน 2013, 17:38:23 »

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

พลังน้ำใจ: 19
ออฟไลน์ ออฟไลน์

กระทู้: 435



ดูรายละเอียด
« ตอบ #8 เมื่อ: 01 มิถุนายน 2013, 17:55:52 »

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


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

ลิขิตฟ้าหรือจะสู้มานะคน
l3adtzl3oy
คนรักเสียว
*

พลังน้ำใจ: 31
ออฟไลน์ ออฟไลน์

กระทู้: 162



ดูรายละเอียด
« ตอบ #9 เมื่อ: 01 มิถุนายน 2013, 18:12:45 »

ทำโครงมาให้ รายละเอียดท่านจัดต่อได้เลย
จริงๆ ตามที่ท่าน 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 &copy; Your name</p>
   </footer>

</body>

</html>


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


คือ 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
ก๊วนเสียว
*

พลังน้ำใจ: 24
ออฟไลน์ ออฟไลน์

กระทู้: 212



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 01 มิถุนายน 2013, 19:44:05 »

960 grid system กับ bootstrap ลองศึกษาดูไม่ยาก
บันทึกการเข้า

Mubaza Thailand
Pink.in.th
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 288
ออฟไลน์ ออฟไลน์

กระทู้: 2,449



ดูรายละเอียด เว็บไซต์
« ตอบ #11 เมื่อ: 01 มิถุนายน 2013, 20:51:50 »

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

ผู้หญิง   บริการออกแบบเว็บไซต์  
ขายสคริปเกมส์เพียว ๆ ราคา 300 บาท, มีเกมส์ด้วยราคา 500 บาท ติดตั้งฟรี เลือก Theme ได้ครับ >> Theme 1   Theme 2
vanavat
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 373
ออฟไลน์ ออฟไลน์

กระทู้: 2,752



ดูรายละเอียด เว็บไซต์
« ตอบ #12 เมื่อ: 01 มิถุนายน 2013, 21:13:27 »

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
ก๊วนเสียว
*

พลังน้ำใจ: 13
ออฟไลน์ ออฟไลน์

กระทู้: 252



ดูรายละเอียด
« ตอบ #13 เมื่อ: 04 มิถุนายน 2013, 22:40:07 »

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

ขอบคุณครับ

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

แต่ไม่เป็นไรครับ ขอบคุณอีก...
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์