HTML - Image At The Top Of The Screen.
Hi,
How do you get an image at the top of the screen This is what I mean, Thanks. Similar TutorialsI've got the weirdest thing happening... An image on a site I'm working on doesn't appear on in Firefox on my computer when I view the site online. It's fine offline, and it's fine on other computers... including browsercam. It's also fine in IE on my system AND when I set up a guest system in VMWare I can see it in Firefox. So this probably isn't really an HTML question, just a "Have you ever seen this total weirdness?" question. I've rebooted repeatedly. The image is the photo of the sledders in the upper left corner at http://tourismwithkidsinnh.com. Dont know how to explain this but i have some flash centered in the middle of the screen and i would like to put a image that to the left and right of the centered flash im running at 1024x768, i did seem to manage this but when i tried a higher resolution the flash stopped center and the left and right image kept to the left and far right of the screen when what i wanted is the left and right image to stay flush left and right to the centered flash. Below is my code minus the left and right image, could someone help me add a image to the left and right of the centered flash, so even if the resolution is increased the left and right image will stay flush with the centered flash. HTML Code: <!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=ISO-8859-1" /> <title></title> <style type="text/css"> <!-- body { background-color: #000000; } --> </style></head> <body > <table width="770" border="0" align="center"> <tr> <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="70"> <param name="movie" value="bombay-logo-top.swf" /> <param name="quality" value="high" /> <embed src="bombay-logo-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="70"></embed> </object></td> </tr> <tr> <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="400"> <param name="movie" value="main.swf" /> <param name="quality" value="high" /> <embed src="main.swf" main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="400"></embed> </object></td> </tr> <tr> <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="100"> <param name="movie" value="time.swf" /> <param name="quality" value="high" /> <embed src="time.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="100"></embed> </object></td> </tr> </table> </body> </html> Hi all I only know very basic HTML and at the moment. I have an image that is hosted on Buzztouch. http://www.buzztouch.com/application...elfordboat.jpg Now my Question What code would I need to write so when you click on a page the image appears full screen no mater what brower you use it on. ? thanks Hi All, I need to have a wide (1984px) image centred on the screen. If the screen is only 1024px wide it always aligns left. I am probably missing something basic here but can anyone offer advice? Thankyou. Hi, I'm currently designing this website: www.carmelalopez.com and I'm trying to get the images on the left to fit the size of the browser screen on the right when you click on them. The images themselves are huge, so I'd like some kind of code that resizes the images to fit the size of the visitor's screen, which will vary from user to user. This might not be an HTML question (maybe CSS), but any guidance in the right direction would be greatly appreciated. Thank you. Hi! I'm new to this site and new to HTML so please don't bash me. I really need help with a problem I have. I have four images as my buttons and links to various pages on my site. They're rectangles that spread out horizontally on my screen. However, not all computer screens are the same size, so at school for example, since the screen is smaller, the order of my links gets messed up. Is there any way to size an image so that it is 25% of a moniter? If so, could someone just like, right the code down so I may copy? I"m really bad at html. Any help would be appreciated. Thanks! Guys, hopefully someone can give me a hand here. bear with me, Im a newbie to html yet Im an intermediate/advanced flash programmer. I learned flash but never learned html the right way and am struggling to make html entrance pages for my flash sites.. I know its usually the other way around. i learned flash first. ok, I have a website I made which is opened in a fixed window. the html index page says "enter here" and that button opens the fixed size window. that works fine. The problem is Im trying to learn the html and whenever i have an image on this index page, ( some graphics and the "enter here" button) it may look centered @ 1024 x768 but at a higher resolution ( 1280 x 1024) it will appear on the top left of the screen. I have been tinkering with dreamweaver but im really confused. I keep seeing all of these sites where everything looks aligned regarless of the screen setting. Im not sure if I should use tables , divs or whatever. i have my website logo as a jpg and some other graphics, and im not sure how to put it into the page so it always looks appropriate no matter what screen setting you are on. There is a company that makes nice websites and their entrance pages are always good. I am gonna attach the url of one of these. I notice that they always use divs, a LOT. Is thsi the right approach? and can someone look at the example and tell me how they are doing it? i dont put the url in the post becuase I do want google or other engines indexing the url to this post (for privacy) Thanks a lot url.zip I placed an image in the backround of a table on my page. It looks fine on my computer with a square monitor set at 1024x768 pix. When I viewed it on another monitor, a wide screen it displayed about half of my image to the right of where I placed it in the table. Can this be corrected so the image looks correct in all screen resolutions? Here is a link to the page in question. It's the motor in the upper left. The image name is: log2.gif http://cb750sandcastonly.com/new/ Thank You. I need to display an image (size 1024x768) in IE explorer so when i hit f11 (kiosk mode) its full screen. Then I need that image to refresh every X seconds with out flickering on the screen. The file is a bmp and is about 5mb and only will be changed a few times a day by a program I wrote in Vb.net. It will write over the existing file so the webpage would pick up the changes when it refreshes. Codes I'v tried already: Code: <html> <head> <META HTTP-EQUIV="Expires" CONTENT="-1"> <META HTTP-EQUIV="refresh" CONTENT="10;URL="meta.htm";"transition"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <style type="text/css"> html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;} body {font-family:verdana, arial, sans-serif; font-size:76%;} #background{position:absolute; z-index:1; width:100%; height:100%;} #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} #content {padding:5px 300px 20px 200px;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} </style> </head> <body> <div> <img id="background" src="View.bmp" alt="" style="position: absolute; left: 0; top: 0" width="90%" height="90%" /> </div> </body> </html> and Code: <IMG src="OR View.bmp" name="refresh" Padding="0" Width="1024" Height="768" Scrolling="0"> <SCRIPT language="JavaScript" type="text/javascript"> <!-- var t = 120 // interval in seconds image = "OR View.bmp" //name of the image function Start() { tmp = new Date(); tmp = "?"+tmp.getTime() document.images["refresh"].src = image+tmp setTimeout("Start()", t*1000) } Start(); // --> </SCRIPT> However the first one flickers and the 2nd doesnt display in full screen. Any information or even pointing me in the right direction would help. I know almost nothing about java and html =x I placed all my adsense ads into iFrames but when I resize the window small all the ads are pushed to the middle of the screen. How can I make them stay put. I tried working with divs too but it makes the ads the highest layer and it makes an invisible border stretching across the screen and I cant click anything thats in that border range. heres some of my code: <html> <head> <link rel="stylesheet" type="text/css" href="style2.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <center> <head> <title>BIO</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> </tr> </table> <!-- End ImageReady Slices --> <iframe src="/adsense.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:1173;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense2.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:-92;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense3.htm" width="728px" height="90px" frameborder="0" style="position:relative;Left:50;bottom:518" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense4.htm" width="336px" height="280px" frameborder="0" style="position:relative;Left:195;bottom:1560" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> </body> </center> </html> Hello, Problem/No Problem, I don't really know. However, it is a problem that I want to get rid off cause it completely annoys me. The problem is, I have set the body width/height to 100%, so the background image is going off screen a little. If I set the width lower, it will most likely leave a white spot in higher resolutions. I took a screenshot so you can see what I mean: Although I don't know if I am explaining correctly, I don't know how else to explain it. I'm sure you will get what I mean. Here is the method I am using in the CSS: Code: body { width: 100%; height: 100%; background: url(images/box.jpg); font-family: 'Arial'; color: white; margin: 4%; } There is no need to show the HTML, all that's there is me calling the method. Thanks in advance How the screen to divide into four parts a line? Hi, I have a very simple HTML. It has an rtl body that includes: * a left aligned table (400 width) * a ul In EE I see both of these elements inside the screen, but in FF2 the ul is displayed outside the screen! I also tried various doctypes. Any idea? Code: <html> <body dir="rtl"> <table align="left" width="400"> <tr> <td>In screen</td> </tr> </table> <ul> <li>Outside of screen in FF</li> </ul> </body> </html> TIA, Dror Hello Folks, Okay, I am trying to finally master this. I am working with a CSS Joomla layout that has some flash as main content (for images). I would like for this layout to resize based on the visitors screen size. I've played around with the % in width and so-forth. However my embedded Flash starts to scoot around the page as I change the size of the window. Can someone guide me on exactly how to do this so that "all" the info scales and stays in place. I am assuming that there will be an issue for the site getting really big if the person uses a massive screen (say 27inch plus) In that case how do you limit the size? Any help will be most appreciated. Ok, my website is best viewed at 1024x768, is there any way that i can somehow encode a popup that gives the message and an option for it to automaticaly change the screen resoloution to 1024x768? Many Thanks, Narc Hey, I made this photoshop template, and sliced it and everything, but when I open the index.html, it don't stretch across screen. Can someone help me do this? Here is the code: PHP Code: <html> <head> <title>10-1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (10-1.psd) --> <table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="15"> <img src="images/index_01.jpg" width="800" height="65" alt=""></td> </tr> <tr> <td rowspan="9"> <img src="images/index_02.jpg" width="54" height="480" alt=""></td> <td colspan="13"> <img src="images/index_03.jpg" width="685" height="2" alt=""></td> <td rowspan="10"> <img src="images/index_04.jpg" width="61" height="535" alt=""></td> </tr> <tr> <td colspan="12"> <img src="images/index_05.jpg" width="684" height="62" alt=""></td> <td rowspan="9"> <img src="images/index_06.jpg" width="1" height="533" alt=""></td> </tr> <tr> <td colspan="12"> <img src="images/index_07.jpg" width="684" height="12" alt=""></td> </tr> <tr> <td colspan="8"> <img src="images/index_08.jpg" width="432" height="1" alt=""></td> <td rowspan="3"> <img src="images/index_09.jpg" width="90" height="17" alt=""></td> <td colspan="3" rowspan="2"> <img src="images/index_10.jpg" width="162" height="2" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3"> <img src="images/index_11.jpg" width="30" height="27" alt=""></td> <td rowspan="2"> <img src="images/index_12.jpg" width="90" height="16" alt=""></td> <td colspan="3"> <img src="images/index_13.jpg" width="177" height="1" alt=""></td> <td rowspan="2"> <img src="images/index_14.jpg" width="90" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_15.jpg" width="45" height="27" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index_16.jpg" width="43" height="26" alt=""></td> <td> <img src="images/index_17.jpg" width="89" height="15" alt=""></td> <td rowspan="2"> <img src="images/index_18.jpg" width="45" height="26" alt=""></td> <td rowspan="2"> <img src="images/index_19.jpg" width="45" height="26" alt=""></td> <td> <img src="images/index_20.jpg" width="92" height="15" alt=""></td> <td rowspan="2"> <img src="images/index_21.jpg" width="25" height="26" alt=""></td> </tr> <tr> <td> <img src="images/index_22.jpg" width="90" height="11" alt=""></td> <td> <img src="images/index_23.jpg" width="89" height="11" alt=""></td> <td> <img src="images/index_24.jpg" width="90" height="11" alt=""></td> <td> <img src="images/index_25.jpg" width="90" height="11" alt=""></td> <td> <img src="images/index_26.jpg" width="92" height="11" alt=""></td> </tr> <tr> <td> <img src="images/index_27.jpg" width="1" height="22" alt=""></td> <td colspan="11" background="images/index_28.jpg" width="683" height="22" alt=""><marquee><font color="white">Welcome to conquer online website!</font></marquee></td> </tr> <tr> <td colspan="12"> <img src="images/index_29.jpg" width="684" height="354" alt=""></td> </tr> <tr> <td colspan="13"> <img src="images/index_30.jpg" width="738" height="55" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="54" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="29" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="43" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="89" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="45" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="45" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="45" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="92" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="25" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="61" height="1" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> Hi, I have made a webpage with Flash and published it in HTML. What can I do to fit it on any screen with any resolution? My page is 800x600 and I would like to have it fit to screen in both dimensions (x and y) or in one dimention on any screen. I prefer not to stretch it on screen. By stretching, the images will be deformed and I don't want it. Is there anyone who can help me in this case? What is the code and where in the HTML file should I put it? Thanks in advance! Hello, im trying to set my screen size with a div tag to 1024x768 any help would be very helpful and i'd be very thankful Hello, I wan't to make a div filled with images in one single line, overflowing out of the visible content-part. I wan't to be able to move it left to right and back using jQuery (so that part should be covered). A sprite is not an option because of the images being links (Lightbox and stuff). CSS "overflow:hidden" and "display:in-line;" don't seem to work. Please help! Hi, Im in the process of creating some tutorials to go on my website. Once i have my list i want to be able to have the links to open up a new browser window in teh most simplist way instead of the page loading in the same browser window. Also if its not that much harder i would like it to just be the tutorial which pops up and none of the browsers menu's, icons or address bar. Im not to worried about doing it this way if its juest as easy but if its more complicated then a simple open new window script will do fine. I've seen some ways of doing it with Java. is this the best way and does anyone know of a good guide or website instructing on how to do it? Thanks in advance |