HTML - Image Loading Time Before Positioning
hi
when u surf to my forum. u will see the images a real short time in a place on the screen where they should not be. right after that they are being positioned by css. surf to www.acidleague.com and all goes well, but then click on forum and u will see this issue, then u can click home-forum-home-forum to see it really clear the wierd part is that this is happening only by divs i added myself to the code i made these divs in the overal_header.html page <div id="sidebarleft"></div> <div id="sidebarright"></div> <div id="cornerleft"></div> <div id="cornerright"></div> and uses this css on em #sidebarleft { padding: 0px; float: left; margin: 0; position:absolute; width: 600px; left:-599px; top:0px; height:600px; background-image:url(http://www.acidleague.com/League/the...eader_bg.jpg); background-repeat:repeat-x; } #sidebarright { padding: 0px; float: left; margin: 0; position:absolute; width: 600px; left:999px; top:0px; height:800px; background-image:url(http://www.acidleague.com/League/the...eader_bg.jpg); background-repeat:repeat-x; } #cornerleft { padding: 0px; float: left; margin: 0; position:absolute; width: 47px; left:-46px; top:192px; height:49px; background-image:url(http://www.acidleague.com/League/the...bg/tleft.jpg); } #cornerright { padding: 0px; float: left; margin: 0; position:absolute; width: 47px; left:999px; top:192px; height:49px; background-image:url(http://www.acidleague.com/League/the...g/tright.jpg); } whats is the most common way to stop this? ty Similar TutorialsHi, 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,..... This is sort of both HTML and CSS, but I'll post it here for now. My question is: In CSS, I type the following: td.tablehead { background-image:---------; .........; .........; } Now, I will be using the "tablehead" class around 20 times on a webpage, so will the background image stated above have to load 20 TIMES, or just once, since the same image is being used? Please respond ASAP. Thanks Im having a problem i dont know if its just the loading speed, but so the image slideshow i have loads first below my tabbed info on the right, it loads beneath but then to the top, not a major issue but feels like it could be fixed, the code is here Code: <style> .peKenBurns { width: 500px; height: 330px; align: center; margin-left:6px; } </style> <script> jQuery(function($){ $(".peKenBurns").peKenburnsSlider() }) </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('jquery','1.4.3'); google.setOnLoadCallback(function() { $('#desc1 div:not(:first)').hide(); $('#tabs1 li').click(function(event){ var id = $(event.target).index(); $('.active1').removeClass('active1'); $(event.target).addClass('active1'); $('#desc1 div').hide().eq(id).show(); }); $('#desc2 div:not(:first)').hide(); $('#tabs2 li').click(function(event){ var id = $(event.target).index(); $('.active2').removeClass('active2'); $(event.target).addClass('active2'); $('#desc2 div').hide().eq(id).show(); }); $('#desc3 div:not(:first)').hide(); $('#tabs3 li').click(function(event){ var id = $(event.target).index(); $('.active3').removeClass('active3'); $(event.target).addClass('active3'); $('#desc3 div').hide().eq(id).show(); }); $('#desc4 div:not(:first)').hide(); $('#tabs4 li').click(function(event){ var id = $(event.target).index(); $('.active4').removeClass('active4'); $(event.target).addClass('active4'); $('#desc4 div').hide().eq(id).show(); }); } ); </script> <style type="text/css"> h1 { margin-left:5px; } #wrapper { width:470px; margin-left:5px; } #tabs1 { width:100%; padding:0px; margin:0px; } #tabs1 ul { padding:0px; margin:0px; width:100%; } #tabs1 li { height:50px; display:block; float:left; line-height:50px; text-align:center; background:#036; margin:0px; padding:0px; width:32.9%; color:#FFF; cursor:pointer; text-transform:uppercase; } #tabs1 li.active1 { background:#CCC; color:#000; border-bottom:1px solid #CCC; } #desc1 { width:100%; } #desc1 div { clear:left; width:100%; height:200px; } </style> <table width="100%" cellspacing="3" cellpadding="3" border="0" class="border"> <tbody> <tr> <td> <h1>Residential - Doors</h1> <a href="http://[LINKID:4]">« Back to Residential</a> <table width="100%" cellspacing="1" cellpadding="1" border="0" summary=""> <tbody> <tr> <td width="270"><!-- slider markup, 3 slides --> <div class="peKenBurns" data-mode="swipe" data-logo="disabled" data-controls="over" data-shadow="disabled"> <div class="peKb_active" data-delay="6"> <img src="images/page_content/residential_doors_sliding1.jpg"/></a> </div> <div class="peKb_active" data-delay="6"> <img src="images/page_content/residential_doors_sliding2.jpg"/></a> </div> <div class="peKb_active" data-delay="6"> <img src="images/page_content/residential_doors_sliding3.jpg"/></a> </div> <div class="peKb_active" data-delay="6"> <img src="images/page_content/residential_doors_sliding4.jpg"/></a> </div> </div> <!-- end slider markup --></td> <td> </td> <td> <h1>SLIDING WINDOWS</h1> <div id="wrapper"> <div id="tabs1"> <ul> <li class="active1">Description</li> <li>Features</li> <li>Options</li> </ul> </div> <div id="desc1"> <div> <p>Aluminum sliding windows are both functional and durable. The ultimate low maintenance window style due to few moving parts. The sliding window is a classic design that will suit most architectural styles.</p> </div> <div> <ul> <li>Choice of coloured glass & Aluminium</li> <li>Screens are fittable or removable from inside the room</li> <li>Maximum Height 1500mm</li> <li>Maximum Glass Laminate 6.38mm</li> <li>Adjustable height key locks</li> </ul> </div> <div> <ul> <li>Range up to BAL 40 for bushfire areas</li> <li>Range of glazing solutions</li> <li>External aluminium insect, safety and supascreens</li> <li>Sump sill for extreme weather conditions</li> <li>Range of standard and custom colours</li> <li>Variety of window style configurations</li> </ul> </div> </div> </div> </td> </tr> <tr> <td> </td> <td> </td> </tr> if that doesnt help go to http://www.c-view.com.au/index2.php?...ential-windows Hi I am rebuilding my new website and want to make the gallery be more accessible to change when I want to add new work. I thought I could make an XML file with sequential image names that can then be loaded when the page loads and so make changes easier. I am not a javascript or XML script writer, and was looking around the web for a solution. I could only find flash versions or this method. What I would like is a script that could read the xml file and place images and a description in divs inside a container div on my page. This would then be styled using CSS. The images placed will also need to have an associated link to a bigger image file. Does anyone know of any resources that can give good examples of this type of gallery loader? Thanks in advance http://www.nonvoicebpo.co.cc. This site consist of non voice BPO services details, at the top of the site i am calling one image , it is loading very slowly. how to load it quickly. thanks Hi All, Good Evening I am new into this forum..My question i have a .html file which are having images mentioned as absolute path.How to provide them in relative path so that when i run the same html in other machine it should run well without any disapperaing of icons. Below is the small tag code which need to be converted. Quote: <h3> <a href="#redirect"><font size=4.2 face=" Palatino Linotype" color="#9400D3">a) About Tool <img border="0" src="C:\\Forum Tool Code\\SNF Automation Executor_April20_2009\\Images\\edit.png" width="30" height="25"> </font> </a> </h3> Thanks in advance. regards, Viswanadh Hi, Want to open a window without addressbar and menubar with loading image for the button click. i want to c the loading gif right after opening the window. its very urgent anybody help me on this Thanks, Is it possible with html? i've been working on a site but each time you click the next arrow a new page loads, all the text is in the same place so it doesn't move and is even in a fixed div but due to it being a new page everything loads, the text collapses until the larger image in the center loads. Of course this is fixed when the site is cached but of course the site would only be cached once someone has clicked through it and experienced the problems 27 times... so my question is is it possible to code for when i click the next arrow only a new image from a different link to load? is this possible with html? I don't know a single thing about flash or javascript. thanks for all the help in advance here is the page in question (not done but you can still see the problems. the home and bio links well, aren't links yet) http://www.paulodourado.com/ I am trying to position 3 images above my main drop down menu at the top of my webpages. the center image has been positioned using the <center> tag. the other 2 are used as links (dont think that makes a difference but thought i would mention it) and they are posing a problem. I have only inserted one of them at the moment and I am assuming that if I can figure that out then the second will be the same. The problem is that to position the image exactly where I want it I have used absolute positioning and as im sure most of you know, that causes porblems when other users have different sized monitors or adjust the size of the window. Is there a work around or another way for me to position this acuratly? thanks in advance, heres the code i have before the drop down menu... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Doonhamer Pool League</title> <script src="dbMenu.js" type="text/javascript"> </script> <link href="global.css" type="text/css" rel="stylesheet" media="screen"> <link href="dropDown.css" type="text/css" rel="stylesheet" media="screen"> </head> <body bgcolor="000000"> <a href="albums.html"> <img STYLE="position:absolute; TOP:15px; LEFT:150px; height:105px; border:0" src="photosicon.jpg"> </a> <center> <img src="banner.gif"> <p> 1st i would like to say thank you to all those who have helped me over the last 10 days or so, i know ive really been annoying considering some posts were i suppose unnecessary, so i apologize... 2nd this will be my last annoying post for a while once i get this done im pretty much getting ready to go public after a few updates as far as text material... so heres the issue... im using this code below... now what im trying to do is overlay my image so it appears in the center of the other image but using top: 70px; left 275: px; its not going to be the same depending on how big your screen is and how big your explorer window is set to... so im wondering does any1 know anyway i can get that image to appear dead center regardless of user screen size? <center> <img src = "Best-1.gif" style="position: absolute; top: 70px; left: 275px; "> <img src="banner-top.JPG" width="100%" height="150" /> </center> you can see the results on http://www.freewebs.com/fallingrain11/22.html The new iGoogle uses a time based image where the color of the sky corresponds to the time of day eg. it is bright when it is light out and dark when it is dark out. I want to make a image for a business website that displays open when it is between certain hours and closed when it is not those hours. Any guidance on where to look or how to approach this? I've been helping a friend of mine build a website for a local group of guys that do stunt shows on motorcycles. We've got the page done for the most part, just need some tweeking here and there on most of the pages. I have a question though about the front page we've got set up. Here's a LINK. The four GIF rollover images are really turning into a problem. The only way I could figure out how to place them and have them overlapping each other was by using a Position Absolute tag. That however is causing problems depending on the end user's screen resolution, or if they've got a favorites bar or whatever docked on the browser screen. Would be HIGHLY greatful if someone could point me in the right direction of what I can do to get these images placed inside of the table, while being able to overlap them, and NOT having to deal with absolute positioning. Thanks VERY much in advance for any help! HTML Code: <a href="http://live.xbox.com/en-US/MyXbox/Profile?GamerTag=P2W360"> <img stely="position:absolute; TOP:30px; LEFT:30px; WIDTH:75px; HEIGHT:75px" src="http://i43.tinypic.com/35jibzd.pnge" /> </a> Why won't it position properly? Hey all. I am having some trouble positioning some images to the right of a paragraph using css. Can anyone help? HTML: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="../public_html/pages/nature.css"> <!-- TemplateBeginEditable name="doctitle" --> <title>Nature</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <script type="text/javascript" src="../public_html/pages/nature.js"></script> </head> <body onload="MM_preloadImages('../public_html/content/homerollover.jpg','../public_html/content/aboutrollover.jpg','../public_html/content/clientsrollover.jpg','../public_html/content/contactrollover.jpg')"> <div class="pagecontainer"> <div class="header"><img src="../public_html/content/header.jpg" alt="Header" /></div> <div class="menunav"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../public_html/content/homerollover.jpg',1)"><img src="../public_html/content/homebutton.jpg" alt="Home" name="Home" width="151" height="40" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','../public_html/content/aboutrollover.jpg',1)"><img src="../public_html/content/aboutbutton.jpg" alt="About" name="About" width="150" height="40" border="0" id="About"/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Clients','','../public_html/content/clientsrollover.jpg',1)"><img src="../public_html/content/clientsbutton.jpg" alt="Clients" name="Clients" width="150" height="40" border="0" id="Clients" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../public_html/content/contactrollover.jpg',1)"><img src="../public_html/content/contactbutton.jpg" alt="Contact" name="Contact" width="149" height="40" border="0" id="Contact" /></a> </div> <div class="content"><div class="contentheader">Lorem ipsum</div><div class="contentcontainer"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus. Donec eget tortor id pede vehicula lacinia. Nam vitae risus non neque facilisis consectetuer. Suspendisse bibendum, sem nec rhoncus laoreet, diam tortor malesuada enim, volutpat volutpat sem nisi eget nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris scelerisque. Sed ligula. Mauris neque mi, rutrum nec, luctus a, dictum nec, libero. Duis feugiat erat eget metus. Fusce non orci. Vivamus vestibulum dapibus ipsum. Nunc dictum bibendum nunc. Nam odio augue, tincidunt eget, tristique quis, varius sit amet, justo. Suspendisse sed eros.</p></div></div> <div class="footer">Footer</div> </div> </body> </html> CSS: Quote: @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; } body { padding-top: 3%; padding-bottom: 3%; background-color:#bfa494; } .pagecontainer { width: 600px; margin: auto; background:#FF0000; } .menunav { background:#8c8e73; height: 40px; } .header { background:#0000FF; height: 279px; } .content { border-left:#000000 1px solid; border-right:#000000 1px solid; border-bottom:#000000 1px solid; background:#ffffff; height: 300px; z-index:1; } .contentheader { padding:20px; color:#6c482d; font-size:20px; font-weight: bold; font-family:Arial, Helvetica, sans-serif; z-index:2; } .contentcontainer { margin-left:20px; margin-right:300px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:justify; z-index:3; } .images { padding-bottom:200px; padding-left:400px; z-index:4;} .footer { background-color:#0066CC; height:40px; } Image: http://pseudo.samcamfilms.com/temp.JPG Any help would be appreciated. I cannot seem to do this at all! Here is the code I was using for positioning: Code: <style type="text/css"> #_mainframe {position:absolute; left: 43px; top: 300px; width: 100px; height: 200px; z-index: 100 } </style> And I was using this for the iframe: Code: <IFRAME NAME="_mainframe" SRC="news.php" ALLOWTRANSPARENCY="true"> Here is the page where all of this is: http://treu-bleu.orangesarecool.com/main.html Is there another code for doing this? Any help is appreciated thanks Alright, well I have a banner centered at the top of my page, http://www.hyphygraphix.com. I want to create an image map with 2 links where is says "Add Ash" and "Add HG" to my myspace pages. I want it to relevantly move with the image if a user where to use a larger/smaller resolution or if they choose to resize the browser. (I have this problem with the iframes too but I'll ask about that in a later thread) Can someone help me out? I've placed some images on this page: http://gmjones.org/Employments.html I added text under the two images on the left by trial and error, as a result, the look out of place! What's the proper way to add text under a separately placed image via the html coding? Thanks in advance. Hi guys, I am attempting to place an image with a hyperlink to the top of the page. Currently, I am only able to position the image relative to the edge of the screen; however, I want the image to sit in a set spot, independent of the left and right edges of the screen. I wish for the image to remain in the same position on the screen when the page is scrolled. The code I am currently using is as follows: <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://i182.photobucket.com/albums/x156/Muscleox/BackToTop.png" border="0" /></a> The following image will hopefully illustrate what I am aiming to achieve: http://i182.photobucket.com/albums/x.../visualaid.gif Any help would be much appreciated. Cheers, Nautishko Hi there I am an HTML novice that can usually find the answers after some google time, not this time though. I've been searching the web for quite some time to get this done, hopefully one of you can help me out. If so, I will gladly give you credit when my little digital art project is done. Here's what I am trying to do (simplified): - I have image files (.JPGs) named 1200.jpg, 1201.jpg, 1202.jpg, 1203.jpg, 1204.jpg, etc. Each one representing a minute in the day. - Is it possibly to have a browser display 1201.jpg at 12:01, then display 1202.jpg at 12:02 and so on? Reading from the system clock. Hopefully this makes sense. Thanks for your time and, um, keep on HTML-ing. Dorron M email@dorronm.com I'm new here so forgive me if I've posted in the wrong place. I'm working with HTML. My goal is to use an image as a link but I also need to use absolute positioning for the image as well. Is there a code that combines absolute positioning of an image where the image is also a link? I've attempted to combine : <IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" SRC="---THE URL OF MY HOSTED IMAGE---"> with: <p align="center"><a href="---the URL of the link---" class="fw_link_page"></p> But I simply don't know how to do this. Any assistance would be greatly appreciated. |