Category Archives: CSS Code

Convert RGB colors to Hex

Most web developers are quite comfortable using CSS to stylize their websites. But oftentimes they will design (or have designed) a template in Photoshop before creating the HTML template. Sometimes it can be a real headache to convert the RGB colors to the proper hexadecimal values for use in CSS.

Share

How to replace text links with images using CSS

Anyone who knows anything about SEO knows that it's most advantageous to use text links for the navigation of a website. Using text increases a search engine's ability to crawl your site and identify the content properly, because it can read the text (spiders can't read text within images). However, the aesthetic appeal of using images is obviously greater, you can have effects and aliasing, rather than just plain old boring text.

So, why not have both? With this bit of CSS code, you can use your text links, and then replace them in browsers with images. The spiders are happy, they can read the text. The viewers and website owners are happy, because the website looks pretty.

Let's say you had a navigation layer with the id of "nav". In there you had a link to "products", and a link to "blog".

Here's what your HTML looks like:


<div id="nav">
  <a href="/products/" id="nav-products">Products</a>
  <a href="/bog/" id="nav-blog">Blog</a>
</div>

You want to replace the text with images that are 30px high. This is the most efficient way to do it:


#nav a {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:30px;
}
#nav-products { background-image: url("/images/nav/products.gif"); width: 75px; }
#nav-blog { background-image: url("/images/nav/blog.gif"); width: 50px; }
Share

Easily create CSS tabs with PHP and AJAX

There are many different ways of simplifying an interface, and one of the best is by means of using tabs. I've written a couple of tutorials on making tabbed interfaces with CSS. However, it would be even easier to just have a class that generates the tabs automatically. Well, this class can be used to generate a tab based Web interface.

Share

How to set an iframe to 100% height in FireFox

Here's the HTML code to implement if you'd like to embed another web page in an iframe on your web site, but would like it to appear as the entire page. This makes it hard to detect that the page is within an iframe. It's easy to do in IE, just set the iframe height and width to 100%. But this is invalid markup and won't work in FireFox. Here's the code to make it work, with CSS.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
 <head>
  <title>iframe example</title>
  <style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { display:block; width:100%; border:none; }
  </style>
 </head>
 <body>
  <div>
   <iframe src="http://example.org/" height="100%" width="100%">
    <p><a href="http://example.org/">example.org</a></p>
   </iframe>
  </div>
 </body>
</html>
Share

Make an object stay on the page when scrolling

It's pretty common to see a nav bar or some persistent menu/object floating on a web page as you scroll dow it. Well here's the code to do that yourself. You can set the specific location for the floating object, and when the web page is scrolled down or up the object will float to that position as slow or fast as you set it to.



var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";
 
function getRef(id) {
	if (isDOM) return document.getElementById(id);
	if (isIE4) return document.all[id];
	if (isNS4) return document.layers[id];
}
 
function moveRightEdge() {
	var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck ;
 
 
	if (isNS4) {
		yMenuFrom   = divMenu.top;
		yMenuTo     = windows.pageYOffset + 137;  
	} else if (isDOM) {
		yMenuFrom   = parseInt (divMenu.style.top, 10);
		yMenuTo     = (isNS ? window.pageYOffset : document.body.scrollTop) + 30;  //Specify the distance of the  Floating Object from top.
	}
	timeoutNextCheck = 50;
 
	if (yMenuFrom != yMenuTo) {
		yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);//Specify the floating Speed high=0,slow=500. etc 
		if (yMenuTo < yMenuFrom)
			yOffset = -yOffset;
		if (isNS4)
			divMenu.top += yOffset;
		else if (isDOM)
			divMenu.style.left =  120;//Specifies the distance of the floating object from left. 
			
			divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
			timeoutNextCheck = 0; //Specifies the speed of reaction .
	}
	setTimeout ("moveRightEdge()", timeoutNextCheck);
}
 
if (isNS4) {
	var divMenu = document&#91;"divMenu"&#93;;
	divMenu.top = top.pageYOffset + 0;
	divMenu.visibility = "visible";
	moveRightEdge();
} else if (isDOM) {
	var divMenu = getRef('divMenu');
	divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 0;
	divMenu.style.visibility = "visible";
	moveRightEdge();
}
&#91;/code&#93;

and then all you need is to create the object on the page that will float:

&#91;code lang="html"&#93;
<DIV id=divMenu style="VISIBILITY: visible; WIDTH: 100px; POSITION: absolute; TOP: 10px; HEIGHT: 100px">you menu or stuff</div>
Share