...

View Full Version : Button graphic on photoshop, How do I apply it to my HTML?



lallous
12-05-2009, 09:51 AM
Hello everyone,

I'm still trying to figure out what the best way is of applying something you designed on photoshop like a button in my case to your website.

I am trying to modify the background of my current button by pointing to my the photoshop graphic but it does not change.

This is my current code:

Button: <a href="index.html" class="button"> Home</a>
Button Class:
button {
background-color:#000000;
border-right: 1px solid #FFFFFF;
color:#FFCC00;
font-size:0.8em;
font-weight:bold;
line-height:2;
padding:5px 20px;
text-decoration:none;
}

Currently my buttons are still without the background attribute as the code above reveals. Can someone please shed some light.

Thank you,

abduraooft
12-05-2009, 10:09 AM
Button: <a href="index.html" class="button"> Home</a>
Button Class:
button {
background-color:#000000;
border-right: 1px solid #FFFFFF;
color:#FFCC00;
font-size:0.8em;
font-weight:bold;
line-height:2;
padding:5px 20px;
text-decoration:none;
}
The class selector for button is .button

lallous
12-05-2009, 10:14 AM
The class selector for button is .button

Yes I do have a point in my code. It's just I missed it while copying the code over here.
Thanks

abduraooft
12-05-2009, 10:19 AM
I get small a rectangular box having a black background by that code.

Excavator
12-05-2009, 03:20 PM
Hello lallous,
What is the path to your button graphic? I don't see that you're loading it at all.

.button {
background:#000 url(path/to/your.img);
border-right: 1px solid #FFFFFF;
color:#FFCC00;
font-size:0.8em;
font-weight:bold;
line-height:2;
padding:5px 20px;
text-decoration:none;
}

met
12-05-2009, 03:30 PM
i think you're asking for the code to use an image instead of a colour..




.button {
border-right: 1px solid #FFFFFF;

background:url(path/to/my/image.jpg no-repeat; /* */

/* i'd set height+width personally unless it repeats */

color:#FFCC00;
font-size:0.8em;
font-weight:bold;
line-height:2;
padding:5px 20px;
text-decoration:none;
}

lallous
12-06-2009, 08:12 PM
I managed to solve it.
Thank you for your input everyone.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum