Kavoir » CSS & HTML Tips http://www.kavoir.com Just another dumbass webmaster, goofing around... Thu, 09 Feb 2012 01:59:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Redirect 404 Error to Home Page http://www.kavoir.com/2011/12/redirect-404-error-to-home-page.html http://www.kavoir.com/2011/12/redirect-404-error-to-home-page.html#comments Sun, 25 Dec 2011 03:15:19 +0000 Yang Yang http://www.kavoir.com/2011/12/redirect-404-error-to-home-page.html

Other than making your 404 error page user friendly, you can redirect it to your index pages such as the homepage, sitemap, or search page, to make it useful for the users. Instead of relying on them to correct the error themselves, you offer the new orientation.

How to redirect a 404 error page to the home page?

There are essentially 3 ways to do this depending on the technology your site is built on.

The .htaccess and HTML solution

This works across all sites that are served by the Apache web server with .htaccess enabled. Add this line in the .htaccess file in the root directory of your domain:

ErrorDocument 404 /404.html

And in 404.html, add a meta tag in the HTML head section: 

<meta http-equiv="Refresh" content="1; URL=http://www.example.com/">

So when there’s an 404 Not Found error the user would be first redirected to /404.html and in turn, he or she would be redirected to the homepage http://www.example.com/ (or whatever you change it to) by the meta Refresh actions.

The PHP solution

If you are using PHP to code your site, chances are you know this solution. You can always use the previous solution (The .htaccess and HTML solution) to redirect 404 error page to your home page on a PHP site, but you can also try the pure PHP approach instead.

Whenever a user types in a URL request that you do not recognize, render this:

header("HTTP/1.1 404 Not Found");
header("Location: /");
exit();

Which would redirect the user who has hit a 404 error to the homepage / or any other page URL you specify there.

The WordPress solution

If you are using WordPress for your site, make a 404.php file in your theme directory with the following content:

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));
exit();

WordPress would automatically use 404.php as the default 404 Not Found error page and when a user hits that page, he or she would then be taken to the home page your WordPress blog.

Related Posts:

]]> http://www.kavoir.com/2011/12/redirect-404-error-to-home-page.html/feed 0 CSS: Make <pre> Text to Wrap http://www.kavoir.com/2011/12/css-make-text-to-wrap.html http://www.kavoir.com/2011/12/css-make-text-to-wrap.html#comments Mon, 19 Dec 2011 10:39:20 +0000 Yang Yang http://www.kavoir.com/?p=2552

I deal with quite some code examples across some of my blogs and sometimes they contain too long lines to fit in nicely, which makes it hard to read the latter part of a long line. But you still need to maintain the pre-formatted text with the <pre> tag.

The solution is to use CSS to prescribe the <pre> tag to wrap the lines. Just add this in your stylesheet:

pre.wrap {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

And add the “wrap” class to the <pre></pre> blocks that you want lines to wrap naturally:

<pre class="wrap">I will be wrapping at the end of the line width.</pre>

Related Posts:

]]> http://www.kavoir.com/2011/12/css-make-text-to-wrap.html/feed 0 HTML: Make a Page Refresh Every xx Seconds http://www.kavoir.com/2011/08/html-make-a-page-refresh-every-xx-seconds.html http://www.kavoir.com/2011/08/html-make-a-page-refresh-every-xx-seconds.html#comments Sun, 28 Aug 2011 03:37:30 +0000 Yang Yang http://www.kavoir.com/?p=2319

A quick tip for those who just started learning HTML. It’s possible to add a line of code in your HTML page so that it’s automatically refreshed every few seconds when loaded in the user’s browser.

To make the page automatically refresh itself every 60 seconds, just insert the following code in the <head></head> section of your HTML source code:

<meta http-equiv="refresh" content="60">

This would be very useful to display information that is constantly changing.

This can also be used to redirect the user from the current page to another, just specify the destination URL:

<meta http-equiv="refresh" content="30; url=http://example.com/">

Which would redirect the browser to http://example.com/ 30 seconds after finishing loading the current page.

Related Posts:

]]> http://www.kavoir.com/2011/08/html-make-a-page-refresh-every-xx-seconds.html/feed 0 Pure CSS Rounded Corner, No Images http://www.kavoir.com/2011/03/pure-css-rounded-corner-no-images.html http://www.kavoir.com/2011/03/pure-css-rounded-corner-no-images.html#comments Fri, 04 Mar 2011 04:09:58 +0000 Yang Yang http://www.kavoir.com/2011/03/pure-css-rounded-corner-no-images.html

