Skip to main content

How to set a web page to the center of the browser

අද අපි කතා කරන්න ලැස්ති වෙන්නේ අපිට web page එකක් design කරනකොට ඕනේ වෙන පොඩි technique එකක් ගැන. ඔයාල ඕනේ තරම් දැකල ඇති web sites වල මුළු page එකම center වෙලා තියෙනවා. අපි උදාහරණයක්‌ ගත්තොත් W3Schools site එක වගේ. පේනවා නේ site එකේ content එක page එකේ මැදට වෙන්න තියෙන ලස්සන.

මේක කරගන්න පුළුවන් මෙන්න මේ විදිහට.

 <html>  
   <head>  
     <title>Testing Centered Content</title>  
   </head>  
   <body>  
     <div id="mainContent" style="width:900px;margin-left:auto; margin-right:auto;background-color:Gray;height:500px">  
       This is the content which is centered  
     </div>  
   </body>  
 </html>

මෙතන අපි ඇත්තටම විශේෂ දේවල් පාවිච්චි කරලා නෑ. සරල html code එකක් තමා තියෙන්නේ.

අපි <div> එකක් හදාගෙන තියෙනවා mainContent කියල. ඒ div ඒකට style එකක් apply කරල තියෙනවා.
එකේ අපි කරලා තියෙන්නේ site එකේ content width එක සෙට් කරලා තියෙනවා pixel 900 කට.
ඊට පස්සේ වැදගත් වෙන්නේ margin-left එකයි margin-right එකයි සෙට් කරලා තියෙන විදිහ. අපි එව්වා සෙට් කරලා තියෙනවා auto කියලා. එකෙන් තමා අපිට ඕනේ මේ center කරන වැඩේ කෙරෙන්නේ.

ඊට පස්සේ මේ background-color එකයි height එකයි සෙට් කරලා තියෙන්නේ මේක browser එකේ බලද්දී ඔයාලට පැහැදිලිව පේන්න ඕනේ නිසා.

ඉතින් මේක මෙහෙම හදාගත්තට පස්සේ ඔයාලට ඕනෙම content එකක් (div, p, table වගේ) මේ අපේ ලොකු div එක ඇතුලට දාගන්න පුළුවන්.

තවත් මේක වැඩි දියුණු කරන්න ඕනේ නම් පුළුවන් මේ style එක css එකකට දාල ඒක ඔයාලගේ pages වල පාවිච්චි කරන්නත්.

අපි css ගැන පස්සේ දවසක කතා කරමු. එහෙනම් අදට ඔය ටික තමා.

2011/12/05
මේ ලියුමට තව පොඩි දෙයක් එකතු කරන්න කියල අපේ ෂම්මි මට කිව්වා. පහල තියෙන්නේ මේක කරගන්න ෂම්මි කියන විදිහ.

"HTML කෝඩ් වල ස්ටයිල් දාන එක සමහර වෙලාවට කරදරයක් වෙනවා. විශේෂයෙන් ම ලොකු වෙබ් සයිට් එකක. මම පල්ලෙහායින් දාල තියෙන්නේ CSS එක."

 <html>   
   <head>   
    <title>Testing Centered Content</title>   
       <style>  
           #mainContent  
           {  
                width: 900px;  
                margin: 0 auto;  
                background-color: Green;  
           }  
       </style>  
   </head>   
   <body>   
    <div id="mainContent">  
     This is the content which is centered   
    </div>   
   </body>  
 <html>

ඕනේ නම් මේ විදිහටත් බලන්න මේකත් වැඩ ගින්දර වගේ. එහෙනම් ෂම්මිට ගොඩක් ස්තුති මේ විදිහ පෙන්නලා දුන්නට.
Labels:

Comments

Post a Comment

Popular posts from this blog

HTML INPUT enhancement with Regular Expressions and Java Scripts

