Author Archive
CSS3 Font Face
Posted on: July 8, 2011
- In: CSS3
- Leave a Comment
What is @font-face
Generally, we’ve been limited to using the fonts pre-installed on MS Windows, Mac and Linux OSs. But now CSS3 has brought an end to it. Increasing support of the CSS3 @font-face allows us to load a font onto our servers, link to and name that font in our CSS, with the font-face we can use any font that designers uses it into their designs.
How to use @font-face
The syntax for the @font-face implemenation is:
@font-face {
font-family: Name Of The Font;
src: source where the font is stored;
}
Browsers that support @font-face
1. Firefox : 3.6+
2. Safari : 3.2+
3. Chrome : 10+
4. Opera : 11+
5. Internet Explorer : 9+ and partial support in 7 & 8 versions.
6. Android Browsers : 2.1+ partial support
Note: Partial support before IE9 refers to only supporting EOT fonts. Safari for iOS 4.1 and below only supports SVG fonts.
The main issue with @font-face is the ownership of the fonts. Make sure you are legally allowed to upload and share a font before using @font-face, as when you embed a font, that is what you are doing: sharing a file. Just like music, for most fonts it is illegal to upload and share without proper attribution and/or payment.
Blocks are nothing but boxes of content, that are displayed in regions such as sidebar or footer on your page.
For creating a block go to Administer >> Block >> Add block, you will find a form fill the details of your block and save it.
Say for Example you have created a block with name Test Block with ID 1. Here’s how you use this code snippet to insert any block
Browse to Site Building >> Blocks >> List Browse over the “configure” link next to your block
This will reveal the following address line (in this example we are using a custom block with ID 1)
/admin/build/block/configure/block/1
the last two variables are the ones we’re interested in: /block/1
Now to place this custom block into a page, we need to just add these code into the PHP code snipped
<?php
$block = module_invoke(‘block‘, ‘block’, ‘view’, 1);
print $block[‘content’];
?>
Note that the middle two terms (‘block’, ‘view’) always stay the same. You’re simply updating the first and last term.
The first term can be a comment, user, event, block or module_name for displaying recent comments, online user, if you have event module installed you can show list of upcoming events or to display a custom block created by Administrator or any module to be displayed respectively.
And the last term “1” indicates the first block. To display 2nd , 3rd, and subsequent user created blocks replace 1, with, 2, 3 etc respectively.
- In: CSS | HTML
- Leave a Comment
We all know how to align a table at the center. Just say <table cellspacing="0" cellpadding="0" align="center" wiidth="100%"> its gets the table aligned to the center of the page. In the same way how about aligning a div at the center of the page. There are a few different methods how to make it in the center.
Here are these methods
1. Using <center> tag
Ex:
<center>
<div class="xyz">Some content goes here…</div>
</center>
This will get the div aligned at the center along with this the content also gets aligned at the center. Well you might be knowing that the <center> tag is a deprecated tag[Read More]. So now is not receomended to use it. Still most of the browsers will allow you to use it. But this is not the feasible and recomended method.
2. Using align attribute
Ex:
<div class="xyz" align="center">Some content goes here…</div>
Also by using the above tag the div wount get aligned to center instead only the content gets aligned to the center. Align attribute is also a deprecated attribute, its no more recomended. So this is not the feasible and recomended method.
3. Using CSS attributes
Ex:
<div class="pqr">Some content goes here..</div>
<style type="text/css">
.pqr{
width:500px;
border:1px solid #666666;
margin: 0, auto;
}
</style>
By using the above style you can align the div at the center of the page. The margin=0 that is the top and bottom margin is 0 and the left and right margin is auto in the sense fill the gap automatically, by which the div gets aligned to the center, either of the whole page or within the block element. This is the best and recomended method to align a div at the center. This is tested in all the browsers.
Try this and test it on different browsers, if you find any issues let me know.
- In: HTML
- Leave a Comment
Well you all might have seen that if you want to give an anchor tag for the whole table, it doesnt work with IE. But it works with Mozilla firefox and chrome. So to make it working with IE what could be the solution.
Here is the simple solution just workaround and see it, even I did the same thing and got this solution. So wanted to share it with you guys out there.
<table border=”1″ cellspacing=”0″ cellpadding=”0″ width=”200″ onclick=”location=’http://www.google.com'” >
<tr>
<td>
Click here for the link
</td>
</tr>
</table>
So check out with this solution, its easy isn’t 🙂
Small heights in your site
Posted on: November 23, 2009
- In: CSS
- Leave a Comment
If you are creating a layout, with some very small heights as custom borders for elements. Usually, what you will do is you’ll just have to add height: XXpx to the style’s declarations and think that it should be fine.but check your page once in IE and you’ll probably know what is the answer.
Check out with this example
HTML Code:
<div> id=”smallHeight”</div>
CSS Code:
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
}
Surprised to see a block with around 22px height in IE.
Well you might be thinking now how to fix this issue. Thats very simple one, we have two fixes for such IE bugs.
1 Solution:
Simply add a font-size:0 for the div, this is because IE refuses to set the font-size less than the default one. So the height of the div is set to approx 22px.
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
font-size:0;
}
This will solve your problem.
2 Solution:
Well second solution is to set overflow:hidden for the particular div block.
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
overflow:hidden;
}
Thats quite a very handy and a simple solution. 🙂
Min-Height Hack in IE
Posted on: November 13, 2009
- In: CSS
- Leave a Comment
As we all know that min-height doesn’t work in IE 6. Say for example if your site doesn’t have much content then you web page will end up till the content is there. So if you want to set some minimum height so that the page looks good. If you set some exact height for the webpage it will lead to a problem when the content is more. So to avoid this issue, there is a solution for this min-height works with mozilla, opera, chrome, safari,IE 7, IE 8 but doesn’t work with IE 6.
So to make it work with IE 6 we need to hack it. Below is the solution for such an issue
Ex:
<div id=”container”>
Some content goes here…..
</div>
<style type=”text/css” >
#container{
min-height:300px;
}
</style>
The above code works only with mozilla, safari, chrome, opera, IE7 & 8.
Solution for IE 6:
#container{
min-height:300px;
height:auto !important; //IE hack
height:300px;
}
Thats it, so simple solution no CSS 3 required, no external javascript required. Check it out.
iframe
Posted on: September 25, 2009
- In: HTML
- Leave a Comment
Iframes allow you to load separate html files into an existing document. You can place iframes anywhere in the document and can use CSS and JavaScript to manipulate the properties of the iframe.
Example of iframe:
<iframe scrolling=”no” width=”500″ height=”300″ src=”iframe-sample.html” frameborder=”0″> </iframe>
Content of iframe-sample.html:
Say below is the content
<a href=”http://www.google.com” title=”Google” >Google</a>
The above example says the iframe will load a iframe-sample.html file withtin the specified width of 500px and height of 300px, ie,; you get google.com loaded within that specified width and height when you click on the link.
If you need the google.com page to be loaded into the same full page, then you need to add the target path to the anchor tag as parent, below is the code
<a href=”http://www.google.com” title=”Google” target=”_parent” >Google</a>
By writing _parent the page gets loaded into the parent of the iframe.
The iframe element is not valid in strict (X)HTML. Documents containing iframes will validate with transitional or frameset doctype declarations.
Some of the attributes supported by iframes are:
width: specifies the width of the iframe.
height: specifies the height of the iframe.
frameborder: specifies whether to display border or not (0,1) of the iframe.
name: specifies the name of an iframe.
scrolling: pecifies whether to display scrollbars or not.
marginheight: specifies top and bottom margins of the iframe.
marginwidth: specifies left and right margins of the iframe.
src: specifies the url of the document that to be loaded.
title: specifies the title of the iframe.
class: specifies the classname for an element.
id: specifies the id (unique id) for an element.
style: specifies inline style for an element.
Mywebdunia's Blog 