Runboard.com
You're welcome.



       Use the black navigation bar to log in or create your account.

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
posticon TIP: Clean up that CSS w/shorthand


Here is some CSS I found at another board, used for a "Post Topic" button:

.topiclistpostnewtopic a {background-position:center;
  padding-top:12px;padding-bottom:12px;padding-left:22px;padding-right:22px;
  font-size:11px;font-family:verdana,arial, tahoma;width:125px;height:35px;
  background-image:url(http://img.runboard.com/img/layouts/impaqt_1/button.jpg);
  background-repeat:no-repeat;}

  

The following CSS shorthand actually adds a couple of things, while at the same time decreasing the amount of code used.  It turns the button into a block-level element, horizontally centers the button so there is no need for the deprecated <center> tags, and defines a set width for the button, rather than having to add padding to the left and right sides of the text to obtain the desired width.

Note that when using CSS shorthand, all the properties must be listed in a very specific order.

.topiclistpostnewtopic a {
  font-size:11px; font-family:verdana,arial,tahoma;
  width:125px; padding:12px 0; text-align:center; margin: 0 auto; display:block;
  background:url('http://img.runboard.com/img/layouts/impaqt_1/button.jpg') center no-repeat;
}


The font properties are still the same in this example, width is self explanatory, and you probably already know that text-align:center horizontally centers text, so let's go through the other stuff...

padding: 12px 0;
With two details listed here, the first one pads the top and bottom, while the 2nd one pads the left and right.  If you want the padding to be different on all four sides, it would look something like this, going clockwise starting at the top:
padding: 12px 5px 10px 5px;

margin: 0 auto;
Just like padding, top and bottom first, followed by left and right.  The 0 can be changed to 1em, for example, to add 1em margin to both top and bottom.  The "auto" centers it left to right.  You can also make margins different on all four sides, also like padding:
margin: 1em auto 2em auto;

display: block;
Turns the <a> tag into a block-level element, like a <div> instead of a <span>.

background: url('...') center no-repeat;
This should be self-explanatory, but if it's not, let me know.  If you also want to specify a gray background color along with the image, and want the image positioned 10px from the left and halfway down the page, it would look something like this:

background: #ccc url('...') 10px center no-repeat;
If you noticed, I only used 3 c's in my hex code.  #cccccc is the same as #ccc, and #99ccff is the same as #9cf.  Any time the red, green, and blue are doubled up like that, you can turn it into a 3-character hex code.  This can not be done with something like #fac9d3, however.

10px center... This works opposite from padding and margins, in that CSS shorthand for positioning goes in from the left, then down from the top.


"Font" shorthand can be a bit trickier than the ones I shortened above (see here for a detailed explanation), but if you're brave, you can do this:

.topiclistpostnewtopic a {
  font:11px verdana,arial,tahoma;
  width:125px; padding:12px 0; text-align:center; margin: 0 auto; display:block;
  background:url('http://img.runboard.com/img/layouts/impaqt_1/button.jpg') center no-repeat;
}


A couple of things I'd like to point out before I hit the submit button: Notice I never use px with the number 0.  Zero is zero regardless of whether it's in px, em, %, pt, or money for that matter.  Zero can and always should stand on its own in CSS.

The other thing I'd like to mention is the common incorrect usage of "repeat".  If you want a background image to tile an entire background (both across and down), do not use "repeat-x repeat-y".  This causes a parse error that browsers do not understand, so they just ignore it.  So why do backgrounds still tile the way you want them to when you write the code this way? That's because the default is "repeat" which means it will repeat without you telling it to.  You can use repeat-x to tile across or repeat-y to tile down, but if you want it to go both ways, just leave out background-repeat completely, or simply say "repeat".


Google for more information:

"CSS shorthand"
padding, margins, and borders
background
font §


§ NOTE: "color" can not be included in the "font" shorthand, because "font" is not part of the property name.  For clarification... background-color, background-image, background-position, background-repeat... those all fit in the "background" shorthand because they all have "background" in the property name.

If you have any questions about CSS shorthand, ask away here! emoticon

Last revised by Lesigner Girl, 7/8/2006, 5:32 am


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/5/2006, 7:29 am Link to this post PM Lesigner Girl Read Blog
 


Add to this discussion




You are not logged in (login)
Back To Top

This board's time is GMT.

Board's time is GMT