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

Applying Themes for Silverlight 4

ටික දවසකට පස්සේ ලියන්න හොඳ දෙයක් එක්ක වෙලාවක් හම්බ උනා. මේ දවස් වල මම පොඩි අත්හදා බැලීමක් කරනවා Silverlight 4 එක්ක. Visual Studio 2010 තමා පාවිච්චි කරන්නේ. හැබැයි එක හිතපු තරම් ලේසි උනේ නෑ. ඒ නිසා මම හිතුවා ඒ ගැන පොඩ්ඩක් ලියන්න. මුලින්ම කියන්න තියෙන්නේ Silverlight 4 එක්ක වැඩ කරන්න නම් VS 2010 විතරක් තිබුනට මදි, ඒකට ඔයාලට ඕනෙ වෙනවා VS2010 Service Pack 1. ඒක download කරගන්න පුළුවන් මෙන්න මේ ලින්ක් එකෙන්. මෙතන ඇත්තටම තියෙන්නේ ISO image එකක්, ඒක mount කරලා install කළා නම් වැඩේ ගොඩ. ඊට පස්සේ අපි බලමු කොහෙන්ද මේ Themes හොයාගන්න පුළුවන් කියල. ඒකට යන්න මෙන්න මේ ලින්ක් ඒකට, එතන තියෙන " SL4Themes-templates.zip " කියන file එක download කරගන්න. මේ themes Microsoft එකෙන් officially release කරලා තියෙන themes වගයක්. ඇත්තටම මේ download එකේ තියෙන්නේ Project Templates. දැන් කරන්න තියෙන්නේ මේක Unzip කරලා VisualStudio2010 කියන folder එක ඇතුලේ තියෙන JetPack.vsix වගේ file එකක් double click කරන එක. එකෙන් පොඩි Installer එකක් දුවලා install වෙනවා Visual Studion Project Template එකක්. දැන් ක...
3 comments
Read more

How to disable ASP.NET page validations

ASP.NET වල page validation පාවිච්චි වෙන්නේ script injection attacks නවත්ත ගන්න, ඒ ගැන වැඩි විස්තර ඕනෙ නම් මෙතනින් බලාගන්න පුළුවන්. හැබැයි මේක අපිට කරදරයක් වෙන වෙලාවලුත් තියෙනවා. උදාහරණයක් විදියට අපි හිතුවොත් අපි අපේ user ට හිතලම ඉඩ දෙන්න ඕනේ script වගේ දේවල් page එකකට submit කරන්න. මේක උනේ මම වැඩ කරපු Admin site එකක, මේ site ඒක run වෙන්නේ company එකක intranet එකේ, මේක පාවිච්චි කරන්නේ Admin ල විතරයි ඒක අපි වෙන විදියකට authenticate කරනවා ඒ ගැන පස්සේ කියන්නම්. ඉතින් ප්‍රශ්නේ උනේ මේ page validations නිසා අපිට ඕනේ කරන user inputs ගන්න විදියක් නැති උනා. ඒක විසඳගන්න මට සිද්ද උනා page validations disable කරන්න. ඒක කරන්න ක්‍රම දෙකක් තියෙනවා. මොන දේ කරන්නත් ඉස්සෙල්ල site එකේ web.config එක පහල තියෙන විදිහට වෙනස් කරන්න ඕනේ. (සැ. යු. ASP.NET 4.0 web sites සඳහා). <configuration> <system.web> <httpRuntime requestValidationMode="2.0"/> </system.web> </configuration> ඊට පස්සේ පහල තියෙන ක්‍රම දෙකෙන් එකකට වැඩේ කරන්න පුළුවන්. Site එක...
Post a Comment
Read more