CSS Buttons

Galaxyblue · #1 Feb 10th, 2004, 11:58

Ok... after some feedback from Jamslam I am playing around with CSS for the rollover buttons... Please be gentle with me... I haven't got the fogiest.

Here is my buttons www.galaxy.silvern.co.uk and here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
A.imglink{
font : bold 9pt verdana, sans-serif;
color:black;
width:191px;
height:40px;
background:white url(/buttons/homepagebuttons/homeup.gif) no-repeat;
text-align:center;
padding-top:2px;
display:block;
text-decoration:none;
}
A.imglink:Hover{
font : bold 9pt verdana, sans-serif;
color:red;
text-decoration:none;
background:white url(/buttons/homepagebuttons/homedown.gif) no-repeat;}
</style> </head>
<table width="760px" border="0">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
<body>

</body>
</html>

Because I am using images with the text already on can someone advise me what bits of this I can get rid of?

Thanks in advance

Sarah x

Webforumz Staff · #2 Feb 10th, 2004, 16:06

You can get rid of font, color, text-align, text-decoration, and maybe the padding.

Rob · #3 Feb 10th, 2004, 16:24

I would advise against using images with text already on for 4 reasons...

1. All your buttons are the same, apart from the text. Therefore just use a background image and standard text instead. See www.seacrofthotel.co.uk for example (ok, I'm using a BG color, but just as easily could be an image)
2. The browser will cache the bg image, so buttons will load quicker.
3. Search engine spiders will be able to make sense out of the links (they can read text, but not images)
4. When you want to change something, you life will become 10 times easier.

Hope this helps!

D3mon · #4 Feb 10th, 2004, 17:58

try this:

<style type="text/css">
#menu a {
font: bold 9pt verdana, sans-serif;
color:black;
width:191px;
height:40px;
backgound

ink;
text-align:center;
margin-top:2px;
display:block;
text-decoration:none;
}
</style>

<div id="menu">
opt1
opt2
opt3
opt4
opt5
</div>

also, the HTML content should go between the <body> and </body> tags.

Galaxyblue · #5 Feb 10th, 2004, 18:14

Hi Guys...

Thanks for your replies.... I have managed to get the text on the buttons centred now

Anyway... D3mon

I've put that in... but I'm not sure what to do with it... changed the background to my link but the rollover isn't there... is that because it needs to be linked to a style type file which I haven't got?

D3mon · #6 Feb 10th, 2004, 18:19

maybe that code isn't right (I rushed it) try this whole page:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#menu a {
font: bold 9pt verdana, sans-serif;
color:#990099;
width:191px;
border: 1px solid black;
background:#D279D2;
text-align:center;
margin-top:2px;
padding:10px;
display:block;
text-decoration:none;
}
#menu a:hover {
background:#990099;
color:#D279D2;
}
</style>
</head>
<body>
<div id="menu">
opt1
opt2
opt3
opt4
opt5
</div>

</body>
</html>

D3mon · #7 Feb 10th, 2004, 18:23

Hmm.. the colours area bit out, but hopefully it demonstrates the point.
The style code is this part:

<style type="text/css">
#menu a {
font: bold 9pt verdana, sans-serif;
color:#990099;
width:191px;
border: 1px solid black;
background:#D279D2;
text-align:center;
margin-top:2px;
padding:10px;
display:block;
text-decoration:none;
}
#menu a:hover {
background:#990099;
color:#D279D2;
}
</style>

Galaxyblue · #8 Feb 10th, 2004, 18:26

Great... that works....thank you. so what is the reference <style type="text/css"> for?

I'm going to have a play around with this now... can I put these in tables so it goes horizontally? Oh dear.... think this may take me some time BUT I AM GOING TO DO IT

D3mon · #9 Feb 10th, 2004, 18:29

Galaxyblue · #10 Feb 10th, 2004, 18:35

Thank you Demon... thats very helpful

D3mon · #11 Feb 10th, 2004, 18:36

No worries

You got this line at the top so I may have confused you:

<font color="purple"><link rel="stylesheet" href="/includes/style.css" type="text/css"></font id="purple">

This line tells the browser "I have some CSS in an external file, go find and use that"

Alternatively, you could put the CSS right into the page (like I did) between those <font color="purple"><style type="text/css"></style></font id="purple"> tags

or.. you could put your CSS right into the HTML like:

<font color="purple">Link Text</font id="purple">

or.. you could use a combination of all 3 methods.

Galaxyblue · #12 Feb 10th, 2004, 21:03

I am soooooo pleased with my progress.... have a look here!

http://www.galaxy.silvern.co.uk/page2.htm

Ok... I know the colours are not quite going but for someone who has absolutely no clue about css nor html I am very pleased!!! I feel like it is my birthday!!

D3mon · #13 Feb 10th, 2004, 21:20

Nice work!
There's some tags in your code that are not needed:
<font color="purple"><div align="center"></div></font id="purple">
need to optimize that image at the top of the page too - 34K is a bit too big for 56K modem users...

Galaxyblue · #14 Feb 10th, 2004, 21:29

Thank you!

I've got a quick question... how do I get rid of the spacing inbetween the buttons when they are aligned width ways... horizontally?

Galaxyblue · #15 Feb 10th, 2004, 23:18

Hello me again! Twenty questions coming right up

I have this done now... www.galaxy.silvern.co.uk/page3.htm These are the buttons I need to use for my main website...

Now, when I roll over them I see white at the edges, and there is also a bit of white at the top of my page banner which I need to get rid of.

Can anyone help me out with those?

Also, Demon, what do you mean when you say: <blockquote id="quote"><font size="1" face="geneva, verdana, arial" id="quote">quote:<hr height="1" noshade id="quote">optimize that image at the top of the page <hr height="1" noshade id="quote"></blockquote id="quote"></font id="quote">

Thanks in advance.

Sarah

Webforumz Staff · #16 Feb 11th, 2004, 07:16

He means you should try to get it to be smaller in file size by optimising it.

If you have photoshop or Paint Shop Pro or something similiar, that probably isn't a problem because you can save with different quality levels. I would say you could probably lose 1/3 of the quality in terms of settings and not notice any difference other than a smaller filesize.

Galaxyblue · #17 Feb 11th, 2004, 22:35

Thanks Sirkent...

Can anyone help me with my white bits, please

Webforumz Staff · #18 Feb 11th, 2004, 22:42

Lol that REALLY isn't something to say while Billy is around is it?

Galaxyblue · #19 Feb 11th, 2004, 22:45

Sirkent, well you are just as bad for taking my innocent comment and changing it to something else!!

jamslam · #20 Feb 12th, 2004, 01:22

Why are you using background images for your buttons? They are simply solid colors, with borders...

You can add borders like this:

Code: Select all

border-style: solid;
border-width: 2px;
border-color: #000000;

For the white spaces.. I'd try getting rid of the images first, and then if they are still existant, try tweaking the padding or the margins...

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Buttons