HTML - Making #target Overlay Frames Usable
Hi all,
i'm trying to build a page using overlay frames without using JS scripts. I already managed to get it working but it has a few problems. Page: blackphoenixlegion.net Links: Corporation or Recruitment. Technique: I have additional frames below the page via overlow:hidden, using the CSS :target pseudo class to change the X position upon a target call. Problems: 1. Should the available screen space be smaller in height than the page, then no scroll bar is shown. The page is just getting cut off. 2. The page is totally not IE compatible ofc. I figured i will have to use JS for those fixes, but thats ok ... someone who is using IE will not have problems with using JS ^^. I already added a JS script working like the :target peusodclass, but i still have two problems: - The subframe (iframe) has no transparent background - The overlay frame is getting shown, but the browser scrolls to the "hidden" area wich is just black. Similar TutorialsBut it is working in Firefox, any clue why? Here are the two codes I am trying to link: Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Three Sons Auto Body</title> <script type="text/javascript" src="finalproject.js"></script> <link href="finalproject.css" rel="stylesheet" type="text/css" /> </head> <frameset rows="250,*" border="0"> <frame src="frame1.html" scrolling="no" noresize="noresize" name="memu" /> <frame src="home.html" scrolling="yes" noresize="noresize" name="frame" /> </frameset> </html> and Code: <?xml version="1.0" encoding="UTF-8"?> <!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> <title>Three Sons Auto Body</title> <script type="text/javascript" src="javascript.js"></script> <script type="text/javascript" src="finalproject.js"></script> <link href="finalproject.css" rel="stylesheet" type="text/css"/> <base target="browser"/> </head> <!-- Your HTML tags and content should appear below this line. --> <body> <img class="banner" src="images/banner.gif" alt="banner"/><br/> <ul id="mainMenu"> <li><a href="#" onmouseover="menuOpen('menu1')" onmouseout="menuCloseTime()">Home</a> <div id="menu1" onmouseover="menuCancelCloseTime()" onmouseout="menuCloseTime()"> <a href="home.html" target="frame">Home</a> </div> </li> <li><a href="#" onmouseover="menuOpen('menu2')" onmouseout="menuCloseTime()">About Us</a> <div id="menu2" onmouseover="menuCancelCloseTime()" onmouseout="menuCloseTime()"> <a href="aboutus.html" target="frame">About Us</a> </div> </li> <li><a href="#" onmouseover="menuOpen('menu3')" onmouseout="menuCloseTime()">People</a> <div id="menu3" onmouseover="menuCancelCloseTime()" onmouseout="menuCloseTime()"> <a href="people.html" target="frame">Hierarchy of People</a> </div> </li> <li><a href="#" onmouseover="menuOpen('menu4')" onmouseout="menuCloseTime()">Accident Report</a> <div id="menu4" onmouseover="menuCancelCloseTime()" onmouseout="menuCloseTime()"> <a href="accidentform.html" target="frame">Accident Report Form</a> </div> </li> <li><a href="#" onmouseover="menuOpen('menu5')" onmouseout="menuCloseTime()">Sales Letter</a> <div id="menu5" onmouseover="menuCancelCloseTime()" onmouseout="menuCloseTime()"> <a href="salesletter.html" target="frame">Sales Letter</a> </div> </li> <li><a href="#" onmouseover="menuOpen('menu6')" onmouseout="menuCloseTime()">Contact Us</a> <div id="menu6" onmouseover="menuCancelCloseTime()" onmouseout="menuCloseTime()"> <a href="contactus.html" target="frame">Contact Us</a> </div> </li> <li><a href="#" onmouseover="menuOpen('menu7')" onmouseout="menuCloseTime()">WIN TICKETS!</a> <div id="menu7" onmouseover="menuCancelCloseTime()" onmouseout="menuCloseTime()"> <a href="finalslot.html" target="frame">Slot Machine</a> </div> </li> <li><a href="#" onmouseover="menuOpen('menu8')" onmouseout="menuCloseTime()">Accessories for Sale</a> <div id="menu8" onmouseover="menuCancelCloseTime()" onmouseout="menuCloseTime()"> <a href="finalsales.html" target="frame">Car Accessories for Sale!</a> </div> </li> <li><a href="#" onmouseover="menuOpen('menu9')" onmouseout="menuCloseTime()">Splash Page</a> <div id="menu9" onmouseover="menuCancelCloseTime()" onmouseout="menuCloseTime()"> <a href="finalproject.html" target="_top">Back to Splash Page</a> </div> </li> </ul> <div style="clear:both"></div> </body> </html> I've been working for a long while on this script, and I can't get it to work. I'm mostly doing it to learn, because I stink at HTML and pretty much any scripts.. What I'm basically trying to do is make a page with two screens on at once, like a split browser. Since I have practically no experience in HTML, I still haven't figured out how to make the top bar (address bar) stay no matter what site I am on. Help.. please? Address bar code below, may need some work Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>ItsJareds</title> <script language="javascript"> <!--// function findworld(form) { server = '<frame src="' + form.server.value + '">' document.write('<html>') document.write('<frameset cols=* rows=" frameborder=0 border=0>') document.write(server) document.write('</frameset>') document.write('</html>') } //--> </script> </head> <body bgcolor="748269"> <div style="position:fixed"> <form name="worldselector"> <TABLE WIDTH="100%"> <right> <TR> <TD valign="middle"><font color="3B5E2B" size="4"><strong>Address: </strong></font></TD> <TD valign="middle"> <input type="input" name="server" size="40"> <input type="button" value="Load Page" onclick="findworld(this.form)"> </TD> </TR> </right> </table> </form> </body> </html> Hi. This is something I have pondered on for a very long time and wish to know how to resolve. I have no idea if it is possible but I think I have seen it done before. I need a piece of code for a frame that will automatically readjust itself to the page that is targeted in the frame, but will only go so far as the parameters I set it to. To me, it sounds like a rather complicated code and I'm really not sure whether it is possible, but if it is, it would be extremely useful for forum pages that are set to be inside a webpage. What I want to achieve with this, is to have the frame to be able to extend itself inside the page, without putting a scrollbar on the actual frame. The page I have isn't actually structured with frames, so I would like to keep it that way. I have no idea if this IS possible but I would like to know. Thanks, KGB. Hello everyone I have run into a roadblock. I am trying to make a background image scale properly with Internet Explorer. I have successfully made the image fit the web browser right, using this code in a CSS class. The code I am using is as written: PHP Code: body.background { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale')"; } this code makes the background I am using work correctly in Internet Explorer. However, when I use this code, it makes the rest of the website stop working. I can no longer click on any of the links on the page, or anything of the sort. However, all my styles for the links still remain on the page. Any suggestions? Thank you all, Mitch Guzman This may be a silly question to some of you but I have never done it so here goes. I want to have my navigation menu overlay my header information, banner. Now I can do this by making the banner background but then how do I give the header its size with no actual content? Can I have the header content which is a img file be overlayed by a menu, unordered list? Thanks Hi! I have a flash website that is a little heavy (loads a little slow) so basically my idea is to create a flash intro that is light and might load fast on top of my current flash site..so that the flash intro plays while the site itself loads behind it. and then the flash intro would be done playing and disappear and will expose the main flash site behind it. I don't want to do a separate page for intro and main site though as it basically will give the same loading time. i want it to load together the main site behind at first then will be exposed after the flash intro is done. I was thinking of using z-index to put the flash intro on top white the site loads and put make the flash transparent after it's done playing.. but my i think if i do that the main site behind would not be functional(clickable) because of the overlaying object (which is only transparent) is there a way that i can make the object totally disappear after it's done playing? not just making it transparent... or is there any other way to do this? actionscript? java? anything? curtain? container? how is it possible... please help... Thanks guys. Alright, i'll give you the long and short of it. I want to be able to make a png image and using a div overlay post it as a comment on someone's myspace. For example... They have an image with them looking godlike... so I take a screenshot, do some drawing, get rid of the background and save my work as a png ---> and I post a comment on there myspace resulting in this outcome Now I know my div overlay code would look something along the lines of Code: <div style="width: 452px; height: 113px; position: absolute; top:294px; center:100px" align="center"> <img src="http://ad6storieshigh.com/myspace/messingwith/crown.png" border="0"></a> </div> But the problem is, when you post something like that myspace converts it to Code: <div .."width: 452px; height: 113px; position: absolute; top:294px; center:100px" align="center"> .. src="http://ad6storieshigh.com/myspace/messingwith/crown.png" border="0"> </div> Which is obviously a problem. So I was thinking how else I could do this. I noticed that for youtube videos you use an <object...etc...> and then an </embed> tag so I was wondering, is there a way to use the object/embed procedure to call to a file on a website that's holding my div overlay code? like if I made an html file that only had the div code in it. Or something along those lines? please adn thank youD so im trying to put a slide show in the div overly...im putting it in the right section but when i view my profile its right in the middle of the page overlapping writing etc.. how do i get it so its under that heading i put it up instead of it center? heres my code ABOUT ME: <style> body table {margin-top:-50000px;}body td table, body div table {margin-top: 0;}table, tr, td {background-color:transparent;}body div table form{display:none;}body table div form{display:block;}div table td font {visibility:hidden; }a.navbar:active, a.navbar:visited, a.navbar:link { display:none;}a.navbar:hover { display:none; }.navbar {visibility:hidden; display:none;} .userProfiledetail, .userProfileURL, .userProfileSchool, .interestsAndDetails, .friendsComments,.extendedNetwork, .latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;} a.text, table div font a, table div div {visibility:hidden;} table tr td div font {display: none;} body div table td form {display:none!important;}table, td, tr{ background-color:transparent;}td td embed, td td object {position:absolute; left:0px; top:0px; width:260px; height:47px;}td.text embed {width:260px; height:38px;}td.text embed, td.text object {width:260px; height:38px;} h1 { font-family: Time New Roman; font-size: 20pt; color: ffffff; font-weight: normal; border-bottom: 3px double; border-color: ff3399; text-align: right;} h2 { font-family: Time New Roman; font-size: 20pt; color: ffffff; font-weight: normal; border-bottom: 3px double; border-color: ff3399; text-align: left;} b { color: fff; font-weight: bold; text-transform: none;} i { color: fff; font-style: italic; font-weight: normal; text-transform: lowercase; } u {font-family: Arial; font-size: 11pt; color: fff; text-decoration: underline; border-bottom: 1px solid; border-color: ff3399;} strike { font-size: 10pt; color: fff; font-style: strikethrough; } big, small { color: fff;} textarea, select, input { font-family: Arial; color: fff; background-color: ff3399; border: 1px solid fff; letter-spacing: -1px; } blockquote { background-color: transparent; border: 1px solid; border-color: ff3399; padding: 5px;} body { background-color: 000000; background-image: url("http://cbimg6.com/layouts/08/08/30432aa.jpg"); background-repeat: repeat-y; background-position: center; scrollbar-face-color: ff3399; scrollbar-arrow-color: fff; scrollbar-track-color: 333; scrollbar-shadow-color: 000; scrollbar-highlight-color: 777; scrollbar-3dlight-color: fff; scrollbar-darkshadow-color: 000;} .navi:link, .navi:active, .navi:visited { font-family: Verdana; font-weight: normal; font-size: 8pt; color: ffffff; text-transform: uppercase; text-decoration: none; background-color: ff3399; display: block; text-align: center;} .navi:hover { font-family: Verdana; font-weight: normal; font-size: 7pt; color: ff3399; text-transform: uppercase; text-decoration: none; background-color: ffffff; display: block; text-align: center;} a:link, a:active, a:visited { font-family:Arial; font-weight: normal; font-size: 11pt; color: ff3399; text-transformation: none; text-decoration: none; background-color: none;} a:hover { font-family: Arial; font-weight: normal; font-size: 11pt; color: ffffff; text-transformation: none; text-decoration: none; background-color: ff3399;} .right {position: absolute; top: 380; left: 50%; margin-left: -143px; height:; width: 563; font-family: Arial; font-size: 12pt; color: cccccc; background-color: transparent; text-align: justify;} .left {position: absolute; top: 375; left: 50%; margin-left: -365px; height:; width: 170px; font-family: Arial; font-size: 12pt; color: cccccc; background-color: transparent; text-align: justify;} .base {position: absolute; top: 0px; left: 50%; margin-left: -497px;} </style> WHO ID LIKE TO MEET? <div class="base"><img src="http://cbimg6.com/layouts/08/08/30432ab.jpg" /></div> <div class="right"> <h1>Spotlight on me.</h1> <center><br /><img src="http://i31.tinypic.com/116nhwy.jpg" border="0" alt="Image and video hosting by TinyPic" /></a><br /></center> Best daughters in the world; <b>Allie & Stephie</b>, <u>my kids</u>; Steps Dance studio (Hip Hop Instructor) is the job; I am a dancer - i live it love it am it; dancing is a very big apart of my life that and i want to pass that same love to my girls ; Merced College is the school Nursing is the major; i <b><u>LOVE</b></u> anything PINK; I ♥ my girls; I ♥ my friends; I ♥ beer; I ♥ drinking at applebees; I ♥ Rap & R&b; I ♥ late nights; I ♥ romance movies ; I ♥ A Walk to Remember; I ♥ Tattoos; I ♥ coors light; I ♥ the RAIDERS; I ♥ my bff amanda always; I ♥ Mac Make-up; I ♥ getting my nails done; I ♥ drinking @ La Ha 2 haha<br /><br /><br /> I hate people who lie; I hate cheaters; I hate broken promise's; I hate caring so ****in much; I hate having a big heart; I hate fights; I hate onions and mushrooms; I hate clowns; I hate traffic; I hate dark beer; I hate tomatos; and that sums me up in a nut shell body <h1>Welcome To the Show.</h1> <img src="http://i38.tinypic.com/11kgl8m.jpg" align="left" /><b>Name:</b> Kelley Kellz<br /> <b>Age:</b> 24<br /> <b>Location:</b> merced; califoRnia.<br /> <b>Status:</b> call it what you want.<br /> <b>Occupation:</b> dance instructor; school.<br /> <br /><br /> <br /><br /><br /> <h1>Backstage Pass.</h1> <p style="visibility:visible;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="320" width="426" style="width:426px;height:320px" data="http://widget-af.slide.com/widgets/slideticker.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://widget-af.slide.com/widgets/slideticker.swf" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="l" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="cy=ms&il=1&channel=2666130979412675759&site=widget-af.slide.com" /> </object> under "backstage pass" thats where i want the slideshow but it wont put it under there nor under the "welcome to the show" area what am i doing wrong? Alright, I'll admit up front that while I know very bare basics of HTML, I mostly just deal with Photoshop and the like, so I'm not much of a webmaster. That being said, here's my question: I have a site split up into tables, and I would like to place a scrollable section in the middle (where I can put whatever amount of text I need), but also place a non-scrolling image behind it. Does that make sense? If not, then I could try to explain further. Any help would be great. I've heard many times "don't use frames, there is better ways to accomplish it", and I was wondering, is this just referring to "invisible" frames, or any frames? For example, look at Kingdom of Loathing. They use frames (or what appears to be frames) and I can't see how they could successfully make that site without. If I had to have all the screens scroll as one rather than separate, and couldn't resize when I needed to, it would be extremely annoying. So, frames are bad, or just the invisible ones? http://www.yandina.com/JIndex.htm Open in Firefox, Chrome or Safari - - - that is what it is supposed to look like. Open in IE and the last table get overlaid on top of the previous table. What sort of things can cause that? Additional (unrelated I think) problem, IE is not accessing cookies but others are fine. What can cause that? My site is http://www.freshpaintnyc.blogspot.com in the side bar... I embeded an RSS widget called "feedwind" under "message board". The embed code feedwind gives allows you to change the target of the RSS link once it's clicked... either in the same window or a new window "_blank". My question is... I don't want the link to open in a new window, i want it to open in the same window. except in the "main" window with the exsisting sidebar still there. the "main" or "content" div id label... how do I send that RSS link that is being fed it to open in the "left column" or main, content, etc... whatever it should be called...? I want it to look like this... http://freshpaintnyc.blogspot.com/p/...paint-nyc.html Hello, I have a site that uses iFrames and I had to remove one of the iframes to have open a javascript page in that location. By my problem is that when people go to click on the other links, it no longer opens in that main area since it no longer has a target name located with it. I was wondering if it was possible to add one or if not, is there another way? The code below is what I have and I need to be able to have a section like I do below where it has the javascript text. Thank you very much! <div id="s" style="position:absolute; top:375px; left:65px; width:690px; height:1500px; text-align:left;"><script type="text/javascript" src="url here" ></script><div align="center" class="badge" style="width:100%;"><p style="margin-top: 2px; margin-bottom: 5px;"></p></div></div> i have Code: <object type="text/html" name="menu" id="menu" width="850" height="450" border="0" data="http://174.132.130.34/~****er10/menu.html"></object> inside this file i have a java script that on mouse over it has a drop down menu now for the links in the drop down are listed like so Code: <div id="dropmenu1_d" class="dropmenudiv_d"> <a href="/about/" target="_parent">About Us</a> <a href="/about/contact.html" target="_parent">Contact Us</a> </div> when i click on the menu links they still open in the same object frame in Internet explorer ive tried _top also cant figure out y its doing it in ie any suggestions? My teacher has given me an assignment that asks me to use target, but I guess he didn't know that target doesn't validate anymore. So my lab teacher told me to look into javascript for a replacement that does because they can and will screw me on their mistake. So I just need it to work on the standard a href=" " code. ok so i'm using a CMS and I have a page created a header, a left column, and a body I'm trying to have links in the left column display information in the body when clicked however since its a CMS the body doesn't have an actual html page? i've tried <a href="xxxxx.html" target="body">xxxxx</a> However it doesn't work I'm not sure how i'm supposed to be able to link to the body...is there a way that I can label the body? hello i have used name and target thing with frames but can i use this with tables too ?? i mean like , i name different columns n rows according to my design and than can i 'target ' pages/content to some specific column or row just like we can do in frames. Hello all. I am making a page about logic gates. Anyway, I need to add a link target to the following code: Code: <center><h1 style="font-family: arial, serif; font-size:24pt; text-align:center; width: 250px; display:block; padding:5px; color:#000000; background-color:#1B3F8B; border: solid #000000 2px">The And Gate</h1> </center> This is bacause I have a pic of logic gates that I have image mapped and I want users to be able to click on a specific gate and be able to instantly jump to where that gate is on the page. I have came up with the following code to set a link target: Code: <a name="And"></a>|<font size="+2">And gate</font> The problem is that I am not sure where to place this code in the first code I posted. Can anybody help? I just searched the posts to see if anyone else has had this problem or concern, and no one had a real solution, so I just thought I'd post it again, incase the right person stumbles upon this and has the answer I need! Anyway... onto the question. I have an iframe on my site, and am using lightbox within that iframe, but want the lightbox to open up outside of the iframe... is there anyway that is possible? Thanks in advance! |