Web Style Guide For Webdevelopers and Webmasters http://www.webstylepress.com All about Web 2.0 and Building Better Standard based Websites using Ajax, jQuery, CSS, XHTML and Latest Techniques Sun, 25 Oct 2009 22:52:44 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 WebStylePresshttp://feedburner.google.com How to Control Font Size in Percentage http://feedproxy.google.com/~r/WebStylePress/~3/mh1fbcCoNH0/ http://www.webstylepress.com/how-to-control-font-size-in-percentage/#comments Mon, 20 Apr 2009 21:17:45 +0000 Hiroshi http://www.webstylepress.com/?p=526 How to Control Font Size in Percentage is a post from: Web Style Guide For Webdevelopers and Webmasters

]]> font-percentagesTo control fonts in percentage is the easiest method which we can choose while playing with the fluid layouts, or perhaps while working with widgets and web 2.0 elements.

It is recommended while working with layouts that we define a standard font size for html and body. In the beginning there were loose style for fonts. Nobody used to care about styling fonts. Then in the design era of computer age, designers developed and adopted techniques to control different design aspects of websites and usually most popular standard was to choose 11px to 12 px font for HTML. Many years this technique prevailed until web 2.0 arrived and some web architects decides that fonts must be clear and bold. So now designers and developers adopt a technique to display large font sizes. Font size, color, face are also a part of the design. Here is how we can control font by percentage as a unit for font size. 

<div style="font-size: 100%;">100 %</div>
<div style="font-size: 150%;">150 %</div>
<div style="font-size: 300%;">300 %</div>
<div style="font-size: 400%;">400 %</div>
<div style="font-size: 500%;">500 %</div>
<div style="font-size: 600%;">600 %</div>

There are other font size units too e.g. pixels, points, inches, cm, mm etc. Percentage is one of these. Widely used as a standard is em unit for font size, which is considered to be the same for all browsers if browser compatibility is in mind.

<div style="font-size: 12px;">12 px</div>
<div style="font-size: 12pt;">12 pt</div>
<div style="font-size: 0.5in;">0.5 in</div>
<div style="font-size: 1cm;">1 cm</div>
<div style="font-size: 12mm;">12 mm</div>
<div style="font-size: 2pc;">2 pc</div>
<div style="font-size: 2em;">2 em</div>
<div style="font-size: 6ex;">12 ex</div>

How to Control Font Size in Percentage is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/how-to-control-font-size-in-percentage/feed/ 0 http://www.webstylepress.com/how-to-control-font-size-in-percentage/ Standard and Non-Standard Links http://feedproxy.google.com/~r/WebStylePress/~3/V1T_bHMUF3k/ http://www.webstylepress.com/standard-and-non-standard-links/#comments Mon, 20 Apr 2009 20:22:11 +0000 Hiroshi http://www.webstylepress.com/?p=522 Standard and Non-Standard Links is a post from: Web Style Guide For Webdevelopers and Webmasters

]]> Links are the Web’s number one interaction element. Violating common expectations for how links work is a sure way to confuse and delay users, and might prevent them from being able to use your site. Lets see what Markup Gurus say about links, and when links meet the standard or non-standard criteria. The usability guideline for any type of navigational design is to help users understand three major points:

  • Where they’ve been?
  • Where they are?
  • Where they can go (past, present, and future)?

These three are interrelated: If we consider browsing a site, a journey; then knowing your past and present locations makes it easier to decide where to go next.

Standard Guidelines for Links

  • Make obvious what’s clickable.
    For text links, use colored or underlined text.
  • Don’t underline non-link text.
  • Differentiate visited and unvisited links.
  • Explain what users will find at the other end of the link via ‘alt’ and ‘title’ tags to enhance scannability and search engine optimization (SEO).
  • Don’t use “click here” or other non-descriptive link text.
  • Avoid JavaScript or other fancy techniques (flash) that break standard interaction techniques for dealing with links.
  • Don’t open pages in new windows (except for different files i.e. PDF files).

