Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
Any font on the web @font-face
1. Conver fonts of any type to to .eot font format: www.fontsquirrel.com/fontface/generator
2. Insert the following script into css file:
@font-face {
font-family: 'Eaves';
src: url('/fonts/MrsEavesItalic.eot');
src: local('MrsEaves Italic'), local('MrsEavesItalic'), url('/fonts/MrsEavesItalic.otf') format('opentype');
}
How to center absolute positioned element
Naturally an element with absolute positioning tends to be align to the left. To make that element float in the center horizontally use the following code:
#elem {
position: absolute; left: 0; right:0;
}
Unfortunately this does not work in EI6-7
JavaScript – clear value of input field
This useful code sets the value on an input field to nothing.
<input type="text" value="anything" onclick='this.value = "";' />
Applying two background images
To apply two images to HTML page background you can use the following code:
html {
height: 100%;
background:url(bg.gif);
}
body {
margin:0;
background:url(bg_content.gif) repeat-y center top;
min-height:100% !important;
height: 100%;
}
min-height:100% – allows the background image to stretch beyond the 100% window height if the page content is longer
Special HTML Character for Bullet List
This is a best way to use a special character as a bullet for lists in CSS:
li:before {
content: " 0BB 020"; /* » for example
}
When using these characters, like », it is necessary to encode them as their escaped HEX equivalents. Unfortunately this doesn’t work in IE7 and the previous versions. So If you want it to be cross-browser use an image instead.
JavaScript body ID refference
Addressing an individual page based on its ID is possible with the following JavaScript code:
if (document.body.id == "ID") {
do something;
}
Creating a link with JavaScript
Using this JavaScript snippet makes it possible to create a link out of a non-link element:
<div id="fakeLink" onclick="location.href='url'"></div>
But the above code does not convert the cursor to a hand, so it is best practice to do in with CSS in order for the users to be able to see the hot spot.
#fakeLink {
cursor:pointer;
}
Creating favicon
The following four steps briefly describe how to create a favorites icon for your website.
1. Create 16px X 16px square image and call it “favicon.png” (the name could be anything)
2. Go to www.convertico.com and convert that image to “favicon.ico”
3. Place the” favicon.ico” in the root of the site
4. Create a link in the <head> of the document:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Creating various includes
This is a PHP include code:
<?php include("inc/filename.php"); ?>
Using absolute path for PHP include code:
<?php include $_SERVER['DOCUMENT_ROOT'] . '/inc/filename.php'; ?>
This is a ASP include code:
<!--#include file="inc/filename.inc"-->
This is a Server Side HTML include code (the document containing this code must be saved as .shtml):
<!--#include virtual="inc/filename.html" -->