|
HTML - Positioning Iframes Over Image Map
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 Similar Tutorials1st 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 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> 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? 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? 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. 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! 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. 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 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. Hey, i am currently working on a site and trying to position a image of a leaf on the corner of a div. The site is: http://luminaskincare.ca/new/ I want it to look like this: http://luminaskincare.ca/new/whatiwant.png Any help would be appreciated thanks. Hello i have a simple site with a background color, and image and a scrolling text box. What is the appropriate code to position the box using the image as the reference point, not the corner of the screen so the text always goes to the same spot on the screen. Code: <div align="center"><img src="EA-vendorapplicationimage.jpg" alt="Eclectic Affinity Vendor Information Form - Become an Eclectic Affinity WHole Sale Vendor" align="absmiddle"></div> <body> <div class="ss-base-body" dir="ltr"> <div style=" overflow:auto; position:absolute; height:509px; width: 698px; top:172px; left:241px;"> The code above works to keep the box in one location, but that location is from the top left of the screen which is only useful if everyone used the same screen. Thanks 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 Okay, well this is the raw website: http://www.shuushuubuttons.com/index2.html I have three iframes there...but when you bring the browser window in and out (using your mouse) the top frame gets eaten up by the bottom ones. Is there any way to 'lock' the top and left frame so it doesn't change size. I put in the 'noresize' tag, but that didn't seem to make any difference. Any help would be appreciated! Take a look at my html, maybe I've done the tags wrong. Thanks! Hi, I have a dynamic table which is updated on a form submission. I am trying to update the table without a page refresh so that the form doesn't reset itself back to its default settings thus avoiding the user constantly having to change the fields each time they enter a record. I was thinking of using an iFrame as this looks like a good and relatively easy way to achieve this. Can someone please tell me how I can place a table within an iFrame and refresh just the Iframe contents on the form submission. I hope someone can please help with the code. Thanks Simon I'm using frames now and I really don't like it. Can you change it to iframes? The problem is, at the top row, when some one clicks a link button it takes you to the link but only keeps in it on the top page. Here's the frameset notepad: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>PokeCosmo -The future of pokemon</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <frameset rows="20%,80%"> <frame img border="0" src="column.html"> <frameset cols="20%,80%"> <frame src="framerow.html"> <frame src="column6.html"> </frameset> <noframes> <p>This frameset document contains:</p> <ul> <li><a href="#">Row_1 contents</a></li> <li><a href="#">Row_2 column_1 contents</a></li> <li><a href="#">Row_2 column_2 contents</a></li> </ul> </noframes> </frameset> <div id="footer"> <div>PokйCosmo.com © 2007. All rights reserved.</div> The second column: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" > <html lang="en"> <head> <title>PokCosmo</title> <base href="http://www.pokecosmo.com/"> <meta name="keywords" content="pokemon, online pokemon, pokemon articles, netbattle tutorials, pokemon projects, pokemon forums, pokemon community, pokemon pokedex, battle competitor, netbattle, pokemon netbattle, pokemon art, pokemon fanart, pokemon diamond and pearl,free, pokemon ruby and saphire, pokemon emerald, pokemon ruby, pokemon saphire, pokemon cheat codes, pokemon hacks."> <meta name="robots" content="PokйCosmo Front Page 4.0"> <link rel="stylesheet" media="all" type="text/css" href="default.css"> <link rel="alternate stylesheet" type="text/css" media="all" title="style1" href="style1.css"> <link rel="alternate stylesheet" type="text/css" media="all" title="style2" href="style2.css"> <style type='text/css'> body { background-image : url('!--Post link here--!'); } </style> <script src="styleswitch.js" type="text/javascript"> </script> <body bgcolor="black"> <head> <style type="text/css"> h1 {color: silver} </style> </head> <body> <img align="top" src="http://img340.imageshack.us/img340/3342/diamondandpearlcs3.png"><h1> Pokemon Diamond and Pearl- In stores Now!!! <img align="left" src="http://img249.imageshack.us/img249/953/diamondyr4.jpg"> <img align="right" src="http://img522.imageshack.us/img522/4228/pearlrd5.jpg"> <div>PokйCosmo.com © 2007. All rights reserved.</div> <a align="bottom" href="http://www.pokecosmo.com">Home</a> | <a href="http://www.pokecosmo.com/forums">Forums</a> | <a href="netbattle">Pokemon Netbattle</a> | <a href="pokemonol>Online RPG</a> | <a href="pokedex">PokeDex</a> | <a href="contact">Contact Us</a> | <a href="affiliates">Affiliates</a>| <a href="copyright">Copyright</a>|<a href="content">Content rating</a> </div> <!--Affiliation partners=pokeelite2000,psypokes.com--> The sucky first column: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" > <html lang="en"> <head> <title>PokCosmo</title> <base href="http://www.pokecosmo.com/"> <meta name="keywords" content="pokemon, online pokemon, pokemon articles, netbattle tutorials, pokemon projects, pokemon forums, pokemon community, pokemon pokedex, battle competitor, netbattle, pokemon netbattle, pokemon art, pokemon fanart, pokemon diamond and pearl,free, pokemon ruby and saphire, pokemon emerald, pokemon ruby, pokemon saphire, pokemon cheat codes, pokemon hacks."> <meta name="robots" content="PokйCosmo Front Page 4.0"> <link rel="stylesheet" media="all" type="text/css" href="default.css"> <link rel="alternate stylesheet" type="text/css" media="all" title="style1" href="style1.css"> <link rel="alternate stylesheet" type="text/css" media="all" title="style2" href="style2.css"> <style type='text/css'> body { background-image : url('http://img294.imageshack.us/img294/7408/siteiz8'); } </style> <script src="styleswitch.js" type="text/javascript"> </script> <body bgcolor="gray" text="red"> <div id="left_side"> <div id="left_side_menus"> <img src="http://img238.imageshack.us/img238/3926/sitefv0.png"> <ul> <li><a href="contact">Contact</a></li> <li><a href="history">History</a></li> <li><a href="main">Main</a></li> </ul> <img src="http://img265.imageshack.us/img265/2431/projectsxy3.png"> <ul> <li><a href="pokemononline">POL RPG</a></li> <li><a href="netbattle">Competitor</a></li> <li><a href="graphics">Graphic Projects</a></li> </ul> <img src="http://img299.imageshack.us/img299/6435/downloadswk7.png"> <ul> <li><a href="downloadrpg">POL RPG</a></li> <li><a href="downloadnetbattle">Netbattle</a></li> </ul> <img src="http://img293.imageshack.us/img293/395/communityuo0.png"> <ul> <li><a href="forum/Login.php">Login</a></li> <li><a href="forum/register.php">Free Registration</a></li> <li><a href="forum/showthread.php?p=thread.php">Forum Rules</a></li> <li><a href="forum/reportabuse.php">Report Abuse</a></li> </ul> The crappy row: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>A simple two rows, two columns frameset document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="black" <a href="www.pokecosmo.com"><img align="left"src="http://img152.imageshack.us/img152/5646/pokecosmosett2.png"></a> <a align="right" href="www.pokecosmo.com/pokegames"><img border="0" src="http://img523.imageshack.us/img523/7470/pokemongamesfz9.gif"></a> <a href="www.pokecosmo.com/projects"><img border="0"src="http://img511.imageshack.us/img511/6365/projectsjv5.gif"></a> <a href="www.pokecosmo.com/pokedex"><img border="0"src="http://img525.imageshack.us/img525/1631/pokedexqc0.gif"></a> <a href="www.pokecosmo.com/netbattle"><img border="0"src="http://img525.imageshack.us/img525/2083/netbattlemp1.gif"></a> <a href="www.pokecosmo.com/forums"><img border="0"src="http://img153.imageshack.us/img153/3989/forumsgc0.gif"></a> and if you could, for the second column could you change the text(expect for the heading) orange and much much smaller? Hello! I'm trying to get iFrames to work in my HTML for my Twitch streaming profile. Here is the coding for the HTML. HTML Code:
<html>
<head>
<title>Twitch Info Html</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">
<!-- Save for Web Slices (Twitch Info Html.psd) -->
<table id="Table_01" width="630" height="724" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://runaru.webs.com/images/Twitch-Info-Html_01.png" width="630" height="71" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="http://runaru.webs.com/images/Twitch-Info-Html_02.png" width="12" height="653" alt=""></td>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_03.png" width="605" height="175" alt=""></td>
<td rowspan="6">
<img src="http://runaru.webs.com/images/Twitch-Info-Html_04.png" width="13" height="653" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_05.png" width="605" height="75" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_06.png" width="605" height="165" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_07.png" width="605" height="77" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_08.png" width="605" height="143" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_09.png" width="605" height="18" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<!-- --><script type="text/javascript" src="http://static.websimages.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script></body>
</html>
I was wondering if anyone could tell me how I can get text over the boxes, so that the text somewhat overlays the image, and doesn't leave a white box. Here... I don't know how to explain this, but I'm having a problem with IFrames. Check out the link: http://www.freewebs.com/noeylani94/index.htm I want all three of them lined up horizontally This is a bit complicated but I'll try to explain it as best as I can. I am trying to create a site which will contain information on a fairly large number of topics. In an effort to avoid creating a large number of pages to contain each topic I would like, if possible, to use one page with an iframe and load the topics into the iframe. These topics will come from external pages. The iframe would look similar to this : <iframe id="topic1" style="background-color:#ffffff" height="1000" width="970px" marginwidth="0" marginheight="0" frameborder="0" scrolling="yes" src="http://someothersite.com/externalpage/"></iframe> Since you can't use variables in html the problem, of course, is how to be able to change the src=" " in the iframe in order to be able to change topics (load a different external page). I am looking for suggestions on how this might be done if it is indeed possible. Any help would be very much appreciated. Thanks Can you make me 3 frames? 1. On the left side[Want it to be 20% of the site's width] which will have the general links. 2. One on the right side[80% of the width] 3. One on the top[20% of the height] They can be totally blank, I'll enter the content myself. Thank you. hi all... I am working with iframes on a website I am designing. My question is this... If users scroll all the way to the bottom of the page and click a link, how do you restore the index page all the way to the top, while loading the requested page within the iframe? |
|||||||