|
HTML - Iframe Navigation Bar Help
Hi there, I'm new to this forum so please let me know if I make any mistakes.
I'm semi-literate in HTML and a little CSS, I've been coding small, very simple websites for 8 years or so, so I wanted to try something new for a friend's website. I'm making a website for a friend, and so I made a layout (I'm also a graphic artist) and sliced it in photoshop, then began assembling it using iframes. This is my first time using iframes, but I feel like I've caught on to the general idea now. I don't have an error I need help with, rather, I would like to know how I can use iframes to make the navigation bar on the right change with each new page. At the moment the top navigation buttons each open a new page within the main body of the website, each using iframes. I want to code it so as each new page is opened within the main body, the right side navigation bar (which consists of simply text links) changes with it. This is so the top can have links for the very main pages of the website, and the right side bar can have links for sub-pages within those main pages. The website is he http://lyericcosplay.webs.com/index.htm I can post the code or any other information you may need to help me. I'm also happy to use something other than iframes if it works for the right navigation bar, however I think I'm correct in using iframes for the main pages because it runs quite smoothly, and just how I want it to Thanks so much for reading! Similar TutorialsHi all, I was wondering if someone could help me out with a bit of coding. I am trying to build a static navigation the, when clicked, will change the HTML page in an iFrame. When clicking on one of the links in the navigation, it has a background image which changes depending on what page is loaded, but if you refresh the page, the first link in the navigation has the background image and when clicking on the others, it brings it up behind them until you click on the first one again. I will post my code below incase I am explaining this poorly. Another thing I wanted to know is that when I refresh the page, the navigation sets back to Home instead of being on Location or something else yet the iFrames content is still set to Location or something. Is there a way (without PHP) that I can save this so that when the page has been refreshed, it will stay on the correct link/page? HTML Code: <script language="JavaScript" type="text/javascript">
var Lst;
function CngClass(obj){
if (Lst) Lst.className='';
obj.className='On';
Lst=obj;
}
/*]]>*/
</script>
HTML Code: <div id="navWrapper">
<div id="globalNav">
<ul>
<li class="On" onclick="CngClass(this);"><a href="iframes/home.html" target="content_iframe">Home</a></li>
<li class="" onclick="CngClass(this);"><a href="iframes/location.html" target="content_iframe">Location</a></li>
<li class="" onclick="CngClass(this);"><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
<li class="" onclick="CngClass(this);"><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
<li class="" onclick="CngClass(this);"><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
<li class="" onclick="CngClass(this);"><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
<li class="" onclick="CngClass(this);"><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
</ul>
</div>
<div id="localNav"></div>
</div>
HTML Code: <iframe width="967" name="content_iframe" id="content_iframe" src="iframes/home.html" scrolling="no" frameborder="0" onLoad="calcHeight();"></iframe> Any help on this would be great! If I have to use PHP as well, would someone point me in the right direction of how I can set it up as I have only used PHP once and that was just plain data capture. Many thanks, Charlie I've searched and searched but i havnt found anything on this, basically im making a client a site that they want to be able to edit themselves after im done with it. Im using a drop down menu but if they want to add a link to one of the menus they dont want to have to go thru every 100+ page. To solve this problem i have put the header on index.html and made an iframe for the other content. First, is there anyother suggestions you guys have? 2nd, for somereason or another sometimes the content puts an extra break where there isnt one in the content page, like the iframe works, but theres is annoying extra space, and i just want everything to line up smack with the nav bar thats on top. also, the iframe is 800 px i made verrry sure that the content was less than 800 pixels but it still scrolls left and right!! is there a way to disable the x-scroll in an iframe?? Thanks, -James I have this script HTML Code: onchange="window.open(this.options[this.selectedIndex].value,'myIFrame')">
<option>Choose a destination for your IFrame!</option>
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.altavista.com/">ALTAVISTA</option>
<option value="http://www.amazon.com/">AMAZON</option>
<option value="http://artlung.com/">ARTLUNG</option>
</select>
</form>
<iframe src="http://joecrawford.com/" name="myIFrame" width="400" height="200">
You can't see this because your browser does not support iframes.
</iframe>
in this script we see Yahoo, Google,amazon etc in the drop down. But i don't want to have a drop down, instead i want users to type as Yahoo, Google etc and i frame opes in in the page. When an user types an invalid key. it should show a separate link, where in i would keep something showing invalid how to do it? I have 2 IFrames on a page. I am going to end up with a long list of shows to catch-up on. Is there a way I can embed an IFrame with the list, and when you click on a show, you it will change the Playing Show http://tiny.cc/catchup <---The page I am referring to. hi, i've a very simple html page, where i have an iframe. The problem is that i want to add some text below the iframe. however, my text keeps showing up on the right hand side of the iframe. i've looked at the tutorials discussing the tags available for iframe, but surprisingly, none seem to relevant to this. Code: <html> <body> <table border="0" cellspacing="10"> <table border="0" cellpadding="0" cellspacing="0" align="left"> <td valign="top"> <iframe src="mySource.jsp" height="700" width="600" frameborder="0" scrolling="auto"></iframe> </td> </table> This should be displayed below the iframe but actually gets displayed on the right </body> </html> any help / guidance in this will be much appreciated. thanks in advance! Now here is my problem. I'm not familiar with other laguages then html and a little bit of javascript and I wanted to make a site for me and my brothers photography company. I currently using dreamweaver and have figured out the way I want to make this site. I tried using ordinary frames, but I want the website to be aligned in the middle and I could make that happen. That is why I went into iframes and a regular table on the index page. My problem now is that I have several iFrames and I want a link from one to open in another. http://www.trans4mind.com/personal_d...e/iframes3.htm here is a link for this to happen, and the simple solution is to name the frame and then target the link. but I have tried that and when the link is from one iframe to another it won't work. If the link is on the index page and target the iframe then it works. Do you have any idea why this happens? I know it's possible since the link above does it. Hi! I've been cracking my head trying to solve this: How can I insert a iframe [i.e. 300x200px] inside of another iframe [i.e. 700x500px] and pull different web content n each one? kind of concentric iframes or like a 'Donut iframe' Hi, I know basic html and I am trying to make a simple website for myself. I just can't get the navigation bar at the top of the page to display correctly. Look he pacificnewsnow.com/index2.htm I want to get the 2nd line of the navigation right under the 1st one. I've tried a table and it comes out like this: http://pacificnewsnow.com/index3.htm (The image for the 2 line of the nav bar will be different, but for now, it's just the same.) So, for a professional example of what I'm looking to do, look at this website: katu.com Thank you! Can someone please tell me how to make the navigation and the line right to the right of the navigation as seen here on this site: http://www.girlsnightoutmusic.com/ Thanks! Howdy, I have a navigation bar at the top of every page on a website. This nav bar contains several links, and they are the same on each page. The problem is, the urls they reference often need to be changed. And editing a bunch of documents every time this happens seems like needless work. Is there a way I can make the links in this nav bar reference some CSS document or some such thing, which contains the actual links? Thanks for your time, - A noobie. I initially had my website on freewebs.com, and used the code <!--#include virtual="/nav.shtml" --> for the navigation on each html page. I've now found a host and am trying to transfer all the pages over, however I can't seem to get the navigation sorted. The navigation should be on the left of this page - http://broadcast.tcg-publicity.org/about.html I really don't know why it's not working, as I haven't changed anything or edited any of the files. And the files are definitely in the right folder. This is the current index, and you can see that the correct file is there - http://broadcast.tcg-publicity.org/ Does anyone know what could be wrong?? Im currently working on a site offline but i want to have it when you hover over the navigation it switches to an image! Let Me Explain I made buttons in photoshop but when you hover over them i want it to change to another image! im going to give you an example! this is before i hover over my navigation this is what i want it to change to when i hover over it! thanks in advance! I built a nice little tabbed navigation and it works great in firefox and safari and displays perfectly fine in IE 6 but for some reasons my rollovers don't work. I'm not too sure as to why, everything seems fine to me... but apparently not to Internet Explorer. I've attached my code below and you can see an example of the nav here. (I don't have IE7 installed so if someone can take a look at it in that and let me know if it works or not that would be awesome!) 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=utf-8" />
<title>Untitled Document</title>
<!--[if IE]><link rel="stylesheet" media="screen" type="text/css" href="css/htc.css" /><![endif]-->
<style type="text/css" media="screen">
* { margin: 0; padding: 0; }
body { background: #999; }
#tab_wrap { width: 328px; background: #fff; }
#tab_wrap h1 { margin: 0 0 1px 0; width: 328px; height: 37px; background: #44c2fd url(images/header_reviews.png) no-repeat 0 0; text-indent: -2800px; }
#tab_wrap ul { width: 328px; height: 31px; list-style-type: none; }
#tab_wrap ul li { display: block; float: left; }
#tab_wrap a { display: block; width: 55px; height: 31px; text-indent: -2800px; }
#tab_wrap a:hover { background-position: 0 -31px; }
#tab_wrap a.last { width: 53px; }
#tab_wrap a.current { background-position: 0 -31px; }
#music { background: #44c2fd url(images/tab_nav_music.png) no-repeat 0 0; }
#film { background: #44c2fd url(images/tab_nav_film.png) no-repeat 0 0; }
#dvd { background: #44c2fd url(images/tab_nav_dvd.png) no-repeat 0 0; }
#media { background: #44c2fd url(images/tab_nav_media.png) no-repeat 0 0; }
#games { background: #44c2fd url(images/tab_nav_games.png) no-repeat 0 0; }
#gear { background: #44c2fd url(images/tab_nav_gear.png) no-repeat 0 0; }
</style>
</head>
<body>
<div id="tab_wrap">
<h1>Reviews</h1>
<ul>
<li><a id="music" class="current" title="Music Reviews">Music</a></li>
<li><a href="#" id="film" title="Film Reviews">Film</a></li>
<li><a href="#" id="dvd" title="DVD Reviews">DVD</a></li>
<li><a href="#" id="media" title="Media Reviews">Media</a></li>
<li><a href="#" id="games" title="Games Reviews">Games</a></li>
<li><a href="#" id="gear" class="last" title="Gear Reviews">Gear</a></li>
</ul>
</div>
</body>
</html>
hi guys, I am creating a site and i want to have sub navigation. here is a link to what i got so far http://renttheweb.com/cah/ and here is the code Code: #sidebar
{
float: left;
width: 225px;
background-color:#ffffff;
}
#sidebar ul
{
margin:0;
padding:0;
list-style:none;
}
#sidebar ul ul
{
margin:1em 0;
padding:0 1em;
}
#sidebar ul ul ul
{
margin:0.3em 0;
padding:0 0.5em;
}
#sidebar form
{
margin:1em 0;
padding:0 1em;
}
#sidebar h2
{
margin:0;
padding:0;
font-size:1.1em;
}
i got the sub nav working but i want it hidden until the parent link is clicked and then it will expand and show the sub pages under that link. any ideas? CC_DESIGN I was wondering how i could do a navigation like this one with out using flash. I dont know java but only html. Please can someone help me? Here is what im looking for: http://nexon.net I just need the navigation part. I am new to html and web designing. I have an idea for a Navigation Bar but I do not know if its possible or if its been done before. My idea is for a horizontal Nav Bar with a green background. As the visitor puts his or her cursor over the link, a lightning bolt appears from the left side and extends to the right to where the cursor is located. When the cursor moves to the links on the right side it extends, and to the left it retracts. The lightning design will be above the green background but behind the text of the link. Has this ever been done before, if so where can I find it? If not, how can I make one just like it? Are there any navigation generators or 3rd party applications that have pre-set options to allow this as well? Hi there, I am currently working on a website for the school I work at. The website requires a drop down menu that has some submenus to it. Since the site it going to be rather large, I decided to create a div for the navbar where I would use an SSI file. This would allow me to change the navbar in one place rather than on 25 pages. I have created the navbar in Fireworks, and have set up the properties for each button. I have altered the paths to the images so that they appear properly (see http://www.prestigeinteractive.com/wmems2/index.shtml ), I place the references to the js and css file in the shtml file where the menu is loaded and the paths are correct to the best of my knowledge. The problem I am facing is when the page is viewed, the drop down menu appears fifty or so pixels above where they should appear. I am not sure if I've done this correctly. Please view my work at http://www.prestigeinteractive.com/wmems2/index.shtml The files have been uploaded to this thread, as they are too long to cut and paste. Thanks for any help you can give. Greg Basicly, the problem is when you resize the window to the site, the navigation bar moves frome the place it is suppose to be, and stretches; this throws off the whole layout of the site when the window is resized by anyone(it needs to stay in with the background but it's not) Any help will be great!!!!! Hi im currently re designing my site and would like a navigation bar similar to the one at http://spundoogle.com/skyserpent/GoogleX/ i just dont know where to begin though please help Hi people, I'm taking care of my web site but I would like to improve it with your help as I'm a bit of an ignorant with html and stuff. The navigation bar I've created is actually not a real navigation bar I believe. Every time you change page the bar reloads with the new page, you know what I mean? See for yourself http://www.clorinde.org/clorinde/index.htm How can I fix this so the loading of the pafe would be smoother and faster? Would you be able to provide me some codes? Thanks! |
|||||||