|
HTML - Removing The Boxes That Show Where Images Are Loading?
Hi everyone
Newbie here and nearly finished my first site - phew! I have one quick question - you know how a browser shows an outline box of the shape of an image before the image downloads, well, is there any way to get rid of it? This box disappears once the image has loaded so it is nothing to do with the "border" tag and all of my images have the height, width border="0" and alt tags completed. (I use a lot of images on the my site as I am a photographer and it looks really ugly while it is waiting for the images on a slow connection) Am happy to use html, css, java... Thanks for any help. Tre Similar TutorialsWhy do the images in the background show through the drop in box on my site? http://www.nomoreheartdiseaseandstrokes.com/ Should I put all the information within a table in the drop in box? Thanks I've tried and tried and can't figure this one out, probably VERY easy for others. I've got a table with images and I can't figure out how to remove the spacing betwen the table rows. Here is a link http://www.4wheelcustoms.com/new%20template/index.html Notice both sides of the navagation images have horizontal spacing around them. Any help is appreciated. Hello everyone. I have been given to task to create a signature template. I am pretty new to html. I am trying to remove the vertical spacing in between the website link/phone number and job title. I have sat here playing around with it for about an hour without much luck. What can I do? --------------------------------- here is the code i am using --------------------------------- <p> <strong><font color="blue">_______________________________________________</font></strong> </p> <p style="MARGIN-RIGHT: 0px" dir="ltr"> <font color="gray" size="4" face="Arial Narrow"><font color="gray"><strong>Debra Scott</strong></font>   ; <strong><font size="2">Newmarket Chamber of Commerce</font></strong> <br /> <font size="2"><strong><em>President & Ceo & nbsp;   ; <font size="1">"Leading Businesses. Leading Communities"</font></em></strong></font><font size="4"> </font></font> </p> <font color="#808080" size="4" face="Arial Narrow"></font><font color="gray" size="4" face="Arial Narrow"> <font color="#000000" face="Times New Roman"></font><font color="#000000" face="Times New Roman"><a href="http://www.newmarketchamber.ca" target="_blank"><font color="gray" size="1" face="Arial Narrow"><strong><img class="floatLeft" style="WIDTH: 20px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=296" width="36" height="34" />Newmarket Chamber Website</strong></font></a><font size="3"><font color="gray" size="1" face="Arial Narrow"><strong> <img class="floatLeft" style="WIDTH: 24px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=299" width="36" height="34" />905 898-5900 ex. 223</strong></font></font></font> <br /> <font color="#d5d500" size="3" face="Times New Roman">_______________________________________________</font></font> </p> I have had this problem on almost all the websites I've made and I'm too picky to let it go... When I make the navigation images/buttons for a website, I set the border to zero as usual and link each image to its respective page. But, when I click on the image to take me where it's supposed to, this pesky dotted border appears around the edge of the image after it has been clicked and it remains there until I click on something else on that page. (This also happens to text links when clicked, but I'm not too worried about the text links.) For the websites I've made that go to an entirely new page after an image link is clicked, the dotted line appears around the linked image after it's clicked and before the next page has loaded, but then after the new page loads the dotted line is gone. But, for websites I have built that utilize frames, because the new page that loads is in an iframe, and because the page the navigation buttons are located on never changes, the dotted border stays around the image after its been clicked and, like I mentioned earlier, doesn't go away until I click on something else on that same page. An example of this can be seen when you click the images in the navigation column along the left side of a website I built located at the following URL: http://www.djprogress1.com/ This border problem could be specific to my website browser (I use Firefox), but I am not sure. And the border could be added entirely by the browser and there may be no way to get rid of it through coding, but again, I am not sure of this. So, does anyone know if anything can be done to fix this or am I stuck with these dotted borders? Thanks, Jase Hi, I was wondering what the easiest way was to add an image loader to a cell on a table. Basically I want the user to be able to browse their images for an image file and then load that to another cell on the table. I don't have much experience with HTML but I need to learn how to do this code for one of my assignments and I couldn't find any clear tutorials on how to do it. Any help would be appreciated. I'm trying to modify the code from php fusions forum, the problem is that when users post images (using the [img] tag) and the image is big, the page layout moves to accomodate the large image, this is of course not really any good. So. I'm attempting to make large images (Bigger than 360x600) have scroll bars, so they don't damage the page layout. I've managed to get this code working, after alot of beating it around. The problem is, is that in IE an image that is smaller than 360x600 still takes up 360x600 on the page, this is of course bad. Code: <div style="max-width: 360px; width: auto !important; width: 360px; max-height: 600px; height: auto !important; height: 600px; overflow: auto;"><img src="imgurl" /></div> So, if anyone can figure out how to make this not take up 360x600 with images that are not that large, it'd be great. You can see an example of the problem by viewing this page in firefox, and IE. Firefox displays the page correctly. Hi all, I have desgiend and coded an HTML newsletter to be compatible with mobile devises however when testing this newsletter through the email marketing service the images do not load automatically. My service provided says its something with the coding and has nothing to do with the fact that I'm sending email through their service. Sidenote: when I test the newsletter and send it through my outlook via the "send page by email" in browser ...images do load automatically when I view it on my blackberry. :/ Here's a link to the page http://www.globalaerospace.com/ftp/e...012/index.html Any feedback would be greatly appreciated. I'm not so good with programming., mainly a designer Hello, I have designed sites in the past but am in need of some assistance. I am designing a website for an artist who wants to be able to offer his clients fine art prints for sale. He needs to be able prints with several different product options; i.e. canvas print with 1" stretch, 2" stretch and framed prints. I want to be able to offer check boxes (or equivalent) that will display an image of the different product options available. If the 1" stretch check box is checked I need an image of a canvas on a 1" gallery wrap frame to be displayed. If they click on the "frame" check box, I need an image of a framed painting to be displayed. What is the best method to use to accomplish this? I've researched and experimented but am at a bit of a loss. Any help will be greatly appreciated. Thank you in advance!! -John I figured i would post all of my questions in one post so here i go. 1: What is a blue box, where can i find it, and how do i use it? 2: How can i make a background image so that it fits perfectly into the background and everything else just goes over it. 3:Could someone give me a list of colors that look very good together, and some cool color schemes. 4:how do i use divs? 5:Is there a way that i can make a solid color bar and put text over it? and how can i put text over images? Hey everyone, I'm pretty new to html, and am having a problem with displaying some images. I cant seem to find any problems with the code I have, but the images wont show up in any browser. <center> <table border = "0"> <tr> <td><img src="/images/Home button.jpg" alt="Home" width="117" height="50"/></td> <td><img src="/images/apartments button.jpg" alt="apartments" width="117" height="50"/></td> <td><img src="/images/Tenant button.jpg" alt="Tenant Info" width="117" height="50"/></td> <td><img src="/images/Utilities.jpg" alt="Utilities" width="117" height="50"/></td> <td><img src="/images/About button.jpg" alt="About Us" width="117" height="50"/></td> <td><img src="/images/contact button.jpg" alt="Contact Us" width="117" height="50"/></td> </tr> </table> </center> I'm positive I have the file name and extension right, there all jpg's and all around 560KB. Help would be greatly appreciated. Thanks, Bill none of the images are showing in my table. the are specified to the correct location. anyone have any ideas why this is? Code: <table border="1" cellspacing="5" cellpadding="5">
<tr>
<td width=100px, height=80px><img scr="images/apple schnapps.jpg" width="60px" height="80px"/> <br /> Apple Schnapps</td>
<td width=100px, height=80px><img scr="images/cachaca.jpg" width="60px" height="80px"/> <br /> Cachaca</td>
<td width=100px, height=80px><img scr="images/champagne.jpg" width="60px" height="80px"/> <br /> Champagne</td>
<td width=100px, height=80px><img scr="images/Coca Cola.jpg" width="60px" height="80px"/> <br /> Coca Cola</td>
<td width=100px, height=80px><img scr="images/cranberry juice.jpg" width="60px" height="80px"/> <br /> Cranberry Juice</td>
</tr
<tr>
<td width=100px, height=80px><img scr="images/espresso.jpg" width="60px" height="80px"/> <br /> Espresso</td>
<td width=100px, height=80px><img scr="images/grapefruit juice.jpg" width="60px" height="80px"/> <br /> Grapefruit Juice</td>
<td width=100px, height=80px><img scr="images/lime juice.jpg" width="60px" height="80px"/> <br /> Lime Juice</td>
<td width=100px, height=80px><img scr="images/passion fruit juice.jpg" width="60px" height="80px"/> <br /> Passion Fruit Juice</td>
<td width=100px, height=80px><img scr="images/peach juice.jpg" width="60px" height="80px"/> <br /> Peach Juice</td>
</tr>
<tr>
<td width=100px, height=80px><img scr="images/rum.jpg" width="60px" height="80px"/> <br /> Rum</td>
<td width=100px, height=80px><img scr="images/soda water.jpg" width="60px" height="80px"/> <br /> Soda Water</td>
<td width=100px, height=80px><img scr="images/sugar.jpg" width="60px" height="80px"/> <br /> Sugar</td>
<td width=100px, height=80px><img scr="images/Vodka.jpg" width="60px" height="80px"/> <br /> Vodka</td>
</tr>
</table>
Hi, I made a test site with HTML coding as .txt, then I opened it with the browser (Internet Explorer) and looked just as I made it. However, when I paste the code in the editor of the site host (freewbs.com) it does not show my images, they just dissapear. I used this kind of code when I put the images: <TD width=300 background="examplesite_archivos/navbar1.jpg" </TD> and it works great except when I open the site with the host. I thought I should upload them somehow, but doesn`t works. It's the first time I use a host so if someone could explain me what I'm doing wrong or what's the problem?? Thanks a lot. Hi, I want to load a window with loading image on a button click. The new window is having an other content so before loading the actual content i want to disapear the loading image from the new window. I tried with html like <html> <img src=".." /> --------------------- Actual content " display:none " ----------------------- <script> actual contentid.display:block; img.display:none; </script> </html> But in this method am seing the image after some time lanching the window. i want to c the image right after launcing the window till my actual content loads. can anybody suggest something for this,..... http://www.heresmary.com I just finished uploading my site, and I noticed that when I click on a link the page loads then loads again a split second after. Does this happen to anyone else? If so can anyone give me any advice about it? I need some help removing css from some html. The reason for this, is that the html is only going to be run through a program that doesn't understand CSS, and the entire header will need to be removed. Anyway, I need the page to look the same as it does now, just without using any CSS, and it needs to be HTML 3.2. Here's the code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="content-Language" content="en-us" >
<title>osos.xml</title>
<style>
table {
border-collapse: collapse;
}
th {
border-top: 1px solid black;
border-bottom: 3px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th width="346" height="18" align="left">5. Inventory</th>
<th width="19" height="18" align="left"></th>
<th width="86" height="18" align="right">2006</th>
<th width="19" height="18" align="left"></th>
<th width="86" height="18" align="right">2005</th>
<th width="19" height="18" align="left"></th>
<th width="86" height="18" align="right">2004</th>
</tr>
<tr>
<td width="346" height="17" align="left"></td>
<td width="19" height="17" align="left"></td>
<td width="86" height="17" align="left"></td>
<td width="19" height="17" align="left"></td>
<td width="86" height="17" align="left"></td>
<td width="19" height="17" align="left"></td>
<td width="86" height="17" align="left"></td>
</tr>
<tr>
<td width="346" height="17" align="left">Office Supplies</td>
<td width="19" height="17" align="center">$</td>
<td width="86" height="17" align="right">80,915</td>
<td width="19" height="17" align="center">$</td>
<td width="86" height="17" align="right">156,757</td>
<td width="19" height="17" align="center">$</td>
<td width="86" height="17" align="right">64,732</td>
</tr>
<tr>
<td width="346" height="17" align="left">Cabinets</td>
<td width="19" height="17" align="center"></td>
<td width="86" height="17" align="right">383,115</td>
<td width="19" height="17" align="center"></td>
<td width="86" height="17" align="right">465,894</td>
<td width="19" height="17" align="center"></td>
<td width="86" height="17" align="right">306,492</td>
</tr>
<tr>
<td width="346" height="17" align="left">Computers</td>
<td width="19" height="17" align="center"></td>
<td width="86" height="17" align="right">352,703</td>
<td width="19" height="17" align="center"></td>
<td width="86" height="17" align="right">976,666</td>
<td width="19" height="17" align="center"></td>
<td width="86" height="17" align="right">282,162</td>
</tr>
<tr>
<td width="346" height="17" align="left">Communication</td>
<td width="19" height="17" align="center"></td>
<td width="86" height="17" align="right">414,458</td>
<td width="19" height="17" align="center"></td>
<td width="86" height="17" align="right">472,497</td>
<td width="19" height="17" align="center"></td>
<td width="86" height="17" align="right">331,567</td>
</tr>
<tr>
<td width="346" height="18" align="left"></td>
<th width="19" height="18" align="center">$</th>
<th width="86" height="18" align="right">1,231,191</th>
<th width="19" height="18" align="center">$</th>
<th width="86" height="18" align="right">2,071,814</th>
<th width="19" height="18" align="center">$</th>
<th width="86" height="18" align="right">984,953</th>
</tr>
</table>
</body>
</html>
Feel free to clean up any of the html. Just make sure it comes out looking like it does at the url below. http://www.linuxhardwarereview.com/inventory/index.html Hi, I've been going nuts trying to remove the gap between my banner image and the navbar underneath. I know this can be done with a table, but is there another way to make them touch? Heres the code: <p align="left"><img src="/climatebanner.jpg" alt="Climate change and global warming articles" width="1017" height="150" border="0" /> <div id="navcontainer"> <div align="center"> <ul class="bannernav1" id="navlist"> <li id="active"><a href="/climatebanner.jpg" id="current">Item one</a></li> <li><a href="/climatebanner.png">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> </div> Thanks Fred Is there a way to make the spaces in between each link in the navbar go away? becuase i need to put 2 more links and if i did it the way where i have no spaces in between it would work out perfectly, p.s. you can join the furms, lol. here is the site http://wiseones.50webs.org/index.html here is the navbar code Code: <ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="http://wiseones.jokemaster.org/" title="Spirituality Forums">Spirituality Forums</a></li>
<li><a href="spiritualityarticles.html" title="Spirituality">Spirituality</a></li>
<li><a href="religiousarticles.html" title="Religious">Religious</a></li>
<li><a href="itemsarticles.html" title="Items">Trees,Gems,Herbs,& Items</a></li>
</ul>
can someone also tell me what the ul's mean? Hi all, I'm having a problem with trying to get a table to have a tidy border. I want the border around one td cell to join the image in the cell above it, but because there is a border around the cell the border in the cell below isn't joining with the one above, there is a white gap between the two. This is the relevant code in the html file: <table class="core"> <tbody> <!-- menu --> <tr> <td width="200px"> <table class="menu"> <tbody> <tr> <td><img src="images\menuheading.jpg" alt="Mojo Menu" border="0"></td> </tr> <tr> <td class="menumain"> Link1<br> Link2<br> Link3<br> </td> </tr> </tbody> </table> </td> <!-- main body --> <td valign="top">Test Main</td> </tr> </tbody> </table> This is the code in the css file body { vertical-align: top; font-weight: normal; font-size: 12px; color: #000000; font-style: normal; font-family: Verdana; text-align: left; margin: 0; } table.headerfooter { background-color: #000066; vertical-align: top; text-align: left; border: #000066 0px solid; width: 100%; color: #FFFFFF; font-size: 10px; text-align: center; padding: 10px; } table.core { vertical-align: top; text-align: left; border: #000000 0px solid; background-color: #FFFFFF; width: 100%; padding: 10px; font-size: 12px; } table.menu { vertical-align: top; text-align: left; background-color: #FFFFFF; width: 100%; margin: 0px; padding: 0px; } td.menumain{ border-left: #000066 1px solid; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; border-right: #000066 1px solid; border-bottom: #000066 1px solid; margin: 0px; padding-top: 0px; } td.headerfooter-left { text-align: left; } td.headerfooter-right { font-size: 10px; text-align: right; } p.menubody{ color: #FFFFFF; padding: 4px; border-left: #000066 1px solid; border-right: #000066 1px solid; } Any help would be appreciated as I'm stumped! hiii. im having this difficulty on how to remove the <br> in the textarea when its not supposed to be there. for example... originally html code in the editor: <textarea style="font-family: georgia; font-size: 12px; padding: 2; background-color: transparent;" style="overflow:auto;"> Name: Email: </textarea> then once i insert that codes in the html editor and checked the preview. the results is this within the textarea: <br>Name: <br>Email: so, how do i get rid of those <br> in the textarea? im using the uni.cc domain name with the sitebuilder, by the way. not the paid domain. Hello everyone. Sorry for appearing to be another person to register with "vitally important question" and then probably never be seen again, but I think I'll be using this site to learn as much as I can about HTML. Anyway, my question is about HTML, but not for a website. It's for an iPhone widget. I don't want to advertise for any other forums or anything, but there is currently a tweak in development that allows for windows phone 7 live tiles on an iPhone. They use HTML code and as you can tell, I'm not a coder. There is a slideshow widget available that displays a random picture from a set location. I'm very new to HTML, but I have figured out quite a bit by changing a value and having a look at what it did. There is one thing that has me completely stumped though and this is what I would like to know. In the following code, it has the [Math.floor(math.random() bit. I've tried to add a 1 in the brackets, I've tried changin the random to no and false, I've tried just removing the line and I still can't get it. <html> <head> <meta name="viewport" content="width=238, user-scalable=no" /> <script> window.onload = onLoad; var array = "101|102|103|104|105|106|107|108|109|110|111|112|113|114|115|116|117|118|119|120|121|122|123|124".sp lit("|"); function onLoad(){ document.getElementById("show").src = array[Math.floor(Math.random()*array.length)] + ".png"; setTimeout(onLoad,1*200); } </script> </head> <body> <img src = "overlay.png" style = "position:absolute;top:0px;left:0px;z-index:1;"/> <img id ="show" style="position:absolute;top:-0px;left:0px;width:238px" /> </body> </html> What I want is for it to cycle through all the images in order. Any help would be greatly appreciated. THanks. |
|||||||