មេរៀនទី២១: លំហាត់ CSS-ទីតាំង និង Layout


លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS 
aលំហាត់ទី ១ ធ្វើយ៉ាងណាដើម្បីដាក់ ដូចជា Highlight ទៅក្នុងអត្ថបទបាន?
a
សរសេរកូដ
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


Inline and block level elements
content=”text/html; charset=iso-8859-1″ />



A div is a block level element.

It is possible to display a div or any other block level
element as an inline element.

This div is displaying as an inline element by
setting the display property to inline.

The anchor tag creates an inline element

We can force the link to be
displayed as block level



លំហាត់ ទី២   ធ្វើយ៉ាងណាដើម្បី ទទួល Text រុំជុំវិញរូបភាព ដោយមិនប្រើ  HTML align attribute?
a 
សរសេរកូដ
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


Float
content=”text/html; charset=iso-8859-1″ />



Chinese style stuffed peppers


”peppers”<br class=”leftimg” />
These stuffed peppers are lovely as a starter…



ដាក់ស៊ុមដិតជុំវិញ
.leftimg {
float: left;
border: 2px solid #000000;
margin-right: 20px;
margin-bottom: 6px;
}
a 
លំហាត់ ទី៣   ធ្វើយ៉ាងណាដើម្បី បញ្ឈប់ បន្ទាប់ពីធាតុមួយធ្វើចលនាឡើង?
a 
សរសេរកូដ

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


float and clear

content=”text/html; charset=iso-8859-1″ />



Chinese style stuffed peppers


