CSS

ประยุกต์ list item มาทำ navigator กัน

posted on 13 Sep 2007 21:22 by pommatt  in CSS
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}

จุดที่จะให้สังเกตุคือที่เป็น สีแดงนะครับ
ตัวแรก เรากำหนดให้มีการว่าง element แบบ inline เอาแบบง่ายๆ คือไม่มีการใส่ tag <br> ไว้หน้าและหลังมันนะครับ
!!! หมายเหตุ : หากยังงงผมแนะนำตามไปอ่านที่เว็บนี้นะครับ www.divland.com
จุดที่2 float:left; เป็นการจัดชิดซ้ายครับ

มาดูตัวอย่างกันครับ:

 

 

edit @ 2007/09/13 21:34:41
0 Comments

ซ่อน h1 แล้วสวยด้วย images

posted on 27 Nov 2007 08:42 by pommatt  in CSS
ซ่อน h1 แล้วสวยด้วย images


หากคุณเป็นคนหนึ่งที่ใส่ใจใน seo (search engine optimization) ก็ย่อมจะทราบความสำคัญของแท็ก <h1> ซึ่งมีความสำคัญ ต่อหน้าเว็บเพจ เป็นที่สำหรับ keyword แต่ h1, h2มันก็เป็น text ตัวใหญ่ที่ตกแต่งได้เพียงใส่สีขีดเส้นใต้เท่านั้น คงขัดใจ webdesigner อยู่ไม่น้อยทีเดียว ทางเลือกสำหรับการอยู่ร่วมกันอย่างสันติ :d ระหว่าง web seo และ web design ก็คือ ใช้ css เข้าช่วย อย่างไรนั้นมาดูกัน

play club รูปนี้ผมเซฟมาจากหน้าเว็บ playpark.com ซึ่งใช้รูปนี้เป็นหัวข้อและลิ้งค์

PLAY CLUB

ส่วนอันนี้เป็นหัวข้อที่ใช้ แท็ก <h2>PLAY CLUB</h2> เราจะจับนำมารวมกัน

เขียน html ดังนี้

<div class=”pc”>
<h2><span></span>PLAY CLUB</h2>
</div>

จะเห็นว่า มีแท็ก <span></span> อยู่ใน h2 เป็นตัวที่เราจะใส่ image เข้าไปนั่นเอง

จากนั้น เราก็มาเขียนในส่วน css ดังนี้

.pc h2 {width:210px; height:41px; margin:0; padding:0; overflow:hidden;}
.pc h2 span {background:url(images/play_club.gif) no-repeat left top;
display:block;width: 100%; height: 100%;}

ผลลัพธ์ที่ได้จะเป็นแบบนี้

