iFrames – How to Remove the iFrame Border

An iFrame is a great way to syndicate content (text or images) on another site. It embeds a window within the host web page whose height and width can be adjusted by the iFrame code. When embedding the iFrame it displays a border around it.

Article – How to Create an iFrame

Creating an iFrame without showing the border

Here’s a web page displaying multiple flash slide shows using several iFrames

1. The Problem

When using the same flash files and html code for each slide show on the same web page the slide shows did not work. When image.xml (one of the flash files) was renamed to image2.xml to display the next slide show, it did not appear on the page.

2. The Solution

a) To display several Flash Slide Shows on the same web page I needed to create an iFrame for each slide show. I placed all flash files for each slide show in a separate folder, named them accordingly then uploaded them to the server ie

slidehow1
slidehow2
slidehow3
slidehow4

b) I created an iFrame for each slide show with different images for each one and wrapped it in a css box. I used a css box (instead of tables) so I can easily remove the border plus add padding between each slide show.

CSS

iframe {
border: 0px solid #ffffff;
}
.central-1 {
margin-left: 140px;
position: relative;
width: 400px;
border:0px;
background-color:#fff;
}
.central {
margin-left: 140px;
position: relative;
width: 400px;
border:0px;
background-color:#fff;
padding-top:240px;
}

c) Explanation

The CSS border code above removes the border.
The first CSS box (.central-1) has no top padding because it is the first slide show that appears under the text.
The second CSS box (.central) contains padding to create space between each slide show.

XHTML


<div class="central-1"><iframe class="border" src="http://compass.ihost-websites.com/slideshow1/" width="320" height="320"
frameborder=”0? scrolling=”no” align ="left" name=”myInlineFrame”></iframe></div>

d) Benefits of creating several iFrames on the same webpage

– helps the page to load faster than if the flash code for each slide show was inserted in the web page

– easy to add more sildes to each slide show if needed

– slide shows display the same as if the flash code was actually inserted in the web page.

Free WordPress Templates Resources

Official Word Press Theme Page
http://wordpress.org/extend/themes/

Get New Themes
http://codex.wordpress.org/Using_Themes#Get_New_Themes

Word Press Theme Viewer
http://themes.wordpress.net/

10 Most Downloaded Themes
http://themes.wordpress.net/columns/1-column/3695/cloudblue-10/

Sadish Themes (person whose themes I like personally)
http://sadish.net/wordpress-themes/

AdSense Revenue Exposed
How to Turn Your Web Site’s Content Into Cash

How To Optimize Your Blog for the Search Engines

WordPress Templates – How To Select A WordPress Theme

Need to put up a blog for your business? There are hundreds of Free WordPress Templates available that will allow you to set one up very quickly without the need for customization.


[Read more...]

Free WordPress Themes – Benefits of Using Templates

Instead of spending thousands of dollars for a customized design for your wordpress blog, you might want to look through the free wordpress themes to find a template that fits your business model.


[Read more...]

10 Top Ways to Optimize Your E-commerce Web Page – Part 3

7. Header tags

Header tags are used to emphasis headings and subheadings
of your web content. Use the H1 tag for the main header and
H2 and H3 tags for the subheadings.

8. Title tag

The title tag is the most important tag within your code
because it’s what the search engines use to determine the
theme of your site. Include the main keywords that you
included in the content of your web page.

9. Meta tags

The meta tags include description and keyword tags. Even
though search engines don’t place much value in these tags
anymore, include them anyway. The description meta tag is
what appears within the search engine results pages, so
make sure you write an attractive description about your
page. This will prepare them to buy your product.

The keywords meta should include all the main keywords used
on your product page. Include approximately 20 keywords.

10. Broken links

Broken links on a page will not only frustrate your
visitors but will also prevent search engines from finding
other pages of your site. Check your site periodically
for broken links particularly if is a large one by running
it through a link checker.

W3C Link Checker
http://validator.w3.org/checklink

Conclusion

Even if you have a large site containing hundreds of
product pages, it is still worth optimizing because each
page may attract additional visitors. Visitors may enter
that page by conducting a search from a search engine. This
will increase the overall traffic to your web site and
result in selling more products.

10 Top Ways to Optimize Your E-commerce Web Page – Part 2

4. Web Accessibility

Make sure your page is web accessible. Web accessibility
means that people with disabilities can use the Web. This
includes people that have visual, auditory, physical,
speech, cognitive, and neurological disabilities. It also
includes older people with changing abilities due to aging
ie visual impairment.

Web Accessibility Tool
http://www.contentquality.com/

This online tool identifies errors in your content related
to Section 508 standards and/or the Web Content
Accessibility Guidelines (WCAG).

5. Image optimization

Large images or too many images on a page will slow the
loading time of your web page. Reduce the size by rescaling
it in your graphics software. If you need to use large
images, create a thumbnail image first then link to the
larger image.

You can also reduce the number of pixels of your image in
your software also.

Every image should include an alt tag to help identify it.

6. Content

Be sure to include content that describes the item of your
product page. Include your main keywords in the content.
Place the content at the top of the page then add the image
of your item below. Search engines tend to spider the top
of the page first.

10 Top Ways to Optimize Your E-commerce Web Page

Many e-commerce sites don’t bother to optimize their
product pages because they only contain images. This means
you will be losing out on attracting lots of extra traffic
to your web site.

Search engines spiders will only index pages that are
correctly designed and contain lots of quality content.

Here are 10 ways to optimize your e-commerce web page:

1. Professional Design

Create a design that is attractive to visitors. Make sure
the colors blend well together. Don’t use background colors
that make the text hard to read. Black text on a white
background is still the easiest to read on computer
screens.

Vischeck shows how your site will appear to color blind
people. It provides a computer simulation of the entire
process of human vision.

Vischeck
http://www.vischeck.com/

2. Simple navigation

Don’t use images as search engines only read text. Don’t
use javascript as some visitors deliberately have this
turned off on their computers.

3. Validate code

Run your e-commerce web page code through an html validator
to check for html (xhtml) errors. HTML errors will slow the indexing
of your site by search engine spiders. HTML errors will
also slow the loading of your pages. This will cause
visitors to click elsewhere as they wait for your page to
load.

W3C Markup Validation Service
http://validator.w3.org/