Hi,
When you visit my website http://www.1tm.com you will see first when it loads a bunch of images on top of each other for the image rotator. How do I get them to not show up all at once in a bunch like that?
Thanks!
Not by CSS code.
You have three big options, each w/ its variations:
-
Reduce the size of the images by optimizing them, and even consider other formats: jpg, png. They are much heavier than they should be. Use JS code to hide the page until all resources are loaded, or use JS code to load imgs after the page has loaded the other resources. A bad option. http://developer.yahoo.com/yui/imageloader/
-
Reduce the size of the images by optimizing them, and even consider other formats: jpg, png. They are much heavier than they should be. Use AJAX to get the images as needed, as backgrounds for the div class=panel instead of them being inside anchor elements. Not that good either. jQuery
-
Reduce the size of the images by optimizing them, and even consider other formats: jpg, png. They are much heavier than they should be. Put the images as backgrounds rather than img elements. The better option.
You mean make it so you never see them all extended downwards?
If so, you have to get your CSS loaded before the images. If it’s Javascript-powered, you have to get that to load before the images, which will be tricky since the Javascript probably doesn’t run until the page is fully loaded.
Your best solution would probably be to use some CSS to make them stack up. However, be warned that if a user doesn’t have Javascript enabled they won’t see those images ever.
Yes the extended downwards. I already did CSS preload images for those images still shows like that.
Thanks for the fast reply!
Hi,
You can test if javascript is enabled and then dynamically write css to hide the images and once the page is loaded you can turn them back on again.
You should be able to find a solution here.
http://www.bobbyvandersluis.com/articles/dynamic_css/index.html
The problem with that is you would either:
a) have them hidden permanently if there was not JS (if you put the CSS in directly).
b) still have them show briefly if the JS loaded and ran after the images were loaded.
If you have the Javascript write CSS to do it (affecting a class instead of trying to get the images through ID or something), then had those images with that class it should make them be hidden right away.
How do you work that out 
You test if Javsacript is enabled right at the start in the head of the page before all other scripts and css and then the JS writes the css rule into the head tag so the elements are hidden immediately.You will not see them even briefly. If javascript is disabled then the css is not written and the images are visible.
Once the page is loaded you reveal the images with JS or by changing their class name.
The link I posted above explains all this.
Yeah.
I just wanted to make them aware that if you tried to target the images directly (via ID), it’d either fail because the images weren’t loaded at that point, or they would still show up before they hid if they waited for the document to load.
Ahh ok - sorry
I still cant find any solutions anyone got code that will work?
What the code for putting them as background images and would that work?
Thanks!
Using your code, which is an unnecessary mess:
<div style="width: 696px; position: relative; background: url('cpanel_web_hosting.gif') no-repeat scroll 0 0 transparent; height: 220px;" class="panel">
<a href="cpanel_web_hosting.html">Cheap cPanel Web Hosting</a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font face="Verdana" color="#ffffff">cPanel Web Hosting</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font face="Verdana" color="#ffffff">Free Domain Name</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font face="Verdana" color="#ffffff">Unlimited Storage Space</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font face="Verdana" color="#ffffff">Unlimited File Transfer</font></b></h3></div>
</div>
You get the jist, but the mark up you have now needs “optimization” also. Why would you absolute position the text inside, I don’t know. Let it flow normaly. Put it in a list. Use CSS to make it show the way you’re having it right now, but CSS like padding and margin, not absolute position 
Just one thing: your mark-up has redundant code, making your files heavier. Look at this sequence alone:
position: absolute; z-index: 99; left: 51px;
[...]
<font face="Verdana" color="#ffffff">[...]</font>
It’s repeated four times in four lines of mark-up, when, if using proper CSS code, not inline, it will be reduced to just one instance.
Let alone the fact that <font> should be erased.
Here’s an attempt to get you thinking:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No absolute positioned divs</title>
<style type="text/css">
div.panel {
position: relative;
width: 696px;
height: 220px;
background: url('cpanel_web_hosting.gif') no-repeat scroll 0 0 transparent;
}
</style>
</head><body>
<div class="panel">
<a href="cpanel_web_hosting.html">Cheap cPanel Web Hosting</a>
<ul>
<li>cPanel Web Hosting</li>
<li>Free Domain Name</li>
<li>Unlimited Storage Space</li>
<li>Unlimited File Transfer</li>
</ul>
</div>
</body></html>
That code does not work 
Which one? Got any more details?
I tried putting this code
<div style=“width: 696px; position: relative; background: url(‘cpanel_web_hosting.gif’) no-repeat scroll 0 0 transparent; height: 220px;” class=“panel”>
and changed the image name for each one of the images. Nothing even showed up it stopped working.
Thanks!
The below mods I’ve made with Firebug. And they work.
<div class="panel" style="width: 696px; position: relative; height: 220px; background: url('cpanel_web_hosting.gif';) repeat scroll 0% 0% transparent;">
<a href="cpanel_web_hosting.html"></a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font color="#ffffff" face="Verdana">cPanel Web Hosting</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font color="#ffffff" face="Verdana">Free Domain Name</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font color="#ffffff" face="Verdana">Unlimited Storage Space</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font color="#ffffff" face="Verdana">Unlimited File Transfer</font></b></h3></div>
</div>
<div class="panel" style="width: 696px; position: relative;">
<a href="whm_cpanel_reseller_hosting.html"><img src="whm_cpanel_reseller_hosting.gif" alt="Cheap WHM/cPanel Reseller Hosting" height="220" width="696"></a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font color="#ffffff" face="Verdana">WHM Reseller</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font color="#ffffff" face="Verdana">Resell cPanel Accounts</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font color="#ffffff" face="Verdana">Unlimited Features</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font color="#ffffff" face="Verdana">Private Name Servers</font></b></h3></div>
</div>
<div class="panel" style="width: 696px; position: relative;">
<a href="whm_cpanel_master_reseller_hosting.html"><img src="whm_cpanel_master_reseller_hosting.gif" alt="WHM/cPanel Master Reseller Hosting" height="220" width="696"></a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font color="#ffffff" face="Verdana">WHM Master Reseller</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font color="#ffffff" face="Verdana">Resell Reseller Accounts</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font color="#ffffff" face="Verdana">Unlimited Features</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font color="#ffffff" face="Verdana">Private Name Servers</font></b></h3></div>
</div>
<div class="panel" style="width: 696px; position: relative;">
<a href="whm_cpanel_alpha_reseller_hosting.html"><img src="whm_cpanel_alpha_reseller_hosting.gif" alt="WHM/cPanel Alpha Reseller Hosting" height="220" width="696"></a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font color="#ffffff" face="Verdana">WHM Alpha Reseller</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font color="#ffffff" face="Verdana">Resell Master Accounts</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font color="#ffffff" face="Verdana">Unlimited Features</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font color="#ffffff" face="Verdana">Private Name Servers</font></b></h3></div>
</div>
<div class="panel" style="width: 696px; position: relative;">
<a href="whm_cpanel_virtual_private_server.html"><img src="whm_cpanel_virtual_private_server.gif" alt="WHM/cPanel Virtual Private Server" height="220" width="696"></a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font color="#ffffff" face="Verdana">Virtual Private Server</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font color="#ffffff" face="Verdana">cPanel + Fantastico</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font color="#ffffff" face="Verdana">500 GB Storage Space</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font color="#ffffff" face="Verdana">5,000 GB File Transfer</font></b></h3></div>
</div>
<div class="panel" style="width: 696px; position: relative;">
<a href="cpanel_semi_dedicated_server.html"><img src="cpanel_semi_dedicated_server.gif" alt="cPanel Semi-Dedicated Server" height="220" width="696"></a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font color="#ffffff" face="Verdana">Semi-Dedicated Server</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font color="#ffffff" face="Verdana">cPanel + Fantastico</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font color="#ffffff" face="Verdana">500 GB Storage Space</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font color="#ffffff" face="Verdana">5,000 GB File Transfer</font></b></h3></div>
</div>
<div class="panel" style="width: 696px; position: relative;">
<a href="professional_web_design.html"><img src="professional_web_design.gif" alt="Professional Web Design" height="220" width="696"></a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font color="#ffffff" face="Verdana">Professional Web Design</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font color="#ffffff" face="Verdana">Web Design Packages</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font color="#ffffff" face="Verdana">Free Hosting & Domain</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font color="#ffffff" face="Verdana">3 Web Design Revisions</font></b></h3></div>
</div>
<div class="panel" style="width: 696px; position: relative;">
<a href="professional_script_installation.html"><img src="professional_script_installation.gif" alt="Cheap Professional Script Installation" height="220" width="696"></a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font color="#ffffff" face="Verdana">Script Installation</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font color="#ffffff" face="Verdana">Install Any Script</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font color="#ffffff" face="Verdana">PHP, MySQL, CGI, Perl</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font color="#ffffff" face="Verdana">Cheap For Multiple Scripts</font></b></h3></div>
</div>
Douse not work you can check the results here: http://www.1tm.com/index2.html
This is what you have there. Where is the background property?
<div style="width: 696px; position: relative; height: 220px;" class="panel">
<a href="cpanel_web_hosting.html"></a>
<div style="position: absolute; z-index: 99; left: 15px; top: -4px;"><h2><b><font face="Verdana" color="#ffffff">cPanel Web Hosting</font></b></h2></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 38px;"><h3><b><font face="Verdana" color="#ffffff">Free Domain Name</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 67px;"><h3><b><font face="Verdana" color="#ffffff">Unlimited Storage Space</font></b></h3></div>
<div style="position: absolute; z-index: 99; left: 51px; top: 98px;"><h3><b><font face="Verdana" color="#ffffff">Unlimited File Transfer</font></b></h3></div>
</div>
Ahh, I see. You have it written wrong:
background: url('cpanel_web_hosting.gif';)
instead of
background: url('cpanel_web_hosting.gif');
Part of it is my mistake, from the last code. That’s why you should not use inline style.
You can also try
background: url(cpanel_web_hosting.gif);
Seeing as you are using jquery already you could do this as I said above.
Move the call to the jquery file into the head of the page and then add this code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Cheap cPanel Web Hosting, WHM/cPanel Reseller Hosting, Web Design, And Script Installation by 1TM</title>
<meta name="keywords" content="cpanel web hosting, cpanel reseller hosting, cpanel virtual private server, cpanel semi-dedicated server, professional web design, professional script installation">
<meta name="description" content="1 Tech Media is the leader of cheap cPanel web hosting services, WHM / cPanel reseller hosting services, professional web design services, and professional script installation services.">
<link rel="shortcut icon" href="favicon.ico">
[B]<style type="text/css">
#photos {height:220px}
</style>
<script type="text/javascript">
if (document.getElementById) { // include all feature tests needed
// for your DOM script
document.write('<style type="text/css">.panel {display:none}</style>');
}
</script>
<script type="text/javascript" src="http://www.1tm.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".panel").show();
}
</script>[/B]
<link rel="stylesheet" href="http://www.1tm.com/web_hosting.css" type="text/css">
</head>
It’s a bit of a dirty method using document.write but at least it will not harm non javascript users.
Cool now I see what it looks like without extending. Their is still the left side edges for the images showing when it first loads. Know how to get to rid of those?
Getting close!