Archive for the ‘html’ Category

Thanks To Our Veterans!

We wanted to thank our veterans and active military for all that they do to help keep us safe, so we created a banner for our site. Then we thought, why stop there? So, being a tutorial site, we created a quick “how-to” on adding this to your own web site.

Click to continue reading “Thanks To Our Veterans!”

html: Validating the Tweetmeme WordPress Plugin

We recently installed the Tweetmeme WordPress plugin, only to find that it threw over a dozen errors our way that invalidated our XHTML Strict code. It’s far too valuable a plugin to leave off of any good blog, but we do want to be sure that the code doesn’t throw errors. Here’s how to fix those under five minutes. :-)

1. Replace & with & where necessary.
The list should be: &source, &style, &service, &service_api, &force
You can simply do a find and replace for each of these with your & equivalent.

2. Change “iframes” to “objects”
For this, you can simply copy and paste our code:

FIND:
<iframe scrolling="no" height="105" frameborder="0" width="200" src="http://api.tweetmeme.com/chart.js?url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;chs=200x100&amp;force=true">

REPLACE WITH:
<object type="text/html" data="http://api.tweetmeme.com/chart.js?url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;chs=200x100&amp;force=true" style="height:105px;width:200px;border:0;overflow:hidden">

FIND:
<iframe src="http://api.tweetmeme.com/button.js?url=' . urlencode($url);

REPLACE WITH:
<object type="text/html" style="overflow:hidden" data="http://api.tweetmeme.com/button.js?url=' . urlencode($url);

FIND:
$button .= ' frameborder="0" scrolling="no"></iframe>

REPLACE WITH:
$button .= ' ></object>

FIND:
target="_blank"

REPLACE WITH:
target="_parent"

That’s it! That wasn’t so bad now was it? Please let us know in the comments if you run into any issues.

css: style an element with the span tag

Span Tag CSS

The span tag is a great, and often underutilized way to easily change the look and feel of virtually any aspect of your web site. Read more…

Click to continue reading “css: style an element with the span tag”

html: playing a YouTube video at a pretedermined time

You just found the funniest YouTube video ever and want to post a link to it, but it doesn’t get funny until two minutes in. What do you do?

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!

html: embedding a YouTube video WITH STYLES using xhtml strict code

You may have seen our original article, entitled “html: embedding a YouTube video using xtml strict code,” which works just fine if you are looking to turn the default, unstyled code that YouTube gives you into XHTML strict code. But what happens if you want to embed your YouTube video with all the neat, customized styles that they allow you to configure before copying their code for use on another site? We’re glad you asked and you’re in luck, it’s still just as easy to validate.

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:

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.

html: creating nested lists using valid xhtml code

A nested list is essentially a sub-list, and can be very helpful when clarifying points in an unordered list. Unfortunately, many editors and programs do not properly format these lists in valid XHTML Strict code, resulting in needless errors. This first came to our attention when testing out a WYSIWYG editor without proper XHTML Strict support.

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.

html: resolving simple xhtml errors

Validation errors are most simply defined as inconsistencies between your web site code and the accepted standards (which will vary depending on your doctype declaration), and can have a negative impact on:

  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!

html: creating clean unordered lists

Almost everyone has created an unordered list before, but most people don’t realize just how easy it is to make these lists really stand out from the crowd. For example, if you are looking to make a list of items that you offer, you may very well want to put a small green check mark next to it, like this:

  • 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!

html: embedding a YouTube video using xtml strict code

If you’ve ever tried to add a YouTube video to your web site, you’ve probably found that it’s not too hard to do. But adding one that validates as XHTML Strict is just a little bit tougher. Let’s go step by step.

Step 1: Get the code.

YouTube has a very convenient “Embed” section on every video they host, which allows you to very easily get the code you need to post a video on your web site or blog. Unfortunately, the code they give you will throw XHTML validation errors.

Example YouTube Code:<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/Pk7yqlTMvp8&rel=1"> </param><param name="wmode" value="transparent"> </param><embed src="http://www.youtube.com/v/Pk7yqlTMvp8&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

This code will work, but it will throw 15 errors (see our example page for a full list of errors). Now, how do we remedy this? Very simply.

