I have a template that I like and really want to use on one of my sites but am having problems. It has a small photo that I wish to replace with my own, which should be simple enough. Yet, it will not display my photo. The html tags are correct, my photo is in the correct folder, but no matter what it will not display. Now, if I rename my photo to the template photo name it displays perfectly. Why is that, what am I missing? Here is the section I am having trouble with. </div><div id="rc2"> </div></div> <div id="logo"> <h1><a href="http://www.TemplatesPerfect.com">Business5 </a></h1> <h4>By TemplatesPerfect.com</h4></div> <div id="topnews"> <h3>Today's Special </h3> <p><img src="images/business-school.jpg" alt="" width="400" height="300" />Put all your little tidbits of information or pictures in this small yet useful little area. Put all your little tidbits of information or pictures in this small yet useful little area. <a href="#">Read more</a></p> </div> The image in question is named business-school.jpg. If I replace that with the name of my photo it will not display. Rename my photo and it works. What gives, am I missing something here or maybe in the style sheet? Help!
I thought it might helpful to view the css as well. /* css by Templatesperfect.com */ body { margin: 0 0 10px 0; padding: 0; background: #333333 url(images/bg.gif); text-align: justify; font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #3b3b3b; } #wrapper { width: 1000px; margin: 0 auto; background: #ffffff; } #header { width: 1000px; height: 260px; margin: 0 auto; background:url(images/Header4.jpg) center bottom no-repeat; } #left { float: left; width: 320px; margin:5px 0 5px 6px; padding:5px; background-color:#ebf3d7; border:1px solid #cbe097; } #content { float: left; width: 640px; margin:5px 0 5px 5px; padding:5px; border:1px solid #d9d9d8; } #logo { width:400px; float:left; background:url(images/logo.png) left bottom no-repeat; margin:30px 0 0 10px; padding-bottom:10px; } #topnews { width:520px; height:140px; background:#339966; border:2px solid #006633; margin:20px 40px 20px 10px; padding:5px; float:right; background:url(images/news-bg.png) repeat-y; } #topnews p { font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#ffffff; text-align:justify; } #topnews img { float: left; margin:3px; border:2px solid #cccccc; width:160px; height:100px; } .clear{clear:both; height:0px;} #footer { height:30px; padding:10px 60px 0 0; background-color:#000000; text-align:right; } .date { font-size:11px; color:#333333; font-weight:bold; display:block; } h2 { font-size: 25px; display:inline; } #content h3 { font-size: 13px; color:#663333; display:inline; font-weight:bold; } h3{ font-size: 17px; color:#000000; display:inline; font-weight:bold; } h4 { font-size: 12px; color:#cccccc; display:inline; padding-left:105px; padding-top:5px; } p, ol, ul { line-height: 22px; } ul { margin-left: 10px; padding-left: 0; list-style: none; } ul li { width:200px; padding: 2px 0 5px 0; border-bottom:1px dotted #444444;; } ul li.first { background: none; } #content img { float: left; width:160px; height:100px; margin:8px; border:2px solid #cccccc; } h1 { padding:35px 0 0 100px; color:#ffffff; font-size: 40px; text-decoration:none; line-height:36px; margin:0px; font-weight:lighter; } h1 a { color:#ffffff; text-decoration:none; } h1 a:hover { color:#111111; text-decoration:none; } #menu { height:50px; margin-top:10px; } #rc1 {width:10px; height:50px; background-image:url(images/rc1.png); background-repeat:no-repeat; float:left;} #bg { width:940px; height:50px; background-image:url(images/linksbg.png); background-repeat:repeat-x; float:left; padding-left:40px; } #rc2 {width:10px; height:50px; background-image:url(images/rc2.png); background-repeat:no-repeat; float:left;} .toplinks { width:80px; text-align:center; float:left; height:40px; line-height:40px; font-family:tahoma; font-size:14px; font-weight:bold; margin:5px 0 0 15px; color:#ffffff; text-decoration:none; } .toplinks:hover { color:#111111; } a { color: #8d3a0d; } a:hover { text-decoration: none; color: #333333; } Anyone have any thoughts?
...looks like rc2 does not match up with business-school.jpg -- try changing the name of 'business-school.jpg' to rc2.png Good Luck!
You lost me dryeraser. Why should I do that? business-school.jpg is the image I want to replace with my own. The business-school.jpg is simple the sample photo included in the template, I should not have to change it to rc2.png to get my photo to display. What I am asking is why will this template only display a photo if it named business-school.jpg?
Because the html code is hard coded with that name for the image source. </div><div id="rc2"> </div></div> <div id="logo"> <h1><a href="http://www.TemplatesPerfect.com">Business5 </a></h1> <h4>By TemplatesPerfect.com</h4></div> <div id="topnews"> <h3>Today's Special </h3> <p>[COLOR="red"]<img src="images/business-school.jpg" alt="" width="400" height="300" />[/COLOR]Put all your little tidbits of information or pictures in this small yet useful little area. Put all your little tidbits of information or pictures in this small yet useful little area. <a href="#">Read more</a></p> </div> Code (markup): Spend some times learning about html codes will you?
I am aware of that but there is no apparent reason that I can see that the image tag cannot be changed.
What image tag do you want to change? You can have an image with filename "coldnorth.jpg", upload to your server and then change the template into; </div><div id="rc2"> </div></div> <div id="logo"> <h1><a href="http://www.TemplatesPerfect.com">Business5 </a></h1> <h4>By TemplatesPerfect.com</h4></div> <div id="topnews"> <h3>Today's Special </h3> <p><img src="images/coldnorth.jpg" alt="" width="400" height="300" />Put all your little tidbits of information or pictures in this small yet useful little area. Put all your little tidbits of information or pictures in this small yet useful little area. <a href="#">Read more</a></p> </div> Understood?
Yes, I am well aware of that, but if you would re-read my original post you will understand what I am talking about. I did that, the tag was correctly re-named, the correct jpg file was placed in the correct folder but the photo would not display. The only way it will display is if I re-name my photo to the sample photo file name in the template. To use your example I changed tag <img src="images/business-school.jpg" alt="" width="400" height="300" /> to read <img src="images/coldnorth.jpg" alt="" width="400" height="300" /> I loaded photo coldnorth.jpg into the correct folder coldnorth.jpg would not display I renamed coldnorth.jpg to business-school.jpg and put the tag back to business-school.jpg and the photo will display.
You can try this. Upload the coldnorth.jpg to your server. Access it directly from your browser. For example if you upload the photo to images folder on your public_html. It would be, http://www.yoursitename.com/images/coldnorth.jpg If your photo appear there, that's mean the photo is online and should be accessible by the template later. Now go change the image tag to this. <img src="http://www.yoursitename.com/images/coldnorth.jpg" /> Tell me how it going.
Listen, I have correctly changed the image tag and it does not work, that is the issue. It will not work on the server nor on my local computer.
You must have missing something on there, then. If you give up, just use another template. I'm trying to help but you seem do not appreciate it.
That is what I am asking, is anyone seeing anything that I am missing. I see no apparent reason that the photo will not display. I have put the tag in correctly but the photo will not display. I am not being unappreciative but you are being somewhat arrogant. Why is this conservation reminding me of the Monty Python Dead Parrot sketch?
lol ...change business-school.jpg to the image you want to replace it with -- make sure that image is located in the same place on your server where business-school.jpg is located...right click, copy the image location address and change it in your code. I hope that's not confusing :-\
Apparently, I'm not making myself clear. I have done that and it does not work. The only thing that has worked is leaving the code as it was originally written in the template and changing the file to the sample photo name.
ok, look guys this is how the code was orignally written in the template and it displayed the sample photo just fine. </div><div id="rc2"> </div></div> <div id="logo"> <h1><a href="http://www.TemplatesPerfect.com">Business5 </a></h1> <h4>By TemplatesPerfect.com</h4></div> <div id="topnews"> <h3>Today's Special </h3> <p><img src="images/business-school.jpg" alt="" width="400" height="300" />Put all your little tidbits of information or pictures in this small yet useful little area. Put all your little tidbits of information or pictures in this small yet useful little area. <a href="#">Read more</a></p> </div> I changed it to the following and placed my photo in the correct location, and it did not work. </div><div id="rc2"> </div></div> <div id="logo"> <h1><a href="http://www.TemplatesPerfect.com">Business5 </a></h1> <h4>By TemplatesPerfect.com</h4></div> <div id="topnews"> <h3>Today's Special </h3> <p><img src="images/my photo.jpg" alt="" width="400" height="300" />Put all your little tidbits of information or pictures in this small yet useful little area. Put all your little tidbits of information or pictures in this small yet useful little area. <a href="#">Read more</a></p> </div> So, I changed it back to the following and renamed "My Photo.jpg" to "business-school.jpg" and it worked. It displayed my re-named photo. Now, why would this be, what am I missing? </div><div id="rc2"> </div></div> <div id="logo"> <h1><a href="http://www.TemplatesPerfect.com">Business5 </a></h1> <h4>By TemplatesPerfect.com</h4></div> <div id="topnews"> <h3>Today's Special </h3> <p><img src="images/business-school.jpg" alt="" width="400" height="300" />Put all your little tidbits of information or pictures in this small yet useful little area. Put all your little tidbits of information or pictures in this small yet useful little area. <a href="#">Read more</a></p> </div>
and if everything checks out but the image still wont show...then its a permissions problem. You got permission to display that photo? chmod i mean.
Have you tried clearing your browser's cache and restarting your browser afterwords? The browser may have it saved as the original filename. Also your host or your ISP may have cached the page for faster loading, making you only able to view it as that single filename.
Not a permissions problem, will not display on my computer or server. Does not seem to be the photo itself. In fact it is still on my camera and downloaded it again, same results. Tried MIE and Chrome, nothing. This is very puzzling and frustrating and for the life of me I cannot find the problem. I look at the code and cannot find a single reason why it will not work.