CSS – PlusMagi's Blog By Pitt Phunsanit

Bootstrap: Dynamic Tabs

สามารถสร้างเนื้อหาที่เป็นรูปแบบ tabs หรือที่เรียกว่า dynamic tabs ได้โดยใช้แค่ jQuery และ Bootstrap

ตัวอย่าง[code language=”html” tile=”bootstrap: dynamic tabs”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Bootstrap: Dynamic Tabs</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
<h2>Bootstrap: Dynamic Tabs</h2>

<div id="menu3" class="fade tab-pane">
<h3>Menu 3</h3>
<p>พันธุ์สนิท</p>
</div>

</div>

</body>

</html>[/code]

โดยพื้นฐานคือใส่ data-toggle=”tab” ใน tag a ที่ลิงค์ไปยัง hash ที่เป็น id ของ div ที่มี class tab-pane ที่อยู่ใน div class tab-content ก็จะทำงานได้แล้วโดยไม่ต้องกำหนดสคริปเพิ่มเติมอีก แต่ถ้าหากต้องการเลือกแท็บจากลิงค์ให้อ่าน Bootstrap: dynamic tabs hash เพิ่มเติม

ทำ checkbox / radio สวยๆ

สิ่งที่ css framework อย่าง bootstrapt ไม่ยอมทำซักทีคือ ทำให้ checkbox หรือ radio ออกมาเหมือนๆกันทุก browser ทำให้การออกแบบฟอร์มทำได้ไม่สวยงามเท่าที่ควร

แก้ได้โดยใช้ fronteed/icheck มาวางภาพทับ checkbox หรือ radio ไว้ และทำการจับ event แทนตัว input จริงๆ

ตัวอย่าง[code language=”php” title=”jQuery.iCheck.php”]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery iCheck</title>
<link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="vendor/fronteed/icheck/skins/square/green.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
if(count($_POST)) {
echo ‘<pre>’, print_r($_POST, true), ‘</pre>’;
}
?>
<div class="container">
<form action="jQuery.icheck.php" id="formA" method="post">
<fieldset class="form-group row">
<legend class="col-form-legend col-sm-2">Checkbox</legend>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" checked id="chk1" name="checkbox1" type="checkbox" value="checkbox1">
Check me out </label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="chk2" name="checkbox2" type="checkbox" value="checkbox2">
Check me </label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="chk3" name="checkbox3" type="checkbox" value="checkbox3" disabled>
Check is disabled </label>
</div>
</div>
</fieldset>
<fieldset class="form-group row">
<legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" checked id="gridRadios1" name="radio" type="radio" value="option1">
Check me out </label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="gridRadios2" name="radio" type="radio" value="option2">
Check me </label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" disabled id="gridRadios3" name="radio" type="radio" value="option3">
Check is disabled </label>
</div>
</div>
</fieldset>
<div class="form-group row">
<label class="col-sm-2"></label>
<div class="col-sm-10 text-right">
<button class="btn btn-lg btn-primary" type="submit">Save</button>
</div>
</div>
</form>
<hr>
<button class="btn btn-lg btn-info" id="ajaxBtn" type="button">AJAX Value</button>
</div>
<script src="vendor/components/jquery/jquery.min.js"></script>
<script src="vendor/fronteed/icheck/icheck.min.js"></script>
<script>
$(function () {

/* style */
$(‘input’).iCheck({
"checkboxClass": "icheckbox_square-green",
"radioClass": "iradio_square-green",
});

/* event */
$(‘input’).on(‘ifChanged’, function(event) {
console.log(event);

alert(‘checked = ‘ + event.target.checked);
alert(‘id = ‘ + event.target.id);
alert(‘name = ‘ + event.target.name);
alert(‘type = ‘ + event.target.type);
alert(‘value = ‘ + event.target.value);
});

/* value */
$(‘#ajaxBtn’).click(function() {
var formData = $(‘#formA’).serializeArray();
var message = ”;

$.each(formData, function (index, item) {
message +=’\n’ + index + ‘ ‘ + item.name + ‘ = ‘+item.value;
});

alert(message);

});

});
</script>
</body>
</html>[/code]

สามารถเปลี่ยนรูปแบบอื่นได้โดยดู style ได้จาก iCheck v1.0.1 @FRONTEED จากนั้นเปลี่ยน css ไฟล์ และ checkboxClass หรือ radioClass ไม่ก็ทำภาพพื้นหลังใหม่และเขียน css ของตัวเองก็ได้

YII 2 : Horizontal / inline form

ตามปกติ form ของ yii ที่ใช้ GII generate ออกมาจะเป็นรูปแบบ label บรรทัดหนึ่ง input อีกบรรทัดหนึ่ง อ่านง่าย สวยงามพอสมควร แต่อาจจะไม่ถูกใจบรรดาหัวหน้าอนุรักษ์นิยมทั้งหลาย

yii มีอีกทางเลือกให้ใช้ทำฟอร์ม คือ มี Horizontal form ให้เลือกใช้ yii bootstrap activeform (Horizontal form) อีกตัว

วิธีการคือ

เปิดไฟล์ _form.php ใน view เป้าหมาย
เปลี่ยน use yii\widgets\ActiveForm; เป็น use yii\bootstrap\ActiveForm; ถ้าไม่เปลี่ยนจะเจอ error Setting unknown property: yii\widgets\ActiveForm::layout
เปลี่ยน[code language=”PHP”]$form = ActiveForm::begin();[/code]เป็น[code language=”PHP”]$form = ActiveForm::begin([
‘fieldConfig’ => [
‘horizontalCssClasses’ => [
‘label’ => ‘col-sm-2’,
‘offset’ => ‘col-sm-offset-2’,
‘wrapper’ => ‘col-sm-10’
]
],
‘layout’ => ‘horizontal’
]);[/code]

สำเร็จแล้ว ฟอร์มจะเปลี่ยนเป็นรูปแบบเหมือนกับ Bootstrap Horizontal form โดย

layout คือ จะวางฟอร์มเป็นแบบไหน มีให้เลือก คือ default, horizontal และ inline
label คือ ค่า grid ของ label
wrapper คือ ความกว้างของช่อง input
offset คือ การเว้นระยะของพวก checkbox ตั้งไว้เท่ากับ label จะได้ตรงกันพอดี

เสร็จแล้ว หรือจะใช้การจัด code แบบของผมก็ได้ครับ ไม่อยากสลับ php เข้าออก ไปๆ มาๆ [code language=”PHP”]
<?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

<div class="user-form">
<?php
$form = ActiveForm::begin([
‘fieldConfig’ => [
‘horizontalCssClasses’ => [
‘label’ => ‘col-sm-2’,
‘offset’ => ‘col-sm-offset-2’,
‘wrapper’ => ‘col-sm-10’
]
],
‘layout’ => ‘horizontal’
]);

echo $form->field($model, ‘username’)->textInput(),
$form->field($model, ’email’)->textInput(),
$form->field($model, ‘status’)->checkbox(array(‘label’=>’enable’)),
‘<div class="form-group">’,Html::submitButton($model->isNewRecord ? Yii::t(‘app’, ‘Create’) : Yii::t(‘app’, ‘Update’), [‘class’ => $model->isNewRecord ? ‘btn btn-success’ : ‘btn btn-primary’]);
ActiveForm::end();
echo'</div>’;[/code]

ตรวจฟอร์มด้วย HTML 5 / jQuery Validation Plugin

HTML 5 มี attribute อย่าง required ช่วยตรวจสอบฟอร์ม แต่มันยังไม่สมบูรณ์ เช่น ใช้ required กับกลุ่ม checkbox ไม่ได้ มันตรวจได้แค่เลือก checkbox ตัวนั้นๆเท่านั้น จะบังคับให้เลือก 1 ในตัวเลือกไม่ได้

ทำให้ต้องใช้เจคิวรี่อย่าง jQuery Validation Plugin ช่วย

[code language=”html”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Validation : html5 / inline</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]–>
</head>
<body>
<form action="validation.php" enctype="multipart/form-data" id="formA" method="post">
<div class="form-group">
<p>เครื่องปรุง</p>
<!– ใส่ required ใน input ตัวแรกก็พอ –>
<label>
<input type="checkbox" name="flavoring[]" value="1" required>
เกลือ</label>
<label>
<input type="checkbox" name="flavoring[]" value="2">
น้ำตาล</label>
<label>
<input type="checkbox" name="flavoring[]" value="3">
น้ำปลา</label>
<label>
<input type="checkbox" name="flavoring[]" value="4">
พริกป่น</label>
<!– แสดง error ตรงนี้ อย่าลืม class="error" –>
<label for="flavoring[]" class="error"></label>
</div>
<div class="form-inline">
<div class="form-group"><!– input text ธรรมดา –>
<label>สั่งวันที่
<input type="text" name="dateOrder" required data-rule-date="true">
</label>
</div>
<div class="form-group"><!– input date –>
<label>ส่งวันที่
<input type="date" name="dateDelivery" required>
</label>
</div>
</div>
<div class="form-inline">
<div class="form-group"><!– min and max length –>
<label>
<input type="text" id="sendto" name="sendto" required minlength="10" maxlength="50" data-rule-email="true">
Email</label>
</div>
<div class="form-group"> <!– data-rule-equalTo id sendto –>
<label>
<input type="email" id="sendtoSame" name="sendtoSame" required data-rule-equalTo="#sendto">
Email Confirm</label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>รับเฉพาะภาพ
<input type="file" name="image" accept="image/*">
</label>
</div>
<div class="form-group"><!– style input –>
<label class="btn btn-primary">รับแต่ .jpeg
<input type="file" name="jpeg" accept="image/jpeg" style="display:none;">
</label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>ข้าวเปล่า
<input type="text" name="rice" data-rule-number="true">
</label>
</div>
<div class="form-group">
<label>แคปหมู (ปลีก สั่งเป็นขีดได้ เช่น 0.5)
<input type="number" name="friedPorkSkin" step="0.1">
</label>
</div>
<div class="form-group"><!– custom message –>
<label>แคปหมู (ส่ง kg.)
<input type="number" name="friedPorkSkin" data-rule-digits="true" data-message-digits="ขายแต่เป็น KG ครับ">
</label>
</div>
</div>
<div class="form-group">
<p>เส้น</p>
<!– ใส่ required ใน input ตัวแรกก็พอ –>
<label>
<input type="radio" name="noodle" value="1" required>
เส้นหมี่</label>
<label>
<input type="radio" name="noodle" value="2">
เส้นเล็ก</label>
<label>
<input type="radio" name="noodle" value="3">
เส้นใหญ่</label>
<label>
<input type="radio" name="noodle" value="4">
เส้นหมี่</label>
<!– แสดง error ตรงนี้ อย่าลืม class="error" –>
<label for="noodle" class="error"></label>
</div>
<div class="form-group">
<label>ลวกนานมั๋ย
<input type="range" min="2" max="8" step="1">
</label>
</div>
<div class="form-inline">
<div class="form-group">
<label>เว็บบริษัท
<input type="text" name="officeUrl" data-rule-url="true">
</label>
</div>
<div class="form-group">
<label>เว็บส่วนตัว
<input type="url" name="blogUrl">
</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<script src="assets/jQuery/jquery.min.js"></script>
<script src="plus/jQuery/jquery-validation/jquery.validate.min.js"></script>
<script>
$(function()
{
$(‘#formA’).validate();
});
</script>
</body>
</html>
[/code]

HTML5 IE หน้าเว็บเพี้ยน

อ้ายอีที่ขัดขวางการเจริญเติมโตของเว็บเทคโนโลยีกันมานานคงไม่พ้น internet explorer ไออี ตัวปัญหาเจ้าเก่าเจ้าประจำ ดั้งเดิมนั้นเอง เพราะว่ามันโดนฝั่งมากับ windows และต่างจาก chrome, Firefox, opera ตรงที่เจ้าอื่นๆมันจะ update อัตโนมัติ พยามพัฒนาตัวเองให้เป็นคนใหม่ มีความสามารถมากขึ้นเสมอๆ แต่เจ้าที่ตัวนี้ user ต้องพยามในการอัพเดตมันเอง แถมวินโดวน์เก่าๆ ยังไม่สามารถลงเวอร์ชั่นที่ล่าสุดได้ตามข้อจำกัดของวินโดว์นั้นๆ

ถ้าเราใช่ HTML5 และ tag ใหม่ อย่าง article, aside, footer, header, nav, section, time หวังว่าท่าน google จะทรงโปรด เพราะว่าแบ่งข้อมูลให้ท่านพิจารณาในการทำ SEO อย่างเต็มที่ แต่กลับกลายเป็นว่าหน้าเว็บเละอย่างไม่เคยเป็นมาก่อนใน IE8 ลงไป ลองใช้ compatibility mode ไล่ version ต่ำลงมาเรื่อยๆ ถึงจะเห็นว่าเป็นที่ IE9 ลงมา

เป็นเพราะว่ามันเห็น tag ใหม่ๆ อย่าง article, aside, footer, header, nav, section, time เป็นการเขียนผิด โดนกะลาครอบอยู่กับ HTML4 สมัยเมื่อ 10 ปีที่แล้ว แถมพาลไม่สนใจ css ที่มี tag พวกนี้อยู่ด้วย วิธีแก้คือสร้าง object ใหม่อีกครั้งด้วย JavaScript

[code language=”javascript”]
‘article aside footer header nav section time’.replace(/\w+/g,function(n){document.createElement(n)})
[/code]
หรือจะใช้ tools อย่าง html5shiv
[code language=”html”]
<!–[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]–>
[/code]

เราก็จะสามารถใช้ css กับเท็กใหม่ๆ พวกนี้ได้และควรใช้ css reset ไว้ด้วยครับ ช่วยได้เยอะเลย เกือบจะต้องเริ่มต้นเขียนกันใหม่

Basic image gallery

แกลเลอร์รี่รูปภาพง่ายๆโดยใช้เจคิวรี่ โดยกดเปลี่ยนภาพแล้วมันจะ swap ภาพไปอีกภาพโดยมีเฟตอิน แฟตเอ้า สำหรับแสดงสินค้าแบบง่ายๆ มีการแคชภาพไว้ล่วงหน้า เวลาเปลี่ยนภาพจะได้รวดเร็ว

ตกแต่งอัลบัมของเราซักเล็กน้อยก่อน

[code language=”css”]
#imgPreview {
height: 481px;
width: 431px;
}
.thumbs li {
float: left;
height: 60px;
margin: 18px 9px;
width: 74px;
}
.thumbs li img.active {
border:#c00000 sold thin;
}
[/code]

ใส่ภาพโดยภาพในทัมเนลจะตั้งชื่อให้เหมือนกับภาพใหญ่ เก็บไว้ที่เดียวกัน ต่างกันแค่ ภาพตัวอย่างจะต่อด้วย -thumb เพื่อความสะดวกในการดูแล
class=”active” จะตรงกับภาพปัจจุบันเที่แสดงในไอดี imgPreview จะไว้เขียนตกแต่งเพิ่มเติมให้ผู้ใช้ทราบว่ากำลัง show ภาพตัวไหนอยู่
ถ้าเปลี่ยนภาพแล้วกระตุกเพราะหน้าเพจขยับให้ใส่ วัตถุที่มีความยาว หรือความกว้างเท่ากับภาพในแนวที่เปลี่ยนไป จะได้ถีบไว้เวลาเปลี่ยนภาพ เช่น [code language=”html”]<hr width="431">[/code]

[code language=”html”]
<img id="imgPreview" src="assets/products/1-big.jpg">
<ul class="thumbs">
<li><img class="active" src="assets/products/1.jpg"></li>
<li><img src="assets/products/2-thumb.jpg"></li>
<li><img src="assets/products/3-thumb.jpg"></li>
<li><img src="assets/products/4-thumb.jpg"></li>
<li><img src="assets/products/5-thumb.jpg"></li>
<li><img src="assets/products/6-thumb.jpg"></li>
<li><img src="assets/products/7-thumb.jpg"></li>
</ul>
[/code]

effect จะตั้งไว้ที่ 300 มิลลิวินาที ถ้าต้องการให้แสดงเร็วช้ากว่านี้ทดลองเปลี่ยนดูครับ

[code language=”javascript”]
$(function()
{
/* preload images cache */
var images = new Array()
$(‘.thumbs li img’).each(function(index, value)
{
console.log(index+’ ‘+$(this).attr(‘src’));
src = $(this).attr(‘src’).split(‘.jpg’);
src = src[0]+’-big.jpg’;
images[index] = new Image()
images[index].src = src;
});

$(‘.thumbs li img’).click(function()
{

thumb = $(this);
if(thumb.hasClass(‘active’))
{
return true;
}

$(‘.thumbs li img’).removeClass(‘active’);
thumb.addClass(‘active’);

/* บรรทัดนี้ทำให้เปลี่ยนรูปไปใช้อีกไฟล์ */
src = thumb.attr(‘src’).replace(‘-thumb.’, ‘.’);

$(‘#imgPreview’).fadeOut(300, function(){
$(this).attr(‘src’, src).bind(‘onreadystatechange load’, function()
{
if(this.complete)
{
$(this).fadeIn(300);
}
});
});

});
});
[/code]

