Rabbitinblack

Tag: css

  • [CSS] ข้อแตกต่างระหว่าง width:auto กับ width:100%

    [CSS] ข้อแตกต่างระหว่าง width:auto กับ width:100%

    ในการทำเว็บนั้น เราอาจจะเจอกรณีที่ layout ต้องเปลี่ยนไปตามความกว้าง เช่น เวลาทำเว็บที่เป็น responsive หรือเวลาที่สั่งพิมพ์ทางเครื่องพิมพ์ ตามปรกติแล้ว เราจะเคลียร์ค่า float หรือ width

    โดยการเคลียร์ค่า float นั้น เราก็เพียงสั่ง float:none แต่ในการเคลียร์ค่า width บางคนกลับใช้ width:100% แทนที่จะเป็น width:auto

    โดยพื้นฐานแล้ว บรรดา element ที่มีคุณสมบัติเป็น block อย่างเช่น div หรือ p พวกนี้จะมีความกว้างเป็น auto โดยมาตรฐาน แล้ว width:auto กับ width:100% มันต่างกันยังไง

    width:auto vs width:100%

    วิธีที่ทำให้เราเข้าใจ และเห็นภาพมากที่สุด ก็คือ เขียนให้มันแสดงผลมาให้เราดูครับ งั้นเรามาลองดูกันเลยครับ

    กล่องนี้มีความกว้าง 400px

    กล่องนี้ตั้งความกว้างเป็น width:auto
    มี padding ซ้ายขวา 50px
    มี margin ซ้ายขวา 50px
    และมีกรอบหนา 10px

    กล่องนี้ตั้งความกว้างเป็น width:100%
    มี padding ซ้ายขวา 50px
    มี margin ซ้ายขวา 50px
    และมีกรอบหนา 10px

    width:auto นั้นจะคำนวนมาให้ความกว้างพอดีกับกล่องที่คลุมไว้ โดยความกว้างของสีแดงที่เห็น จะมีค่าเท่ากับ 280px (มีค่า padding ด้านละ 50px รวมอยู่ใน 280px ด้วย) เมื่อรวมกับ border และ margin แล้วจะมีค่าเท่ากับ 400px พอดี แต่ถ้าเราตั้งค่าเป็น width:100% แล้ว ความกว้างของกล่องสีน้ำเงิน จะมีค่าเท่ากับ 500px ซึ่งมาจาก 400px บวกกับ padding ซ้ายขวาอย่างละ 50px ทำให้ตัวกล่องสีน้ำเงิน เกินออกมาจากกล่องสีเทาที่คลุมอยู่

    จากตัวอย่างน่าจะทำให้เข้าใจความแตกต่างระหว่าง width:auto กับ width:100% บ้างนะครับ ยังไงก็ลองเอาไปปรับใช้งานกันนะครับ

  • วิดีโอสอนพื้นฐานของ HTML CSS Javascript จาก Google

    วิดีโอสอนพื้นฐานของ HTML CSS Javascript จาก Google

    ในการจะเรียนรู้ HTML CSS นั้น ผมคิดว่าในตอนนี้ไม่น่าจะเป็นเรื่องยากแล้ว เพราะมีข้อมูลความรู้มากมายในอินเตอร์เน็ตให้เราค้นหา ให้เราศึกษา และนี่ก็เป็น 1 ในนั้น มันคือ วิดีโอที่ทาง Google ได้ทำขึ้นเพื่อสอนพื้นฐานของ HTML CSS Javascript เรามาดูกันเลยดีกว่าครับ

    แนะนำให้รู้จัก HTML CSS Javascript

    HTML

    แนะนำให้รู้จัก HTML

    แบบฝึกหัดในหัวข้อ HTML

    CSS

    แนะนำให้รู้จัก CSS

    สอนใช้ CSS เบื้องต้น

    แบบฝึกหัดในหัวข้อ CSS

    JavaScript

    แนะนำให้รู้จัก JavaScript

    แบบฝึกหัดในหัวข้อ JavaScript

    HTML CSS เนี่ยผมว่าไม่ยากที่จะเรียนรู้หรอกครับ อย่าคิดว่ามันยาก ถ้ายังไม่ได้เริ่มที่จะเรียนรู้มันนะครับ ^^

    ที่มา : Google: HTML, CSS, and Javascript from the Ground Up
  • CSS : แต่งกล่อง Facebook Like Box กัน

    CSS : แต่งกล่อง Facebook Like Box กัน

    เพิ่งไปเจอมา เลยเอามาเขียนไว้เผื่อใครยังไม่รู้ จริง ๆ แล้วเราสามารถกำหนด Stylesheet ให้กับตัว Facebook Like Box ได้นะครับ

    [html]
    <div class="sidefb">
    <script type="text/javascript" src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
    <fb:fan profile_id="ใส่ id จาก facebook" stream="0" connections="8" logobar="0" width="ใส่ความกว้าง" height="ใส่ความสูง" css="ใส่ css ลงไป?1" rel="stylesheet" type="text/css"></fb:fan>
    </div><!– .sidefb –>
    [/html]

    ตรง css= อย่าลืมใส่ ?1 และเปลี่ยนเป็น 2, 3, 4, … ทุกครั้งที่ทำการเปลี่ยนค่า css ในส่วนที่เราจะแต่ง Facebook Like Box ด้วยนะครับ อย่างเช่น ทำครั้งแรกก็ใส่เป็น css="stylesheet.css?1"

    ผมก็เอามาประยุกต์ใช้กับ sidebar ด้านขวาของผมเหมือนกัน ใน Code ของ Theme WordPress ผมใส่แบบนี้ครับ

    [php]
    <div class="sidefb">
    <script type="text/javascript" src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
    <fb:fan profile_id="235867876471637" stream="0" connections="8" logobar="0" width="237" height="225" css="<?php bloginfo(‘stylesheet_url’); ?>?1" rel="stylesheet" type="text/css"></fb:fan>
    </div>
    <div class="sidetw">
    <a href="https://twitter.com/Rabbitinblack" class="twitter-follow-button">Follow @Rabbitinblack</a>
    <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div>
    <div class="sideg">
    <div class="g-plusone" data-size="medium" data-href="https://rabbitinblack.com"></div><span>Recommend on Google</span>
    </div>
    [/php]

    ส่วน CSS ของผมก็เป็นแบบนี้ครับ

    [css]
    .fan_box .full_widget {padding:10px 3px 20px 3px !important;border:0 none !important;position:relative;}
    .fan_box .connect_top{background: none !important;padding: 0 !important;}
    .fan_box .profileimage, .fan_box .name_block{display: none;}
    .fan_box .connect_action{ padding: 0 !important; }
    .fan_box .connections{ padding: 0 !important;border: 0 !important;font-family: Roboto, Helvetica, sans-serif;font-size: 11px;font-weight: bold;color: #666; }
    .fan_box span.total{ color: #FF4F92;font-weight: bold; }
    .fan_box .connections .connections_grid {margin-right:-10px;padding-top: 10px !important; }
    .fan_box .connections_grid .grid_item{ padding: 0 10px 10px 0 !important; }
    .fan_box .connections_grid .grid_item .name{ font-family: "lucida grande",tahoma,verdana,arial,sans-serif;font-weight: normal;color: #666 !important;padding-top: 1px !important;}
    .fan_box .connect_widget{ position: absolute;bottom:0px;left:0px;margin: 0 !important; }
    .fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; }
    .fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; }

    .sidefb {position:relative;font-size: .85em;color: black;padding:0 9px;line-height: 1px;border:1px solid #DDD;}
    .sidetw {background-color: #EEF9FD;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
    .sideg {background-color: #EEF9FD; font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
    .sideg span {margin-left: 2px;display: inline-block;vertical-align: text-top;color: #333}
    [/css]

    ผลลัพธ์ที่ได้ มีลักษณะแบบนี้ครับ

    CSS : แต่งกล่อง Facebook Like Box กัน
    ลองปรับกันดูนะครับ

    ลองเอาไปปรับแต่งกันดูนะครับทุกคน >_<

    ที่มา : Create a “Mashable-Inspired” Sidebar Social Widget for WordPress
  • Plugin WordPress : Lazyest Stylesheet

    Plugin WordPress : Lazyest Stylesheet

    ในการทำเว็บของเราด้วย WordPress นั้น คงต้องมีการเปลี่ยน Theme กันบ้าง แต่ปัญหาคือ มันจะมี Stylesheet บางตัว ที่เราเพิ่มเติมเข้าไปใน Theme เก่า มันไม่ได้ตามมา Theme ใหม่ด้วย เราก็ต้องไปหาว่า เราเพิ่มอะไรตรงไหนบ้าง เพื่อนำมาใช้กับ Theme ใหม่ของเรา ปัญหานี้จะหมดไป เมื่อคุณใช้ Lazyest Stylesheet

    Lazyest Stylesheet

    หลักการทำงานมันไม่ได้มีอะไรซับซ้อนหรอกครับ ก็เหมือนเราเขียน CSS ทั่วไป เพียงแต่ถ้าเราเปลี่ยน Theme ตัว Lazyest Stylesheet ก็จะดึง CSS ตัวที่เราเขียนไว้ เพื่อใช้งานกับ Theme ใหม่ทันที

    Lazyest Stylesheet
    Appearance >> Lazyest Stylesheet
    Lazyest Stylesheet [2]
    หน้าตาของ Plugin

    ยกตัวอย่างก็สมมติว่า เรามีตารางสีแดง เป็นตารางที่มีชื่อ class ว่า table-red แล้วกัน คราวนี้ถ้าเราจะเปลี่ยน Theme เราก็ต้องไปหาว่าเราเขียน .table-red ไว้ที่ไหนบ้าง จะได้เอามาแปะไว้ที่ CSS ของ Theme เรา แต่ถ้าใช้ Lazyest Stylesheet เราก็ไปเขียน .table-red ในนั้น ทีนี้เวลาเราเปลี่ยน Theme .table-red ที่เราเขียนไว้ ก็จะตามไปในทุก ๆ Theme ของเราเอง

    ตามไปโหลดมาใช้งานได้ที่ : Lazyest Stylesheet

  • CSS : เรียน HTML CSS ฟรีใน 30 วัน

    CSS : เรียน HTML CSS ฟรีใน 30 วัน

    ผมว่าตอนนี้ HTML CSS น่าจะเป็นความรู้เรื่องแรก ๆ ที่คนทำเว็บ หรือทำเว็บแอพจำเป็นต้องเรียนรู้ แล้วมันจะดีแค่ไหน ถ้ามีให้เราเรียนกันฟรี ๆ เลย

    โดยทาง Tuts+ Premium ได้ทำ Course สอน HTML CSS ใน 30 วัน โดยแบ่งการสอนในแต่ละวันดังนี้

    สนใจแล้วใช่มั้ยครับ งั้นก็ไปที่เว็บนี้เลย 30 Days to Learn HTML & CSS

  • CSS : เมื่อต้องเจอปัญหากับ IE

    CSS : เมื่อต้องเจอปัญหากับ IE

    เชื่อว่าหลาย ๆ คนที่เขียน CSS กันมา ต้องเจอปัญหาว่า ทำไมเขียน CSS มาแล้ว แต่ละ Browser ถึงแสดงผลมาไม่เหมือนกัน และในบรรดา Browser ทั้งหลาย Browser ที่มีปัญหามากที่สุด ก็คงไม่พ้น Internet Explorer หรือที่เราเรียกกันว่า IE

    ผมเองก็ไม่ทราบว่าด้วยเหตุผลอะไร IE ต่าง ๆ ถึงมีปัญหาในการแสดงผลที่แตกต่างกับชาวบ้านเค้า แถมตัว IE เองแต่ละเวอร์ชั่นก็มีการแสดงผลที่แตกต่างกันเองอยู่ด้วย แล้วเราจะมีวิธีแก้ปัญหาอย่างไรกันบ้าง มาลองดูกันครับ

    CSS : สร้างเงื่อนไขให้ Tag html

    [html]
    <!–[if lt IE 7]> <html class="ie6"> <![endif]–>
    <!–[if IE 7]> <html class="ie7"> <![endif]–>
    <!–[if IE 8]> <html class="ie8"> <![endif]–>
    <!–[if !IE]><!–> <html> <!–<![endif]–>
    [/html]

    กำหนดเงื่อนไขเลยครับ ว่าถ้าเป็น IE ที่เวอร์ชั้นตำกว่า 7 ให้ tag html นั้นมี class เป็น ie6 แล้วก็เขียนไล่ลำดับมาจนถึงว่า ถ้าไม่ใช่ IE ถึงจะแสดงผลมาเป็น tag html ที่ไม่มี class อะไร แล้วหลังจากนั้นเราจึงไปเขียน CSS ให้กับ element ที่มีการแสดงผลที่ไม่เหมือนชาวบ้าน อย่างเช่น

    [css]
    .box {margin-bottom:20px;}
    .ie6 .box {margin-bottom:5px;}
    .ie7 .box {margin-bottom:10px;}
    .ie8 .box {margin-bottom:15px;}
    [/css]

    คือ .box ทั่วไปให้มี margin-bottom เท่ากับ 20px แต่ถ้าเป็นใน IE6 ให้มี margin-bottom แค่ 5px ใน IE7 ให้มี margin-bottom แค่ 10px และใน IE8 มี margin-bottom แค่ 15px

    CSS : กำหนดเงื่อนไขในการเรียกใช้ CSS

    [html]
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <!–[if lt IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]–>
    <!–[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]–>
    <!–[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="css/ie8.css" /><![endif]–>
    [/html]

    วิธีนี้จะคล้าย ๆ กับวิธีแรกแต่ต่างกันที่วิธีแรกจะกำหนด class ให้กับ Tag html แต่วิธีนี้เราจะกำหนดให้แต่ละ Browser เรียกใช้ CSS ที่แตกต่างกันครับ ข้อสำคัญคือ เราจะต้องเรียกใช้งาน CSS หลักของเราก่อนบรรดา CSS ที่เป็นเงื่อนไขนะครับ

    CSS : Hack CSS สำหรับ IE

    สำหรับกรณีที่เราไปเปลี่ยนแปลง Code HTML ไม่ได้ งั้นมาแก้ไขที่ตัว CSS แล้วกัน ด้วยการ Hack CSS สำหรับ IE โดยเขียนแบบนี้

    [css]
    .box {margin-bottom:20px;} /* ทุก browsers */
    * html .box {margin-bottom:5px;} /* สำหรับ IE6 */
    *+html .box {margin-bottom:10px;} /*สำหรับ IE7 */
    .box {margin-bottom:20px\0/;} /* สำหรับ IE8 */
    [/css]

    ทุกคนก็ลองเอาไปประยุกต์ใช้ให้เหมาะสมกับเรามากที่สุดแล้วกันนะครับ