අද කථා කරන්න යන්නේ බොහොම සරල දෙයක් ගැන. සරල උනාට ඉතින් මට මේක කරගන්න ඕන වෙලා හොයන කොට නම් ඉතින් හොයාගන්න ටිකක් කරදර උනා, ඒ නිසාම තමා මම හිතුවේ මේක ගැන ලියන්න ඕනෙ කියල. අපි හැමෝම HTML forms validate කරන්න Java Script පාවිච්චි කරනවා නේ, එක අලුත් දෙයක් නෙමේ. ඒ වගේම තමා Regular Expressions කියන්නෙත් අපිට අලුත් දෙයක් නෙමේ. අපි බලමු මේ දෙකම පාවිච්චි කරලා HTML textbox එකකට අපිට ඕනෙ characters විතරක් enter කරන්න දෙන්නේ කොහොමද කියල. මෙන්න මේක තමා අපි පාවිච්චි කරන HTML page එක. <!DOCTYPE html> <html> <head> <title>JS and RegEx</title> </head> <body> <label for="txtUsername">Username</lable> <input type="text" id="txtUsername" placeholder="Enter Username"/> </body> </html> මේ තියෙන page එක html විදිහට save කරලා browser එකේ බැලුවම මෙන්න මේ වගේ තමා පෙන්නේ. දැන් හිතන්න අපිට මේ username එකට @,#,%,$ වගේ...
Post a Comment
Read more

Using BackgroundWorker in C#

අපි අද කතා කරන්න හදන්නේ තවත් අපිට ගොඩක් ප්‍රයෝජනවත් වෙන C# වල තියෙන feature එකක් ගැන. ඒ තමා මේ BackgroundWorker කියන component එක, මේක පාවිච්චි කරලා අපිට පුළුවන් අපේ programs වලට Threads හදාගන්න. අපි සාමාන්‍යයෙන් Threads පාවිච්චි කරන්නේ මොකක් හරි ගොඩක් වෙලා යන වැඩක් program එකෙන් කරද්දී ඒ වැඩේ program එක පාවිච්චි කරන කෙනාට එහෙම නැත්නම් User ට නොතේරෙන විදියට කරගන්න, උදාහරණයක් විදියට අපි database එකකට connect වෙලා data set එකක් fetch කරනවා කියල හිතන්න මේ වැඩේට ලොකු වෙලාවක් යනවා නම් User හිතෙන්නේ program එක හිර වෙලා කියල. ඉතින් මෙන්න මේ ප්‍රශ්නේ විසඳා ගන්න පුළුවන් අපිට BackgroundWorker එක පාවිච්චි කරලා. ඒ කියන්නේ පොඩි Progress Bar එකක් වගේ දෙයක් පෙන්නලා user ට කියන්න පුළුවන් වැඩේ ඇතුලෙන් කෙරෙනවා කියලා. හරි අපි පටන් ගමු, මුලින්ම කරන්න තියෙන්නේ Visual Studio වලින් Windows Forms Application එකක් හදාගන්න එක. ඊට පස්සේ සාමාන්‍යයෙන් ඔයාලගේ right hand side එකේ Tool Box එක දිහා බැලුවම පෙනෙයි මෙන්න මේ වගේ මෙතන අපිට පේනවා BackgroundWorker කියල tool එකක් තියෙනවා, දැන් මේක drag කරලා drop ක...
Post a Comment
Read more

Building Highly Scalable Web Applications with Windows Azure

Among many other benefits of moving or building your web applications in cloud, for me I think the most important benefit we get is scalability. When it comes to web applications there are two approaches for scalability. Scale out - This means we increase the number of running instances of the application with a load balancer which distributes the requests among those instances Scale up - This means we increase the physical resources on a single application instance, for example we can increase the RAM of the hosted machine In reality preferred way of web application scalability should be to scale out. Because there are obvious hardware limitations in scale up approach. Bearing that in mind if we look at what Windows Azure provides out of the box, for a certain level it supports scale up approach and it has a great amount of support for scale out approach. Scaling your application out Windows Azure supports both automatic and manual scale out of the ap...
4 comments
Read more