DynamiX Labs » html

Thanks To Our Veterans!

DynamiXLabs — Wed, 11 Nov 2009 13:14:48 +0000

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.

We created three versions, one with a link back to this article to help others add this to their web site, a second with simply the banner, and a smaller version.

Link-Back Version:

To create a version of this banner that links to our tutorial, simply add this just below the tag on your web site:

Click Here to Show Your Support!

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day.jpg) no-repeat top center;border-bottom:1px solid #000;} #veterans a{display:block;width:100%;height:130px;} #veterans span{position:absolute;top:-999em;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

You’re Done!

No Link-Back Version:

This is the same banner, but without the link back and the “Show Your Support With This Banner!” text. Simply add this just below the tag on your web site:

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-No-Link.jpg) no-repeat top center;border-bottom:1px solid #000;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

Small Version:

This banner is just 70 pixels high, instead of the 130 pixels in the first two, and the text centers perfectly on an 800 pixel wide site. Simply add this just below the tag on your web site to use this banner:

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:70px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-Small.jpg) no-repeat top center;border-bottom:1px solid #000;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

We would love a comment on where you have used this, though it is certainly not a requirement. We would also be happy to release the original .PSD file if desired, just let us know in the comments!

A Short List Of Several Sites Already Using This Banner:
– Omni International
– Charis Hills
– DynamiX Web Design

Spread the word!

html: Validating the Tweetmeme Wordpress Plugin

DynamiXLabs — Tue, 28 Jul 2009 13:39:48 +0000

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:
ID)); ?>&chs=200x100&force=true">

REPLACE WITH:
ID)); ?>&chs=200x100&force=true" style="height:105px;width:200px;border:0;overflow:hidden">

FIND:


REPLACE WITH:


FIND:

$button .= ' frameborder="0" scrolling="no">
REPLACE WITH:

$button .= ' >
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.
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?



css: style an element with the span tag
DynamiXLabs — Tue, 21 Apr 2009 12:14:42 +0000

			

				

			
		
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.  Here’s a simple scenario: Let’s say you have a div that looks like this:
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.
We named our div “awesomediv” for this example (code below).
Here’s the HTML:

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.
And the CSS:

.awesomediv{background-color:#36c;border:3px solid #039;padding:10px;width:460px;font-size:14px;text-align:left;color:#9cf;}
It’s okay, but it’s boring. What if you want to make part of that content stand out, 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:

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.

Next, simply define that span tag within your stylesheet. Like this:

.awesomediv span{font-style:italic;font-weight:bold;color:white;}
Here’s our end result:
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.
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.
Here’s how it would have looked without the span tag:

Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures.
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.
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?



html: playing a YouTube video at a pretedermined time
DynamiXLabs — Thu, 26 Feb 2009 16:21:48 +0000

			

				

			
		
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:


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

That’s all folks!
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?



html: embedding a YouTube video WITH STYLES using xhtml strict code
DynamiXLabs — Sat, 24 May 2008 13:37:27 +0000

			

				

			
		
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.
0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"> 
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
&color1=0xe1600f&color2=0xfebd01&border=1">


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 &. The end result will look like this: 
http://www.youtube.com/v/ERuMIlyzWBA&hl=en&
color1=0xe1600f&color2=0xfebd01&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.
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?



html: creating nested lists using valid xhtml code
DynamiXLabs — Wed, 07 May 2008 12:35:49 +0000

			

				

			
		
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 
 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:

 


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



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 
 tag below the nested list, after the  tag. We’ve now changed the color of that tag to blue to show you where it gets placed.
Here’s the correct code:

 


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



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.
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?



html: resolving simple xhtml errors
DynamiXLabs — Tue, 22 Apr 2008 00:38:42 +0000

			

				

			
		
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:

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.
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.
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:

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.
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!).
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  tag, and end with a 
 tag. For an image, you will need to end the image with an ending slash, like this: />



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!
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?



html: creating clean unordered lists
DynamiXLabs — Thu, 17 Apr 2008 12:31:16 +0000

			

				

			
		
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:



This is a feature you offer.


And so is this!


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!
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?



html: embedding a YouTube video using xtml strict code
DynamiXLabs — Thu, 07 Feb 2008 23:42:48 +0000

			

				

			
		
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:  
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:
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!
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?



html: how to create IE specific stylesheets
DynamiXLabs — Wed, 23 Jan 2008 05:19:47 +0000

			

				

			
		
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  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: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!
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?