Latest ads

Electronics
Vehicles
Property
Search

CSS වැඩ්ඩෙන්ගෙන් උදව්වක්

PoPkiss

PoPkiss

Well-known member
  • Aug 17, 2016
    689
    534
    93
    sample pdf.png



    මට මෙන්න මේක CSS වලින් හදලා දෙන්න පුලුවන්ද බන්, මට මේ UI වැඩ සෙට් වෙන්නෙම නෑනෙ.... :( පුලුවන් කෙනෙක් හදලා දෙනවද, මේක ගානට බ්‍රව්සර් එකේ මැදට ගන්න පුලුවන්නම් හරි, අර මැද තියෙන කන්ටෙන්ට් එක ටේබල් එකක් ඇතුලේ නේද එන්න ඕනි?




    මේක තමා මම ට්‍රයි කලේ :(
     
    Last edited:
    • Like
    Reactions: sAlLikaRaya
    PoPkiss

    PoPkiss

    Well-known member
  • Aug 17, 2016
    689
    534
    93
    Darth Vadar said:
    https://stackoverflow.com/questions/12645366/css-responsive-center-div
    Click to expand...

    Harsh7046 said:
    https://bootsnipp.com/snippets/Pb15
    Click to expand...

    Software_Eng said:
    wede karanna patan ganin help karannm
    Click to expand...


    අනේ කොල්ලනෙ මම ට්‍රයි කරපු එක දැම්මා, ඒත් උඩ ඉමේජ් එකේ වගේ හදාගන්න බෑනෙ, හදලා දෙන්නකො පුලුවන්නම් :(


     
    Walter Hartwell White

    Walter Hartwell White

    Well-known member
  • Sep 30, 2020
    2,621
    8,683
    113
    67
    Albuquerque, New Mexico
    ඉන්ලයින් CSS දාන්න එපා. ඒවා ඩිලීට් කරලා එක්ස්ටර්නල් ෆයිල් එකක් හදාගන්න, ෆයිල් එක css එක්ස්ටෙන්ෂන් එකක් විදියට සේව් කරන්න. HTML හෙඩර් එකට ලින්ක් එක දෙන්න <link rel = "stylesheet" href="styles.css"> styles.css කියන්නේ අපි හදාගත් ෆයිල් එක. එක සේව් කරන්න HTML ෆයිල් එක තියෙන ෆෝල්ඩර් එකට. ස්ටයිල්ස් දෙන්නේ .class_name, #id { styles: style; } .class_name කියන්නේ අපි මොකක් හරි ස්ටයිල් එකක් add කරන්න ඕන HTML එලිමන්ට් එකට දෙන ක්ලාස් නේම් එක, #id කියන්නේ ක්ලාස් නේම් එක වගේමයි, ඕනේ නම් #id නේම් එකක් දෙන්නත් පුළුවන්.

    HTML
    <div class="green"></div> <--class name එක green තියෙන DIV ටැග එකක්

    <div id="red"> </div> <--id name එක රෙඩ් තියෙන DIV ටැග එකක්.

    CSS
    .green, #red{
    border : 2px red solid;
    height : 150px;
    width : 150px;
    border-radius : 50%;
    position : relative;
    background-color : red;
    }

    උඩින් තියෙන ස්ටයිල් එකෙන් circle දෙකක් හැදෙනවා. මේක ජෙනරල් අයිඩියා එකක් ගන්න ලිව්වේ.
    comma එකකින් class සහ id වෙන් කරන්න පුළුවන් , වෙන වෙනම ස්ටයිල් දෙන්න පුළුවන්. උඩින් තියෙන ස්ටයිල් එක පහළින් තියෙන ස්ටයිල් වලින් ඕවර්රයිඩ් වෙනවා. ඔය හැම බොක්ස් එකක්ම ටේබල් සෙල්ස් වෙනුවට div ටැග ඇතුලේ වෙන වෙනම හදල ඒ හැම එකකටම එකම ක්ලාස් නේම් එක දුන්නම සිංගල් ස්ටයිල් ශීට් එකෙන් ඔක්කොම එකම ස්ටයිල් එක ලැබෙනවා. මේ ගැන w3schools සයිට් එකෙන් බලන්න. ගුඩ් ලක්
     
    • Like
    Reactions: kinkon and PoPkiss
    PoPkiss

    PoPkiss

    Well-known member
  • Aug 17, 2016
    689
    534
    93
    The_PeaceMaker said:
    ay ban inline css?
    Click to expand...

    Walter Hartwell White said:
    ඉන්ලයින් CSS දාන්න එපා. ඒවා ඩිලීට් කරලා එක්ස්ටර්නල් ෆයිල් එකක් හදාගන්න, ෆයිල් එක css එක්ස්ටෙන්ෂන් එකක් විදියට සේව් කරන්න. HTML හෙඩර් එකට ලින්ක් එක දෙන්න <link rel = "stylesheet" href="styles.css"> styles.css කියන්නේ අපි හදාගත් ෆයිල් එක. එක සේව් කරන්න HTML ෆයිල් එක තියෙන ෆෝල්ඩර් එකට. ස්ටයිල්ස් දෙන්නේ .class_name, #id { styles: style; } .class_name කියන්නේ අපි මොකක් හරි ස්ටයිල් එකක් add කරන්න ඕන HTML එලිමන්ට් එකට දෙන ක්ලාස් නේම් එක, #id කියන්නේ ක්ලාස් නේම් එක වගේමයි, ඕනේ නම් #id නේම් එකක් දෙන්නත් පුළුවන්.

    HTML
    <div class="green"></div> <--class name එක green තියෙන DIV ටැග එකක්

    <div id="red"> </div> <--id name එක රෙඩ් තියෙන DIV ටැග එකක්.

    CSS
    .green, #red{
    border : 2px red solid;
    height : 150px;
    width : 150px;
    border-radius : 50%;
    position : relative;
    background-color : red;
    }

    උඩින් තියෙන ස්ටයිල් එකෙන් circle දෙකක් හැදෙනවා. මේක ජෙනරල් අයිඩියා එකක් ගන්න ලිව්වේ.
    comma එකකින් class සහ id වෙන් කරන්න පුළුවන් , වෙන වෙනම ස්ටයිල් දෙන්න පුළුවන්. උඩින් තියෙන ස්ටයිල් එක පහළින් තියෙන ස්ටයිල් වලින් ඕවර්රයිඩ් වෙනවා. ඔය හැම බොක්ස් එකක්ම ටේබල් සෙල්ස් වෙනුවට div ටැග ඇතුලේ වෙන වෙනම හදල ඒ හැම එකකටම එකම ක්ලාස් නේම් එක දුන්නම සිංගල් ස්ටයිල් ශීට් එකෙන් ඔක්කොම එකම ස්ටයිල් එක ලැබෙනවා. මේ ගැන w3schools සයිට් එකෙන් බලන්න. ගුඩ් ලක්
    Click to expand...
    හේතුව මම මේක වෙන backend 3rd party library එකකින් යූස් කරනවා, මේ html ෆයිල් එක, ඒක වැඩ කරන්නෙ inline css එක්ක විතරයි. ඒකයි මචො. :(

    හ්ම්ම්... තෑන්ක්ස් මචො මම ට්‍රියි කරන්නම්
     
    S

    Software_Eng

    Well-known member
  • Dec 15, 2017
    1,194
    1,247
    113
    <!DOCTYPE html>
    <html>
    <body>
    <section
    style="
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 107%;
    font-family: 'Calibri', sans-serif;
    "
    >
    <div style="text-align: center; font-size: 25px">Transaction summary</div>
    <div
    style="
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
    line-height: 2rem;
    "
    >
    <div style="font-size: 12px; color: #afabab">Amount</div>
    <div>
    <span style="font-size: 11px; color: #afabab">LKR</span>
    <span style="font-size: 35px; color: #0070c0; font-weight: 600"
    >2,000.00</span
    >
    </div>
    <div>Lanka Tele</div>
    </div>
    <section style="width: 30rem; margin-top: 3rem">
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div style="font-weight: 600">Bill Payment</div>
    </div>
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div>Bill Payment</div>
    </div>
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div>Bill Payment</div>
    </div>
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div>Bill Payment</div>
    </div>
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div>Bill Payment</div>
    </div>
    </section>
    </section>
    </body>
    </html>
    1642931067640.png

    ------ Post added on Jan 23, 2022 at 3:14 PM
    Code
    ------ Post added on Jan 23, 2022 at 3:15 PM
     

    Attachments

    • code.txt
      2.6 KB · Views: 53
    • Like
    • Love
    Reactions: Tom Cat, sAlLikaRaya, Mr Robot and 1 other person
    Adefer

    Adefer

    Well-known member
  • Mar 20, 2021
    685
    913
    93
    PoPkiss said:
    හේතුව මම මේක වෙන backend 3rd party library එකකින් යූස් කරනවා, මේ html ෆයිල් එක, ඒක වැඩ කරන්නෙ inline css එක්ක විතරයි. ඒකයි මචො. :(

    හ්ම්ම්... තෑන්ක්ස් මචො මම ට්‍රියි කරන්නම්
    Click to expand...
    මොකක්ද backend එක එහෙම් සීන් තියන
     
    PoPkiss

    PoPkiss

    Well-known member
  • Aug 17, 2016
    689
    534
    93
    Software_Eng said:
    <!DOCTYPE html>
    <html>
    <body>
    <section
    style="
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 107%;
    font-family: 'Calibri', sans-serif;
    "
    >
    <div style="text-align: center; font-size: 25px">Transaction summary</div>
    <div
    style="
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
    line-height: 2rem;
    "
    >
    <div style="font-size: 12px; color: #afabab">Amount</div>
    <div>
    <span style="font-size: 11px; color: #afabab">LKR</span>
    <span style="font-size: 35px; color: #0070c0; font-weight: 600"
    >2,000.00</span
    >
    </div>
    <div>Lanka Tele</div>
    </div>
    <section style="width: 30rem; margin-top: 3rem">
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div style="font-weight: 600">Bill Payment</div>
    </div>
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div>Bill Payment</div>
    </div>
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div>Bill Payment</div>
    </div>
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div>Bill Payment</div>
    </div>
    <div
    style="
    display: flex;
    border: 1px solid #a2bae7;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    margin-bottom: 10px;
    "
    >
    <div>Payment Type</div>
    <div>Bill Payment</div>
    </div>
    </section>
    </section>
    </body>
    </html>
    View attachment 158133
    ------ Post added on Jan 23, 2022 at 3:14 PM
    Code
    ------ Post added on Jan 23, 2022 at 3:15 PM
    Click to expand...


    තෑන්ක්ස් සහෝදරයා, ලොකු උදව්වක් කලේ, මේක මැදට ඇව්ත් අර ඉමේජ් එකේ වගේ එන්න div බොර්ඩර් එකක්ද දාන්න ඕනි?
     
    S

    Software_Eng

    Well-known member
  • Dec 15, 2017
    1,194
    1,247
    113
    PoPkiss said:
    තෑන්ක්ස් සහෝදරයා, ලොකු උදව්වක් කලේ, මේක මැදට ඇව්ත් අර ඉමේජ් එකේ වගේ එන්න div බොර්ඩර් එකක්ද දාන්න ඕනි?
    Click to expand...
    ow section ekata width ekak dala border and border radius dipan
     
    • Love
    Reactions: PoPkiss

    Similar threads

    Martian Professor
    පළවෙනි පෙම්වතිය ගෙන් කැමැත්ත අහපු විදිය ?
    Replies
    81
    Views
    3K
    Martian Professor
    Martian Professor
    Psiko
    How to fuck any women even your aunties
    Replies
    75
    Views
    5K
    Psiko
    Psiko
    N
    පුංචි අම්මා ගැන හිත හිතා අතේ ගහපු හැටි 2
    Replies
    10
    Views
    1K
    mall_9n
    mall_9n
    kalana putha 97
    මේ ප්‍රශ්නෙට උත්තරයක් කියපල්ලාකො
    Replies
    24
    Views
    691
    kalana putha 97
    kalana putha 97
    XibitZ
    enex ප්‍රශ්නයක්
    Replies
    22
    Views
    1K
    Erzo
    Erzo
    Top Bottom