.pc h2 {width:210px; height:41px; margin:0; padding:0; overflow:hidden;} .pc h2 span {background:url(http://www.divland.com/blog/wp-content/2007/04/play_club.gif) no-repeat left top;display:block;width: 100%; height: 100%;}


PLAY CLUB



ลอง view/source แล้ว search (Ctrl+f) คำว่า result ดูนะครับ จะเห็นว่า ยังคงมี แท็ก h2 อยู่แต่แสดงรูปแทนนะครับ

ทำไมจึงเป็นเช่นนี้?
ในตัว h2 นั้นเราได้กำหนด ความกว้างและสูงเท่ากับรูป ให้ margin padding เท่ากับ 0 และ overflow:hidden นั้นหมายถึงว่า เมื่อมีส่วนที่เกินนอกเหนือไปจากที่กำหนดนี้ จะไม่แสดงผล

ในส่วน span เราให้ความกว้างสูงเท่ากับ 100% แล้วใส่แบ็คกราวน์ คือ รูปที่จะแสดง ส่วนสำคัญคือ display:block เป็นการทำให้ขอบเขตของ span มีลักษณะเป็น ก้อนสี่เหลี่ยม ซึ่งก็จะดันให้ตัว h2 นั้นเกินขอบเขตออกไปนั่นเอง

******และแล้ว bot จาก search engine ทั้งหลายก็ยังคงเห็น h1 h2 ของคุณ หวังว่าบทความนี้จะมีประโยชน์กับเพื่อนๆนะครับ และจะได้เป็นมาตรฐานในการทำเว็บครั้งต่อๆไป :)

 

เอามาจาก : www.divland.com

1 Comments

พื้นฐาน กับ CSS Box Model

posted on 05 Dec 2007 23:39 by pommatt  in CSS

พื้นฐาน กับ CSS Box Model

April 17, 2007 at 6:48 pm · Filed under เริ่มต้นกับ CSS

ในหน้าเว็บเพจนั้น แต่ละส่วน มองกันอย่างง่ายๆมันก็คือ กล่องแต่ละกล่อง วางต่อๆกัน เป็นการวาง layout พิ้นฐาน ซึ่งมีความสำคัญมาก เราจะมาดูกันว่า box แต่ละอัน มีส่วนประกอบอะไรบ้าง
: ภาพตัวอย่าง
box model

content area 100×100 pixel
padding 10px คือ ส่วนที่เว้นเข้ามาจากเส้นขอบ
boder 10 px คือ เส้นขอบ
margin 10 px คือ ระยะห่างจากเส้นขอบออกไปด้านนอก

ทดสอบ Box model

ในที่นี้ ทดสอบเฉพาะเบราเซอร์ที่มีผู้ใช้มากที่สุด คือ ie6 และ fx2.0 ส่วน netscape นั้นมีการแสดงผลเหมือน firefox ส่วน opera บางอย่างก็เหมือน ie บางอย่างเหมือน fx :)

โค้ด css
<style type=”text/css”>
body{margin:0;}
.box1{
width:100px;
height:100px;
background: #CEE7FF;
border:#93C9FF solid 3px;
margin:10px;
padding:10px;
}
</style>

โค้ด html
<div class=”box1″>css site divland.com</div>

-จากโค้ด เราต้องการได้กล่องขนาดกว้าง 100px สูง 100px
หากคุณยังไม่ได้ประกาศ Doctype จะเห็นว่า ie6 แสดงผลดังนี้
box_ie_nodoctype

ส่วน fx แสดงผลดังนี้
box_fx_nodoctype
ie6 จะมีการอ่านค่าแตกต่างจาก fx เมื่อเรากำหนดไว้ที่ 100 px ทั้ง 4 ด้าน ie6 จะลบค่า border และ padding เข้ามาด้านใน และยังคง ความกว้างสูง 100 px ไว้ทั้ง 4 ด้าน โดยจะเหลือ content area = 100 - border(6) -padding(20) =74px *** หักลบเข้ามาทั้ง ซ้ายขวา

ส่วน fx จะคง content area ไว้ 100px แล้วบวก border และ padding เพิ่มเข้าไป ดังนั้นความกว้างที่แท้จริง จะเท่ากับ 100+6+20=126px

เมื่อเบราเซอร์คิดไม่เหมือนกัน จึงต้องมีการประกาศ !Doctype เพื่อเป็นตัวกลางให้มีการแสดงผลเหมือนกัน
-เพิ่ม

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

เข้าไปที่บรรทัดแรกสุดของหน้า html ลอง previw ดูอีกครั้งจะเห็นว่า ie6 อ่านค่าเหมือน fx แล้ว

box model

จากรูปนี้ ขอบเขตที่แท้จริง ของกล่อง จะเท่ากับ
100+border20+padding20 = 140px และมีระยะห่างซ้ายขวาบนล่าง (margin) อีก 10px

เมื่อกล่องซ้อนกล่อง

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

.box0{
width:200px;
height:200px;
background:#666666;
margin:10px;
}

เพิ่ม html ดังนี้

<div class=”box0″>
<div class=”box1″>css site divland.com</div>
</div>

จะได้ผลลัพธ์ดังนี้

ie6 แสดงผลถูกต้อง
box ie

ส่วน fx นั้น margin ด้านบน หายไป
box firefox