ถ้าใช้ javasript อ่าน ปรีโหลดรูปภาพ

ใส่ Youtube ใช้ได้บนมือถือและทุกจอ

สมัยนี้เวลาทำเว็บต้องคิดถึงพวกอุปกรณ์ขนาดหน้าจอต่างๆ เมื่อใส่ video แล้วก็อยากจะให้มันกว้างพอดีกับหน้าจอ ไม่ว่าจะเป็น iPhone, ipad, Note อุปกรณ์พกพามันมีหลายขนาดเหลือเกิน โดยเฉพาะของช่างตัดกระจกอย่าง samsung ที่ทำมือถือออกมาแทบจะทุกขนาด แถมแต่ละเครื่องยังมีแนวตั้ง แนวนอนให้เลือกอีก อีกจะเขียน code ให้ได้ทุกชิ้นยังไงก็ไม่ครบทั้งหมด

ไปเจอบนความดีๆ Responsive Youtube Embed ใช้แค่ css นิดหน่อยก็ตอบโจทย์ได้แล้ว

เปิดหน้าเว็บยูทูปที่เราต้องการใส่ในเว็บ ของผมคือเพลง เพลง ความรักกับรองเท้า
ศิลปิน SIGNATURE สังเกตุด้านบนเว็บจะมี url อยู่ด้านบน ของเพลงนี้คือ http://www.youtube.com/watch?v=FPnewcqkmlc&list=RDFPnewcqkmlc คัดลอกอักษรระหว่าง v= และ & ไปใส่โค้ทตามตัวอย่างด้านล่าง
[sourcecode language=”html”]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Youtube Embed</title>
<style>
.video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
.video-container embed, .video-container iframe, .video-container object {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>
</head>

<body>
<div class="video-container">
<iframe src="http://www.youtube.com/embed/FPnewcqkmlc" frameborder="0" width="560" height="315"></iframe>
</div>
</body>
</html>
[/sourcecode]

เสร็จแล้ว มันง่ายมาก ฟังเพลงโปรดของผมไปเพลินๆ นะครับ หวังว่าวันหนึ่งจะได้มีคนมานั่งฟังเพลงนี้ด้วยกัน

ใส่ฟอนต์สวยๆให้เว็บ

Css 3 ยอมให้กำหนด font เพิ่มได้เองนอกจากที่มีอยู่แล้ว ทำให้สามารถออกแบบหน้าเว็บสวยๆ หรือจะเล่น typography อักษรศิลป์ได้มากขึ้น แต่ก็ยังเจอกับปัญหาเดิมคือ แต่ละ browser มันรับชนิดตัวอักษรได้ไม่เท่ากัน ถ้าดูจาก http://caniuse.com/fontface จะเห็นว่าตั้งแต่ ie8 มันก็ใช้ font-face ได้แล้ว แต่เฉพาะ Embedded OpenType (EOT) แต่ก็ไม่มีเจ้าอื่นๆ ที่รับนามสกุลนี้เท่าไหร่เลย ที่มีความหวังที่สุดคือ True Type (TTF) และ OpenType (OTF) ก็ยังไม่ครบทุกบราวเซอร์

ปัญหานี้แก้ได้ง่ายๆ โดยไปที่เว็บ Convert Fonts upload ไฟล์ fonts ที่เราต้องการใช้ หรือเข้าไปหาฟอนต์ที่เคยลงไว้ใน C:WindowsFonts เสร็จแล้วกด get @font-face จะได้ไฟล์ zip
สมมุติจะแปลง THSarabunNew เป็นนามสกุลอื่นๆ ภายในจะมีไฟล์ตามนี้
thsarabunnew.css
เป็นตัวอย่าง css ให้เอาไปแปะในไฟล์ css สาเหตุที่มันทำงานได้ทุกๆ บราวเซอร์
เพราะพี่แกเล่นเขียน css แบบนี้มาให้เลย
[sourcecode language=”css”]
@font-face {
font-family: ‘THSarabunNewRegular’;
src: url(‘thsarabunnew.eot’);
src: url(‘thsarabunnew.eot’) format(’embedded-opentype’),
url(‘thsarabunnew.woff’) format(‘woff’),
url(‘thsarabunnew.ttf’) format(‘truetype’),
url(‘thsarabunnew.svg#THSarabunNewRegular’) format(‘svg’);
}
[/sourcecode]
ต่างจากตัวอย่าง(ในอุดมคติ)ของ w3c เยอะเลย เพื่อให้ browser compatibility มากที่สุด
และมีฟอนต์ที่แปลงมาให้แล้วอีก 4 ตัว

thsarabunnew.ttf (TrueType)
thsarabunnew.eot (Embedded OpenType)
thsarabunnew.svg (Scalable Vector Graphics) เขียนมาเป็น code เลย อันนี้ไม่มีใครขยันทำเองแน่ๆ
thsarabunnew.woff (Web Open Font Format)

ตัวอย่างการใช้งาน กำหนดให้ใช้ฟอนต์สารบัญ
[sourcecode language=”css”]
body
{
color:#c00000;
font-family: ‘THSarabunNewRegular’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-size: 14px;
}
[/sourcecode]
สังเกต จะมีชื่อฟอนต์อื่นต่อหลัง THSarabunNewRegular อีกที เพื่อถ้าหากโหลดฟอนต์มาไม่ได้ บราวเซอร์จะใช้ตัวถัดๆไปแสดงแทน

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ (ตาราง)

จากที่เคยเขียน ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ
ถ้าหน้าเว็บสั้นกว่าจอโดยใช้ tableless เรามาย้อนยุคโดยใช้ตารางดูบ้าง
note

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

[sourcecode language=”html”]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>100% table height</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css3.css">
<style>
html
{
height:100%;
}
body
{
height:100%;
margin: 0px;
padding: 0px;
font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
}
table
{
border: 0 none;
height:100%;
}
td
{
margin: 0px;
padding: 0px;
vertical-align:top;
height:0px;
}
#header
{
background:#c00000;
height:20px;
}
#footer
{
background:#c00000;
height:20px;
}
</style>
</head>
<body>
<table border="1" class="tablewrapper">
<tr>
<td id="header">header</td>
</tr>
<tr>
<td>contents</td>
</tr>
<tr>
<td id="footer">footer</td>
</tr>
</table>
</body>
</html>
[/sourcecode]
นี่ถ้าเขียนโดยใช้ div จะง่ายและสั้นกว่ามาก
ดูเพิ่มเติม

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ

ปกติฟุตเตอร์ในหน้าเว็บจะอยู่ต่อจากส่วนอื่นๆ ถ้าเนื้อหาสั้นก้จะเห็นหน้าเว็บ สั้นแปลกๆ อย่างหน้าแจ้งสมัครสมาชิคสำเร็จถ้ามีข้อความแค่ สำเร็จแล้ว จะส่งเมล์ไปยืนยัน ถ้าเว็บไม่มีโฆษณา หรือภาพใหญ่ๆ ก็จะเห็นแค่ครึ่งหน้าจอ บางคนบอกว่าตลก แก้ได้โดยวางโครงสร้างตามตัวอย่างครับ[sourcecode language=”html”]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CSS Fixed Footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html,
body
{
margin:0;
padding:0;
height:100%;
}
#container
{
min-height:100%;
position:relative;
}
#footer
{
position:absolute;
bottom:0;
width:100%;
height:20px;/* Height of the footer */
background:#c00000;
padding-top:5px;
}
#body
{
display:block;
background:#CF6;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body">
ใส่เนื้อหาสั้นๆ ตรงนี้นะ
</div>
<hr />
<div id="footer">ฟุตเตอร์นะนายจ๋า</div>
</body>
</html>[/sourcecode]ถ้าเนื้อหายาว ก็จะเห็นเหมือนเว็บปกติครับ

Category Archive CSS