Here I will discuss about a simple tutorial of how to make a basic layout with css with some good practices.
First thing comes, how should the layout should come, fixed or liquid? Liquide design are always suggested to avoid because of various reasons, so i am simply selecting fixed design.
Choose a height & a width (Here I am using 595px & 1000px respectively). if u give a border of your body & check it, you will find that ie & ff are using different margin value & padding value( specially for top & bottom which are assigned by browser itself if we don't assign). So, its always best to assign a fixed value for margin & padding(normally 0). so use the following code:
html, body, div
{
margin:0px auto 0px;
padding:0px;
}
body
{
width:1000px;
height:595px;
}
if you are decided to use same height & width for all of your design, you can make a file named like common.css , which will be reusable every time in future for other designs.
Now, lets decide about the layout. i am here using a common simple layout which is consists of a header, a footer & three columns in the middle(left,center & right). The html code is as follows:
<body>
<div id="header"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="footer"></div>
</body>
now, for the header part we will use the following style:
div#header
{
width:100%; /* as we already decided the body width, 100% will take the whole & will work very fine */
height:100px;
background:#0099FF;
}
now for left part:
div#left
{
width:180px;
background:#00FF00;
height:450px;
float:left;
}
here hope all have the idea why 'float' is used, its to leave places for other divs. You can also use ul li inline instead of float, as you like. Now for center & right part:
div#center
{
width:640px;
background:#FF0000;
height:450px;
float:left;
}
div#right
{
width:180px;
background:#00FF00;
height:450px;
float:left;
}
At last we got to the last part, footer:
#footer
{
width:100%;
height:45px;
background:#FFCCFF;
clear:left;
}
if you don't use clear:left, ie will give you ok result, but firefox won't as it supposed to be to the right side of the #right div. so we must need to cancel it.
Do you see something strange in this csss code? yes, there is. You will see that #left, #center & #right all have two properties in common:
height:450px;
float:left;
So, if once, somebody tells you to change the height of the middle portion, you have make the change three times on three places. But, we always should try to make our code optimized so that, a similar properties can be changed by only changing on one place. So, write the following code:
div#left, div#center, div#right
{
height:450px;
float:left;
}
and also remove these two lines from all three that was used before.
Remember another thing, css doesn't got compiled, they are just interpreted, that means line by line executing, if anything exists there that browser can't understand, it simply ignores it. Also, if you set same property twice on a css, the last will take effect. To make browser independent, you will have to use css hack often, some issues i have already discussed before.
0
While blogging, we always want our content to be reached to as many people as possible. For which, SEO helps us a lot. One of the main strength of SEO is meta keywords & meta descriptions. But, in blogger, we can't create page like wordpress or something. What we can do is only make new post. so, many of us may get in trouble to assign meta keywords and/or meta description on our post.
There is a solution I have found, don't know whether its perfect or more optimized solutions are available. Here is the idea:
you will notice that for each new post at blogger, a new html page is generated(like "post-title.html"). That means you will get unique url for every post although you will not have access to modify all those page(like adding meta keywords). Ok, now you have to add some code on your blogger template. At the header section, write few codes as follows
<b:if cond='data:blog.url == "http://ranacseruet.blogspot.com"'>
<meta content='meta description goes here' name='description'/>
<meta content='keywords goes here' name='keywords'/>
</b:if>
Now the meta keywords & descriptions will be set for your main blog url like here is for mine http://ranacseruet.blogspot.com. Now in the same way, you have to add another checking for another post url & set meta keywords there like follows:
<b:if cond='data:blog.url == "http://ranacseruet.blogspot.com/2009/4/test-post.html"'>
<meta content='meta description of test post page goes here' name='description'/>
<meta content='keywords for test post page goes here' name='keywords'/>
</b:if>
What you have to do, is write this condition for each post & write the meta description & keywords there. Now you can test by checking you main blog url's source code & also go to a specific post & test for that post. You will get perfect result. These meta information will help a lot for SEO. Another thing, try to keep meta keywords up to 3-4 at most, which is the perfect settings for meta keywords.
There is a solution I have found, don't know whether its perfect or more optimized solutions are available. Here is the idea:
you will notice that for each new post at blogger, a new html page is generated(like "post-title.html"). That means you will get unique url for every post although you will not have access to modify all those page(like adding meta keywords). Ok, now you have to add some code on your blogger template. At the header section, write few codes as follows
<b:if cond='data:blog.url == "http://ranacseruet.blogspot.com"'>
<meta content='meta description goes here' name='description'/>
<meta content='keywords goes here' name='keywords'/>
</b:if>
Now the meta keywords & descriptions will be set for your main blog url like here is for mine http://ranacseruet.blogspot.com. Now in the same way, you have to add another checking for another post url & set meta keywords there like follows:
<b:if cond='data:blog.url == "http://ranacseruet.blogspot.com/2009/4/test-post.html"'>
<meta content='meta description of test post page goes here' name='description'/>
<meta content='keywords for test post page goes here' name='keywords'/>
</b:if>
What you have to do, is write this condition for each post & write the meta description & keywords there. Now you can test by checking you main blog url's source code & also go to a specific post & test for that post. You will get perfect result. These meta information will help a lot for SEO. Another thing, try to keep meta keywords up to 3-4 at most, which is the perfect settings for meta keywords.
you can easily use the paging with a grid view control. To use that successfully, you have to follow the following steps:
* add AllowPaging="true" attribute on your grid view control.
* You can set how many rows will be shown in a page, by default its set to 10.
* you have to implement an event of the gridview control, that's "PageIndexChanging" event. Otherwise, it won't work. You have to use like following code on that event
protected void gridViewControl1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
//Update the page index
ParticipantsList.PageIndex = e.NewPageIndex;
/*requery to database for re-binding the control. usually it can be accomplish
by calling the method that's doing the binding*/
BindParticipantListToGridView();
}
It should work fine now.
* add AllowPaging="true" attribute on your grid view control.
* You can set how many rows will be shown in a page, by default its set to 10.
* you have to implement an event of the gridview control, that's "PageIndexChanging" event. Otherwise, it won't work. You have to use like following code on that event
protected void gridViewControl1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
//Update the page index
ParticipantsList.PageIndex = e.NewPageIndex;
/*requery to database for re-binding the control. usually it can be accomplish
by calling the method that's doing the binding*/
BindParticipantListToGridView();
}
It should work fine now.
We always want to earn some money, even when we are surfing internet. Internet also gives us the opportunity to earn some money. But, a lot of scams, frauds make people fear of this sites to invest or waste of money. But, in reality, some sites are legit, really paying, who actually started running these industries and most others just want to get the facilities of these & scam people. As i know some good sites, I am sharing them with you. You even don't need to take this as your part-time job as it will take very less time to spend. Who don't know yet about the get paid to sites, get paid to websites allow people to do some simple tasks & pay for it. But, if you see, you will find that, you alone can earn only very little amount. The main strength to make the earning potential up to a lot is the referral program. If you can refer a lot of people to those get paid to sites , then you can earn a lot very easily without giving much time or investing anything. So, now check the following sites, these all are very long running, legit, trusty websites:
1) Wordlinx:
Type: This is a get paid to click(also known as PTC) & get paid to read emails(also known as PTR) website. You will be paid to click & view on advertiser's website, also to read paid emails.
Why Its Legit: This website is running since 2003. For all these years, it has successfully paid to all its member. It is part of Rogue, a famous company.
Rate of Payment: You will be paid $0.01 for each paid advertisements and also for each email.
Referral Program You will get 5% from your referral earning, will get bonuses on upgrade of referrals. Referral program is 3 levels deep.
Comment: Normally as a standard member, you will get 0-5 ads daily to click & view. But, if you upgrade & become verified for a year(cost $10), you will have potential to get more ads, around 15-20 ads on average, although its not guaranteed, depends on advertisers. Also remember carefully that, this site shows ads often now and then in a day. So, you have to check often to catch them. If you don't have enough resource for collecting direct referrals from the internet, there is a good option for you. You can buy some referral every month(50/per month at most). And as this site has referral program up to 3 levels, you may have a probability to get a strong down line with these referrals.
2) Neobux:
Type: This is the most popular PTC website now a days.
Why Its Legit: Its running from april,2008; Time isn't much long enough to be legit I know, but amazingly it paid around 7 million dollars to its member within this time, which is all the time's record among the whole PTC industries ever. Also it Has members more than 3 millions, which is also another record.
Rate of Payment: You will be paid $0.01 for each paid advertisements.
Referral Program You will get 50% from your referral earning as a standard member & 100% as an upgraded member. You can rent referral if u can't collect them directly. There are much more advanced features for manipulating these rented referrals like recycle, autopay, discount at renting etc. You will find all latest news & features at their dedicated forum, also , you can see other's payment proof,success stories, get help to be succeed etc.
Comment: Normally as a standard member, you will get 4+ ads daily to click & as an upgraded member , you will get 9+ ads. More ads are shown now and then. You have to catch them throughout the day.
3) Matrixmails:
Type: This is a paid to click(PTC), paid to read emails(PTR) & paid to write articles(with given keywords) website.
Why Its Legit: Its running from 2002 & one of the most old get paid to sites. It has been giving a very good service from this long period of time.
Rate of Payment: You will be paid $0.005-$0.01 depending on you membership for each paid advertisements, $0.01-$0.04 depending on your membership for each paid emails.
Referral Program You will get 20% from your direct referrals and it has 6-levels of referral level(20%,10%,8%,6%,4%,2%).
Comment: Bad part is emails & advertisements aren't available all the times. But, good part is that, as they have referral level of 6 levels, you can get a lot more referral earning that u collect directly, just from the activities of your referrals.
1) Wordlinx:
Type: This is a get paid to click(also known as PTC) & get paid to read emails(also known as PTR) website. You will be paid to click & view on advertiser's website, also to read paid emails.
Why Its Legit: This website is running since 2003. For all these years, it has successfully paid to all its member. It is part of Rogue, a famous company.
Rate of Payment: You will be paid $0.01 for each paid advertisements and also for each email.
Referral Program You will get 5% from your referral earning, will get bonuses on upgrade of referrals. Referral program is 3 levels deep.
Comment: Normally as a standard member, you will get 0-5 ads daily to click & view. But, if you upgrade & become verified for a year(cost $10), you will have potential to get more ads, around 15-20 ads on average, although its not guaranteed, depends on advertisers. Also remember carefully that, this site shows ads often now and then in a day. So, you have to check often to catch them. If you don't have enough resource for collecting direct referrals from the internet, there is a good option for you. You can buy some referral every month(50/per month at most). And as this site has referral program up to 3 levels, you may have a probability to get a strong down line with these referrals.
2) Neobux:
Type: This is the most popular PTC website now a days.
Why Its Legit: Its running from april,2008; Time isn't much long enough to be legit I know, but amazingly it paid around 7 million dollars to its member within this time, which is all the time's record among the whole PTC industries ever. Also it Has members more than 3 millions, which is also another record.
Rate of Payment: You will be paid $0.01 for each paid advertisements.
Referral Program You will get 50% from your referral earning as a standard member & 100% as an upgraded member. You can rent referral if u can't collect them directly. There are much more advanced features for manipulating these rented referrals like recycle, autopay, discount at renting etc. You will find all latest news & features at their dedicated forum, also , you can see other's payment proof,success stories, get help to be succeed etc.
Comment: Normally as a standard member, you will get 4+ ads daily to click & as an upgraded member , you will get 9+ ads. More ads are shown now and then. You have to catch them throughout the day.
3) Matrixmails:
Type: This is a paid to click(PTC), paid to read emails(PTR) & paid to write articles(with given keywords) website.
Why Its Legit: Its running from 2002 & one of the most old get paid to sites. It has been giving a very good service from this long period of time.
Rate of Payment: You will be paid $0.005-$0.01 depending on you membership for each paid advertisements, $0.01-$0.04 depending on your membership for each paid emails.
Referral Program You will get 20% from your direct referrals and it has 6-levels of referral level(20%,10%,8%,6%,4%,2%).
Comment: Bad part is emails & advertisements aren't available all the times. But, good part is that, as they have referral level of 6 levels, you can get a lot more referral earning that u collect directly, just from the activities of your referrals.
Go to codeigniter's system/application/libraries directory, paste the 'Smarty' folder with extracted files. now, make a new file named mysmarty.php, write the following code there:
Smarty();
$defaultpath = $_SERVER['DOCUMENT_ROOT']."codeigniter/system";
$this->template_dir = $defaultpath."/application/views/";
$this->config_dir = $defaultpath."/application/views/conf";
$this->compile_dir = $defaultpath."/cache/";
}
}
?>
In case of smarty you have to use $this->mysmarty->display('template.tpl');
Also, if you want to use codeigniter's view function instead of smarty's display function, then add the following function to the above class:
function view($resource_name, $params = array()) {
if (strpos($resource_name, '.') === false) {
$resource_name .= '.tpl';
}
if (is_array($params) && count($params)) {
foreach ($params as $key => $value) {
$this->assign($key, $value);
}
}
// check if the template file exists.
if (!is_file($this->template_dir . $resource_name)) {
show_error("template: [$resource_name] cannot be found.");
}
return parent::display($resource_name);
}
With adding this, you will be able to use $this->mysmarty->view('template'). you don't have to use .tpl every time.
Also be careful that, if you are using shared host, then your $defaultpath won't work as above. then just check your base path & use that instead of above.
Now just go to config folder & open autoload.php. add smarty to auto load so that, you don't have to load it everytime. Now you are ready to use it from your controller.
Smarty();
$defaultpath = $_SERVER['DOCUMENT_ROOT']."codeigniter/system";
$this->template_dir = $defaultpath."/application/views/";
$this->config_dir = $defaultpath."/application/views/conf";
$this->compile_dir = $defaultpath."/cache/";
}
}
?>
In case of smarty you have to use $this->mysmarty->display('template.tpl');
Also, if you want to use codeigniter's view function instead of smarty's display function, then add the following function to the above class:
function view($resource_name, $params = array()) {
if (strpos($resource_name, '.') === false) {
$resource_name .= '.tpl';
}
if (is_array($params) && count($params)) {
foreach ($params as $key => $value) {
$this->assign($key, $value);
}
}
// check if the template file exists.
if (!is_file($this->template_dir . $resource_name)) {
show_error("template: [$resource_name] cannot be found.");
}
return parent::display($resource_name);
}
With adding this, you will be able to use $this->mysmarty->view('template'). you don't have to use .tpl every time.
Also be careful that, if you are using shared host, then your $defaultpath won't work as above. then just check your base path & use that instead of above.
Now just go to config folder & open autoload.php. add smarty to auto load so that, you don't have to load it everytime. Now you are ready to use it from your controller.
Subscribe to:
Posts (Atom)