Standard and Non-Standard Links is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/standard-and-non-standard-links/feed/ 0 http://www.webstylepress.com/standard-and-non-standard-links/ Images Not Displaying in IE, Displaying in Firefox http://feedproxy.google.com/~r/WebStylePress/~3/dytQCruZeW4/ http://www.webstylepress.com/images-not-displaying-in-ie-displaying-in-firefox/#comments Mon, 20 Apr 2009 19:46:24 +0000 Hiroshi http://www.webstylepress.com/?p=518 Images Not Displaying in IE, Displaying in Firefox is a post from: Web Style Guide For Webdevelopers and Webmasters

]]> Ever experienced a problem when regular image HTML code is displaying images in firefox but not displaying in internet explorer? If you are facing the same problem then consider taking care of following points:

  • Do not name images as ‘banner’. This can cause problems with some antivirus software or browser add-on.
  • validate the html document and css file. You can lose a lot of time trying to fix something when there are errors in your code.
    W3C Validator – HTML
    W3C Validator – CSS
  • Check for valid code – make sure all tags are closed.
    You may have neglected to close an element, or perhaps you meant to “self-close” an element, that is, ending it with “/>” instead of “>” in case of XHTML
  • Check that ’show pictures’ option is enabled in IE.
    Go to tools > Internet Options > Multimedia > Show Pictures

Images Not Displaying in IE, Displaying in Firefox is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/images-not-displaying-in-ie-displaying-in-firefox/feed/ 0 http://www.webstylepress.com/images-not-displaying-in-ie-displaying-in-firefox/ Use Any Font in Webpages As Text http://feedproxy.google.com/~r/WebStylePress/~3/5Sbt2qcBqO0/ http://www.webstylepress.com/use-any-font-in-webpages-as-text/#comments Fri, 23 Jan 2009 10:06:43 +0000 Hiroshi http://www.webstylepress.com/?p=481 Use Any Font in Webpages As Text is a post from: Web Style Guide For Webdevelopers and Webmasters

]]> use-any-fonts

Now using javascript we can use any font in web page by using techniques such as Typeface and Facelift Image Replacement (or FLIR) or sIFR. sIFR needs flash while others do not. sIFR is for smoothness look of fonts.

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS and get original smooth font look whatever you specify, even if the user machine have not those fonts. This technique is limited yet with limited fonts support and also it is recommended to use it for title of headings of web page. All the font at the web page using this technique can heavy things up at server and page might load very slow. Even then it is cool. Type face is easy, flexible and open source.

Using FLIR to display any font in web page is even easy. Here they have got complete instructions for just that.

I have tried type face method and here is its example to download.

Type Face Example Download

Related Resources

Facelift
Novemberborn
Implementing sIFR for smoothness of fonts in webpages
http://typeface.neocracy.org
http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

Use Any Font in Webpages As Text is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/use-any-font-in-webpages-as-text/feed/ 0 http://www.webstylepress.com/use-any-font-in-webpages-as-text/ Change Image Opacity Easily Using CSS or JS http://feedproxy.google.com/~r/WebStylePress/~3/kqw9iRxXAsw/ http://www.webstylepress.com/change-image-opacity-easily-using-css-js/#comments Fri, 23 Jan 2009 09:14:06 +0000 Hiroshi http://www.webstylepress.com/?p=484 Change Image Opacity Easily Using CSS or JS is a post from: Web Style Guide For Webdevelopers and Webmasters

]]> We can simply use CSS alone to reproduce opacity effect that have traditionally been done using scripting. The advantage of looking to CSS instead is obvious – much more lightweight and easier to implement. We can use this method where we need to use a dim or faint version of image, while when some one places mouse over it, then image comes sharp, clear and bright.

Use the following code in head section of web page.

<style type="text/css">
.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}
.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
</style>

Use the following code in body where the image is located.

<a href="#" class="opacityit"><img border="0" src="email.gif" /></a>