”peppers”</span
class=”rightimg” />

  • 1 tablespoon of oil

  • 1 crushed garlic clove

  • Peeled and finely chopped fresh ginger root

  • 250g minced pork, beef or Quorn

  • 1 chopped spring onion

  • 1 chopped celery stick

  • Grated rind of 1 lemon

  • Finely chopped red chilli (optional)

  • 4 large green peppers


    • These stuffed peppers are lovely as a …
    …

    ដាក់ស៊ុមជុំវិញអក្សរ
    .clear {
    clear: both;
    }
    These stuffed peppers are lovely as a starter, or
    as a side dish for a Chinese meal. They also go down well as
    part of a buffet and even children seem to like them.
    a 
    លំហាត់ទី៤  ធ្វើយ៉ាងណាដើម្បី align logo នៅខាងឆ្វេង ឬខាងស្តាំ ដោយមិនប្រើ តារាង table?
    a 
    សរសេរកូដ

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


    Stage & Screen – theatre and film reviews

    content=”text/html; charset=iso-8859-1″ />

    />





    alt=”Stage & Screen” />
    theatre and film reviews


    body {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    border-top: 2px solid #2A4F6F;
    }
    #header {
    border-top: 1px solid #778899;
    border-bottom: 1px dotted #B2BCC6;
    height: 3em;
    }
    #header .strapline {
    font: 120% Georgia, “Times New Roman”, Times, serif;
    color: #778899;
    background-color: transparent;
    float: right;
    margin-right: 2em;
    margin-top: 0.5em;
    }
    #header .logo {
    float: left;
    margin-left: 1.5em;
    margin-top: 0.5em;
    }
    a 


    alt=”Stage & Screen” class=”logo” />
    theatre and film reviews

    a 
    #header .strapline {
    font: 120% Georgia, “Times New Roman”, Times, serif;
    color: #778899;
    background-color: transparent;
    float: right;
    margin-right: 2em;
    margin-top: 0.5em;
    }
    #header .logo {
    float: left;
    margin-left: 1.5em;
    margin-top: 0.5em;
    }
    លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បី item នៅទល់មុខគ្នា?
    a 
    សរសេរកូដ

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


    Absolute positioning

    content=”text/html; charset=iso-8859-1″ />




    This is box one. It is positioned 10 pixels from

    the top and 20 pixels from the left of the viewport
    This is box two. It is positioned 2 em from the

    bottom and 2 em from the right of the viewport

    #box1 {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 100px;
    background-color: #B0C4DE;
    border: 2px solid #34537D
    }
    #box2 {
    position: absolute;
    bottom: 2em;
    right: 2em;
    width: 100px;
    background-color: #FFFAFA;
    border: 2px solid #CD5C5C;
    }
    a 
    This is box one. It is positioned 100 pixels from

    the top and 100 pixels from the left of the viewport
    This is box two. It is positioned 2 em from the

    bottom and 2 em from the right of the parent element – box1


    #box1 {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 400px;
    background-color: #B0C4DE;
    border: 2px solid #34537D
    }
    #box2 {
    position: absolute;
    bottom: 2em;
    right: 2em;
    width: 150px;
    background-color: #FFFAFA;
    border: 2px solid #CD5C5C;
    }
    #box1 {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 400px;
    height: 300px;
    background-color: #B0C4DE;
    border: 2px solid #34537D
    }
    លំហាត់ទី៥  ធ្វើយ៉ាងណាដើម្បី ដាក់បណ្តុំមួយនៅកណ្តាលទំព័រ?
    a 
    សរសេរកូដ
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


    Centered Box
    content=”text/html; charset=iso-8859-1″ />




    This box is 630 pixels wide and centered in the document.

    Lorem ipsum dolor sit amet, consectetuer adipiscing …




    body {
    background-color: #CCD3D9;
    color: #000000;
    text-align: center;
    }
    #content {
    width: 630px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #A6B2BC;
    background-color: #FFFFFF;
    color: #000000;
    padding: 0 20px 0 20px;
    text-align: left;
    }
    លំហាត់ទី៦   ធ្វើយ៉ាងណាដើម្បី បង្កើត ២ជួរ layout ជាមួយ menu នៅខាងឆ្វេង និងមាតិការខាងស្តាំ?
    a 
    សរសេរកូដ
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


    Stage & Screen – theatre and film reviews
    content=”text/html; charset=iso-8859-1″ />




    alt=”Stage & Screen” />
    theatre and film reviews


    Welcome to Stage & Screen


    Lorem ipsum dolor sit amet, consectetuer adipiscing …





    body {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    border-top: 2px solid #2A4F6F;
    }
    #header {
    border-top: 1px solid #778899;
    border-bottom: 1px dotted #B2BCC6;
    height: 3em;
    }
    #header .strapline {
    font: 120% Georgia, “Times New Roman”, Times, serif;
    color: #778899;
    background-color: transparent;
    float: right;
    margin-right: 2em;
    margin-top: 0.5em;
    }
    #header .logo {
    float: left;
    margin-left: 1.5em;
    margin-top: 0.5em;
    }
    #nav {
    position: absolute;
    top: 5em;
    left: 1em;
    width: 14em;
    }
    #nav ul {
    list-style: none;
    margin-left: 1em;
    padding-left: 0;
    }
    #nav li {
    font-size: 80%;
    border-bottom: 1px dotted #B2BCC6;
    margin-bottom: 0.3em;
    }
    #nav a:link, #nav a:visited {
    text-decoration: none;
    color: #2A4F6F;
    background-color: transparent;
    }
    #nav a:hover {
    color: #778899;
    }
    #nav h2 {
    font: 110% Georgia, “Times New Roman”, Times, serif;
    color: #2A4F6F;
    background-color: transparent;
    border-bottom: 1px dotted #cccccc;
    }
    #content {
    margin-left: 16em;
    margin-right: 2em;
    }
    h1 {
    font: 150% Georgia, “Times New Roman”, Times, serif;
    }
    #content p {
    font-size: 80%;
    line-height: 1.6em;
    padding-left: 1.2em;
    }
    a 
    body {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    border-top: 2px solid #2A4F6F;
    }
    #header {
    border-top: 1px solid #778899;
    border-bottom: 1px dotted #B2BCC6;
    height: 3em;
    }
    #header .strapline {
    font: 120% Georgia, “Times New Roman”, Times, serif;
    color: #778899;
    background-color: transparent;
    float: right;
    margin-right: 2em;
    margin-top: 0.5em;
    }
    #header .logo {
    float: left;
    margin-left: 1.5em;
    margin-top: 0.5em;
    }

    លំហាត់ទី៧     ធ្វើយ៉ាងណាដើម្បី  ដាក់ច្រាស layout នេះ ទៅ menu ខាងស្តាំបាន?
    aថែមកូដខាងលើ
    #nav {
    position: absolute;
    top: 5em;
    right: 1em;
    width: 14em;
    }
    #content {
    margin-left: 2em;
    margin-right: 16em;
    }
    លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បី  កំរាស នៅកណ្តាល ពីរជួរ layout?
    a 
    សរសេរកូដ

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


    Recipe for Success
    content=”text/html; charset=iso-8859-1″ />
    />




    Welcome


    The Recipe for Success web site brings you exciting and
    easy to use recipes from around the world.

    …



    Copyright © 1999 – 2004 Recipe for
    success



    body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    text-align: center;
    }
    #wrapper {
    position: relative;
    text-align: left;
    width: 760px;
    margin-right: auto;
    margin-left: auto;
    padding: 122px 0 0 0;
    background-image: url(recipe_header.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    border-left: 2px solid #722100;
    border-right: 2px solid #722100;
    border-bottom: 2px solid #722100;
    }
    #content {
    margin-left: 230px;
    padding: 20px 10px 0 0;
    }
    #content p {
    font-size: 80%;
    line-height: 1.8em;
    padding-left: 2em;
    }
    #content h1 {
    font: normal 180% Georgia, “Times New Roman”, Times, serif;
    color: #B51032;
    background-color: transparent;
    }
    #content h2 {
    font-size: 120%;
    color: #940D1E;
    background-color: transparent;
    border-bottom: 1px dotted #FF9006;
    }
    #navigation {
    position: absolute;
    top: 122px;
    left: 0;
    width: 180px;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    #navigation li {
    width: 180px;
    border-bottom: 1px solid #ED9F9F;
    margin: 0;
    padding: 0;
    font-size: 80%;
    vertical-align: bottom;
    }
    #navigation a:link, #navigation a:visited {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 12px solid #722100;
    border-right: 1px solid #722100;
    background-color: #B51032;
    color: #FFFFFF;
    text-decoration: none;
    }
    #navigation a:hover {
    background-color: #722100;
    color: #FFFFFF;
    }
    #navigation ul.subnav {
    margin-left: 12px;
    }
    #navigation ul.subnav li {
    border-bottom: 1px solid #722100;
    width: 168px;
    }
    #navigation ul.subnav a:link, #navigation ul.subnav a:visited {
    background-color: #ED9F9F;
    color: #722100;
    }
    #footer {
    padding: 0 0 10px 255px;
    font-size: 70%;
    color: #AAAAAA;
    background-color: transparent;
    }
    body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    text-align: center;
    }
    #wrapper {
    text-align: left;
    width: 760px;
    margin-right: auto;
    margin-left: auto;
    padding: 122px 0 0 0;
    background-image: url(recipe_header.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    border-left: 2px solid #722100;
    border-right: 2px solid #722100;
    border-bottom: 2px solid #722100;
    }
    #content {
    width: 520px;
    float: right;
    padding: 20px 10px 0 0;
    }
    #content p {
    font-size: 80%;
    line-height: 1.8em;
    padding-left: 2em;
    }
    #content h1 {
    font: normal 180% Georgia, “Times New Roman”, Times, serif;
    color: #B51032;
    background-color: transparent;
    }
    #content h2 {
    font-size: 120%;
    color: #940D1E;
    background-color: transparent;
    border-bottom: 1px dotted #FF9006;
    }
    #navigation {
    float: left;
    width: 180px;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    #navigation li {
    width: 180px;
    border-bottom: 1px solid #ED9F9F;
    margin: 0;
    padding: 0;
    font-size: 80%;
    vertical-align: bottom;
    }
    #navigation a:link, #navigation a:visited {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 12px solid #722100;
    border-right: 1px solid #722100;
    background-color: #B51032;
    color: #FFFFFF;
    text-decoration: none;
    }
    #navigation a:hover {
    background-color: #722100;
    color: #FFFFFF;
    }
    #navigation ul.subnav {
    margin-left: 12px;
    }
    #navigation ul.subnav li {
    border-bottom: 1px solid #722100;
    width: 168px;
    }
    #navigation .subnav a:link, #navigation ul.subnav a:visited {
    background-color: #ED9F9F;
    color: #722100;
    }
    #footer {
    clear: both;
    padding: 0 0 10px 255px;
    font-size: 70%;
    color: #AAAAAA;
    background-color: transparent;
    }
    លំហាត់ ទី៩ ធ្វើយ៉ាងណាដើម្បី បង្កើត បីជួរ CSS layout?
    a 
    សរសេរកូដ
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


    Recipe for Success
    content=”text/html; charset=iso-8859-1″ />




    Recipe for Success


    …




    Please Visit our Sponsors


    Lorem ipsum dolor sit amet, …

    Sed mattis, orci eu porta …

    Quisque mauris nunc, mattis …




    body {
    margin: 0;
    padding: 0;
    background-image: url(tomato_bg.jpg);
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    }
    p {
    font: 80%/1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding-top: 0;
    margin-top: 0;
    }
    form {
    margin: 0;
    padding: 0;
    }
    #content {
    margin: 66px 260px 0px 240px;
    padding: 10px;
    }
    #content h1 {
    text-align: right;
    padding-right: 20px;
    font: 150% Georgia, “Times New Roman”, Times, serif;
    color: #901602;
    }
    #side1 {
    position: absolute;
    width: 200px;
    top: 30px;
    left: 10px;
    padding: 70px 10px 10px 10px;
    }
    #side2 {
    position: absolute;
    width: 220px;
    top: 30px;
    right: 10px;
    padding: 70px 10px 10px 10px;
    border-left: 1px dotted #cccccc;
    background-image: url(sm-tomato.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    }
    #side2 h3 {
    font: 110% Georgia, “Times New Roman”, Times, serif;
    margin: 0;
    padding-bottom: 4px;
    }
    .adbox {
    padding: 2px 4px 2px 6px;
    margin: 0 0 10px 0;
    border: 1px dotted #B1B1B1;
    background-color: #F4F4F4;
    }
    #side1 h3 {
    font: 110% Georgia, “Times New Roman”, Times, serif;
    color: #621313;
    background-color: transparent;
    margin: 0;
    padding-bottom: 4px;
    }
    #side1 .txt {
    width: 184px;
    background-color: #FCF5F5;
    border: 1px inset #901602;
    }
    #side1 ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    width: 184px;
    }
    #side1 li {
    font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin-bottom: 0.3em;
    border-bottom: 1px solid #E7AFAF;
    }
    #side1 a:link, #side1 a:visited {
    text-decoration: none;
    color: #901602;
    background-color: transparent;
    }
    #side1 a:hover {
    color: #621313;
    }
    លំហាត់ទី១០ ធ្វើយ៉ាងណាដើម្បី បន្ថែម footer ដោយប្រើ CSS ?

    a 
    សរសេរកូដ

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


    Stage & Screen – theatre and film reviews

    content=”text/html; charset=iso-8859-1″ />







    alt=”Stage & Screen” />
    theatre and film reviews


    Welcome to Stage & Screen


    …



    • Play Reviews

    • Film Reviews

    • Post a Review

    • About this site

    • Contact Us


      • Latest Reviews



      • The Passion of The Christ

      • Finding Nemo

      • Stomp

      • The Lion King 3



        • Copyright © 2003 – 2004 Stage &
        Screen



        body {
        margin: 0;
        padding: 0;
        background-color: #FFFFFF;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        }
        html, body, #contents {
        min-height: 100%;
        width: 100%;
        height: 100%;
        }
        html>body, html>body #contents {
        height: auto;
        }
        #contents {
        position: absolute;
        top: 0;
        left: 0;
        }
        #header {
        border-top: 1px solid #778899;
        border-bottom: 1px dotted #B2BCC6;
        height: 3em;
        }
        #header .strapline {
        font: 120% Georgia, “Times New Roman”, Times, serif;
        color: #778899;
        background-color: transparent;
        float: right;
        margin-right: 2em;
        margin-top: 0.5em;
        }
        #header .logo {
        float: left;
        margin-left: 1.5em;
        margin-top: 0.5em;
        }
        #nav {
        position: absolute;
        top: 5em;
        left: 1em;
        width: 14em;
        }
        #nav ul {
        list-style: none;
        margin-left: 1em;
        padding-left: 0;
        }
        #nav li {
        font-size: 80%;
        border-bottom: 1px dotted #B2BCC6;
        margin-bottom: 0.3em;
        }
        #nav a:link, #nav a:visited {
        text-decoration: none;
        color: #2A4F6F;
        background-color: transparent;
        }
        #nav a:hover {
        color: #778899;
        }
        #nav h2 {
        font: 110% Georgia, “Times New Roman”, Times, serif;
        color: #2A4F6F;
        background-color: transparent;
        border-bottom: 1px dotted #cccccc;
        }
        #content {
        margin-left: 16em;
        margin-right: 2em;
        margin-bottom: 3em;
        }
        h1 {
        font: 150% Georgia, “Times New Roman”, Times, serif;
        }
        #content p {
        font-size: 80%;
        line-height: 1.6em;
        padding-left: 1.2em;
        }
        #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px dotted #AAAAAA;
        background-color: #CCCCCC;
        color: #626262;
        font-size: 70%;
        }
        #footer p {
        margin: 0.5em 0 1em 2em;
        padding: 0;
        }
         លំហាត់ទី១១​ ធ្វើយ៉ាងណាដើម្បី  បង្ហាញ រូប ដោយមិនប្រើ table
        a 
        សរសេរកូដ
        “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


        CSS photo album
        content=”text/html; charset=iso-8859-1″ />




        • ”Garlic” />Garlic

        • ”Muffin” />Muffin

        • ”tomato” />Tomato

        • ”chilli” />Chilli

        • ”pear” />Pear

        • ”pepper” />Pepper

        • ”coffee height=”130″ />Coffee Beans

        • ”lime” />Limes




        body {
        background-color: #FFFFFF;
        color: #000000;
        margin: 0;
        padding: 0;
        }
        #albumlist {
        list-style-type: none;
        }
        #albumlist li {
        float: left;
        margin-right: 6px;
        margin-bottom: 10px;
        font: bold 0.8em Arial, Helvetica, sans-serif;
        color: #333333;
        }
        #albumlist img {
        display: block;
        border: 1px solid #333300;
        }
        a

        • ”Garlic”
          />Garlic

        • ”Muffin”
          />Muffin

        • ”tomato”
          />Tomato

        • ”chilli”
          />Chilli

        • ”pear”
          />Pear

        • ”pepper”
          />Pepper

        • ”coffee
          height=”130″ />Coffee Beans

        • ”lime”
          />Limes


          • a
          #albumlist {
          list-style-type: none;
          }
          #albumlist li {
          float: left;
          }
          #albumlist img {
          display: block;
          }
          a
          #albumlist li {
          float: left;
          margin-right: 6px;
          margin-bottom: 10px;
          font: bold 0.8em Arial, Helvetica, sans-serif;
          color: #333333;
          }
          #albumlist img {
          border: 1px solid #333300;
          }
          #albumlist {
          list-style-type: none;
          width: 500px;
          }

          Post a Comment