designtopx

Cross browser compliant HTML/CSS form download with PSD file

Kalim — Fri, 20 Nov 2009 20:56:27 +0000

Hello and Thank you for visiting designtopx.wordpress.com.

Please note: The new home for this post is can be found here -

For your review and use, I am presenting a free HTML/CSS form that has been tested on all major browsers (on a Windows computer). Here is what the final form looks like (view live version here – http://bit.ly/8aVJ6R ):

HTML Source Code

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>EMPTYtitle> <link href="form-style.css" rel="stylesheet" type="text/css" /> head> <body> <div id="form"> <form action="#" method="post" > <fieldset> <div> <label for="title"><span>Titlespan>label> <input type="text" name="title" class="title" value="Lorem ipsum dolor sitamet" /> div> <div> <label for="title"><span>Enter Description Here:span>label> <textarea name="description">Pellentesque habitant morbi tristique senectus et netus etmalesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mivitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.Vestibulum erat wisi, condimentum sed, commodo vitae, textarea> <input type="hidden" value="foo" name="foo" /> <input type="hidden" value="bar" name="bar" /> div> <div> <input type="text" size="28" readonly="readonly" class="readonly" value="This text is Read-Only"name="pubDate" /> <input type="hidden" value="baz" name="baz" /> <span class="pad-left"><button type="submit">Sendbutton>span> div> fieldset> form> div> body> html> * This source code was highlighted with Source CodeHighlighter

The CSS

body { background-color:#797979; margin:0; font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif; } #form{ background:url(formdesign.png) no-repeat top left; width:469px; height:332px; position:relative; float:left; margin-top:55px; margin-left:15px; } #form form{ position:relative; float:left; margin-top:55px; margin-left:15px; } fieldset{ border:none; width:330px; } div{ padding:0 0 5px; } input.title{ color:#3399FF; font-size:14px; font-weight:bold; width:400px } input.readonly{ color:#999; } label span{ color:blue; } textarea{ color:#3399FF; width:420px; height:160px; } .clear{ position:relative; clear:left; } .pad-left:{ padding-left:35px; } .push-30{ position:relative; float:left; margin-left:30px; } * This source code was highlighted with Source Code Highlighter.

The form looks the same in all the latest browsers (tested in IE7, Firefox 3.0.14, Opera 10.01, Safari 4.0.3)

*Download the source code here (includes .PSD for the form background) – Link

About the Author

Kalim Fleet is a professional web designer and blogger with over 6 years experience. The web is his passion as he splits his time between blog writing, software development and social media. He loves using and developing new applications for the web, mobile, and desktop.

How to dynamically create image thumbnails using CSS clip property with PHP glob() function

Kalim — Wed, 18 Nov 2009 20:01:53 +0000

Hello and Thank you for visiting designtopx.wordpress.com.

Please note: The new home for this post is can be found here -

In this tutorial, I will share with you an example of how you can use PHP to dynamically create and display images in a folder, all with very few lines of code, by utilizing PHP’s glob() function and the CSS clip property.

View live demo here: Link

Step 1:
Make sure your images are saved in a separate folder. I recommend you call the folder images

Step 2:
Place all the images you will want to access for your website into the images folder. Make sure that this folder contains only the images you want to include on your webpage and no other images or file types.

Step 3:
Rename all the images in the folder so that the first part of each image is exactly the same. e.g. article001_fooimage.png, article001_barimage.jpg, etc. Since you are going to call for these later i would suggest you name the images in a way that you will easily remember (like sequentially based on when they are needed in a top 10 style post)

Step 4:
Here is the php script that you can add to any page that will need to access the images. If you prefer, you can save this php script as a separate file then use php include() to bring it in

$filename = glob(‘images/*.*’);
function imagizer($filename)
{
return “$filename‘ alt=’image’ />
”;
}
$images = array_map(“imagizer”, $filename);
$article001 = array_values(preg_grep(“/article001/”, $images));
?>

The function imagizer will return an array of processed images based on your specifications. I have chosen to do a 256×256 pixel clip starting at the upper left hand corner of the image. The entire image is still present though, it is only clipped to the visitors view. If the visitor downloads the image, it will be the entire sized file and not the clip. The first div that is created in the function is the container. I made it 9 pixels taller than the clipped image container to add a little padding to the bottom of each generated image.

To call an image, simply use $article001[0] for the first image in the folder, $article001[1] for the second image, etc.

You can also do a for loop to print each image in a row. This could be useful if you needed to add a bunch of images in a wysiwg html editor online and you didn’t have access to php. You would just generate the code for all the images your the folder by running the php script like such:

$max=count($article001);
for ($i=0;$i<$max;$i++)
{
echo $article001[$i];
}
?>

on your test environment, then go to the generated html page and copy and paste the html into your wysiwg editor.

Please feel free to leave any comments if you have any questions or suggestions about the code or use.

About the Author

Roundup: The Best Web Design Cheat Sheets

Kalim — Fri, 13 Nov 2009 22:10:42 +0000

Hello and Thank you for visiting designtopx.wordpress.com.

Please note: The new home for this post is can be found here -

Web designers often have to wear many hats. They must aptly switch from being a developer, coder, administrator and designer at a clients request. There is simply too much information to know all at once so I have provided the best cheat sheets I have found for the various technology that you will come across in your projects. A number of elements are covered including PHP, regex, wordpress, css, fonts, gimp, html, javascript, jQuery, mod rewrite, mysql, photoshop, and more. Note: All cheat sheets are in .PDF format.

1. PHP

2. CSS

3. Wordpress

4. Image Editing

5. Color, Typography

6. Javascript

7. jQuery

8. HTML

9. Web Administration

10. Regex

11. SQL

12. Bonus

About the Author

designtopx

Cross browser compliant HTML/CSS form download with PSD file

Hello and Thank you for visiting designtopx.wordpress.com. Please note: The new home for this post is can be found here -

How to dynamically create image thumbnails using CSS clip property with PHP glob() function

Hello and Thank you for visiting designtopx.wordpress.com. Please note: The new home for this post is can be found here -

Roundup: The Best Web Design Cheat Sheets

Hello and Thank you for visiting designtopx.wordpress.com. Please note: The new home for this post is can be found here -

Hello and Thank you for visiting designtopx.wordpress.com.

Please note: The new home for this post is can be found here -

Hello and Thank you for visiting designtopx.wordpress.com.

Please note: The new home for this post is can be found here -

Hello and Thank you for visiting designtopx.wordpress.com.

Please note: The new home for this post is can be found here -