Our Example Code:<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/Pk7yqlTMvp8"><param name="movie" value="http://www.youtube.com/v/Pk7yqlTMvp8" /></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, simply replace the “Pk7yqlTMvp8″ in the code with the one provided by YouTube.

See it in action!



Want to see more about how we did this? Simply check out our example page! If you are interested in learning more about how to utilize YouTube in your business, please take a look at our sister article 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!

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!

html: how to create IE specific stylesheets

Just about everyone who has designed a web site has found that, for whatever reason, not every browser will always render their site in exactly the same way. More often than not, the culprit is one of the Internet Explorers, and typically it’s the disparity between IE 6 and 7 that causes the most issues. This technique is just as simple in code and easy to implement as it is useful, and can be adapted in several ways to suit your particular need. First, let’s start with the basics.

Step 1: Create your IE-specific stylesheet(s).

Depending on whether you need to make changes specific to only one browser (let’s say IE 6), or multiple (IE 5.5, 6, 7 are all responding differently), you may need to create more than one statement and stylesheet to accommodate your desired changes. If you aren’t positive yet whether your issues are specific to a particular version of IE, we suggest starting with one stylesheet, and moving to two (or more) if you need to.

Step 2: Create the code.

This code will be placed within the <head> portion of your web site, and ideally will go below your other stylesheet calls.

Now, here’s where we have a lot of flexibility in writing our statement. First, we’ll start with a standard statement we used on our “using simple css to create a great looking site shadow” article:<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->In this example, we are telling all IE browser versions below and including Internet Explorer 6 to load this stylesheet. Any other browser will ignore this statement and will not load ie.css.

Now, let’s cover what exactly is going on here. First, we see “lte.” This stands for “less than or equal to,” and ensures that anything less than or equal to the specified browser (in this case Internet Explorer 6) will listen to this if statement. The IE portion of the statement should be obvious, but the real key here is the number. If we were to change “6″ to “7″ in this statement, Internet Explorer 7 would suddenly choose to take notice of our statement as well.

However, if we were to change the “lte” variable to “lt,” Internet Explorer 7 would again ignore our statement. To explain this, let’s look at our variable options and what they all mean:

1. lte : less than or equal to.
If the statement is lte ie 7, then all Internet Explorer browsers, including and below IE 7 will take notice of this statement.

2. lt : less than.
If the statement is lt ie 7, then all Internet Explorer browsers BELOW IE 7 will take notice of this statement, but IE 7 itself will ignore it.

3. gte : greater than or equal to.
If the statement is gte ie 5, then all Internet Explorer browsers above and including IE 5 will take notice of this statement.

4. gt : greater than.
If the statement is gt ie 6, then only Internet Explorer 7 (and all IE browsers created subsequent to IE 7) will take notice.

Using this simple statement, you can very easily repair small glitches in your CSS code between browsers, or even show and hide messages to site visitors, depending on what browser version the visitor is using.

Note: If you have to place your statement above your standard stylesheet declaration, you may need to add the variable “!important” to the end of your stylesheet items, as browsers are designed to use the last declaration in rendering the web site. As an example, let’s say we were to create a stylesheet for our web site, and at the top we placed the following information for a Class we’ve named “examplediv.”.examplediv{margin-top:0;padding-left:10px;}Then let’s say that at or near the bottom of the same stylesheet (or on another stylesheet that we have linked below this one on our site) we had this code:.examplediv{margin-top:20px}The browser would ignore our first margin-top declaration, and would load “examplediv” width a top margin of 20 pixels. Since we didn’t add a different declaration for left padding on this second example, that original declaration is not overwritten and the browser will use the value defined at the top of the stylesheet of 10 pixels.

Compatibility:
This method applies only to the Internet Explorer browser, and can be configured to apply or not apply to the various different versions of IE. Firefox and Safari will ignore this statement.

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!






DynamiX Web Design

DynamiX Labs is Copyright © 2014 DynamiX Web Design, LLC.
DynamiX Labs is proudly powered by WordPress

Entries & Comments.  |  thanks & about.


The DynamiX Mascot button submit it! Background
hire dynamix!