By this method image loads kind of blur in background and in light colors, but when some one places mouse over it. It becomes sharp.

Simple Opacity

We are using JavaScript to change the opacity of an image here. The technique works in both IE4+ and NS6+, and can be used to create some interesting “fading” effects. Here is the simple way to just place an image with opacity.

<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5">

In -moz-opacity:0.5 accepted range of values are 0 to 1, where 0 would make the image disappear and in alpha(opacity=50) range is between 1 to 100. We have combined the code both for IE and Mozilla for code compatibility.

We can also alter the opacity of image using javascript.

Head section code

<script>
function alteropacity(imageobject, opacity){
 if (navigator.appName.indexOf("Netscape")!=-1
  &&parseInt(navigator.appVersion)>=5)
    imageobject.style.MozOpacity=opacity/100
 else if (navigator.appName.indexOf("Microsoft")!= -1 
  &&parseInt(navigator.appVersion)>=4)
    imageobject.filters.alpha.opacity=opacity
}
</script>

Body Section Code

<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5" 
onMouseover="alteropacity(this, 100)" onMouseout="alteropacity(this, 30)">

Change Image Opacity Easily Using CSS or JS is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/change-image-opacity-easily-using-css-js/feed/ 1 http://www.webstylepress.com/change-image-opacity-easily-using-css-js/ Chatbox For Websites and Blogs http://feedproxy.google.com/~r/WebStylePress/~3/CK0UlUsG5HA/ http://www.webstylepress.com/chatbox-for-websites-blogs-forums/#comments Mon, 01 Dec 2008 04:33:52 +0000 Hiroshi http://www.webstylepress.com/?p=471 Chatbox For Websites and Blogs is a post from: Web Style Guide For Webdevelopers and Webmasters

]]> To listen to customers or your online visitors there have been many solutions but this one is very simple, easy and easy. Shoutbox a.k.a tagboard/chatbox, is an easy to use messaging system that allows you to interact with others instantly while you are at website. A shoutbox can be placed on your blog or website. Your visitors can then easily post comments in it. They can also use the shoutbox to chat with you and other visitors at the same time. The free shoutbox has both IP and URL banning features also! Everything is customizable. One minute setup.

Shout Mix Website

http://www.shoutmix.com/main/

Chatbox For Websites and Blogs is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/chatbox-for-websites-blogs-forums/feed/ 0 http://www.webstylepress.com/chatbox-for-websites-blogs-forums/ Add Media Player With Playlist to Any Website http://feedproxy.google.com/~r/WebStylePress/~3/h8qd85m7Lrs/ http://www.webstylepress.com/add-media-player-with-playlist-to-any-website/#comments Mon, 01 Dec 2008 04:30:42 +0000 Hiroshi http://www.webstylepress.com/?p=474 Add Media Player With Playlist to Any Website is a post from: Web Style Guide For Webdevelopers and Webmasters

]]>

A revolutionary and easy to use music player that plays audio on your website. Link to audio, get single line of code and play. It is that easy. Light weighted media player which will not disturb your website layout. You can manage play lists and customize it in the way you want it.

Features

  • Adds audio to your site with one line of HTML
  • Uses simple, easy-to-hack HTML instead of complicated proprietary markup, ushering in the REAL Media Web
  • Magical floating design never gets lost, is available when you need it, gets out of your way when you don’t need it
  • Automatically finds all audio links on your page, turning your page into a playlist
  • Plays all your blog entries with a single button click
  • Allows you to put the play buttons where they belong: IN CONTEXT
  • Keeps the user in the page rather than sending them away to a media player
  • Picks up your images and adds them as cover art
  • Requires no download, install or maintenance

http://mediaplayer.yahoo.com

