Sunday, May 19, 2019

Disable A Certain Key In Your Keyboard

The 'Alternate' (Alt) key of my friend's notebook keyboard got stuck. So, when he presses A, the computer accepts it as Alt + A. The immediate solution that I can think, is to disable the key.
I find that it's not hard to disable a key. Here's how to do it:
  1. Download MapKeyboard from download.com (27KB only)
  2. Uncompress it, then open the MapKeyboard.exe (not installation is required)
  3. A virtual key board will show up.
  4. Click on the key that you want to disable. For my case, I click on RAlt to disable right Alt key.
  5. Then at "Remap selected key to:", select "Disabled".
  6. Finally, click "Save layout" and reboot the PC
If you failed to start the program, you will need to install Microsoft .Net Framework 2.0.
I think this can be useful, especially for some gamers who would like to disable the Windows key for you-know-what reason.
Besides disabling a certain key, the program can map keys as well.
Hope you find it useful too.
linnaingookkm - my Download Link:

မိသားစု စာၾကည့္တိုက္

ကၽြန္ေတာ္တို႔ရဲ႕ မိသားစုစာၾကည့္တိုက္မွာ
ကတ္ဆက္အသံဇာတ္လမ္းမ်ား အျဖဴအမည္ရုပ္ရွင္မ်ား ႏွင္႔ သီခ်င္းမ်ားကို 
နားေထာင္လို႔ရပါျပီး.... 


Thursday, April 25, 2019

https://www.geeksforgeeks.org/css-website-layout/

CSS | Website Layout

A website can be divided into various sections comprising of header, menus, content and footer based on which there are many different layout design available for developer. Different layouts can be created by using div tag and use CSS property to style it.
The most common structure of website layout is given below:
Notice: Header section contains a website logo, a search bar and profile of user. The navigation menu contains link to various categories of articles available and content section is divided into 3 parts(columns) with left and right sidebar containing links to other articles and advertisements whereas the main content section is the one containing this article, then at the bottom there is a footer section which contains address, links, contacts etc.
Header Section: The header section is generally placed either at the top of the Website or just below a top navigation menu. It often comprises of the name of the Website or the logo of the Website.
Example:




<!-- This code describes the header section
of website layout -->
<!DOCTYPE html>
<html>
    <head>
        <title>
            Website Layouts
        </title>
          
        <style>
            .header {
                background-color: green;
                padding: 15px;
                text-align: center;
            }
        </style>
    </head>
      
    <body>
        <div class = "header">
            <h2 style = "color:white;">
                GeeksforGeeks
            </h2>
        </div>
        <br>
          
        <center style="font-size:200%;">
            Remaining Section
        </center>
    </body>
</html>                    
Output:


Navigation Menu: A Navigation Bar/Menu is basically a list of links that allows visitor to navigate through the website comfortably with easy access.
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Website Layout
        </title>
          
        <style>
          
            /* CSS property for header section */
            .header {
                background-color: green;
                padding: 15px;
                text-align: center;
            }
              
            /* CSS property for nevigation menu */
            .nav_menu {
                overflow: hidden;
                background-color: #333;
            }
            .nav_menu a {
                float: left;
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            .nav_menu a:hover {
                background-color: white;
                color: green;
            }
        </style>
    </head>
      
    <body>
          
        <!-- header of website layout -->
        <div class = "header">
            <h2 style = "color:white;font-size:200%;">
                GeeksforGeeks
            </h2>
        </div>
          
        <!-- nevigation menu for website layout -->
        <div class = "nav_menu">
            <a href = "#">Algo</a>
            <a href = "#">DS</a>
            <a href = "#">Language</a>
        </div><br>
          
        <center style = "font-size:200%;">
            Remaining Section
        </center>
    </body>
</html>                    
Output:
Content Section: The content section is the main body of the website. The user can divide content section in n-column layout.
The most common layouts are:
  • 1-Column Layout: It is mostly used for mobile layout.
  • 2-Column Layout: This website layout is mostly used for tablets or laptops.
  • 3-Column Layout: This website layout is mostly used for desktops.
The user can also create a responsive layout where the layout will get changed as per screen size. Consider the below example where if width of screen is more than 600px then there will be 3-column layout and if width of screen is between 400px to 600px then there will be 2-column layout and if screen size less than 400px then 1-column layout will display.
Example:


<!DOCTYPE html>
<html>
    <head>
        <title>
            Website Layout
        </title>
        <style>
            * {
                box-sizing: border-box;
            }
              
            /* CSS property for header section */
            .header {
                background-color: green;
                padding: 15px;
                text-align: center;
            }
              
            /* CSS property for nevigation menu */
            .nav_menu {
                overflow: hidden;
                background-color: #333;
            }
            .nav_menu a {
                float: left;
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            .nav_menu a:hover {
                background-color: white;
                color: green;
            }
              
            /* CSS property for content section */
            .columnA, .columnB, .columnC {
                float: left;
                width: 31%;
                padding: 15px;
                text-align:justify;
            }
            h2 {
                color:green;
                text-align:center;
            }
              
            /* Media query to set website layout 
            according to screen size */
            @media screen and (max-width:600px) {
                .columnA, .columnB, .columnC {
                    width: 50%;
                }
            }
            @media screen and (max-width:400px) {
                .columnA, .columnB, .columnC {
                    width: 100%;
                }
            }
        </style>
    </head>
      
    <body>
          
        <!-- header of website layout -->
        <div class = "header">
            <h2 style = "color:white;font-size:200%">
                GeeksforGeeks
            </h2>
        </div>
          
        <!-- nevigation menu of website layout -->
        <div class = "nav_menu">
            <a href = "#">Algo</a>
            <a href = "#">DS</a>
            <a href = "#">Language</a>
        </div>
          
        <!-- Content section of website layout -->
        <div class = "row">
              
            <div class = "columnA">
                <h2>Column A</h2>
                <p>Prepare for the Recruitment drive of product
                based companies like Microsoft, Amazon, Adobe
                etc with a free online placement preparation
                course. The course focuses on various MCQ's
                & Coding question likely to be asked in the
                interviews & make your upcoming placement
                season efficient and successful.</p>
            </div
              
            <div class = "columnB">
                <h2>Column B</h2>
                <p>Prepare for the Recruitment drive of product
                based companies like Microsoft, Amazon, Adobe
                etc with a free online placement preparation
                course. The course focuses on various MCQ's
                & Coding question likely to be asked in the
                interviews & make your upcoming placement
                season efficient and successful.</p>
            </div>
              
            <div class = "columnC">
                <h2>Column C</h2>
                <p>Prepare for the Recruitment drive of product
                based companies like Microsoft, Amazon, Adobe
                etc with a free online placement preparation
                course. The course focuses on various MCQ's
                & Coding question likely to be asked in the
                interviews & make your upcoming placement
                season efficient and successful.</p>
            </div>
        </div>
    </body>
</html>                    
Output:
The width of screen size greater then 700px:

The width of screen size greater then 400px and less then 600px:

The width of screen size less then 400px:
Footer Section: A footer section is placed at the bottom of the webpage and it generally consists of information like contact info, copyrights, About us etc.
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS Website Layout
        </title>
          
        <style>
              
            /* Style for footer section */
            .footer {
                background-color: green;
                padding: 15px;
                text-align: center;
            }
        </style>
    </head>
      
    <body>
        <center style = "font-size:200%;">
            Upper section
        </center>
          
        <!-- footer Section -->
        <div class = "footer">
            <a href = "#">About</a><br>
            <a href = "#">Career</a><br>
            <a href = "#">Contact Us</a>
        </div>
    </body>
</html>                    
Output: