If yes to the above two questions, I think I know the problem you're having, and have a solution. It's to do with mod_security (an Apache module) and the 'http://' part of the URL.

(more…)

Example

Usage

Just make a call to

wherever you want the date picker to show. If you want to use it multiple times, just call it multiple times like

but make sure you have the first line of the code un commented.

The Code

Why not head over there now and check it out. It's free!

Setup

To start, let's create a new document in Photoshop, 1024px (width) by 700px (height).

Guides

Now, lets set up predefined areas (for areas like the header, and content) using guides. We will be creating four guides for now.

• First Guide: Horizontal, position: 160px
• Second Guide: Horizontal, position: 620px
• Third Guide: Vertical, position: 62px
• Fourth Guide: Vertical, position: 962px

You should now have something that resembles the following (ignore the fact that there's the BG coloured in there, that wasn't supposed to be there just yet):

Background

"Web 2.0" seems to be all about gradients, so choose a foreground and background colour. I used foreground: #6d6657 and background: #302a1d. Use the gradient tool, then click at the top of the document, and drag down to the first horizontal guide (160px down). You should have something like the following:

Content Area

Choose the rounded rectangle tool, and set a corner radius of 10px. Now make sure that your window is expanded a little more than the actual document size so that you can begin to draw your content area just outside the top of the document. Start about 15px above the document, and at the first vertical guide (62px in). Drag out a rounded rectangle down to the bottom horizontal guide, and aligned with the right hand vertical guide (962px in). You should see the following:

Now, add the following layer style to the rounded rectangle:

Header

Now lets set up the header. Create a new layer and use the Rectangular Marquee Tool and draw from the top left of the document all the way to the right, and down to the first horizontal guide. Fill with a colour of your choice. If you're following this guide, I used #918977. Change the blend mode to 'Darker Color' and add a drop shadow using the following settings:

Now grab a decent pattern, there are some nice ones at SquidFingers. Choose one, open it in photoshop and define it as a pattern (steps 1 & 2 only). IMPORTANT: Remember the width of the image. Mine is 34px. Once you have your pattern defined, bring up the main layout document we're working on and Ctrl+Click on the image part of the header layer in the layers panel. This should have selected the header section. Create a new layer above and choose Edit > Fill. Select your newly defined pattern, and fill this header area.

Now, set the Blending Mode to Luminosity, and press Q to enter Quick Mask mode. In Quick Mask mode, with the new layer selected (with the nice pattern on it) - choose the Gradient tool.

Drag a gradient from the top of the screen, down to the first horizontal guide (160px down). You'll have a red gradient, don't worry about that - we're in Quick Mask mode and it's supposed to do that. Now press Q to exit the Quick Mask mode, then press delete. Your pattern should now fade out as it gets closer to the bottom of the header section:

Saving your Slices

That's your layout basically done (without any content / images). Now to save the slices for our XHTML layout. Create two new horizontal guides, the first one set with a position of 170px, and the second with a position of 610px. Now, use the slice tool, and create a slice from the top left, across the entire width, and down to the first new horizontal guide (170px down). Create a second slice starting from the left and down at 170px, drag it all the way to the right and down to the second new horizontal guide. Create a third slice with the remaining space. You should have the following:

Now choose 'File > Save for Web & Devices' and save the images. This process will create a folder in your directory you chose to save them in. Within this folder will be your three sliced images. Browse to that folder, and delete the middle image. We don't need this. Name the header slice 'header' and the footer image 'footer'. Move both the header and footer images to your web image directory.

Now, back in photoshop, using the Rectangular Marquee tool select from the top left, all the way to the bottom and go in the number of pixels that match the width of your pattern you used earlier from the left edge of the document. Goto Edit > Copy Merged, then click File > New Document and make sure the dimensions are <width of pattern>px by 700px. Paste in the copied image, then File > Save for Web & Devices. Save this image as 'main_bg'. This is your main background image. Now, choose the Single Row Marquee Tool, and click once in the middle section of your main document (anywhere that the second slice contains). Do the same as before with the vertical slice… copy merged, open a new document, paste it in and save for web as 'content_bg'.

You should now have 4 main images:

• header
• footer
• main_bg
• content_bg

Creating the XHTML / CSS

Firstly, lets set up our directory structure. We will be needing the following:

• index.html
• design.css
• folder for images

We will be wanting a final directory structure that resembles the following:

+-my layout/
  |
  +-img/
  | |
  | +- content_bg.png
  | +- footer.png
  | +- header.png
  | +- main_bg.png
  |
  +- design.css
  +- index.html

Navigate to your root folder for this tutorial (where the files are going to be saved). Create a new folder called img and copy your images into it.

Now create the XHTML document (index.html). Let's use the following Dreamweaver default as a nice structure to work from:

Add the following div tags between the BODY tags:

Now it's time for the CSS. Create the new CSS file (design.css) and add the following CSS code:

Now, attach the stylesheet to your XHTML document using:

anywhere between the HEAD tags.

Voila! We're done!

Extras

Play around with this simple layout design, create new images, change colours and edit the CSS. Take a look at my final design.

I changed the header image to include a logo and some links, and also added some images to the footer. It seems to be the web2.0 style that you incorporate faint logos at the bottom of your layout.

Make sure you have a .htaccess and .htpasswd file in the directory you want to secure, then add the entries once you've generated your password.