Though it does look great, I haven’t given it a try until the other day when I was developing smartbabynames.com. Notice the previous and next link immediately below the boy image at here:

http://www.smartbabynames.com/meaning/boy/Langleigh/

They look and feel great.

So here’s what I’ve done to achieve the rounded corner box in pure CSS – no images nor whatever. Just CSS:

.rounded {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	border-radius: 2px;
}

Tested across major modern browsers other than IE. Sure it doesn’t work in IE6, but not sure if it works in IE7, IE8, IE9, etc. But let me know if you know.

Related Posts:

]]> http://www.kavoir.com/2011/03/pure-css-rounded-corner-no-images.html/feed 1 Best and Newest HTML5 Books (and Some CSS3 Books) http://www.kavoir.com/2010/07/best-and-newest-html-5-books-and-some-css3-books.html http://www.kavoir.com/2010/07/best-and-newest-html-5-books-and-some-css3-books.html#comments Mon, 05 Jul 2010 04:04:46 +0000 Yang Yang http://www.kavoir.com/2010/07/best-and-newest-html-5-books-and-some-css3-books.html

HTML5 and CSS3 are becoming a reality. To be better prepared and armed with the latest technologies of the web so that we stay on the cutting edge when creating stuff, I have found some of the best book titles at Amazon about HTML 5 and CSS 3. Note that several of these books have not been released yet. You can pre-order and receive them when they are out.

Web Developers / Designers’ Books:

  1. Best HTML Books
  2. Best CSS Books
  3. Best JavaScript Books
  4. Best PHP Books
  5. Best MySQL Books
  6. Best Linux Books
  7. Best Apache Books (mod_rewrite Books)
  8. Best Web Hosting Books

HTML5: Up and Running

html 5 up and running

Here’s a godsend online book for learning HTML5 written by Mark Pilgrim as well.

HTML5: Designing Rich Internet Applications (Visualizing the Web)

HTML5 Designing Rich Internet Applications (Visualizing the Web)

Beginning HTML5 and CSS3: Next Generation Web Standards

Beginning HTML5 and CSS3 Next Generation Web Standards

Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development

Pro HTML5 Programming Powerful APIs for Richer Internet Application Development

Introducing HTML5 (Voices That Matter)

Introducing HTML5 (Voices That Matter)

Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKit

Beginning iPhone Web Apps HTML5, CSS3, and JavaScript for WebKit

HTML5 Now: A Step-by-Step Video Tutorial for Getting Started Today (Voices That Matter)

HTML5 Now A Step-by-Step Video Tutorial for Getting Started Today (Voices That Matter)

HTML5 Straight to the Point: Using HTML5 with CSS3 and JavaScript

HTML5 Straight to the Point Using HTML5 with CSS3 and JavaScript

CSS3: Visual QuickStart Guide (5th Edition)

CSS3 Visual QuickStart Guide (5th Edition)

Related Posts:

]]> http://www.kavoir.com/2010/07/best-and-newest-html-5-books-and-some-css3-books.html/feed 0 The Ultimate Way to Cloak and Hide any Website Address or URL (Stealth Forwarding) http://www.kavoir.com/2010/05/the-ultimate-way-to-cloak-and-hide-any-website-address-or-url-stealth-forwarding.html http://www.kavoir.com/2010/05/the-ultimate-way-to-cloak-and-hide-any-website-address-or-url-stealth-forwarding.html#comments Sat, 29 May 2010 07:11:01 +0000 Yang Yang http://www.kavoir.com/2010/05/the-ultimate-way-to-cloak-and-hide-any-website-address-or-url-stealth-forwarding.html

Most of the existing URL cloaking services are only a redirection by a randomly generated short URL. The real URL of the target website or web page will eventually be revealed when the visitor arrives at it after the obscure redirection. So how to ACTUALLY hide and cloak the destination URL of any website or web page so the address bar of the browser stays unchanged? In other words, how to create a stealth forwarding?

With a simple HTML web page, you can do that very easily. Copy and paste the following HTML code into a file named google.html and save it at example.com/google.html:

<!doctype html>
<html>