เมื่อกล่องซ้อนกัน fx มักทำ margin top หายไปเสมอ ถ้าเป็นเช่นนี้ เราลองเปลี่ยน โดยลบ margin:10px; ใน box1 ออก แล้วเพิ่ม padding:10px ใน box0 แทน แล้ว preview ดู จะเห็นว่า แสดงผลเหมือนกันแล้ว แต่เมื่อใช้ padding พื้นที่ สีดำ ก็จะถูกบวกเพิ่มเข้าไปอีก
box test
มันคงไม่ใช่เรื่องดีแน่ๆ หากคุณกำหนดความกว้างที่แน่นอนเอาไว้ layout อื่นๆก็จะถูกดันออกไปอีก 2 วิธีแก้ที่ง่ายๆก็คือ
1 ก็เอาค่า padding ซ้ายขวา ไปลบออกจากค่า width ก็จะได้ box ขนาดเท่าเดิม ในที่นี้คือต้องกำหนด witdth:80px;

2 เมื่อต้องการเว้นระยะบนล่างให้ใช้ padding จากกล่องด้านนอก ส่วนด้านซ้ายขวา ใช้ margin จากกล่องด้านใน แน่นอนว่าค่าความสูงของกล่องด้านนอกจะเพิ่มขึ้น แต่เรามักจะไม่กำหนดความสูงให้กล่องอยู่แล้ว เพราะเป็นส่วนที่ยืดได้ ตามแต่เนื้อหา จะได้โค้ดดังนี้

<style type=”text/css”>
body{margin:0;}
.box0{
width:200px;
height:200px;
background:#666666;
margin:10px;
padding-top:10px;
}
.box1{
width:100px;
height:100px;
background: #CEE7FF;
border:#93C9FF solid 3px;
margin-left:10px;
padding:10px;
}
</style>

หวังว่าทุกคนคงจะเข้าใจ ในเรื่องของ margin padding และ box กันพอสมควรครับ ส่วนเรื่องการแสดงผลที่ไม่ตรงกันนั้น ยังมีวิธีแก้อีกหลายวิธี รวมไปถึง วิธี css hacks ด้วย จะนำมาเขียนในคราวต่อๆไปละกันนะครับ สุดท้าย ลองลบโค้ด บรรทัดนี้ดูนะครับ แล้วลอง preview ดุทั้ง fx ie ว่าจะเป็นอย่างไร ==>> body{margin:0;}

 

อ้างอิงจาก:  www.divland.com 

1 Comments

การทำมุมให้โค้ง อย่างสวยงามด้วย CSS

posted on 16 Dec 2007 12:37 by pommatt  in CSS

วันนี้มาน้งเล่นที่ office คิดอยากเล่นกับ CSS ในการทำให้มุมโค้งเล่น เผื่อเอาไว้ใช้มาดูกันเลยขั้นแรก เราต้องหาภาพของมุม 4 มุมกันก่อนดังนี้

1.

2.

3.

4.

CSS Code :

body {
margin: 0;
padding: 5px;
background-color: #E4E2E4;
}

.wrapper {
width: 800px;
margin: 5px auto 5px;
}

.bl {
background: url(../images/bl.gif) 0 100% no-repeat #BCC6DC;
width: 100%;
}

.br {
background: url(../images/br.gif) 100% 100% no-repeat
}

.tl {
background: url(../images/tl.gif) 0 0 no-repeat
}

.tr {
background: url(../images/tr.gif) 100% 0 no-repeat;
padding: 10px;
min-height: 600px;
}

.clear {
font-size: 1px;
height: 1px
}

Code Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <title>Rounded corner</title>
        <link rel="stylesheet" href="css/index.css"/>
    </head>
    <body>
        <div class="wrapper">
            <div class="bl">
                <div class="br">
                    <div class="tl">
                        <div class="tr">
                           <p>pommatt !!!!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clear">              
            </div>
        </div>
    </body>
</html>

ผลรับ:

มัรจะยาวมาด้านล่างตลอด แต่ผมกำหนดให้สูงอย่างน้อย 600px ครับ ลองเอาไปใช้ดูนะครับ ไม่ต้องใช้ตารางให้เมื่อย hand *-*

edit @ 16 Dec 2007 12:52:13 by Pom & Ja

edit @ 16 Dec 2007 12:53:31 by Pom & Ja

1 Comments
First | Previous | Next | Last