เรียนรู้การใช้ ul li step by step
Apr 23rd
li คือ list ul คือ unorderlist จะนับ li เป็น สัญลักษณ์ อื่นๆที่ไม่ใช่ตัวเลข ol คือ orderlist นับ li เป็นตัวเลข
รูปแบบการใช้คือ
แต่เราสามารถกำหนด property ให้ ul ได้ ด้วยการใส่ list-style-type เช่น ul { list-style-type: square } ก็จะได้เป็นสี่เหลี่ยมเล็กๆ
การแสดงผล
เขียนโค้ด css ดังนี้
<style type=”text/css”> ul{background:#e5e5e5} </style>
HTML ดังนี้
<ul>
<li>Home</li>
<li>Product</li>
<li>Product</li>
<li>About</li>
<li>Contact</li>
</ul>
เปิดในเบราเซอร์
โอ้ว มันคิดไม่เหมือนกันอีกแล้ว ใน ul เดิมทีจะมีการเว้น margin padding ให้ตามปกติอยู่แล้วครับ แต่ IE นั้น ใช้ margin แต่ Fx นั้น ใช้ padding ในการเว้นด้านหน้าครับ ดูได้จากสีแบ็คกราวน์ของ ul ก็มีขอบเขตที่ต่างกัน พับผ่าสิ Browser war ยังไม่จบสิ้น จะต่อสู้กันไปถึงไหน [-o<
วิธีทำ cross browser สำหรับ ul นี้ก็คือ กำหนดให้ค่า margin หรือ padding เป็น 0 อันใดอันหนึ่ง แล้วปรับค่าในตัวที่เหลือ
ตัวอย่าง
ul{background:#e5e5e5;margin:0;padding-left:20px;}
เย้ :)>- เหมือนกันแล้วว
คราวนี้ทำอะไรที่มากกว่านั้นอีกนิด กำหนดให้
ul{
background:#f3fdfe;
margin:0;
padding:10px;
border:#0e92a0 1px solid;
list-style-type:none;
width:150px
}
สิ่งที่เพิ่มขึ้นคือ มี border 1px กว้าง 150 px แล้วก็เอาจุดกลมๆด้านหน้าออก โดยการกำหนดให้เป็น none และ กำหนด padding โดยรอบเป็น 10px จะได้แบบนี้ เหมือนกันทั้ง IE Fx
เพิ่มการกำหนด li เป็น li{background:#ffffff;} จะได้ แบบนี้
เพิ่มระยะห่าง ซักหน่อย แบบนี้ li{background:#ffffff;margin:5px} จะได้แบบนี้
ใส่ไอคอนด้านหน้าซักหน่อยเพื่อความสวยงาม โดยการใส่แบ็คกราวน์ให้ชิดด้านซ้ายแล้วสั่งให้มันไม่ทำซ้ำ แล้ว กำหนด padding-left ให้ดันตัว text ออกไป เขียนเพิ่มแบบนี้
li{
background:#ffffff url(images/icon_email.gif) left no-repeat;
margin:5px;
padding-left:20px;
}
จะได้แบบนี้
ดูๆไปแล้วเหมือน table มั้ยครับ แต่จำนวนโค้ดน้อยกว่าครับ โหลดเร็วกว่าด้วย ตัวอย่างนี้อาจยากไปสักนิดกับคนที่เพิ่งเริ่ม เพราะมีการเขียนแบบลดรูป ติดตามได้ในการเขียน css แบบ ลดรูปละกันนะครับ :)
ว่าแต่ว่าเราอยากให้มีการแสดงภาพข้างหลังตรงส่วน li เวลามีการ hover ของเมาส์
เราจะต้องสร้าง…
li a:link {}
li a:hover {}
li a:active {}
li a:visit {}
แล้วกำหนด URL ของภาพที่ต้องการไว้ใน
li a:link {}, li a:hover {}, li a:active {}, li a:visit {} พวกนี้ใช่ไหมครับ…???
ครับ ก็ใส่ background ไว้ใน a:hover ความจริงแล้ว ภาพที่เกิดไม่ได้เกิดที่ li นะ มันเกิดที่ a แต่ปรับให้ a กว้างยาวจนคลุม li หมดครับ :)>-
เปิดคอร์สสอนเถอะครับ อ่านแบบนี้ก็ยังงงอยู่ดีอ่ะครับ
ไม่ได้หรอกครับ เพราะในเว็บล้วนมีแต่ของฟรีครับ :d ดูอย่างกูเกิลสิ :))
ผมทำเป็นเมนูสไลด์ขวาครับ มี3เลเวล แล้วเจอปัญหาใน ie6 ที่เลเวล2กับ3 ความกว้างไม่ขยายตามน่ะครับ แล้วก็ตัวฟอร์ม selection ทับเมนูอยู่ครับ ต้องทำยังไงรึครับ
โอ้ เจ๋งครับ เขียนอธิบายเข้าใจง่ายดี ชอบๆ:d
ถ้า อยากให้เป็นแบบนี้ เขียนยังไงหรอคะ
- Home
– A
– B
-Product
-About
-Contact
ง่ะ!!! หมายถึง แบบนี้อ่ะคะ
- Home
tab- A
tab- B
-Product
-About
-Contact
<ul>
<li>home
<ul>
<li> A</li>
<li> B</li>
</ul>
</li>
<li>Product</li>
<li>About</li>
<li>Contact</li>
</ul>
ซ้อนข้างในแบบนี้ครับ
ลองทำตามแล้วค่ะ แต่ไม่สำเร็จ
เขียน li อย่างนี้ถูกมั้ยค่ะ
#left li{
text-indent: 1em;
}
ขอบคุณมากค่ะ :)
อันนี้ ul คะ
#left ul{
list-style-type: none;
margin: 0;
padding: 0;
}
ขอโทษค่ะ ที่รบกวนหลายๆที:(
อ่า ดูแล้วก็ไม่มีไรผิดนะครับ ถ้าได้ผลอย่างที่ต้องการ ก็คงถูกมั้งครับ ต้องดู html ด้วยอะครับ ว่าเขียนยังงัย ลองเอาโค้ดมาโพสต์ถามที่ บอร์ด ก็ได้ครับ ตรงนี้มันอาจจะคับแคบไปหน่อย :)
ul {
background-image:url(image/15.jpg);
margin:0;
padding:0 10px 0 10px;
list-style:none;
width: auto;}
li {border-bottom:2px #FFFFFF dotted;
list-style-image:url(image/11.jpg);
list-style-position:inside;
height:23px;
vertical-align:bottom}
ต้องการให้ list-style-image อยู่ตรงกลางหัวข้อต้องทำงัยครับ
ทำยากครับ ถ้าใช้ list-style-image ต้องตัดรูปเผื่อมาให้พอดี หรืออีกแบบนึงง่ายกว่า คือ เอารูปนั้นใส่ Bg ที่ li แทน แล้ว สั่งชิดซ้าย ใส่ padding-left ดัน text เข้ามาไม่ให้บัง Bg จะง่ายกว่าครับ
ขอบคุณครับ…. ^^
ผมลอง padding-top ดัน text ลงมาอ่ะครับพอได้อยู่เหมือนกันแต่ไม่รู้จะมีปัญหาในอนาคตหรือป่าวอ่ะครับ
แล้วถ้าต้องการตั้งชื่อ คลาสหรือไอดี ของ ul ทำงัยครับยกตัวอย่างให้ดูหน่อย หากต้องการเลือก คลาสหรือไอดีของ ul ไปใช้แล้วให้มันครอบคุมทั้ง li ด้วยอ่ะครับ….หมายถึงอย่างนี้อ่ะครับ
ul ตัวนี้ตั้งค่าเป็นคลาสหรือไอดีไหมครับ แล้วพอจะใช้ก็กำหนดเอาแต่เขียนเงื่อนไขให้คลุมทั้ง li ด้วยครับ
ถูกต้องครับ
ใส่ คลาสให้ ul พอจะสั่ง li
ก็ใส่ .class li{} แบบนี้แทน ไม่ต้องใส่ คลาสที่ li ทั้งหมดครับ
:(( อ่านไปทำไปมันก็ไม่ได้เรื่องเลยทำไงดีผมโง่ใครใจดีแอดเมลมาทีค๊าฟฟฟฟฟ :((
Post นี้แหล่มจริงๆครับ
ผมอ่านบทความที่นี่มาประมาณ 1 สัปดาห์ ได้ความรู้เรื่องการสร้าง Web ด้วย CSS
ไปมากโข ต้องขอบคุณจริงๆ ที่แบ่งปันความรู้
เรื่อง UL UI นี่ คนสร้าง web พลาดไม่ได้จริงๆครับ
โดยเฉพาะ WordPress :)
ผมเพิ่งมาเป็นเด็กใหม่ที่นี้ รู้สึกว่าที่นี้ดีสุดเลยครับ:)>-
สุดยอดขั้นเทพ อ่านแล้วเห็นภาพ ทำตามแล้วเข้าใจ ขอบคุณหลายๆ
ขอบคุณที่แชร์ความรู้ค่ะ ^_^:):):)
ขอบคุณมากครับ เป็นบทเรียนที่ดีครับ มีประโยชน์มากครับ คงต้องประยุกต์หน่อยแล้วจะใช้งานได้ตามความต้องการของเรา ขอบคุณอีกครั้งครับ ^_^
Thank you for good information
แนวนี้ชอบมากเลยครับ
ขอบคุณครับสำหรับเวปที่มีเนื้อหาดีๆ อย่างนี้ แถมฟรีอีกต่างหาก :d
ขอบคุณเช่นเคยครับ
ปกติก็ใช้งาน ul ol li อยู่แล้ว มาอ่านทวนอีกครั้ง วันนี้ได้ความรู้เพิ่มขึ้นจิงๆ
ปกติผมจะใช้ list-style-image ในการสร้างลิสต์ แต่พบปัญหาคือ มันไม่ยอมอยู่ตรงกลางซะที ผมใช้ mac ในการทำเว็บ พอเปิดดูด้วย Safari ก็เห็นว่ามันอยู่ตรงกลางสวยงามดีหรอก แต่พอไปเปิดดูด้วย IE ไม่เหมือนกันซะงั้น นั่งปวดหัวอยู่นาน
วันนี้ได้ความรู้ว่าต้องใช้ background-image มาช่วย แล้วปรับแก้ padding ให้กระเถิบมา
ขอบคุณมากๆๆๆครับ จะติดตามต่อไปเรื่อยๆ
วิท (http://www.tutorpoint.net)
css ช่วยได้เยอะมาก ๆ เลยค่ะ แต่ก็ยากสำหรับการทำ table less ต้องหัดบ่อย ๆ
ปกติแล้วผมจะใช้แต่พวก Table ในการจัดตำแหน่ง ตอนนี้ก็กำลังศึกษาเรื่อง CSS อยู่ครับ รู้สึกว่าตัวเองล้าสมัยและตกยุคอยู่มากเลยทีเดียว เทคโนโลยีเดี๋ยวนี้มันตามไม่ทันจริงๆ มาไวมากๆ
ขอบคุณมากๆ เลยครับ :)