<head>
<title>Google</title>
<style type="text/css">
body {margin:0;}
iframe {padding:0;border:0;position:absolute;width:100%;height:100%;}
</style>
</head>

<body>
<iframe src="http://www.google.com/"></iframe>
</body>

</html>

Now navigate to your website http://www.example.com/google.html. It’s Google’s home page no problem. Better yet, the URL in the browser address bar doesn’t change to http://www.google.com/.

Related Posts:

]]> http://www.kavoir.com/2010/05/the-ultimate-way-to-cloak-and-hide-any-website-address-or-url-stealth-forwarding.html/feed 0 CSS: How to write CSS rules to detect or target Chrome, Safari or Opera browsers only? http://www.kavoir.com/2010/04/css-how-to-write-css-rules-to-detect-or-target-chrome-safari-or-opera-browsers-only.html http://www.kavoir.com/2010/04/css-how-to-write-css-rules-to-detect-or-target-chrome-safari-or-opera-browsers-only.html#comments Thu, 01 Apr 2010 12:57:02 +0000 Yang Yang http://www.kavoir.com/?p=1899

It’s easy to target firefox, just write as expected by the standards, at least most of the time. It’s also easy to target IE and any specific versions of them by a few of the famous hacks or the IE conditional comments to selectively include style sheets by version numbers. But how does one write CSS rules and make the browsers to recognize that they are particularly for Chrome, Safari or Opera?

Use PHP to distinguish the browsers.

echo $_SERVER['HTTP_USER_AGENT'];

Put this line in a .php file, upload the file to your server and browse to it by all the different browsers you have. From the server side, $_SERVER['HTTP_USER_AGENT'] contains all the information PHP knows about the source of the request, namely your browser. Now that the server is able to recognize the client browser, you can serve up different versions of a web page by PHP and include different CSS classes according to the browser type:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') !== false) {
	// Chrome user agent string contains both 'Chrome' and 'Safari'
	if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false) {
		echo '<body class="chrome">';
	} else {
		echo '<body class="safari">';
	}
} elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false) {
	echo '<body class="opera">';
} else {
	echo '<body>';
}

The rest is very simple. Just cascade your styles by additional classes to adapt your design to Safari, Chrome or Opera specifically. You can do a lot more than this by the server side variable $_SERVER['HTTP_USER_AGENT'], such as detecting browser versions and operating systems or writing your own web traffic statistics software.

Related Posts:

]]> http://www.kavoir.com/2010/04/css-how-to-write-css-rules-to-detect-or-target-chrome-safari-or-opera-browsers-only.html/feed 9 Use Relative Protocol URL Address to Automatically Determine Web Address Protocol (HTTP or HTTPS) http://www.kavoir.com/2010/03/use-relative-protocol-url-address-to-automatically-determine-web-address-protocol-http-or-https.html http://www.kavoir.com/2010/03/use-relative-protocol-url-address-to-automatically-determine-web-address-protocol-http-or-https.html#comments Sat, 06 Mar 2010 04:12:56 +0000 Yang Yang http://www.kavoir.com/2010/03/use-relative-protocol-url-address-to-automatically-determine-web-address-protocol-http-or-https.html

http or httpsHere’s a really interesting bit about how you can omit the protocol part of a web address in your web pages. The predominant belief is that an HTTP:// or an HTTPS:// has got to be prefixed to a URL or it won’t work, truth is, it will. Try the following link:

Click Me!

View the source of this entry and you’ll see the link code:

<p><a href="//www.kavoir.com/"></a>Click Me!</p>

There is no HTTP nor HTTPS protocol at the beginning of the URL. Yet, it’s working properly. Browsers will automatically use the same protocol as that of the current URL. It’s also working for other URL sources in HTML such as images or JavaScript scripts. Wherever you need to specify a URL.

This is very useful when your site is using SSL thus all the URLs start with HTTPS://. Because this approach lets the browser to automatically use the current protocol, you will not be blamed for using HTTP:// URLs on an HTTPS page and causing the notorious unsafe content warning to the users. It will also be a breeze to switch between the HTTP version and HTTPS version of your site. It’s totally automatic.

However, I don’t know what this would do in terms of SEO and how Google sees any URLs without the protocol part. Learn more about what the hell HTTP is.

