HTML - Input Buttons Not Changing Color...

This is a coursework assignment. i've noticed on some website it gives you the option to change the color of the background too a high contrast version. is this possible without using Javascript? (html5 ideally). Obviously i'm not expecting someone to tell me what to do but a link in the right direction would be nice please

Hello to everyone,

Does anyone happen to know why firefox is messing up the color of my image? (see attached).

thanks,
NetGD

ok i had resolved my earlier problem of my links being spaced earlier with help fro pegasus and now i got a new problem lol. i know how to change the background and colors for my links using css in most cases by calling a.Blah:link... and so on and the :hover... but in this case it is not working. Here is my css at the moment.

Code:

#Nav{
width: 948px;
height: 18px;
border-top: 1px solid #FFA701;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #FFA701; }

#Nav a{
padding: 0;
margin: 0;
height: 18px;
color: #ffffff;
text-transform:uppercase;
text-decoration: none;
font-weight: bold;
overflow: hidden; }

#Nav ul li {display: inline; padding: 0px 5px;}
#Nav ul {margin: 0px; padding: 0px; }

my problem is that my links i want to be starting on a black background and they'll be white colored links. (which they are i'm using body bg for my page.) then i want as
they are visited to stay white colored. the main thing i would like to have is that when you hover over them, the links turn black and the background of the links turn white.
now i know it's easy with hover: {background:#000000} but i don't know how to place it because when i did it did not work.
thx in advance

edit: oops i posted this in html. (still help anyway it has somewhat to do with html probably ) ill post in css also though

I already have the body tags, I want a certain section to have links of a different color. I tried <font color="#####"> but obviously that doesn't work. It seems like i should know this... but I am blank.

Hi,

ive been working with a template in dreamweaver and have been able to insert my own banner and sidebar, but there is a small part that I cant find where to edit it...any help is appreciated....screenshot below

http://imageshack.us/photo/my-images/39/doop.png/


id like to change the green....but cant figure out how

Hi everyone, I'm a total newbie and have zero previous HTML experience (but have experience reading code). I am modifying a site to support 3 radio buttons that switch the function of a single search bar. Could you guys please help me figure this out? Warning - all of this is copy-and-paste frankencode from the source, pieced together by guesswork. It may hurt your eyes. In case you're wondering, this is simply a design prototype for a class I am taking that requires user testing. The actual web development will be done by someone else if accepted. I will learn HTML properly later on.

Attached is an image of what I am thinking of.

And here is the pertinent code:
Code:

  <h2>Select the search engine that meets your needs.</h2>
  <form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input name="searchEngineSelection" type="radio" id="searchEngineSelection_0" value="http://uci.worldcat.org/search" checked="checked" />
      <strong>Melvyl</strong></label>
    - Search libraries worldwide for books/music/other media.<br />
    <label>
      <input name="searchEngineSelection" type="radio" id="searchEngineSelection_1" value="http://antpac.lib.uci.edu/search/X?SEARCH=" />
      <strong>ANTPAC</strong></label>
    - Search and reserve material held at UCI Libraries.<br />
    <label>
      <input type="radio" name="searchEngineSelection" value="http://www.lib.uci.edu/search-site.html?cx=009602760963559712792%3Aoglsjsxdz5m&cof=FORID%3A10&ie=UTF-8&q=" id="searchEngineSelection_2" />
      <strong>Site</strong></label>
    - Find a specific page or information on the Library website.<br />
  </p>
</form>
<form accept-charset="UTF-8" action="http://uci.worldcat.org/search" id="wcfw" method="get" name="wcfw" target="_top">
  <input name="q" type="text" id="quicksearch_field" />
  <input align="top" id="quicksearch_go" onmouseout="goBtnOff()" onmouseover="goBtnOn()" src="./Home Page - UCI Libraries_files/button-go-off.gif" type="image" />
</form>

I have no idea how to do it so I am asking you gurus to help. Thanks so much for your time.

Hi guys,
I need a help from you guys.
I'm having some html pages, and i want to give the option to change the background and font color in the html pages by clicking buttons. And that setting should be saved in the user system, when the user loads the page again in the system, that the page should load with the saved settings.

I don't want to go for server side scriptings. Is it possible just in html and Java script. Can you guys help me in this.

Thanks in Advanse
Kumar

Hello all!
Does anybody noticed that font colors are treated as background color while printing in IE?
I just set a

<font color=#f0f0f0>MY TEST</font>
or
<span style="color: #f0f0f0">MY TEST</span>

and, on screen, it's OK.

On print preview, it goes black. I can print in grayscale only if I turn "print background images and colors" on.

Does anybody has a workaround on it? It will be a watermark, so it should be printed in grayscale. I dont think I'm setting a background color, specially on first example (color of the font).

Thanks!

Ok so here is my issue, i am new to web site design and i have a simple project i would like to work on.
I am looking to have an entry box with a simple submit button, then i would like the submissions to be displayed below in the order they are submitted. I would also like to limit the number of submissions that show on the page at a given time by creating multiple pages that can be viewed.
This seems like a very simple issue but im having trouble finding solutions on the web. Would inserting a java app or some other secondary tool be better?

Any help is appreciated

-Matt

Hi
What is wrong with this, it can't post text only post checkbox

<html>
<head>
</head>
<body>
<FORM action="http://localhost:8182/items" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<input type="text" value = "Hamada" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<input type="text" value = "I hate my life" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<input type="text" id="email" value = "I hate you"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<input type="submit" value="Submit">
<INPUT type="reset">
</P>
</FORM>
</body>
</html>


Thanks

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>

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.

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

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

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