|
HTML - Cross Frame Links
Hi All, I'm pretty new to web development but seem to have come across a problem which I'm sure is easily cured ..
I'm creating a web page in html with frames and trying to get links in one frame to open a separate page in another frame. Now I've done the obvious bit to do with naming the frame and setting target etc, and it works fine when I run it in google chrome, but can't seem to get it to work in internet explorer - I'm designing it in dreamweaver if that makes any difference - any help would be great as this is the last hurdle before I finish the site! Thanks, Matt Similar TutorialsHi! I am using Dreamweaver 8 to develope my site. I have broken the page in three pieces(frames) So that the top frame shows the title, the left frame is for links that I want to show as flash movies in the right frame. I have studied the help file and I have looked on the web and I can't find an explanation that I can understand on how to do this. I believe the clickable link should be an href but I don't know how to code it. Can someone explain this to me? Thanks in Advance! Paul Hi, so I'm trying to make some links for my website that can easily be modified on all pages but I'm not sure how to go about doing it. my original plan was to use this code: <iframe src="http:///directory.html" style="border: 0" width="100%" height="50" frameborder="0" scrolling="no" target="_parent"></iframe> However from everything I've read this wont work because instead of redirecting the actual page to the correct spot it just sends the frame to that spot leaving the rest of the page the same. And apparently there is no code to make it behave the way that I want it to. So my question is what are my alternatives? I really just want one location where i can update the links, the pictures for the links etc. that way whenever I add a new link or change its location I don't have to do it for 15 other webpages. Anyway, any guidance/help especially in-depth (as I'm not very experienced) would be greatly appreciated. I am using a 3 frame page (header, menu, bottom) I have a drop down menu that is in 'Menu' titled frame and i want it to open up in another frame called 'bottom' what do i add / change in my code below. Thanks in advance. Regards Grant Code: <script>
<!--
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="bottom";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->
</script>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<form action="dummy" method="post">
<a target="_bottom">
<select name="choice" size="1" onChange="jump(this.form)"><option value="">CHOOSE A LINK</option><option value="http://www.yahoo.com*_top">YAHOO</option><option value="http://www.hotbot.com">HOTBOT</option><option value="">- - - - - - - - - -</option><option value="http://www.microsoft.com">MICROSOFT</option><option value="http://www.netscape.com">NETSCAPE</option></select></a></form>
</span>
</body>
Hi. I am trying to create a page containg 2 frames, right frame, and mainFrame. I am using the right frame to allow users to click links to remote sites browsable within the mainFrame. However, most of these sites require cookies and keep opening links in a new window. Is there a way to enable 3rd party cookies within frames, and to also disable links within the mainFrame from opening in a new window? p.s. I know Firefox allows users to use 3rd party cookies in frames. Thanks Hi there, I was wondering if anyone knows how to centre an image link in another frame (yes I know frames are bad but its an old website I am updating) i have <a href="picturelink" target="mainframe"> <img src="thumbnail" border="0"></a> I have tried everything from class="center" to editing the original frameset and the original page loaded into the window but I can't get the jpeg file to load up centred and so I was hoping someone might be able to help as I don't want to link all the pictures to seperate html documents with only a centred image in... Thanks for any help. Hey. I have a frame and inside it there is a link. I want it to target an anchor called Code: <a name="anchor"></a> that is INSIDE it's own frame. I tried Code: <a href="#anchor"> but it tries to reload the entire page, and doesn't just "jump" to the anchor like it normally would. How do I do this? Thanks Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones. So my question is: How hard is this to do? Is this something I need to hire someone to do for me? Thanks in advance for any advice! This page looks exactly like I want it to in Firefox but not in ie6 or ie7. In ie6 the fieldsets are different heights but I want them to be the same (as in firefox) and in ie7 some of the submit buttons are hidden. Can someone help me with this? Thanks... Hi, how can I design a red cross object to remove the image from the box (see image) http://dl.getdropbox.com/u/72686/closeIcon.png My idea is to position it with css on the top-right corner of a box, and it should be done easily. Am I correct ? thanks Hi all. I'm working on developing a site mostly for practice now, and I'm stumped by the prospect of cross-browser compatibility. My first inclination was to use javascript to write a stylesheet declaration for each browser type and then create each stylesheet so that it is styled for each particular browser. Then I discovered the horrendous rendering differences between even different VERSIONS of the same browsers. The most notable hiccup-fest I've encountered has been IE6 and IE7. IE6 seems to go berserk at just about every possible attribute for the div tag. This means that my styles for IE7 won't display correctly in IE6. So my question is pretty simple. Is the only way for me to make cross-browser compatibility a reality for me to create about 12 different versions of the same stylesheet? I'd really love to avoid that if possible. Alternatives would be much loved. Also, I'm currently using the XHTML 1.1 doctype. Would it be a big no-no for me to simply emphasize that my code conforms to the latest standards and any rendering errors are probably due to an out of date browser? I know this would alienate some users, but as the same time, I also feel that users should be encouraged to upgrade. Can someone take a look at my CSS and HTML and tell me why the layout lines up correctly in IE but not firefox? In IE the right side div (#content2) lines up beautifully with my header and left content div, but in firefox it is pushed to the bottom of the wrapper below the left content div. Can anyone give me a hand? Here's my CSS: PHP Code: }body { margin: 0; padding: 0; background-color: #FFFFFF; color: #000000; } #wrapper { width: 800px; background-color:#FFFFFF; position:relative; } #banner { width: 800px; height: 150px; background-color:#FFFFFF; border-style:dotted; border-width:2px; border-color:#660033; border-bottom-style:none; } #menu { width: 800px; height: 30px; background-color:#660033; color: White; padding-top: 4px; } #content { padding: 5px; float: left; width: 500px; line-height: 1.1em; text-align:justify; background-color:#FFFFFF; border-style:dotted; border-width:2px; border-color:#660033; border-top-style: none; } #content2 { padding: 5px; float:right; width: 300px; line-height: 1.4em; text-align:justify; background-color:#FFFFFF; border-style:dotted; border-width:2px; border-color:#660033; border-top-style: none; border-left-style: none; Here's the HTML to go along with it: HTML Code: <head> <link rel="stylesheet" href="layout.css"> <title></title> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </head> <body> <center> <div id="wrapper"> <div id="banner"></div> <div id="menu"><font class="menu"><a class="menu" href="meetMV.htm">link here</a> | <a class="menu" href="vid.htm"> Videos</a> | <a class="menu" href="pic.htm">link here</a> | <a class="menu" href="article.htm"> link here</a> | <a class="menu" href="coach.htm">link here</a></font></div> <div id="content"> <center><font class="header">Michael 411 Moment</font><br><font class="date">content here</font> <p><font class="content">content here</font></p></center> <hr> <center><font class="header">content here</font><br> <font class="date">By MVTL Staff 2007-01-29</font> </center> <font class="subHeader">content here</font> <p><input type="checkbox" name="opt1" id="chk1"><font class="content">content here</font><br> <input type="checkbox" NAME="opt2" id="chk2"><font class="content">content here</font><br> <input type="checkbox" NAME="opt3" ID="chk3"><font class="content">content here</font><br> <input type="checkbox" NAME="opt4" ID="chk4"><font class="content">content here</font><br> <input type="checkbox" NAME="opt3" ID="chk5"><font class="content">content here</font><br> <p><input type="submit" value="Submit" ID="Submit1" NAME="Submit1"></p> </div> <div id="content2"><font class="subHeader">Fast Fact</font><br> <font class="content">content here</font> </div> </div> </center> </body> Thanks in advance! I've been designing this site on a mac, and have tested it on several mac compatible browsers without much trouble. I just tried it on IE and a some things are messed up. http://www.jonniedredge.com First, all my images look really grainy and gross in IE (not just the ones on the home page). Anyone know why that is? Next, on the home page is a .swf file that has a black background, but the background appears white in IE. Also that .swf is in a table cell that should make up just the top corner of that main div, with a height of 50 pixels. But in IE, and FF, this cell takes up about 2/3 the height of the div. Here's my CSS in case that helps: Code: /***************Body, etc.*****************/
body {
background-color: #000000;
font-family: times, serif;
}
#container {
margin: 0 auto;
width: 750px;
padding-bottom: 5px;
/***** for layout development background-color:#FFEEEE; *******/
}
a {
text-decoration: none;
color: inherit;
}
a:visited {
color: #b0b0b5;
}
a:hover {
color: #475890;
}
.blank {
height: 100px;
}
.blank2 {
height: 50px;
}
/***************Bottom Links*****************/
.linksBot {
border: 0px;
background-color: transparent;
color: #c0c0c8;
/***background-color: #CCFF66;****/
}
p.linksBot {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a.linksBot {
color: #c0c0c8;
text-decoration: underline;
}
a.linksBot:hover {
color: #475890;
}
/***************Banner*****************/
.banner {
padding: 0px;
margin: 0px;
margin-bottom: 75px;
background-color: black;
color: #b0b0b5;
font-size: 20px;
font-family: copperplate, times, serif;
}
td.current {
text-decoration: underline;
}
/***************Home*****************/
#home {
border: 0px;
font-family: copperplate, times, serif;
}
#main {
color: #c0c0c8;
width: 750px;
font-size: 20px;
text-align: center;
outline: 3px solid #222530;
border: 0px;
}
#pno {}
#welccell {
background-color: #444550;
width: 250px;
}
#welcome {
margin: 18px;
color: #d0d0d5;
font-family: times, serif;
font-size: 17px;
text-align: left;
vertical-align: top;
}
/**************Bio*****************/
#headshot {
float: left;
margin-right: 30px;
margin-bottom: 10px;
border: 5px solid #d8d8e0;
}
#bioContainer {
background-color: #6080a2;
color: #d8d8e0;
padding: 20px;
height: 300px;
}
p.bio:first-line {
text-indent: 2em;
}
/***************Audio*****************/
#audioContainer {
margin: auto;
width: 650px;
background-color: #6080a2;
color: #d8d8e0;
padding-bottom: 7px;
padding-top: 7px;
margin-bottom: 75px;
}
.audioClips {
background-color:transparent;
margin:auto;
width: 620px;
}
caption {
font-size: 46px;
line-height: 1;
text-align: left;
font-family: copperplate, serif;
}
.sngDesc {
font-size:13px;
}
.sngDesc:first-line {
font-weight: bold;
width: 300px;
font-size:15px;
}
.sng {
text-align: right;
}
/***************Video*****************/
#vidLeft {
float: left;
width: 225px;
height: 350px;
background-color: #6080a2;
color: #d8d8e0;
margin-bottom: 75px;
}
#vidOutCont {
float: right;
width: 525px;
height: 350px;
background-color: #6080a2;
margin-bottom: 75px;
}
.vidDesc {
font-size: 12px;
margin: 15px;
margin-top: 50px;
}
p.vidDesc:first-line {
font-size: 20px;
}
embed.vid {
margin-left: 22px;
margin-right: 23px;
margin-top: 32px;
}
#vidContainer {
background-color: #333333;
margin:auto;
margin-top: 32px;
width: 480px;
height: 286px;
}
/************Contact*************/
#contactPic {
float: right;
padding: 20px;
}
#contact {
padding: 30px;
height: 280px;
background-color: #6080a2;
color: #d8d8e0;
}
Ideas? This is my first site, so sorry if I'm a little slow with it. So I've created a wordpress theme of sorts, and its not too complex, but I'm having issues making all browsers happy. http://xenserv.com/dev/ask It looks wonderful in Firefox (of course) and IE8 its pretty good as well. But IE7 is HORRID and Chrome is a bit off as well, and i've yet to try Opera. Is anyone here skilled enough to spot what I could be missing? The 3 images in the left column do not show in ie7 and the hover nav at the top isn't aligned properly. I've tried everything. Its Valid xhtml and css. Nice forum btw, I posted here after looking though many forums because this is the most active. Props Hi All - Check out www.theSalve.org/flashVid.htm - Any ideas why the layout is different in Explorer and Firefox or even Safari and Opera for that matter. I realize I'm not using CSS. Don't know how to yet. Anything I can add to make it look the same on all browsers? If you visit http://jacobkelleydesigns.com/other/SE/index.php in Safari, the menu is lined up correctly, yet in Firefox, the contact button drops below the other buttons, leading me to believe the width in the css is incorrect, but it works well in Safari. If I changed it to be wider, it'd work in firefox but not safari I'm assuming. Here is my style sheet. CSS What could be causing this? Hey Would anyone be able to help me with these cross browser bugs please? 1. FF/IE8 pagination bug Firefox: IE8: (the tiny block behaves like an extension '2' block) The CSS: Code: ul {
border:0;
margin:0;
padding:0;
}
#pagelink li {
border:0;
margin:0;
padding:0;
font-size:10px;
font-family:Arial;
list-style:none;
margin-right:2px;
}
#pagelink a {
border:solid 1px #404040;
background-color:#272727;
margin-right:2px;
}
#pagelink .previous-off,#pagelink .next-off {
border:solid 1px #404040;
color:#dbdbdb;
display:block;
float:left;
margin-right:2px;
padding:2px 3px;
}
#pagelink .next a,#pagelink .previous a {
font-weight:bold;
}
#pagelink .active {
background:#97D5E2;
color:#0e0e0e;
display:block;
float:left;
padding:2px 6px;
}
#pagelink a:link,#pagelink a:visited {
color:#dbdbdb;
display:block;
float:left;
padding:1px 5px;
text-decoration:none;
}
#pagelink a:hover {
border:solid 1px #5F5F5F;
color:#fff;
}
Thats all for now. I entitled it 'bugs' because I'm bound to find others Thank you so much in advance for your time/help! *EDIT* Seems to happen to all non-active links: I have created a web page which is running acquratey on IE8 but not running acqurately on IE7 or other version. this site secretsoffitnessrevealed.com the menu bar links show up correctly in firefox but they show up vertically in IE and the home link doesnt work all together anything that wud fix it? heres the code HTML Code: <head>
<link rel="stylesheet" type="text/css" href="http://wiseones.50webs.com/Css">
<style type="text/css">
body { margin: 0px; padding: 0px; background-position: center top;}
p { font-size: 1; }
h1 {display: block; background-color: #D1CCC6; font-size: 12pt; Text-transform: none; color: black; letter-spacing: 0px; font-family: tahoma; }
h2 {text-decoration: none; font-weight: normal; font-family: tahoma; font-size: 11pt; color: #000000; text-transform:none; }
a:link, a:visited, a:active {
text-decoration: none;
font-weight: bold;
font-family: tahoma;
font-size: 12 pt;
color: #000000;
text-transform:uppercase;
}
a:hover {
background-color: none;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
color: #1B2B00;
text-transform:uppercase;
}
</style>
<title>Isometric Exercise Secrets Revealed</title>
<meta name="description" content="Energizing Isometrics is the complete health and fitness program which can be performed in only 5 minutes a day!">
<meta name="keywords" content="health,fitness,muscle,musclebuilding,strength,abs,sixpack,fatloss,weightloss,isometrics,sports,benchpress,weights,exercise,antiaging,physicalfitness,aging,youth,flexibility,strong,power,energy,nutrician,isometricsexercise,menshealth,womenshealth,isometric,workout">
<meta name="author" content="Energizing Isometrics">
<meta name="email" content="energizingisometrics@gmail.com">
</head>
<body>
<center><div style=" width: 652 px; ">
<!--BACKGROUND-->
<font size="1">
<body background="Untitled-2.jpg">
<!--TOP BANNER-->
<img src="http://i93.photobucket.com/albums/l77/Xtron12/best-viewed-in-frefox.gif"><BR>
<center><img src="http://i42.tinypic.com/rc20sj.jpg"><BR><img src="http://i42.tinypic.com/10qmow7.jpg"></center>
<!--MENU-->
<div style="position: absolute; left: 500; top: 155px; " <a href="http://secretsoffitnessrevealed.com/index.html">Home</a> :: <a href="scienceofisometrics.html">Isometric Science</a> :: <a href="http://secretsoffitnessrevealed.com/testimonials.html">Testimonials</a> :: <a href="http://secretsoffitnessrevealed.com/buy.html">Buy</a>
</div>
<!--CONTENT BOX 76334a</div>-->
<center> <div style="float: center; width: 800px; height: 970px; background-color: #EDEDED; padding: 0px; margin: 0px 0px; "><h1>About the Program</h1>
<h2>Energizing Isometrics is a complete exercise program which can be performed in as little as 5 minutes a day! Numerous scientific studies have confirmed that the isometric principle is a valid method for enhancing musculature and overall fitness. There are many books available which teach isometric exercises, however, Energizing Isometrics is the only comprehensive program which has been developed to maximize benefits in the least amount of time.<BR><BR>
There are endless devices on the market for developing muscle and losing weight, some with price tags in the thousands. Why use valuable living space in your home, or make monthly payments for an apparatus that will eventually end up in the garage. With Energizing Isometrics, your body is the only device you need!<BR><BR>
Years of research have gone into the creation of the Energizing Isometrics program. The end result of this research is a health and fitness regimen that incorporates all the new findings and understanding about isometrics. Using the other outdated methods on the market will mean poor results and slow progress. Energizing Isometrics teaches the most up to date method of performing this type of exercise, in the most effective and efficient way. This equates to fast results with a very simple program that is easy to follow and perform.<BR><BR>Health and fitness are not as difficult (or expensive) to achieve as most think, or as the infomercials would have us believe. Energizing Isometrics reveals the unique and powerful method for improving our strength and fitness levels in only 5 minutes a day.</h2>
<BR>
<img src="http://i43.tinypic.com/jgs10h.jpg"><BR><div align="center"><a target="_blank" href="http://lightfit1.fatsecret.hop.clickbank.net">
<img border="0" src="http://www.topsecretfatlosssecret.com/images_boats/banners/topsecretfl-468x60b.gif" alt="Click here to Top Secret Fat Loss Secret" /></a></div>
<BR>
<div align="center">
<a target="_blank" href="http://lightfit1.healthebiz.hop.clickbank.net"><img border="0" src="http://www.healthbizinabox.com/images_boats/banners/healthbiab-468x60.gif" alt="Click here to go to Health Biz In A Box" /></a>
<BR><BR><BR>© 1998 - 2009
</div>
<BR><BR><BR><BR><BR>
</div></center>
</body>
Hi - Just wondering if anyone can help me figure out layout problems on the following page: www.marchgallery.com/comments.php I'm designing on a mac, and everything looks good in Safari. When I open up in Firefox, though, the comments are way below the intro text and the layout of the submission form is all messed up. I've never experienced this much difference in appearance between these two browsers. Maybe someone (nearly all of you) are viewing on PC? How does it look on that end? I'm really at a loss here. Any clues or suggestions would be much appreciated! |
|||||||