Related Posts:

]]> http://www.kavoir.com/2010/03/use-relative-protocol-url-address-to-automatically-determine-web-address-protocol-http-or-https.html/feed 0 HTML: Make Content Editable in Element / Tags without JavaScript http://www.kavoir.com/2010/03/html-content-editable-element-tags.html http://www.kavoir.com/2010/03/html-content-editable-element-tags.html#comments Fri, 05 Mar 2010 15:04:34 +0000 Yang Yang http://www.kavoir.com/2010/03/html-content-editable-element-tags.html

It’s not well known but this feature was invented by Microsoft and has been implemented across all major modern browsers ever since IE 5.5. Adding an attribute of contenteditable and assign a value of “true” to it makes the content value / inner text of that element editable by a single click:

<blockquote contenteditable="true">Click to edit me!</blockquote>

Try it live:

Click to edit me!

When you are done editing, just hit Enter (if it’s an inline element) or blur the cursor focus from the editing region (if it’s a block element). Theoretically, this attribute can be added to any HTML tags to make them immediately editable without the help of any JavaScript at all. You can add it to a div, a span or a td.

Now what can we do with this new trick?

Related Posts:

]]> http://www.kavoir.com/2010/03/html-content-editable-element-tags.html/feed 3 You can actually use percentage values for padding and margin http://www.kavoir.com/2009/09/you-can-actually-use-percentage-values-for-padding-or-margin.html http://www.kavoir.com/2009/09/you-can-actually-use-percentage-values-for-padding-or-margin.html#comments Mon, 21 Sep 2009 00:57:21 +0000 Yang Yang http://www.kavoir.com/2009/09/you-can-actually-use-percentage-values-for-padding-or-margin.html

Which seems quite new to me as I have never used any percentage values on them before. Took some tests and I found out that all major modern browsers supported percentage values for padding and margin very well, even IE6.

This should come very handy in positioning things up according to the parent width. See how I did with the title of this site: http://www.rackspacepromocode.com

rackspace cloud sites promo code

You can resize the browser window to see how there’s always a 8% left padding to the <h1> title.

Related Posts:

]]> http://www.kavoir.com/2009/09/you-can-actually-use-percentage-values-for-padding-or-margin.html/feed 3 How to prevent or stop my website and pages from being indexed by search engines? http://www.kavoir.com/2009/09/how-to-prevent-or-stop-my-website-and-pages-from-being-indexed-by-search-engines.html http://www.kavoir.com/2009/09/how-to-prevent-or-stop-my-website-and-pages-from-being-indexed-by-search-engines.html#comments Thu, 03 Sep 2009 07:34:04 +0000 Yang Yang http://www.kavoir.com/2009/09/how-to-prevent-or-stop-my-website-and-pages-from-being-indexed-by-search-engines.html

It’s really weird that one would like to do this but perhaps you are running some private website dedicated to just an intimate group. Anyway, you can stop search engines indexing your web pages by putting a meta tag in the header section of them:

<meta name="robots" content="noindex" />

That’s it. Any search engines abiding by the rules especially Google will never index this page or exclude all the pages with this meta tag out of their index database. You can also prevent search engines from requesting and reading your website or pages in the first place by the help of a robots.txt which specifies to what areas of your site are they not welcome.

Adding a rel="nofollow" tag helps too in that search engines will not follow this link to the destination page, let alone indexing it:

<a href="http://www.example.com" rel="nofollow">example site</a>

Related Posts:

]]> http://www.kavoir.com/2009/09/how-to-prevent-or-stop-my-website-and-pages-from-being-indexed-by-search-engines.html/feed 1 How to redirect the visitor to another page or website? http://www.kavoir.com/2009/09/how-to-redirect-the-visitor-to-another-page-or-website.html http://www.kavoir.com/2009/09/how-to-redirect-the-visitor-to-another-page-or-website.html#comments Thu, 03 Sep 2009 07:24:24 +0000 Yang Yang http://www.kavoir.com/2009/09/how-to-redirect-the-visitor-to-another-page-or-website.html

