How do you change the vertical and horizontal spacing between buttons? Also how do I change the hover color, visited color etc? Here is my code. Thanks!

        <div id="box1">
                     <FORM method="get" action="https://www.gunsgrubandgold.com/About Us.html">
          <input class="link" type="submit" value="About Us"  />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Contact.html">
                      <input class="link" type="submit" value="Contact" />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Index.html">
                      <input class="link" type="submit" value="Home" />
         </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Financials.html" >
                      <input class="link" type="submit" value="Financials" />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Food.html" >
                      <input class="link" type="submit" value="Food"  />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/forum/" >
                      <input class="link"  type="submit" value="Forum" />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Products.html">
                      <input class="link" type="submit" value="Products" />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Protection.html">
                      <input class="link" type="submit" value="Protection" />
                  </FORM>
        </div>

.link
{
 border:outset;
 border-color:#0F0;
 background-color:#30F;
 color:gold;
 width:100px;
 font-weight:bold;
 margin:2px;
 padding:0px;
}
 
#box1
{
 width: 105px;
 height: 357px;
 margin-top:60px;
 border:4px ridge blue;
 padding: 15px;
}

color = foreground colour.

background-color = exactly what it says.

V/H spacing - with margins and padding

Thanks! I was playing around with it and got the hover, focus to work:

input.link:hover
input.link:focus


However, I cannot get the visited to work. Is this attribute not supported for input/submit? Thanks!

I am assuming that you are using Internet Explorer because IE only supports the pseudo classes on <a>nchor elements, they are not supported any other elements.

http://www.quirksmode.org/css/contents.html

Yes, I am using IE since most traffic will probably be in IE. Once I get this set, will work on the FF compatability. Thanks again!

Wrong way around.
It WILL work in all other browsers, it will have to be "fixed" for IE by using javascript or implementing the Whatever:hover behaviour

as at http://www.modtalk.co.uk/_site/code/...on-mouse-over/

Ok, thanks for the heads up. I think we may be on the wrong page. HOVER DOES work in IE. It is the VISITED portion that will not change color (was hoping to get the text in the button to show a different color as when a link has been visited). Is this because it is a submit button with an embedded url?

I think the more important question is WHY are you using a form for navigation in the first place??

Originally Posted by chrishirst

I think the more important question is WHY are you using a form for navigation in the first place??

The one million dollar answer is: I'm really not sure... it works , though...


How else would I go about using a button to link to another page? Help appreciated. Thanks again for the help!

it works , though...

you do realise it won't for search engines, and it will be pretty useless for accessibility.

Just make a link look like a button if that is what design you are looking for.

How do you make a link look like a button? What would the code be? Thanks!

You might want to have a look around here: http://www.cssplay.co.uk/menus/

Thanks! I found one that might work. I have a couple of questions though. I can't get the menu (horizontal) to center in the middle of my page, it seems to be left justified and I do not know how to change it. Thoughts?

Also, how would I add one level down links when hovering over the parent node? Nothing fancy, just a small vert list of related items that link to other html pages. Thanks again!!! I attached the code.

Anyone? Thanks again!

I am using IE since most traffic will probably be in IE.

Thanks! I was wondering how to actually center the menu that I uploaded, and as a secondary how to add a drop down within the menu - something easy to get me started. Thanks again!

Anyone? I really would like to get this centered to begin with!!! HELP!!! Thanks!

Give the UL a fixed width and use margin: xx auto to make it center - have you tried that?

Originally Posted by LadynRed

Give the UL a fixed width and use margin: xx auto to make it center - have you tried that?

Not really, close though. For some reason the left side of the menu is closer to the left margin than the right. Not sure why - this is utlizing margin 0 auto;

Thoughts? Thanks!

Here is a screen shot and the css for the UL. Thanks again!

#pro13 ul 
{
 width:900px;
 
 margin:0px auto;
 
 padding-left:0px; /* when I add this it left justifies up against the blue border */
 padding-right:0px;
 padding-top:20px;
 padding-bottom:20px;
 
 list-style:none;
 white-space:nowrap;
 list-style:none;
 height:35px;
 position:relative;
 background:black; 
 font-size:11px;
 
 border: 2px solid blue;
 
}