Welcome to Dream.In.Code
Getting Help is Easy!

Join 136,405 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,471 people online right now. Registration is fast and FREE... Join Now!




Getting CCS sheet to change button properties

 
Reply to this topicStart new topic

Getting CCS sheet to change button properties

swichnz
30 Aug, 2008 - 11:53 PM
Post #1

New D.I.C Head
*

Joined: 5 Sep, 2006
Posts: 17


My Contributions
I am trying to set up a page with multiple buttons, I would like them each to look the same so I have set up a CSS file but I can't work out how to make the CSS sheet modify the button properties. I am certain the page is reading the CSS sheet because the I checked with text inside the body.

Can someone please tell me where and what I should be doing to get this to work.

Thanks in advance

CODE

body {
    font-family: Verdana;
}
    

button {
    font-family: Verdana;
    font-size: 32px;
    color: #006633;
    background-color: #666666;
    border: thin solid #000000;
    position: absolute;
    height: 10px;
    width: 20%;
}



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><link rel="stylesheet" type="text/css" href="GLStyles.css" />

<title>GrazeLink</title>
<style type="text/css">
<!--

-->
</style>
</head>

<body>

<img src="GLBanner.jpg" width="59%"/>
<img src="AdWithUs.jpg" width="40%"/>  

<form name="topButtonPanel">
     <input name="homeButton" type="button" value="Home" onClick="location=('Homepage.html')" />
    

</form>

User is offlineProfile CardPM
+Quote Post

nutter
RE: Getting CCS Sheet To Change Button Properties
31 Aug, 2008 - 03:45 AM
Post #2

New D.I.C Head
*

Joined: 3 Nov, 2007
Posts: 34


My Contributions
Hi there,
if you cange :

CODE

  <input name="homeButton" type="button" value="Home" onClick="location=('Homepage.html')" />


to :
CODE

<button name="homeButton" onClick="location=('Homepage.html')" >Home</button>

You problem will be fixed
Also In your css you might want to change the button height: 10px; to 20 or 30 px so then you can see the text

This post has been edited by nutter: 31 Aug, 2008 - 03:48 AM
User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: Getting CCS Sheet To Change Button Properties
31 Aug, 2008 - 06:04 AM
Post #3

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 3,993



Thanked: 16 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
nutter, the button tag has been depreciated as long as i can remember and should NEVER be used, the code that swichnz is using is correct, it's the css that should be modified.

If you are using buttons as your only type of input, you could change your css to input instead of button, the word before the { needs to be the tag name, not a property of the tag.

Your other option is to do something like this:
CSS:
css

.buttonCSS {
//your button css code
}

HTML:
html

<input class="buttonCSS" name="homeButton" type="button" value="Home" onClick="location=('Homepage.html')" />


by adding a class you can apply the same attributes to all tags sharing that class, without changing the other properties of the tag.


Just for reference, in css the character before the identifier's are:
# is used if the attribute to recognize is an id <img src="" id="anID" />
. is used if the attribute to recognize is a class <img src="" class="anID" />
if you put nothing, then it is assumed to be the tag name (in this case it would be img) <img src="" />
User is online!Profile CardPM
+Quote Post

swichnz
RE: Getting CCS Sheet To Change Button Properties
1 Sep, 2008 - 06:52 PM
Post #4

New D.I.C Head
*

Joined: 5 Sep, 2006
Posts: 17


My Contributions
Thanks a lot for your replies, I appreciate it. smile.gif

William, what do you mean by the button tag having depreciated, and why should you not use it?
User is offlineProfile CardPM
+Quote Post

Martyr2
RE: Getting CCS Sheet To Change Button Properties
1 Sep, 2008 - 09:25 PM
Post #5

Programming Theoretician
Group Icon

Joined: 18 Apr, 2007
Posts: 5,208



Thanked: 213 times
Expert In: C/C++, Java, VB, VB.NET, C#, PHP, Web Development, HTML & CSS, Javascript

My Contributions
It means that the button tag has long ago been abandoned in favor of using the <input type="button" approach. Depreciated items are also up to be permanently removed from the standard at any moment's notice in future. Thus you should try to avoid anything depreciated in any language or technology you are developing today because it may instantly break your code when the "old" technology is finally removed.

But swichnz is right to use the input="button" approach and of course William is always da man when it comes to the web world. You guys should listen. smile.gif
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 12/2/08 11:58AM

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month