How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?
Someone made this piece of code for me and I think there's some unnecessary bits in it.
This is the 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" lang="en" xml:lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/> <title>IS THIS THING ON?</title> <link rel="stylesheet"
href="./wp-content/themes/cosmicbuddy/_inc/css/screen.css"
type="text/css" />
</style>
</head> <body>
<a href="<?php bp_send_public_message_link() ?>" class="myButton"><!--
button --></a>
</body> </html>
And this is the CSS file it refers too:
.myButton {
background: url(/wp-content/them开发者_如何学Goes/cosmicbuddy/_inc/images/see.gif) no-repeat;
border: 1;
cursor: pointer;
display: block;
height: 22px;
width: 22px;
margin-left: 5px;
} .myButton:hover {
background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;
}
Now I have two questions:
Can the first piece of code shortened?
How can I create a CSS file that implements settings to more than one of these settings. Just like this one does in my CSS file to links:
#userbar #bp-nav li.current a{ color:#000; font-weight:bold; } #userbar #bp-nav li a:hover { color: #3193c7; text-decoration: none; }
1 Can the first piece of code shortened?
If you are so concerned about the size than remove the <!-- button --> html comment.
./wp-content/themes/cosmicbuddy/_inc/css/screen.css
is equivelent to:
wp-content/themes/cosmicbuddy/_inc/css/screen.css
Saving 2 characters :)
As it seems to me in the CSS file you can shorten the path to the images. Instead:
background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat;
...
background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;
use relative URLs:
background: url(../images/see.gif) no-repeat;
...
background: url(../images/too.gif) no-repeat;
2 How can I create a CSS file that implements settings to more than one of these settings. Just like this one does in my CSS file to links:
If you don't want to add the CSS class to every element you have to wrap them in some other element
...
</head> <body>
<div class="buttons">
<a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
</div>
</body> </html>
And the CSS
.buttons a {
background: url(../images/see.gif) no-repeat;
border: 1;
cursor: pointer;
display: block;
height: 22px;
width: 22px;
margin-left: 5px;
}
.buttons a:hover {
background: url(../images/too.gif) no-repeat;
}
The cursor is usually used if the href attribute is not set.
The css is almost as short as it gets.
Since this is being applied to an a, you could remove cursor: pointer;.
Also, if you are using a background-image, you might not need border: 1;.
The other styles look necessary to render the button, that is height and width and display.
You can also smush it together like your other example:
.myButton {background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat; display: block; height: 22px; width: 22px; margin-left: 5px;}
.myButton:hover {background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;}
As for reusing these styles, you can do 1 of 2 things:
- add
.myButtonto otheraelements or - add more classes to the rule, e.g.,
.myButton, .otherClass {//css in here}referencing the.otherClassin anothera
The first piece 'of code' is a full html page. If you only need to add the button on a page, this part will do:
<a href="<?php bp_send_public_message_link() ?>" class="myButton"><!--button--></a>
The part between is a comment, that could theoretically still go a well. Remember to add the CSS information to that page's CSS file though!
--
If you'd want more links to show up as a button, you could add the class="myButton" to the A-tag you want changed. If you want multiple classes to change into a button you can add them to the CSS, just as with the other example you've given:
.myButton .myOtherButton { ... }
.myButton:hover .myOtherButton:hover { ... }
My two cents: Make a single image with both button states(a sprite), then:
.myButton {
background-image: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif);
display: block;
height: 22px;
width: 22px;
}
.myButton:hover {
background-position: x y;
}
This will also solve the flickring issue when one hovers the link.
Hope this makes sense
You can use HTML5 and omit some optional elements, attributes and closing slashes á la Anne van Kesteren, which would leave you with this:
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>IS THIS THING ON?</title>
<link rel="stylesheet" href="/wp-content/themes/cosmicbuddy/_inc/css/screen.css">
<a href="<?php bp_send_public_message_link() ?>" class="myButton"></a>
As for the CSS, I can add little to antitoxic and gutierrezalex's comments about using relative URLs and CSS sprites, save that you could also run the final code through a minifier. (Robson's CSS compressor can shave off a few bytes by removing things like whitespace and the final semicolon in a property block.)
加载中,请稍侯......
精彩评论