The code to generate an MD5 hash using PHP is simple:

Creating custom documents gives your site a more professional look, as not only are you providing a 'net' to catch unsuspecting visitors when they follow a bad link and such like, but they also allow you to customise the style of the page so you can maintain your basic site design by adding HTML.

Control Access

Being able to control access to certain areas of your server can be very useful. The following example demonstrates how to only allow access from those connecting from a 192.168.0 LAN IP pool. This could be easily modified to only allow access from a single remote IP address or addresses.

Hide and Deny Files

Hiding and denying access to files is crucial to servers that have sensitive data held within files that may be accessible via the website(s) on it. The following example demonstrates how to prevent acces to any files ending with .log - and is case insensitive (i.e. .LoG / .lOG / .loG).

Basic Rewriting

I have written a mod_rewrite tutorial, but this is worth a mention as a top 10 tip for .htaccess files as it's becoming more and more commonly used these days - primarily for SEO purposes.

This example will redirect a request for http://edrackham.com/page_one.htm to http://edrackham.com/page_one.php. The r=301 tells apache to send a proper HTTP Permanently Moved redirection (301), which will update the address bar in the browser window to show 'page_one.php'. Without this, you'd still see 'page_one.htm' even though you're seeing a PHP page. This helps SEO, as spiders and search engines will update their listings to reflect the PHP versions.

Shorter URLs

Shorter URLs are beneficial, as visitors that persist in typing full URLs won't have to type as much, and they're more memorable. Do they benefit SEO, even though the full URL contains the same keywords? I don't know, maybe someone can tell me.

This example will rewrite a page requested as http://edrackham.com/files/code/apache.zip to http://edrackham.com/download.php?type=code&file=apache.

Prevent Hotlinking

Preventing hotlinking can reduce bandwidth, by disallowing other websites from displaying images hosted on your server. The following rule basically says that if the referer is NOT edrackham.com, run the following rule. The rule (on the next line) says that if the request is for a .gif, .jpg or.png then redirect the visitor to http://edrackham.com/img/hotlink_f_o.png. I'll leave you to work out what the 'f_o' stands for.

Hiding Page Extension

Similar to the mod_rewrite code above, this will redirect a request for product-3.html to products.php?id=3. As we're not using r=301, the requested page will remain in the browser's address bar.

Ban Selected User Agents

In my opinion, it'd be ace to block all requests from a Microsoft user agent, but alas, that wouldn't be too cool as some people are still hell-bent on using a non-standards compliant browser. Having said that, Microsoft is making their new IE8 release standards compliant by default.

The following provides some examples for blocking requests to your server from certain user agents.

Making Other Filetypes Executable

Ever wanted to make your site look like it runs off a new language such as .w00t files? Well you can with .htaccess! Adding this neat one-liner, you can request .w00t files, which will be served and interpreted as .php type files.

Force Media Downloads

Sometimes, when clicking on media files, the browser wants to play or stream it directly from itself. Using the following rules, media files (.avi/.mpg/.wmv/.mp3 in this example) will provide a download dialog box instead.

Require SSL

Sometimes you will require an SSL connection. This following snippet will do just that!

Sources:
http://corz.org/serv/tricks/htaccess.php
http://roshanbh.com.np/2008/02/hide-php-url-rewriting-htaccess.html
http://expressproducts.net/htaccess.htm
http://perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/#usa4
http://phpsecurity.wordpress.com/2007/12/22/htaccess-tips-and-tricks/

Replace:

• <COLUMN> with the name of the column(s) you wish to retrieve
• <TABLE> with the name of the table you wish to retrieve the data from

I've tested this with a table with over 660,000 records, and got a response in 0.0200 seconds, whereas with ORDER BY RAND() i got a response in 2.1599 seconds.

Total Number of Rows:

Old Method:

New Method:

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

Don your glad rags and party hats, it's time to celebrate! Microsoft have announced that their new interoperable release of Internet Explorer (IE8) will be standards compliant by default.

Their explaination for change still hints at their stubborness though: "While we do not believe any current legal requirements would dictate which rendering mode a browser must use, this step clearly removes this question as a potential legal and regulatory issue.".

So what does this mean for us as designers?

Don't misconceive me - I'm not primarily a designer, but I do design all sites I build …in pure CSS. This change will mean that we should know that our designs will render the same in all mainstream browsers such as FireFox, Opera, Safari and of course IE8 (provided we use valid CSS1, 2 or 3 [when fully supported] code). The days of running both FireFox and IE6/7, uploading your new CSS file and hitting F5 to find that the bug you just fixed in IE6/7 has now broken something else layout-wise should now be gone.

IE8 will support standards compliant mode as default, but will be backward compatible with our already 'IE Bug-Fixed' CSS files. So, to save us backtracking to make our previously written CSS files - which have no doubt taken us hours upon hours to write thanks to IE7- rendering modes - we can insert a meta tag into IE8 to set it to "Quirks Mode" for this exact purpose.

A final note

All in all, I don't have much confidence in Microsoft and the web. This confidence decreases even more after hearing any one of Steve Ballmer's semitars, especially the one about Microsoft winning the web. In my opinion, they never will, but this is a fantastic step in the right direction which leads me to say two things; Well done Microsoft, and two, Let's get used to the days of IE7-.