The maximum width we can add on a div is 100%. What if you want more than that ? The solution is not to add more percentage to div but to do something other. Adding white-space property.
This will only work on the main parent elements such as elements with display property as follows:
This will only work on the main parent elements such as elements with display property as follows:
- block
- table
- inline-block
So now you know what are the main parent elements. Now back to the point, to add infinite width set the white-space property to the value nowrap. Example:
... [READ MORE]Fix: Dynamic Views failed to load properly
Well, this problem is pretty annoying to everyone who is using Dynamic Views, even to me. It’s a Blogger fault as always and there has not been a solution to the problem since it started on the Dynamic Views launch. Päivi & Santeri of Global Nomads founded a solution to this problem. Oh! I didn’t said the problem was. The problem is that the whole Blog will fail to load completely/properly. Some of the problems happen when the blog won’t properly load are listed below:... [READ MORE]
Vertically center align an element using CSS
Vertical alignment is difficult to find a solution. But I will tell you a simple way to align a div vertically center. The CSS property you’re going to use for this purpose is vertical-align.
Here is the code of a div aligned vertically.
... [READ MORE]
Here is the code of a div aligned vertically.
#adiv{
display:inline-block;
vertical-align:middle;
}
This only works for div with the display property inline-block and some others which I don’t know. But it’s better to use inline-block.
Disabling sidebar from fading out in Blogger Dynamic Views Template
The black sidebar on the right side of the blog is hidden and is only visible when mouse is over it. This is a problem because most of the users who are visiting your blog won’t even see the sidebar. The following list shows the advantages of having a sidebar not fading out :
- Google + Followers Increases
- More people will subscribe to your blog
- People will know the popularity of your blog when they see the blog stats
- and others…….
So I’m gonna tell you how to prevent the sidebar from fading out to the right side.
First of all Go to Blogger -> Template -> Customise
Choose Advanced option and click on the Add CSS button from the sub options. Paste the following code in the white box:
How to make sure that a CSS file will load on your site using PHP
This is a simple trick. Most of the web developers worry that the Stylesheet file will not load completely. This happens if your CSS file’s size is too large. The fail in complete loading of the file mostly happens to users who are using slower connections like me.
The page will look disgusting if the CSS file don’t load. To avoid the file not getting loaded you can do this simple trick using PHP.
Open your PHP page and replace the lines that embed the stylesheet file.
Example:
Replace this:
https://subins.hp.af.cm/files/css/all.php" rel="stylesheet" />
... [READ MORE]
Make Image Black & White (grayscale) using CSS In Webkit
If you want to make images grayscale ie black & white you can use this tutorial.
Note that this trick will only work on browsers that runs webkit which is used by browsers like Google Chrome, Safari, Midori etc.
Other browsers using different engines do not support the gray scake option. Hence this trick does not support all browsers.
Here’s the CSS code which will make all images grayscale.... [READ MORE]
CSS and Cursors CSS mouse cursor effects with DEMO
Ever wanted to change the cursor in your web page ? Well you can change it in CSS. There is a way of doing that, the cursor propery.
There is a way in CSS to change the cursor to pointer,cursor,resize,normal etc…..
This table show what will be the cursor when the value of cursor property changes as following.
... [READ MORE]
There is a way in CSS to change the cursor to pointer,cursor,resize,normal etc…..
This table show what will be the cursor when the value of cursor property changes as following.
| Value |
Toggle Element visibility using a little piece of code – Jquery Toggle
You might wanted to Show/Hide element based on the visibility of the element. If the visibility is block , hide the element and if visibility is none, show the element.
You can do this without the if statement. You can do this in just a line of code.
For example : if we want to toggle the visibility of a div with the id sh.
... [READ MORE]
You can do this without the if statement. You can do this in just a line of code.
For example : if we want to toggle the visibility of a div with the id sh.
$("#sh").toggle();
If the div #sh is hidden the code above code will make it visible and if it is visible the code will hide the div #sh.
Custom Cursor CSS
This css code will help you to add custom cursor image.
... [READ MORE]
SEE DEMO
Copy this css code to your html page.
OR
Copy this to your css file
body {cursor: url(https://lh5.googleusercontent.com/-u1rSVKP3Vpc/UAEqLZnKv0I/AAAAAAAABCQ/3alnkvGlnlQ/s32/cursor.png), url(https://lh5.googleusercontent.com/-u1rSVKP3Vpc/UAEqLZnKv0I/AAAAAAAABCQ/3alnkvGlnlQ/s32/cursor.png), auto;}
How to add a header image to Blogger Dynamic Views
You must have seen some blogs like mine and Blogger Buzz which have a header image like this. These header images make the blog attractive. Do you want to add a header image to your blog like this ? Then you are in the right place. It is very easy to do this in your blog. You only need to add few codes to your Blogger Template.
Note :- You must have enabled a Dynamic views Template on your blog to use this feature.
... [READ MORE]