ใส่คำบรรยายภาพ ด้วย css

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: ใส่คำบรรยายภาพ ด้วย css

ใส่คำบรรยายภาพ ด้วย css

by M008 » 01/06/2013 5:42 pm

เขียนคำบรรยายใต้รูปด้วย Css
HTML:

Code: Select all

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>แบบจำลองย่อขนาดหอ
    Eiffel tower ในกรุง Parc Mini-France
</div>
Css:

Code: Select all

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
ใช้ style sheet ในการกำหนด class "figure" เพื่อ กำหนด format ให้รูปภาพตามที่ต้องการ เช่น เมื่อต้องการให้รูปลอยอยู่ทางขวา กินพื้นที่ 25% ของความกว้างย่อหน้าทั้งหมด สามารถทำได้โดย กำหนดใน style sheet ดังรูป
Attachments
1.jpg
1.jpg (40.7 KiB) Viewed 867 times

Top