This is one of the most common tasks in website development and also one of the most frequently asked question according to some of the keyword research tools. Well, you have 3 ways to achieve a web page redirection.

  1. Use PHP header() function to modify and send a HTTP Location header:

    header("Location: /thankyou.html"); // redirect the visitor to the /thankyou.html page on the same website

    header("Location: http://www.microsoft.com"); // redirect the visitor to Microsoft

    You will need to make sure there’s no output at all before the calling of the header function to avoid any headers already sent errors.

  2. Use the meta tag of HTML:

    <meta http-equiv="refresh" content="3;url=http://www.example.com/hi.html">

    Which will simply refresh the visitor’s browser window and redirect to http://www.example.com/hi.html in 3 seconds.

  3. Use JavaScript to manipulate the browser window location object:

    <body onload="document.location='http://www.example.com/'">

Related Posts:

]]> http://www.kavoir.com/2009/09/how-to-redirect-the-visitor-to-another-page-or-website.html/feed 1 CSS: How to align HTML input checkbox and radio with text on the same line? http://www.kavoir.com/2009/08/css-how-to-align-html-input-checkbox-and-radio-with-text-in-the-same-line.html http://www.kavoir.com/2009/08/css-how-to-align-html-input-checkbox-and-radio-with-text-in-the-same-line.html#comments Sat, 29 Aug 2009 14:59:12 +0000 Yang Yang http://www.kavoir.com/2009/08/css-how-to-align-html-input-checkbox-and-radio-with-text-in-the-same-line.html

The common HTML form input controls of checkbox (<input type=”checkbox”>) and radio (<input type=”radio”>) can be tricky to be aligned correctly in the same line with the text or image across all modern browsers. Without any CSS styling, they usually place themselves 3 or more pixels above or below the normal text flow which look anything but nice.

Setting margin or padding won’t help, the whole line would be shifted either downward or upward. So what can be done to align the stubborn input controls nicely with the texts? You can take one of the 3 approaches to achieve this.

  1. Float the checkbox or radio to the left.
  2. Using vertical-align:middle to align the checkbox and radio in the middle with the rest of the text. It’d look much better after you have vertically aligned the controls in the middle by this, but sometimes it also helps with 1px or 2 margin manipulation.
  3. Relatively position the input tags of checkboxes and radios 1 or 2 pixels above or below its original position with
    position:relative;
    top:1px; /* or bottom:1px; */
    Which would move the control 1px downward.

Generally, the 2nd is the best of the 3 approaches.

Related Posts:

]]> http://www.kavoir.com/2009/08/css-how-to-align-html-input-checkbox-and-radio-with-text-in-the-same-line.html/feed 8 Please, by all means, don’t use overflow:hidden for content! http://www.kavoir.com/2009/08/please-by-all-means-dont-use-overflowhidden.html http://www.kavoir.com/2009/08/please-by-all-means-dont-use-overflowhidden.html#comments Sat, 29 Aug 2009 08:13:05 +0000 Yang Yang http://www.kavoir.com/2009/08/please-by-all-means-dont-use-overflowhidden.html

No matter how fairy or pretty your design / template is, never use overflow:hidden for content containers.

Content comes a thousand times more important than any design or layout. I don’t care how much you hold proud your artistic work and how you think accommodating the content in any way possible would ruin the holy sweet layout, when an image or a table with indispensable content that the readers / visitors are ultimately concerned about expands across the content areas and messing up with your fucking design, using overflow:hidden to restrict them is just plain STUPID and ANNOYING.

Please by all means, DO NOT use overflow:hidden for content containers! What really matters is the idea / content the design is trying to convey rather than the design itself.

Related Posts:

]]> http://www.kavoir.com/2009/08/please-by-all-means-dont-use-overflowhidden.html/feed 0 CSS: Set width on inline elements with inline-block http://www.kavoir.com/2009/08/css-set-width-on-inline-elements-with-inline-block.html http://www.kavoir.com/2009/08/css-set-width-on-inline-elements-with-inline-block.html#comments Fri, 28 Aug 2009 03:03:27 +0000 Yang Yang http://www.kavoir.com/2009/08/css-set-width-on-inline-elements-with-inline-block.html

With display:block elements we can freely set the hard width of them. However for inline elements, width:200px simply won’t work at all. One approach is to float the element which usually causes other problems and isn’t handy at all.

So how to set width to inline elements without floating them in CSS?

The answer is to use this to the CSS rule:

display:inline-block;

Now you can set a width to the inline-ly displayed element and it will extend to the specified width with blank space filling the extra length.

Related Posts:

]]> http://www.kavoir.com/2009/08/css-set-width-on-inline-elements-with-inline-block.html/feed 3