HTML - Novice Question - Links Won't Work
Similar TutorialsHello, im working on a small website project for me and my coworkers, none of us are very good with HTML and i'm trying to figure out something that I am sure is probably a simple thing to people that know this stuff. I have two forms, "box1" and "box 2", and I want both of the inputs to save to a text file when the person entering hits "submit". I'd also like the "submit" button to redirect to another page following the saving of the inputs to the text file... i'd apprecate any help you can give me Ive been searching google for a while but its just confusing me. How do I figure out the lenght of the page (content, not browser window) so that I can make all of my regions line up at the bottom? I noticed that % in the height attribute is related to the window not content. I have also tried auto, but that is different for different content. My page has an outside region, a left nav bar and a content region, and I don't know how to make the bottom line up without tables. Sorry if this is confusing. Thanks in advance. Hi, I've been going through my codes over and over again but I juz figure out why it won't work this time round for the links. Normally, when I type the html reference inside the ahref, the notepad plus plus will show red but this time it doesn't. When I try to click on the link it won't work as well. Hope someone can tell me why. tks. [html code] <img src="singapore.jpg" alt="Skyscraper" width="700" height="300" hspace="5" name="Rotate"/> <table align ="left" width= 70%> <td width ="30%><a href="BuildGoodNcolor.html">Home</a></td> <td width ="30%><a href="=P-D.html">Projects</a></td> <td width ="30%><a href="PD.comenquiry.html">Enquiry</a></td> <td width ="35%><a href="P-D.html">Contact</a></td></table> [/html code] css : a:link { color: #336699; } a:visited { color: #660033; } a:hover { color: #000000; } Site: http://therivals.summerhost.info Relevant Pages/Files: index.shtml nav.shtml style.css Problem(s): On the side navigation bar, hovering over the 'links' doesn't do anything (even though the stylesheet is supposed to change the background colour/font colour. Clicking also does nothing. I've run both homepage and stylesheet through the W3C Validator and the only errors it comes up with are to do with the ad my host automatically puts at the bottom of each page and CSS3. Interestingly, you cannot highlight anything on the page except that ad. If it's relevant, I've used SSIs to add the code for the navigation bar onto each page. I've tested the site in IE8, Firefox 3.6.19 and Chrome 8.0.552.224. It only works in IE (). It also works when opening the files offline in all the browsers and when using XAMPP. I have absolutely no idea what's gone and would appreciate any helpful input . Hello everyone, Im making a website (obviously haha) and the links in a div dont want to work. A piece of text + link works A picture + link doesnt work This div is the header (inc. sepirate logo, name and menu buttons) Below the header div I made a slideshow (which works perfectly (also in a div)) Below the slideshow I made div's in a div with brands of companies + links (which DO work) It doesnt matter if I delete all div's in the header and just put a pic in the header div... the link with that pic still wont work. the link DOES work in expressionweb (ctrl+click) but does NOT work when I put the site online OR test it in any browser (chrome, firefox, IE) 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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .style1 { text-align: center; } .style2 { border-width: 0px; } .style4 { text-align: right; color: #C0C0C0; font-size: x-small; } </style> </head> <body> <div style="position: relative; width: 800px; z-index: 1; left: 0px; top: 0px; margin-right: auto; margin-left: auto; font-family: Calibri, 'times New Roman', Arial;" id="wrapper"> <div style="position: relative; width: 800px; z-index: 5; left: 0px; top: 0px; height: 785px;" id="new wrapper"> <div style="position: relative; width: 800px; height: 300px; z-index: 1; float: left" id="Header"> <a href="http://www.google.nl/">peterpan</a></div> <div style="position: relative; width: 700px; height: 300px; z-index: 2; margin: 20px 50px 20px 50px; float: left" id="Slideshow"> <script language="JavaScript1.2"> var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['images/slideshow/trollblogo.png', 'http://www.trollbeads.nl/', ''] variableslide[1]=['images/slideshow/trollbeads1.jpg', 'http://www.trollbeads.nl/', ''] variableslide[2]=['images/slideshow/trollbeads2.jpg', 'http://www.trollbeads.nl/', ''] variableslide[3]=['images/slideshow/trollbeads3.jpg', 'http://www.trollbeads.nl/', ''] variableslide[4]=['images/slideshow/trollbeads4.jpg', 'http://www.trollbeads.nl/', ''] variableslide[5]=['images/slideshow/trollbeads5.jpg', 'http://www.trollbeads.nl/', ''] variableslide[6]=['images/slideshow/rosendlogo.png', 'http://www.rosendahl-watches.com/', ''] variableslide[7]=['images/slideshow/rosendahl1.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[8]=['images/slideshow/rosendahl2.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[9]=['images/slideshow/rosendahl3.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[10]=['images/slideshow/trollblogo.png', 'http://www.trollbeads.nl/', ''] variableslide[11]=['images/slideshow/trollbeads6.jpg', 'http://www.trollbeads.nl/', ''] variableslide[12]=['images/slideshow/trollbeads7.jpg', 'http://www.trollbeads.nl/', ''] variableslide[13]=['images/slideshow/trollbeads8.jpg', 'http://www.trollbeads.nl/', ''] variableslide[14]=['images/slideshow/trollbeads9.jpg', 'http://www.trollbeads.nl/', ''] variableslide[15]=['images/slideshow/rosendlogo.png', 'http://www.rosendahl-watches.com/', ''] variableslide[16]=['images/slideshow/rosendahl4.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[17]=['images/slideshow/rosendahl5.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[18]=['images/slideshow/rosendahl6.jpg', 'http://www.rosendahl-watches.com/', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='700px' //set to width of LARGEST image in your slideshow var slideheight='300px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#FFFFFF' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider </script> <ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer> </div> <div style="position: relative; width: 800px; height: 400px; z-index: 3; margin: 5px 0px 50px 0px; float: left" id="Merken"> <div style="position: relative; width: 200px; height: 125px; z-index: 1; float: left;" id="layer1" class="style1"> <a href="http://www.eclat.nl/" target="_blank"> <img alt="Eclat" src="images/MainPage/Eclat.png" width="175" height="100" class="style2" style="float: left" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 2; float: left;" id="layer2" class="style1"> <a href="http://www.trollbeads.nl/" target="_blank"> <img alt="Trollbeads" src="images/MainPage/Trollbeads.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 3; float: left;" id="layer3" class="style1"> <a href="http://www.policecitylife.nl/" target="_blank"> <img alt="Police" src="images/MainPage/Police.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 4; float: left" id="layer11" class="style1"> <a href="http://www.rosendahl-watches.com/" target="_blank"> <img alt="Rosendahl" src="images/MainPage/Rosendahl.png" width="175" height="100" class="style2" style="float: right" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 5; float: left" id="layer12" class="style1"> <a href="http://www.jpc.nl/boccia/" target="_blank"> <img alt="Boccia" src="images/MainPage/Boccia.png" width="175" height="100" class="style2" style="float: left" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 6; float: left" id="layer13" class="style1"> <a href="http://www.jeh-collection.nl/" target="_blank"> <img alt="Jeh" src="images/MainPage/Jeh.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 7; float: left" id="layer14" class="style1"> <a href="http://www.danishdesignwatches.eu/" target="_blank"> <img alt="Danish Design" src="images/MainPage/DanishDesign.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 8; float: left" id="layer15" class="style1"> <a href="http://www.rabinovich.nl/" target="_blank"> <img alt="Rabinovich" src="images/MainPage/rabinovich.png" width="175" height="100" class="style2" style="float: right" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 9; float: left" id="layer16" class="style1"> <a href="http://www.cliccreations.nl/" target="_blank"> <img alt="Clic" src="images/MainPage/Clic.png" width="175" height="100" class="style2" style="float: left" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 10; float: left" id="layer17" class="style1"> <a href="http://otracosa.ch/" target="_blank"> <img alt="Otracosa" src="images/MainPage/otracosa.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 11; float: left" id="layer18" class="style1"> <a href="http://www.stepbystep.ch/" target="_blank"> <img alt="Step By Step" src="images/MainPage/StepByStep.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 12; float: left" id="layer19" class="style1"> <a href="http://www.mobach-groothandel.nl/" target="_blank"> <img alt="Mobach" src="images/MainPage/Mobach.png" width="175" height="100" class="style2" style="float: right" /></a></div> </div> </div> <div class="style4"> Made by Ferdi Bour<br /> ________________</div> </div> </body> </html> In the header is text at this moment with a link. Again, this link DOES work. But as soon as I input an image + link (internal or external doesnt matter) it doesnt work Also interactive buttons I put in the dont work, doesnt so anything Thanks in advance for any solution! Ferdi Bour For some reason, the main navigation links in this site don't work in Safari 3.1 and latest version of Firefox. They work in IE 6 though. Can't figure it out. http://wcwfc.com/blog/ No matter what I do no kind of links work. In this code for an instance the picture link dont work: Code: <html><head><title>a website</title> </head> <body topmargin="0" bottommargin="0" style="background-color: rgb(0, 0, 0);"> <center> <table heigh="" cellpadding="0" cellspacing="0" width="800"> <tbody> <tr> <td colspan="2" background="images/lbar.png" height="500" width="38"></td> <td valign="top"> <table cellpadding="0" cellspacing="0" height="631"> <tbody> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0" height="450"> <tbody> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0"> <tbody> </tbody> </table> </td> <td valign="top"> <table cellpadding="0" cellspacing="0" height="460" width="535"> <tbody> <tr> </tr> <tr> <td valign="top"><font color="#ff9900" face="Verdana, Arial, Helvetica, sans-serif" size="-1"> <A HREF="whatever\whatever.html"><IMG SRC="whatever/whatever.gif" ></A> </font></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td valign="bottom"><img src="blabla/blabla1.png"></td> </tr> </tbody> </table> </td> <td colspan="2" background="blabla/blabla2.png" height="500" width="38"></td> </tr> </tbody> </table> </center> <div style="font-size: 0.8em; text-align: center; margin-top: 1em; margin-bottom: 1em;"> <br> </div> </body></html> Simple problem: I have a site with domain http://www.mask.com On the index page of this domain, I want to redirect to www.real.com while cloaking the URL. So I use this: Code: <html> <head> <title>Sob</title> <frameset rows="100%"> <frame src="http://real.com"> </frameset> <noframes> <body>Please follow <a href="http://www.real.com">link</a>!</body> </noframes> </head> </html> This works fine. On real.com, I want to link to real2.html, say, and I want this link cloaked as well. So I instead link to another page, mask2.html, which has the same code as above, but this time redirects to real2.html. The whole point is I need to cloak ALL my links. But when the link (to mask2.html) is clicked, I get a "Page not found" error. However, if I copy the exact address into my browser, it does what it's supposed to and goes to real2.html. I had the impression that it had something to do with frames in frames. I've been trying different targets for my <a href> -- i.e. target="self" or target="_blank", but neither works. Any idea? Hi there I have a navigation bar on the site im building, but when im in screen resolution 800x600 two of the links do not work, they become unclickable. Here is the html code for one of the pages: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="EN-GB"> <link rel="stylesheet" type="text/css" href="styles4.css"> <title>Kabasa Guest House and Restaurant</title> <meta name="author" content="xxxxx"> <meta name="description" content="xxxx"> <meta name="copyright" content="2011"> <meta name="keywords" content="xxxxx"> </head> <body> <ul id="navbar"> <li><a href="home5.html">HOME</a></li> <li><a href="menu4.html">MENU</a></li> <li><a href="room4.html">ROOMS</a></li> <li><a href="rates2.html">RATES</a></li> <li><a href="book.html">BOOK</a></li> </ul> <div id="header"> <h1 align="center">Kabasa Guest House and Restaurant</h1> <div id="address"> <pre> xxxxxxx xxxx xxxx 0000000 </pre> </div> </div> <h3>Rates</h3> <div id="rates"> <pre> <u>Our Rates are as follows:</u> <b>Single rooms:</b> Self contained complete with breakfast at only kshs 1500 ($17)<br /> <b>Double rooms:</b> Self contained complete with breakfast at only Ksh 2500 ($28)<br /> <b>Double rooms twin rooms:</b> Self contained complete with breakfast at only Ksh 2500 ($28)<br /> <b>Lunch and dinner</b> is also available at very affordable rates. See our restaurant section for more details.<br /> <b>Our aim </b>is to provide the best service both to local and international clients at the most economical rates. </pre> </div> </body> </html> CSS code: Code: #navbar li { list-style-type: none; background-color: #CCFFFF; margin: -1%; margin-top: 2%; position: relative; top: 20px; left: -6px; padding: 1px; width: 12%; font-size: 20px; } #navbar a:hover { color: #000; background: #fff; } body { font-family:Lucida Grande,Tahoma,Helvetica; font-size:11pt; color:#000066; background:#ffffcc; } h3 { position: relative; top: 15%; left: 45%; } h4 { position:absolute; top: 10%; left: 40%; } h5 { position:absolute; top: 14%; left: 36%; } h6 { position: absolute; margin: auto; left:0; right:0; top: 37%; width: 520px; } #address { position: absolute; margin: auto; left:0; right:0; font-weight: bold; font-size: 10pt; font-family: arial, sans-serif; width: 182px; } #header { position: absolute; margin: auto; left:0; right:0; top: 2%; width: 800px; } p { position:absolute; top: 53%; left: 5%; } pre { margin: 8px 8px; clear:both; z-index: 2; background-color:white; filter: alpha(opacity=75); opacity: 0.75; } #rates { position:absolute; top: 50%; left: 4%; width: 85%; } When in 1440 x 900 all the links work fine. The two links that stop working in 800x600 are Home and Menu. Any ideas on what could cause this? Many thanks Jackie 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. Hi Guys, Here is my website: -family unfriendly link removed- I downloaded this site template somewhere and finished it with all my pictures and stuff. May. Hi, pretty new to HTML, any help would be greatly appreciated. My links back to my home page etc e.g. my menu links that link to my root folder work fine in IE but when I try opening them in firefox or Flock none of my links work including my link to my CSS style Sheet. Heres an example of my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Anime</title> <link rel="stylesheet" type="text/css" href=" /anime2.css"/> </head> <body> <div class="header"> <div class="logo"> <a href="/Anime.html"> <img src="/anime.png" alt-"Anime Hub" style="border-style:none"/> </a> </div> </div> <div class="menu"> <ul> <li> <a href="/anime.html"> Home </a> </li> <li> <a href="/animenews.html"> News </a> </li> <li> <a href="/animes.html"> Animes </a> </li> <li> <a href="/animepreviews.html"> Previews </a> </li> <li> <a href="/animeblog.html"> Blog </a> </li> <li> <a href="/animeforums.html"> Forums </a> </li> </ul> </div> Im using a forward slash for the link to search in my root folder, if I use ../../ to go back two folders it seems to work, but this is tedious and I am sure there must be another way. Please Help Thanks in advance I'm an HTML novice in desperate need of an HTML expert. I paid a guy a lot of money to convert my website over from a Microsoft server to a Linux server and the results were mixed. The text links work in Internet Explorer but not in Firefox. http://www.colorado-carpet-masters.com/carpetcleaningBoulder.php I tried taking them out of a table with no luck. For some reason Firefox reads the links as regular HTML instead of a Hyperlink. Strange ey, IE working like it's supposed to.. while FF just site there.... please note - the header and the navigation do work in all browsers, its the title's and images that dont work correctly in FF. Anyways, have a look at the site here, and try to figure it out. Kinda strange, it used to work, ever since i moved the mySQL database it broke in FF thanks hey guys on my website i am going to play music and so that the music will continue to play and not restart while the viewers are browsing, i have made it so that u stay on the same page and the iframe will change when u click on the links i am going to have the sidebar change for different pages so the sidebar is also an iframe. the links on the sidebar are actually javascript links so that they will adjust the height of the body iframe and change the src my website is HERE! this website works beautifully in internet explorer, but in safari the sidebar is useless can anyone tell me why? THIS IS THE CODE FOR THE IFRAMES HTML Code: <td class="sidebar"> <img src="http://ryanhollis.webs.com/icons/sidebar1.png" alt="" width="200" height="46"/><br class="pic"/> <iframe src="sidebar.html" height="200" width="150" class="sidebar" id="sidebar" scrolling="no" frameborder="0" allowtransparency="true"></iframe> <img src="http://ryanhollis.webs.com/icons/sidebar3.png" alt="" width="200" height="46"/> </td> <td class="text" rowspan="2"> <img src="http://ryanhollis.webs.com/icons/body1.png" alt="" width="642" height="64"/><br class="pic"/> <center><iframe src="home.html" height="300" class="body" id="iframe" scrolling="no" frameborder="0" allowtransparency="true"></iframe></center> <noframes> Your browser is out of date. To view this site you are going to have to update your browser. </noframes> <img src="http://ryanhollis.webs.com/icons/body3.png" alt="" width="642" height="70"/> THIS IS THE CODE FOR THE LINKS THAT ARE ON THE ACTUAL PAGE AND WORK IN BOTH BROWSERS (the onclick property is what you need to look at the others just to change the pic in a scroll over) HTML Code: <img src="icons/home.png" alt="HOME" id="home" onclick="link('home',300)" onmouseover="changePic('home')" onmouseout="changePicBack('home')" width="223" height="134"/> THIS IS THE JAVASCRIPT FOR WHEN THE LINK IS CLICKED Code: function link(page,size) { document.getElementById("iframe").height = size; document.getElementById("iframe").src = page + ".html"; space = size - 158; document.getElementById("whitespace").height= space; } THIS IS THE CODE FOR THE SIDEBAR HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="othercode/formating.css" /> <script type="text/JavaScript" src="othercode/links.js"></script> </head> <body> <p class="sidebar"> <a href="javascript:link('home',300)" target="_parent">Home</a><br /><br /> <a href="javascript:link('blog/blog',650)" target="_parent">Blog</a><br /><br /> <a href="javascript:link('life',680)" target="_parent">Life</a><br /><br /> <a href="javascript:link('links',400)" target="_parent">Links</a><br /><br /> </p> </body> </html> You are probably not going to have all the code you need in this so here are some links This is the main page This is the page for the sidebar iframe This is page for the content iframe This is my CSS This is the javascript that makes the links work Thanks guys if u can make sense of any of my code you are a life saver... all five flavors p.s. and yes the music isnt on there yet i'm making sure i can get this to work first. if have any suggestions on music to put on there feel free to tell me those too I recently uploaded files to fatcow and they can be see here http://kovcreation.com/ This is the html for the links. <Div id="nav"> <ul> <li><a href='index.html'"><font color="584842"vlink="#bb2826"alink="#584842">Home</font></a></li> <li><a href='Portfolio.html'"><font color="584842"vlink="#bb2826"alink="#584842">Portfolio</font></a></li> <li><a href='Contact.html'"><font color="584842"vlink="#bb2826"alink="#584842">Contact</font></a></li> </Div> It works locally but once uploaded to there servers I get a "page not found" after clicking a link. The link to the index page works but not the others. The people at fatcow where completely useless and just kept saying it was a scripting issue. however, if it were a scripting issue it wouldn't work locally. Any insight? hi ,im having trouble linking to main pages from a passworded section of my site, the p/wrd section is in a sub folder and the pages i wish to link to are in the main folder how do tell it to look in that folder? Can you make a link without it being underlined? If so, how? |