We named our div “awesomediv” for this example.

Here’s the HTML:
<div class="awesomediv">Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.</div>And the CSS:
.awesomediv{background-color:#ccc;border:1px solid #666;padding:10px;width:360px;font-size:12px;text-align:left;}

Now let’s say that you want to style one of the sentences differently, but you don’t want to insert a bunch of inline css. You also don’t want to create a new Class or ID for the style. What do you do?

The Answer.
First, wrap the sentence in a span tag:
<div class="awesomediv">Synergistically enhance sticky data through excellent vortals. <span>Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures.</span> Seamlessly evolve impactful total linkage before enterprise methodologies.</div>

Next, simply define that span tag within your stylesheet. Like this:
.awesomediv span{font-style:italic;font-weight:bold;color:orange;}

Here’s our end result:

Now that was easy, wasn’t it? If you want to get even more creative, you could also style other elements such as the “strong” tag to behave differently than intended – though I warn you, unbolding the strong tag may anger the CSS gods.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.

Let’s say you have a gray color for your site’s font, but you want to make every bold item stand out in solid black. You could add unnecessary code such as <strong style="color:#000">BOLD</strong>

But that’s neither clean nor necessary. Instead, you can apply this directly to all instances of bold with css.

Just add this to your stylesheet:
strong{color:#000;}

Now, you will see that the bolded items stand out much more when compared to the rest of your text.

Of course, you aren’t just limited to changing the font’s color. For example, we have defined the strong tag as a block element when used within certain divs. This provides us with a way to make each strong tag fall on it’s own line, without having to add a<br /> tag. To do that, simply use this code:
#YOURDIVNAME strong{color:#000;display:block;}

You can see an example of this in action by viewing the source code of DynamiX Web Design under the “what makes us different” area.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.

Thankfully, the folks at YouTube have made this painfully easy, by adding an extra variable to the end of the URL string. For example, if your funny moment starts at 30 seconds in, you would simply add &start=30 to the end of the url.

Here’s a working example. We at DynamiX Labs love football, and enjoyed watching Rich Eisen (from NFL Network) run his 40 yard dash the other day at the Combine. For those who don’t know who Rich Eisen is, you may want to skip his intro speech, and go straight to his run. To do this, we simply embedded the video like this: http://www.youtube.com/watch?v=fZb3DRt6_Gk&start=50

Here’s the full code for those who want a straight copy:
<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/fZb3DRt6_Gk&start=50"><param name="movie" value="http://www.youtube.com/v/fZb3DRt6_Gk&start=50" /></object>

That gets me exactly 50 seconds in, and just a moment before his run begins. See below.

That’s all folks!

Step 1: The HTML.
Simply encase your desired video in the div that you will be working with. Ours is named “sizeit.”
<div id="sizeit">
<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/bTRVq72gK04">
<param name="movie" value="http://www.youtube.com/v/bTRVq72gK04" /></object>
</div>


Step 2: The CSS.
#sizeit {width:425px /*this is the normal width of your video*/;height:325px /*this is ~30px less than the defined height of your video*/;overflow:hidden;}
#sizeit:hover{height:355px /*this is the normal height of your video*/;}

Step 3: Fix IE 6
Since IE 6 likes to break everything cool, it’s no surprise that it doesn’t like this method. But with the use of csshover.htc, we can get this working in no time.

Add this just before your </head> tag:
<!--[if IE]>
<style type="text/css"> body{behavior: url(csshover.htc);} </style>
<![endif]-->

Adjust the url() field as needed, then save this file to your site: csshover.htc

That’s it! IE 6 now at least acts like it knows what’s going on.

Here’s the end result.

Now that you have this working, it’s easy to style it to fit your look and feel. For example, you might want to make this video appear to play on a projector screen like we have done here:

Click here to see the full example page.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 6 (with fix noted above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Have any thoughts about this article? Let us know through the comment field below. We’d also love to see where you’ve used our method or improved upon it, comment it below for a free link

Step 1: Get the code.

If you have ever tried to embed a YouTube video before, you know it’s pretty easy. Simply find the video you like, look to the right under the “Embed” section, and get your code. In this case, we’re covering how to embed your video with styles intact, so you’ll also want to press the “Customize” button and make your video stand out. Here’s our example, taken straight from the YouTube web site.

Example YouTube Code.<object width="425" height="373"><param name="movie" value="http://www.youtube.com/v/ERuMIlyzWBA&hl=en&
color1=0xe1600f&color2=0xfebd01&border=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/ERuMIlyzWBA&hl=en&color1=
0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed></object>

As in our first article, this code will work, but will throw a myriad of unnecessary errors. It’s also a lot more code than necessary. So, how do we fix it? Let’s start by giving you the correct code, then moving in to what you’ll need to do to make it work for your video.

Validated YouTube Code<object type="application/x-shockwave-flash" width="425" height="373" data="http://www.youtube.com/v/ERuMIlyzWBA&amp;hl=en
&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1">
<param name="movie" value="http://www.youtube.com/v/ERuMIlyzWBA&amp;hl=en
&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1" /></object>

This will work just as well as what YouTube provides, but with less code and with no validation errors. To make this code work for your video, here’s what you’ll do:

1. Modify new code example to include your particular YouTube video width and height.

2. Modify the data=”" and value=”" variables to include your YouTube link, maintaining the additional variables (in this case the full string is http://www.youtube.com/v/ERuMIlyzWBA&hl=en&
color1=0xe1600f&color2=0xfebd01&border=1).

3. Replace all bare ampersand (&) symbols in the data and value strings with &amp;. The end result will look like this:
http://www.youtube.com/v/ERuMIlyzWBA&amp;hl=en&amp;
color1=0xe1600f&amp;color2=0xfebd01&amp;border=1

That’s it! Just a touch more work than validating a standard (unstyled) YouTube video, but certainly nothing to lose any sleep over.

See the end result in action!

Missed our first article? You can find that here. Interested in learning more about how to utilize YouTube in your business? Then you’ll love another one of our articles entitled A quick look: YouTube and what it could mean for your business

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!

Thanks for reading! If you found one of our articles helpful, we would love to hear about it. Leave us a comment or send us an e-mail.

Here is an example of a simple unordered list with a nested element.

• A Point About Something
  • This bullet is making a point about something
  • And these bullets explain the main point
• Heres Another Main Point
• And Another

Now, the problem we’ve found is that some editors do not properly carry the <li> tag below the nested list. This is required for XHTML Strict validation, and as long as your editor does not automatically “correct” this, you should be able to fix this error in only a minute or two.

Here’s the incorrect code:
<ul>
<li>A Point About Something</li>
<ul>
<li>This bullet is making a point about something</li>
<li>And these bullets explain the main point</li>
</ul>
<li>Heres Another Main Point</li>
<li>And Another</li>
</ul>

Depending on how long your list is, this will give you a boatload of unnecessary errors, including “document type does not allow element “ul” here; assuming missing “li” start-tag,” and “end tag for “li” omitted, but OMITTAG NO was specified.”

To fix this, all we’ll need to do is move that red highlighted </li> tag below the nested list, after the </ul> tag. We’ve now changed the color of that tag to blue to show you where it gets placed.

Here’s the correct code:
<ul>
<li>A Point About Something
<ul>
<li>This bullet is making a point about something</li>
<li>And these bullets explain the main point</li>
</ul></li>
<li>Heres Another Main Point</li>
<li>And Another</li>
</ul>

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.

1. Your search engine rankings
   For example, a lack of alternate tags on your images could cost you in search engines, not to mention make your site hard on visitors with disabilities.
2. The way your site appears across multiple browsers
   Think Internet Explorer verses Firefox or Safari. Each can sometimes interpret site code a little differently, especially when that code is poorly formed and tested.
3. The time it takes your web site to load
   Some errors may cause the site to take longer to load, as your browser works to resolve duplicate commands and inconsistencies.

If you haven’t taken a look at how your site stacks up, now would be a great time to do so. You can use this link. To make the check as useful as it can be, we’d suggest selecting the “More Options” link and choosing either “XHTML 1.0 Transitional” or “XHTML 1.0 Strict.”

Now, to make life easier on both you and us, we have created a page that outlines some common issues and how to correct them, in a greater detail than within this article. You can find that page right here. Each of three common errors are explained in detail on that page. Briefly, here they are:

1. Images without alternate tags
   Alternate tags are quick, relevant descriptions used to tell search engines and web browsers what an image on your web site is. Think of Google sort of like a blind man. He can’t see pictures, but can read the “braille” (alternate tags) that tell him what your images are showing. If you leave this out, you’ll get more than a validation error, you’ll also miss out on a simple way to make your web site more efficient in search engines.
2. Those pesky ampersands (&)
   Ampersands are typically used to declare special characters. For instance, typing “™” will create this: ™, while “©” will provide this symbol: ©. The problem comes when an ampersand is used by itself, rather than in defining a character. This is a no no, and will cause validation errors on your web site. Luckily, these errors are easy to fix by replacing your naked “&” symbols with “&” instead (just don’t add the quotes when you type it!).
3. Unclosed tags
   This one is also easy to fix, and can cut your error count drastically. If you are copying code from another tutorial, or writing it on your own, be very aware where you need to close your tags, and how. For instance, when writing a paragraph, you will need to start with a <p> tag, and end with a </p> tag. For an image, you will need to end the image with an ending slash, like this: <img src=”images/an-image.gif” />
   

Of course, this is just a very small and simple list of some of the errors we see most often, and ones which are easy to repair. Want to know more about an error we didn’t mention? There are tons out there. Just leave a comment and we’d be happy to lend a hand.

Got a record number of errors on your site? We want to hear what you’ve got, and whether you’ve nailed them all. Believe it or not, the most errors we have ever seen on a site is a whopping 4,803. No, we won’t tell who it was.

Compatibility:
These methods are both simple and good practice for every web site. While this list is certainly not intended to provide a “how-to” for fixing every validation error on your web site, it will hopefully inspire you to check your current code, and to possibly write just a little bit cleaner the next time around. We all have to start somewhere, right?

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

We’ll start with an image. Now, we have scaled this one down a little so that it will fit on our page, but yours can be any size.

Here is ours:

Next, we will (using photoshop) select the Rounded Rectangle Tool. You can select anything you want for the radius (this controls how rounded your edges are), we chose 30px. Drag and create your rectangle over the area you would like to make rounded. If you are trying to create a perfect square, you can hold down shift as you drag to keep the proportions intact.

Here’s where we are now:

Next, making sure that the vector layer is selected (click on your shape in the toolbar until you see the small white border around it, as in our image above) click on “Fill” and change this value to 0. You should now see nothing but a thin white outline where the box once was visible. Move the box around a little if desired to get it perfectly around the area you wish to copy.

Here’s how it should look:

Next, select the “Paths” tab, you’ll find it just to the right of “Layers” and “Channels” on your toolbar. You’ll see a small icon on the right hand side with three horizontal lines. Click on that icon and select “Make Selection.”

Press OK at the next screen prompt.

Next, click “Edit” in the header menu and select “Copy Merged.” Open a new document and press paste, or paste directly into the current document. Your end result should be a nice, clean and clear rounded image.

Here’s what we have to show for our work:

Compatibility:
This method requires Adobe Photoshop or similar.

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an a

• This is a feature you offer.
• And so is this!

The css code we used to make these bullets is here:
.checklist{ list-style:none; margin-left:10px; padding-left:0;}
.checklist li{ background:url(images/check.gif) no-repeat 0 3px; color:green; padding-left:25px;}Of course, you will need an appropriate image. We created ours in photoshop. (here it is). We made ours 10 x 10 pixels, and you may need to modify the padding-left attribute on your checklist to fit.

Now, we just assign the .checklist class to the ul tag, like this:
<ul class="checklist">
<li>This is a feature you offer.</li>
<li>And so is this!</li>
</ul>The same method applies to creating multiple lists. For instance, you could make a second list with features that you don’t offer, and have small red x’s to the left instead. In this case, assuming the image is the same height and width, you can reuse the code above, and change only the class title, the font color (we chose red), and the image name. The results will be something like this:

• This is a feature you don’t offer.
• And so is this!

See how simple that was? In this case, we also changed the position of the image from 3px to 5px.

Here’s the code:
.dontoffer{ list-style:none; margin-left:10px; padding-left:0;}
.dontoffer li{ background:url(images/dontoffer.gif) no-repeat 0 5px; color:red; padding-left:25px;}

If you are looking to get deeper into how to properly style a list, or are stuck on one that you are working on, leave us a comment and we’ll lend a hand.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Enter the ‘Contact Form’.

Contact forms provided a means by which customers could send you a message without knowing your email address. These forms also keep people on your site, instead of sending them away to write a message in their preferred email program (or site). Sadly, spammers have now found a way to send a message through these contact forms. Many forms have simple data validation, which requires that you fill out specific fields with specific information (phone number, email address, etc). Other forms use CAPTCHA tests, which provide an image of text that the visitor must re-type into a field on the form. While this works well for responses on blog sites or registering for an online community, we don’t feel that it is appropriate for the average business website.

So, after some thought, we decided to try some ‘negative validation’. Instead of having more required fields, we created a field that must be empty, then we used simple CSS to hide that field from human visitors. Because the spam bots have learned to fill out every single field on a contact form, they will see this field in the code and put something in it and our form will know to simply reject this message.

Enough talk, lets get to the example…

This code can be added to nearly any php-based contact form.

First, we are going to add a new field to the form itself. It doesn’t matter where this field is located, as long as it is inside the <form> tags. We originally tried using an arbitrary name for this field, but it did not fool all of the spambots. We decided to rename our real email field and use “Email” for this input. At the time of this writing, it has worked for us.

Code:
<div class="email"><input type="text" name="Email" id="Email" value="" size="20" /></div>
(If you already have a class named “.email”, please rename class=”email” as you see fit)

At first, this simple field will be visible because you will want to test it before hiding it.

Next, we need to look at the form action value. This will tell us where the form submits to. Our contact forms submit to themselves (contact.php submits to contact.php) and all of the server-side code used to send the email is at the top of the code (above the <html> tag).

Once we have located the code that actually sends the message, we need to put it inside a simple if-statement around the code that specifically executes sending the e-mail. Every contact form is different, so we must assume that you know how your specific form works.

Code:
<?php if ($_POST['Email'] == '') {
Put your 'send the message' code here;
} ?>
We decided to take it a step further. Instead of simply not allowing the ’send the message’ code to be executed, we decided to send the spambots away from our site.

Code:
<?php if ($_POST['Email'] == '') {
Put your 'send the message' code here;
} else { header( 'Location: http://www.google.com/' ); } ?>
In this example, we just sent them to Google, but you are free to send them wherever you like.

Now that we have added the new field and conditional region, we can go ahead and load the contact page in the browser. Fill out the form however you like and make sure to type something (anything) into that new field. Submit the form and you should be instantly re-directed to Google.

Lastly, we need to return to the new field. To make sure that it is not visible to humans, we need to apply a little bit of CSS. Originally, we used “display:none;”, but learned that the spambots already knew this trick, so we had to resort to some different code. Unfortunately, the time may come where the spambots learn this trick, but for the time being, it works just fine.

Open your stylesheet and add this line:

Code:
.email {position:absolute;margin-left:-5000px;}

After saving the stylesheet, reload your form, and you will see that the field is hidden. Submit your contact form and you should get an email, just like before.

Compatibility:
This method should apply to virtually any php contact form. If you find a compatibility issue, we would love to hear it!

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!