Embedding Fonts through CSS

Some of you may not know but now you can embed font file directly via CSS. Starting at Safari 3 and Firefox 3.1 beta both support direct linking to OpenType (.otf) font files. Presumably Opera will soon support this too. For IE user, it supports direct embedded open type file instead (.eot). To convert a “OTF” file to “EOT” file, you need Microsoft WEFT 3. Here is the link to do so:
Microsoft WEFT 3

To embed the font, simply do the followings:
1. Set the basic font-family

h1, h2, h3, p, td{
font-family:'Font-Name', georgia, serif;
}


2. Add @font-face to your CSS
@font-face{
font-family:'Font-Name';
src: url('Font-Name.otf') format('opentype');
}

for IE

That’s it. It is quite simple. Now all you need to do is finding the right font that you want to use

Free CSS Drop-Down Menu Framework

Click on the link below to check out the Free CSS Drop-Down Menu Framework. It is cross-browser compatible and easily styled.

Features highlight:

* Modular, with themes. Not only HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new drop-down means creating only a new theme since structure is permanent. What is more, creating a new theme is easy with available templates and takes 10-15 mins.
* Easily deployable. The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.
* Easily transformable. Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.
* Cross browser. Configurations available for Windows Internet Explorer 5 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later.
* JavaScript only for IE. Minimal JavaScript code only for IE 6 or earlier. Can be used with popular JavaScript libraries Jquery or Scriptaculous. Everything else is pure CSS.
* Super Fast. Having the above mentioned features it is not affected by any disturbances whatsoever.

Click Here

Making your homepage iPhone friendly

The new iPhone is out and you probably ready to set your website to make it look nice and dandy on iPhone safari browser. Here is the trick that I found that will make sure that your page is displayed correctly on iPhone safari browser:

<meta name="viewport" content="width=320">

That’s it; that’s all you need and then of course make sure that your content is displayable under 320px width

Happy coding.

TheBoxOffice – Wrap your text around image using CSS

I stumble upon the following site called boxoffice which I thought is pretty cool. This code-generator website allows you to create CSS and DIV to simulate text wrapping around irregular images. Check them out and play with it. Check the image below for the sample on how the page looks like.

CSS Layout Templates

I ran across this site that presents 40 different layout templates that you can use with your web projects. Check them out! http://blog.html.it/layoutgala/

Setting Min-Width on IE6 (IE Hack)

There are circumstances that you would like to setup a minimum width of your content so that when user reduce their window, your content width will not shrink below that width. Unfortunately, there is bug on IE 6 where min-width is not supported. There is a work around on this bug.

Getting this to work in IE6 takes some extra effort! To start you will need to create 2 divs, one embedded in the other.

<div class=”container”>
<div class=”holder”>Content</div>
</div>

Then you will need the min-width which goes on the outer div.

.container {
min-width:300px;
}

Now this is where the IE hack comes into play. You will need to include the following code.

* html .container {
border-right: 300px solid #FFF;
}

* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}

As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.

Image Replacement

As we know for SEO perspective, it is always better to have all the heading in text and format it using the stylesheet to appear the way you want it. But what if you really want to display the heading using image because the need of fancy font or format? Or, may be you want to highlight a banner or image where the keyword or the topic of that banner image you want it to be “indexed” by the search engine.

The answer is using image replacement technique in CSS. Below is the sample code on how to do it:

HTML:

<h1><span>Main heading one</span></h1>


CSS:

h1 {
background-image:url("100192p1.jpg");
background-repeat:no-repeat;
width:170px;
height:111px;
}

h1 span {
position:absolute;
text-indent: -5000px;
}

As you can see we are using regular HTML code for the h1 tag and using CSS to replace the text with an image. Text-indent pushes the text 5000px’s to the left, making it invisible to the user.

Another way to do this is by hiding the span object using display: none syntax.

Notes: it is important to set the width and the height of the H1 to be equal or greater than the image size that is going to be displayed.

Cheers