Add Media Player With Playlist to Any Website is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/add-media-player-with-playlist-to-any-website/feed/ 2 http://www.webstylepress.com/add-media-player-with-playlist-to-any-website/ Protect Your WordPress Blog From Hotlinking http://feedproxy.google.com/~r/WebStylePress/~3/8RAytrJz8Cg/ http://www.webstylepress.com/protect-your-wordpress-blog-from-hotlinking/#comments Tue, 11 Nov 2008 22:44:47 +0000 Hiroshi http://www.webstylepress.com/?p=466 Protect Your WordPress Blog From Hotlinking is a post from: Web Style Guide For Webdevelopers and Webmasters

]]> Hotlinking is the use of an image from a website into another web page belonging to another site. There is thin chances that any popular blog will not be hot linked ever. By this way other websites use your host’s bandwidth and cause load at your server which has no benefit for you but loss. Following is a solution to protect your WordPress blog from hotlinking using .htaccess file.

Ever visited a webpage when you were trying to access an image, which shows you an image saying that image stealing is prohibited. We are going to use this way. The image will still be displayed from your blog but then it can be small and of low quality minimizing load. So we will create a small image written something like “Content Stealing is prohibited at my server” and upload it on our blog server.

Then, we will edit our .htaccess file, located in your WordPress blog root directory. Sometimes ftp does not show .htaccess file because it is hidden. In that case we can apply a filter -a via ftp which will show us hidden files too.

Add the following code to your .htaccess file:

RewriteEngine On
#Replace ?myblog\.com/
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?myblog\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/donothotlink.jpg
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/donothotlink.jpg [L]

Replace myblog with your blog URL name. For this blog it will be webstylepress
Use donothotlink as a name for your jpg image.

And you are done. Now when anybody shall copy any image URL from your blog, this image will be shown instead.

Protect Your WordPress Blog From Hotlinking is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/protect-your-wordpress-blog-from-hotlinking/feed/ 2 http://www.webstylepress.com/protect-your-wordpress-blog-from-hotlinking/ How to Gain Maximum from CSS http://feedproxy.google.com/~r/WebStylePress/~3/sbofNazj0Rs/ http://www.webstylepress.com/css-maximum-benefits/#comments Mon, 10 Nov 2008 09:13:35 +0000 Hiroshi http://www.webstylepress.com/?p=364 How to Gain Maximum from CSS is a post from: Web Style Guide For Webdevelopers and Webmasters

]]> CSS is a simple file which controls the visual appearance of a web page without compromising its structure. Why to use it and how to use it properly. If you don’t use CSS on your web pages and you have many tables and content on them, chances are that your HTML file size will be quite heavy. Fact is that we live in a busy world, and people will not wait more than 5 seconds for web page to load. Some web developers implement the CSS on wrong way. They write their CSS in HTML code of the page, like this:

<html>
<head> 
<title>My Page</title>
<style>
A { font-family: Verdana; font-size:8pt; color:black; text-decoration:none } 
</style>
</head>
<body>some content</body>
</html>

Correct way is to link the external CSS file in the pages. i.e.

<link rel='stylesheet' href='css/styles.css' type='text/css' media='all' />

How to Gain Maximum from CSS is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/css-maximum-benefits/feed/ 0 http://www.webstylepress.com/css-maximum-benefits/ Code Hider Tool – Lock Webpage Code http://feedproxy.google.com/~r/WebStylePress/~3/4ZFIfRm9pnU/ http://www.webstylepress.com/code-hider-tool-lock-webpage-code/#comments Sat, 08 Nov 2008 08:52:45 +0000 Hiroshi http://www.webstylepress.com/?p=455 Code Hider Tool – Lock Webpage Code is a post from: Web Style Guide For Webdevelopers and Webmasters

]]> This code is property of http://www.cgiscript.net and original updated code can be found from there.

Purpose of this tool is to lock the HTML code. If you want to secure your HTML code or any part of web page then this tool is very useful for that.

Download Code Locker Tool

Code Hider Tool – Lock Webpage Code is a post from: Web Style Guide For Webdevelopers and Webmasters

Related Posts


]]> http://www.webstylepress.com/code-hider-tool-lock-webpage-code/feed/ 2 http://www.webstylepress.com/code-hider-tool-lock-webpage-code/