|
HTML - Buttons Not Working With <a> Tag
www.ipmbio.org
This is the website. Here the buttons are in the format as <a><buttons></a> This works in all browsers expect IE When they click on buttons in IE nothing happens. PHP Code: <a href="/index.php?option=com_content&view=article&id=67"> <input name="About Us" value="About Us" class="art-button" type="button" /> </a> This is an example code. Some one please help me make it work in IE also...asap...i am in urgent... Similar TutorialsHello, I purchased a template off template that uses jquery and I am using Dreamweaver to edit it. As you can see --> http://thegamingtech.com/template The center buttons don't work. Here is an image of the three buttons I am talking about: http://d.pr/8w4g If you click on AC III button, it won't change pages even though it is linked. Any ideas? I am very very new to all things related to programming/coding, etc. I am working on a project, and cannot get my buttons to link to additional pages on a website. I wanted the buttons to not be so standard looking, and am using css styles for them. Here is my code and also the css code for the buttons. Am I needing JavaScript to get this to work? If so, what do I need? Thank you so much. HTML code: <?php echo '<xml version = "1.0" encoding = "IUTF-8"?>';?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmlll/DTD/xhtmll-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> 5 STAR MMA: For the Pursuit of Excellence </title> <link rel = "stylesheet" type = "text/css" href = "5star.css" /> </head> <center> <body background = "bluesmoke.jpg" > <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <center> <form method = "post" form action = "http://localhost/5star/5starnew.php"/> <input class = "button" input type = "submit" value = "Home"/> <form method = "post" form action = "http://localhost/5star/newgym.php"/> <input class = "button" input type = "submit" value = "New Gym"/> <form method = "post" form action = "http://localhost/5star/classes.php"/> <input class = "button" input type = "submit" value = "Classes"/> <form method = "post" form action = "http://localhost/5star/fighters.php"/> <input class = "button" input type = "submit" value = "Fighters"/> <form method = "post" form action = "http://localhost/5star/coachhill.php"/> <input class = "button" input type = "submit" value = "Coach Hill"/> </form> </br> </body> </center> </html> CSS: input{color:#A9A9A9;font-family: Arial, sans-serif;font-size:21px;padding:10px 30px;border:0px black none;cursor:pointer;font-weight:bold;-moz-border-radius: 5px; -webkit-border-radius: 5px;} .button{ background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(0,0,0)),color-stop(1, rgb(66,125,150))); background-image:-moz-linear-gradient(center bottom,rgb(0,0,0) 0%,rgb(66,128,150) 100%); background-color:#000; } input:hover{color:#FF0000;} Hi, this seems simple to me but i cant do it! the buttons do work but when i combine them on the same text area they dont work! heres what i have put together so far, Select all form: <form name="select_all"> <textarea name="text_area" rows="2" cols="80">TEXT TEXT TEXT TEXT</a> </textarea><br /> <input type="button" value="select all" onClick="javascript:this.form.text_area.focus();this.form.text_area.select();"> </form><br /> Copy Text area: <textarea cols=85 rows=20 id='testText'>TEXT TEXT TEXT TEXT</textarea><br> <button onclick='copyToClipboard(document.getElementById("testText").value);'>Copy To Clipboard</button> Copy javascript: <script type='text/javascript'> function copyToClipboard(s) { if( window.clipboardData && clipboardData.setData ) { clipboardData.setData("Text", s); } else { // You have to sign the code to enable this or allow the action in about:config by changing user_pref("signed.applets.codebase_principal_support", true); netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;[[[[1]]]]'].createInstance(Components.interfaces.nsIClipboard); if (!clip) return; // create a transferable var trans = Components.classes['@mozilla.org/widget/transferable;[[[[1]]]]'].createInstance(Components.interfaces.nsITransferable); if (!trans) return; // specify the data we wish to handle. Plaintext in this case. trans.addDataFlavor('text/unicode'); // To get the data from the transferable we need two new objects var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;[[[[1]]]]"].createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*[[[[2]]]]); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } </script> Any sugestions? Hi Guys/Ladies Im working through CSS learning it and so far its going well but i am stuck on this issue and a refuse to turn back to Html Tables etc i want to learn how to code without tables So i have a horizontal Menu bar and i would like to populate it with buttons linking to different sections on the site there is already two buttons but you can see from the image they are both touching one another i need to space them out, the buttons arent finished i want to get the layout sorted first then start adding detail. This is the CSS for the menu bar. I added the background image. HTML Code:
div.hideSkiplink
{
background-image: url('/images/BottomMenu.gif');
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
This is the code on the site master where im calling the CSS HTML Code: <div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
iv attached the image so you can see what its doing.... Hope some one can help me Ok, ive made the background i want to use on photoshop and im using freewebs for now just to host my website. I've set the background to centre and top, and i am now trying to edit the site on frontpage. I need to put a button in that links to the main page from the first entrance page, which is easier enough. But i need the button to stay centered just below the logo, which is what i need help with. If you dont understand what i mean take a look yourself... http://www.freewebs.com/endofsyrum I need a "Click to Enter" button inbetween the bottom of the page and the bottom of the logo, and i would like it to stay there no matter what screen res or size fo window... Many Thanks, Narc I've played around with this code but it seems as if I can't get the buttons to appear. Is this related to the script type? Anyone know how I can fix this? [the location is not set yet, my problem is just getting the buttons to show up] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE> Meats </TITLE> </HEAD> <BODY> <SCRIPT type="text/javascript"> <table> <table border="1" align="center" cellpadding="1" cellspacing="1" BGCOLOR=blue > <tr> <td> <INPUT type="button" value="Home" name="button1"onClick="window.location='http://www.htm'"> <td> <INPUT type="button" value="History" name="button2" onClick="window.location='http://steakslocation.htm'"> <td> <INPUT type="button" value="Residents" name="button3" onClick="window.location='http://porklocation.htm'"> <td> <INPUT type="button" value="Events" name="button4" onClick="window.location='http://poultrylocation.htm'"> <td> <INPUT type="button" value="Links" name="button5" onClick="window.location='http://venisonlocation.htm'"> </SCRIPT type="text/javascript"> <div id="PICTURE"> <img src="anthropormophic_bacon.jpg" height="90%" width="90%" alt="Buddy!" /> <center> Y Halo Thar </center> </div> </table> The content of the document...... </BODY> </HTML> Hey All, Well, I'm having some difficulty with buttons on my page. I've decided to add Google search to my website. However, I can't get the submit button to look right. Rather than the button appearing as shown in the photo directly below, it comes up looking like the button in the second photo below. I know this is a minor detail, but it's really bugging me and I can't figure out what's going on. Even if I go directly to Googles website, copy the source code, and paste it directly into my HTML editor (Frontpage 2003) the button still comes up looking like the one in the second picture. Any help would be greatly appreciated. Thanks! Tim www.corvette-restoration.com So I'm extremely new to HTML and I am trying to make a button open new tabs to two sites. Here is what I got so far: HTML Code: <a href='http://www.planetminecraft.com' title='Planet Minecraft : Supporting our Addiction!'><img src='http://www.planetminecraft.com/images/banners/planet_minecraft_mb.gif' border='0' alt='Planet Minecraft Banner'></a> I would like to use images as links in my nav bar and im looking for a tutorial or some help with how to make the buttons change when diffrent actions are taken.. eg link visited hover active but i dont know how to change the properties of the link, if anyone can point me in the direction on how to do this either in CSS or in each web page i would be verry grateful i have looked around and havent been able to find anything I am making a simple calculator program for a school science fair project, and I used a CSS Button Maker program that I got fro ma google search, and when I try to change my buttons from the normal preset ones to the one I made, it disrupts the onClick, and makes he buttons not work. any idea on how to fix this? Here is before the change to the cool buttons: Code: <HTML>
<HEAD>
<TITLE>Gavin's Science Fair Project</TITLE>
<script LANGUAGE="JavaScript">
function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A + B;
}
function CalculateDif(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A - B;
}
function CalculatePro(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A * B;
}
function CalculateQuo(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A % B;
}
function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}
// end of JavaScript functions -->
</SCRIPT>
<style type="text/css">
input.groovybutton
{
font-size:15px;
width: 250px;
height: 25px;
font-family:Comic Sans MS,sans-serif;
font-weight:bold;
color:#000000;
background-color:#FF0066;
border-style:outset;
}
</style>
</HEAD>
<DIV ALIGN=CENTER>
<table border="10" bgcolor="#0C6AA1">
<tr>
<td><P><FONT SIZE="+3">Simple Calculator</FONT></P>
<FORM NAME="Calculator" METHOD="post">
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=15></P>
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=14></P>
<DIV ALIGN=CENTER><P><INPUT TYPE="button" VALUE="Add Numbers" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Subtract Numbers" name="SubButton" onClick="CalculateDif(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Multiply Numbers" name="MultButton" onClick="CalculatePro(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Divide Numbers" name="DivButton" onClick="CalculateQuo(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P></DIV>
<P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=18></P>
</FORM></td>
</DIV>
</BODY>
</HTML>
And here is after: Code: <HTML>
<HEAD>
<TITLE>Gavin's Science Fair Project</TITLE>
<script LANGUAGE="JavaScript">
function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A + B;
}
function CalculateDif(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A - B;
}
function CalculatePro(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A * B;
}
function CalculateQuo(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A % B;
}
function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}
// end of JavaScript functions -->
</SCRIPT>
<style type="text/css">
input.groovybutton
{
font-size:15px;
width: 250px;
height: 25px;
font-family:Comic Sans MS,sans-serif;
font-weight:bold;
color:#000000;
background-color:#FF0066;
border-style:outset;
}
</style>
</HEAD>
<DIV ALIGN=CENTER>
<table border="10" bgcolor="#0C6AA1">
<tr>
<td><P><FONT SIZE="+3">Simple Calculator</FONT></P>
<FORM NAME="Calculator" METHOD="post">
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=15></P>
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=15></P>
<form name="groovyform">
<input
type="button"
name="AddButon"
class="groovybutton"
value="Add Numbers"
onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"
title="">
</form>
<form name="groovyform">
<input
type="button"
name="SubButton"
class="groovybutton"
value="Subtract Numbers"
onClick="CalculateDif(this.form.input_A.value, this.form.input_B.value, this.form)"
title="">
</form>
<form name="groovyform">
<input
type="button"
name="DivButton"
class="groovybutton"
value="Divide Numbers"
onClick="CalculateQuo(this.form.input_A.value, this.form.input_B.value, this.form)"
title="">
</form>
<form name="groovyform">
<input
type="button"
name="MultButton"
class="groovybutton"
value="Multiply Numbers"
onClick="CalculatePro(this.form.input_A.value, this.form.input_B.value, this.form)"
title="">
</form>
<form name="groovyform">
<input
type="button"
name="ClearButton"
class="groovybutton"
value="Clear Fields"
onClick="ClearForm(this.form)"
title="">
</form>
<P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=18></P>
</FORM></td>
</DIV>
</BODY>
</HTML>
If anyone can help with this, It would be greatly appreciated. http://offthe-beatenpath.net/ I've been trying to figure out what I'm doing wrong for days now. It's supposed to be setup so it starts off displaying just one body of text, then when you click on the different buttons it's supposed to switch to a different body of text, it does to a point. After you clich through from top to bottom it will get rid of the previous body of text above it, then when you go through again it displays mostly correctly, but the text isn't aligned quite right. Hello, I am using a loop to dynamically generate buttons using the <button> tag. The value for this button is populated using a variable. When I click on one of these buttons, I want the content of the button to be displayed on the text field. But, because it is in a loop and the because the value is a variable only the value of the 1st button comes in and then disappears from the text field. The javascript I am trying out to populate the text field is : function passButtonValue() { poitem= document.getElementById("poitem"); hiddenField = document.getElementById("hiddenField"); hiddenField.value = poitem.innerHTML; } I am using ABAP for getting the values and running the loop How can I reprogram it to overcome this problem? Thanks! Hi I have the following code for part of my page: <!--BEGIN SCREEN Fios --> <div id='sfios' style="display:none;" > <div id="comcast"> <h2>Questions</h2> <p><span class="required">*</span> indicates required fields</p> <table id="Table1" class="questionTable" style="border-top: 1px solid gray; padding: 0px;" cellspacing="0" cellpadding="0"> <tr> <td style="padding:0px; width:100%; border-bottom:0px;"> <div id="otherDetails10" style="margin: 0px; padding:0px; width:100%;" > <div id="otherDetails11" style="display: ; padding: 0px; width:100%;" > <table class="questionTable" style="width:100%;"> <tr valign="top"> <td width="80%"> <strong id="Strong1"><span class="required">*</span>Do all the following use Fios?</strong><br /> <table id="houseHoldTbl" > <tr> <td> <strong>Household members :</strong> </td> </tr> <tr> <td>ABC DEF</td> </tr> <tr> <td>GHI JKL</td> </tr> <tr> <td>MNO PQRS</td> </tr> <tr> <td>TUV WUX</td> </tr> </table> </td> <td width="20%" style="text-align: center;"> <span> <input type="radio" name="use1" id="USyes1" onclick="show('otherDetails12'); show('contBut'); disableMe('contBut');window.scrollTo(getPos(qust1).x,getPos(qust1).y);" /> <label for="USyes1">Yes</label> <input type="radio" name="nouse1" id="NUSno1" onclick="show('contBut');hide('otherDetails12'); enableMe('contBut');window.scrollTo(getPos(qust1).x,getPos(qust1).y);" /> <label for="NUSno1">No</label> </span> </td> </tr> </table> <div id="otherDetails12" style="display: none; padding: 0px;"> <table class="questionTable" style="width:100%;"> <tr valign="top"> <td width="80%"> <strong id="Strong2"><span class="required">*</span>Does anyone else use the Television?</strong> </td> <td width="20%" style="text-align: center;"> <span> <input type="radio" name="why1" id="WHYyes1" onclick="hide('otherDetails13'); enableMe ('contBut'); window.scrollTo(getPos(qust1).x,getPos(qust3).y);" /> <label for="WHYyes1">Yes</label> <input type="radio" name="whyo1" id="WHYno1" onclick="show('otherDetails13'); disableMe ('contBut'); window.scrollTo(getPos(qust1).x,getPos(qust3).y);" /> <label for="LAno2">No</label> </span> </td> </tr> </table> <div id="ContButCTR" align="center" > <input type="button" name="priorpage" value="Prior Page adress" onclick="javascript:switchid('ppa')" /> <input id="contBut" type="button" disabled name="continue" value="Continue family" onclick="javascript:switchid('rinfo')" /> </div> </div> </div> <!--END SCREEN --> My problem is that I would like the buttons to remain side by side once the first question is answered. I have tried using a div but it disregards the show/hide elements for the radio buttons and leaves them turned on the whole time. Is there anyway to get the buttons to stay side by side with or without a div? i have my list of radio buttons and submit button but what i would like to do is have each one go to a different URL but im having trouble with that at the moment so if anyone could help it would be very appreciated. thankyou hello, i just start working on a site, and i have a question. i have 2 radio buttons and a normal button, and i want it to make when i check the first radio button and click on the button it will go to site1.html and if i check the second radio button, and then the normal button it needs to go to site2.html, how do i do that? this is what i have atm: Quote: <form name="form1" method="post" action=""> <p> </p> <FORM name ="form1" method ="post" action ="radioButton.php"> <p> <Input type = 'Radio' Name ='catogorie' value= 'school' > School </p> <p> <Input Name ='catogorie' type = 'Radio' value= 'own' > My Own </p> <P> <Input type = "Submit" Name = "Submit1" VALUE = "Volgende"> Hello there! I'm new to this forum and a definite NEWBIE but am doing my best to learn. I am making a form in which I have several categories that are chosen by clicking on radio buttons. The problem is that I must have coded this incorrectly because you can ONLY click on ONE radio button, even thought there are 7 different subcategories. I'd like to be able to click on one radio button for each of the different subcategories. Any advice would be GREATLY appreciated!!! Hi, I am trying to do this: Have 3 Radio Buttons (I think thats what they are called), Like this: 0 0 0 28K 56K Broadband Play (Button) And when you press any of the buttons the right stream is played via a url from another site I have. How to I go about doing this, ? I see aol has similiar feature for downloading files which I liked the look of, pass some time and help me out. Hi all, I have a question on the following code <?php if ($flag == 1) { echo "<HR COLOR=#0433f>"; ?> <form method="post" action="asstnt.php"> <input type="hidden" name="id" value="<?php echo $a ?>"> <input type="submit" value="Next"> <input type="button" value="Previous" onClick="window.location='javascript:history.go(-1)'"> <input name="Action5" type="button" id="Action5" value="Done" onClick="javascript:window.location.href='gotohome.php';"> </form> My question is that why do i get a space or blank line between the coloured line and the buttons.And how to eliminate the blank line. Thanks in advance. Hi. I'm new to this site so i'm sorry if i posted the thread in the wrong part of the forum. Anyhow. I'm pretty new to HTML and CSS and wonder. How do i make, goodlookin' buttons? I want them to interact when hoovering over them with the mousepointer. I would be SO greatful if someone could help me out. Thanks Does anyone know why there is padding around all my buttons on this page? They should be flush against each other... Any ideas? http://www.curiousclothing.com/test/tours.htm |
|||||||