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

Adding Unique Constraints with Entity Framework Code First

Entity Framework Code First is a great way to define and maintain your database within your application it self. While it poses a nice set of complementing libraries like Data Annotations and Fluent Configurations which helps you specially in defining phase of your database, it would give you a headache if you try to define a unique constraint on a column. For example in the users table of your application you could probably have an int ID column which would serve as the primary key and you might need to make your Username column a unique one. Since you are using EF Code First you will soon find out there is no direct way to accomplish this requirement. Unfortunately fluent configurations doesn't have syntax like HasUnique(u => u.Username); I asked the same question in stackoverflow , but didn't get a convincing answer. Since there is no direct support from EF for this you could take one of following alternatives to achieve it. Approach 1 :  ...
3 comments
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

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