 |
Archive - June 2006 Height matters...Posted Jun-29-06 18:17:28 PDT Updated Jun-29-06 18:17:59 PDT Css has a property named line-height. What might this be used for? As you might surmise, it affects the amount of space above and below your text characters on a line. A simple use for it is to give your text just a bit more room when the font would otherwise make it look crowded. This is what we do on our China site where the characters are easier to read if the lines don't crowd up against each other. .p {line-height: 200%} would double space all the lines in all paragraph tags. The value for line height can be a simple number like 2 which is multiplied times the font size. It can also be a percentage as we just saw or it can be a size in designated units like px/em/ex. The meaning of these units was covered in an earlier post. Cheers "I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's." Text alignment (left, right, left, right, left, right....)Posted Jun-23-06 20:45:59 PDT Updated Jun-23-06 20:46:47 PDT No, we're not talking about drill sergeant orders here (left, right, left, right...). Rather we are going to look at the alternative to the html attribute align="xxxxxxx". The CSS property, text-align lets you control where the text goes in the HTML tag it is applied to. Possible values are left, right, center, and justify. In the following examples, I'm using a tag with a border to better show the alignment. First we have text-align:center. This text is going to be aligned center within it's containing div tag so you can see how it lays out Let's show the other forms for comparison: This
text is going to be aligned right within it's containing div tag so
you can see how it lays out This
text is going to be justified within it's containing div tag so
you can see how it lays out and for completeness, let's see left alignment which is the default This
text is going to be aligned left within it's containing div tag so
you can see how it lays out I forced the justified case to have a width:20% so that you could better see the justification taking place. Usually, justified text is harder to read on computers so try to leave it for books where a ragged right margin is not desired. Cheers "I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's." Back to font basicsPosted Jun-21-06 22:09:58 PDT Updated Jun-23-06 20:46:28 PDT Now that we've made a pretty thorough tour of customizing your Blog page (and we have great tool from shipscript), let's backtrack and look at some areas we glossed over on the first pass. First, styling on fonts. The available properties are: font-family (the name of the font you want, e.g.Times, Courier, sans-serif) font-size This can take several value forms:
font-style (normal, italic, or oblique) font-variant (normal, small caps) font-weight This can take several value forms:
font-stretch Values are:
If you can't find something among the above to make your fonts distinctive then I fear you are out of luck. :-) I used a style of font-size:x-large;font-stretch:ultra-expanded;font-style:oblique;font-variant:small-caps;font-weight:900 This is fairly distinctive text. Happy fonting! "I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's." Pseudo classes for links and text-decorationPosted Jun-19-06 21:46:49 PDT Updated Jun-19-06 22:34:13 PDT There is more that you can do to links than I presented yesterday. Whether you should or not is debatable though because people are so trained in spotting a link that if you muck with them too much, they may not use the links you provide. But there can be good reasons for changing the style of a link. We can directly style a link as we saw last time when we changed the color. We can do other things to a link as well. For example, we can change the text-decoration property. For example, this is a link to the main blogs page. Go to main blogs page Granted it does not look much like a link because it's not blue and no longer underlined. Don't count on users to notice such things. What I did was specify the property "text-decoration:none" on my tag. This removes all text decorations which happens to include the underline usually associated with links. Other text decorations include: underline, overline,line-through and blink. I guess you could use "overline" for links you want folks in the other hemisphere to use, line-through for links you are going to get rid, and blink....well just say no to blink. It's an infantile disorder of the web to make things blink. People quickly shun pages filled with blinking and twitching stuff. However, psychologists do point out that the eye is attracted to motion so that's probably why all those advertisers make blinking ads. There are some legitimate uses for links without underlines. For example, we use them on our China site where the underline just makes the multi-stroke Chinese characters hard to read. We do compensate for the loss of the visual cue in another way I'll talk about shortly. The tag can be styled with four additional pseudo classes as they are called. This is nothing more than a distinctive form of a selector. The four for the tag and an example of the user of each are: a:link {color: #FF0000} /* color for unvisited link */ a:visited {color: #00FF00} /* color for visited link */ a:hover {color: #FF00FF} /* color to show when mouse hovers over link */ a:active {color: #0000FF} /* color to show when mouse is clicked on link */ To help visually cue links on our China site (since they have no underline), we have a CSS rule like: a:hover{color:#F60;text-decoration:underline;} This causes the link to change color and sprout an underline when the mouse moves over it. In this way, the link can retain the crucial underline without impairing readability. Normally, links are blue and turn purple after you visit them. There are places like the eBay header navigation links that you don't really want to record that home, pay, or site map has been visited. It's a navigational tool and there is no gain to having these links turn purple. Therefore, they are styled to have a CSS rule for a:visited that shows them in the same color as before they are ever used (e.g. blue). People do funky things with the a:hover property. For example, change the font size when the mouse passes over the link to draw attention (remember the motion thing). It looks like this: eBay Home Page I'm sure you can think of other creative uses for these pseudo classes but remember if it doesn't look like a link, odds are good the user won't notice it or when they do they will be annoyed so tread carefully. P.S. If you are frustrated by typing in links in the easy to use MS Word-like HTML editor and discovering they don't work here's what you need to do. Under the font dropdown is the checkbox for "View HTML". When checked, you can see the underlying HTML being written for you. Right now this is the only way to enter a link. I know it's a major annoyance and a nice little icon to add a link with prompts for the URL and the linked text would be sweet. It's on the list but for now you have to turn on View HTML and enter text like the following: text you want to show as a link. After entering the link you can turn off View HTML and continue editing merrily along. If you already have the link visible and clickable in a browser window somewhere, life is easier. Just drag through the visible text of the link, select copy and then come to the "nice" HTML editor and paste the copied link. It should show up and be clickable. For example, here is the site map link I copied and pasted from the eBay header. Actually this is a tiny subset of what you can do. Most any large chunk of HTML that you see on a web page can be copied and pasted directly into the "rich text editor" as it is known in techie-speak. Talk about an easy way to write a chunk of HTML! However, if behind the scenes, that copied region contained some Javascript or other things that make the Trust and Security folks uneasy, you may see an error message about content that is not allowed. Just be warned so you know what is likely to be going on. Cheers "I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's." Top StylingPosted Jun-18-06 09:39:32 PDT Updated Jun-18-06 09:42:53 PDT There are some empty tags sitting right below the title bar as a customization point. Some of the themes like Modern and Sunshine put images and colorful backgrounds here. I'm going to place an image and a fixed background color today. The three rules I added are: #blogAT { display:block; background-color:#006611;height:63px;margin-top:-10px;margin-bottom:6px; } #blogAT-2 { display:none; } #blogAT-3 { display:block; width:100%; height:63px; background-image:url(http://216.101.109.210/SmallGreenMe.jpg); background-repeat:no-repeat; } These three id's are attached to the three 's I mentioned. We're only using two of them so the middle rule sets display:none as a property. Setting any object to display:none causes it to vanish from the page. Presto, you are a magician with a vanishing trick. display:block will get it back for you. In the #blogAT rule, I set the usual background green. Then height:63px makes the area 63 pixels high which happens to be the height of the image I'm going to add later. CSS lets you control the amount of space around an object. The margin property and it's subparts (margin-top, margin-right, margin-bottom, margin-left) are used for this. If you want to control all 4 margin values at once, use the margin property directly. So margin: 5px 10px 6px 0px would set, in order, the top margin to 5px, right margin 10px, bottom margin 6px , left margin 0px. You can remember the order as TRBL (trouble is my mnemonic) or just start at the top and go clockwise. We only want to change two of the settings and leave the other values (whatever they are alone). I set margin-top to -10 pixels. A negative margin value moves the object up rather than down in the case of a top margin. This places my #blogAT div area adjacent to my title bar. The margin-bottom just gives us some space below. The #blogAT-3 rule sets a width of 100%. This is not strictly necessary since 's are block objects and take 100% anyway but having introduced height I thought I'd mention it's mate, width. You can also set height and width using percentages. So a width: 50% would only use half the space. The background-image property in the rule, lets you specify an image to be used for the background of your . You do have to have this image hosted someplace that you can refer to it. The propery value is of the form url:(http://pathToYourImage). The last property, background-repeat says to only display my image once. If I omit this, the image will be repeated over and over (tiling) to fill the area. This can be handy if you are using the image for a true background and want it to stretch/shrink as the screen size varies. In this case, I'm actually using the background image as if it were a foreground image. In case your curious, the image is of me in my Halloween costume with my homemade lightsaber (think 3 foot neon tube powered by 8 AA cells). Member shipscript has produced a great tool that will make all this stuff I've been writing about a piece of cake for you. Hop on over to the posting. It has a link to a tool that will do it all for you. No need to read my CSS musings unless you really want to learn about what is going on. "I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's." Changing the color of your linksPosted Jun-17-06 11:06:09 PDT Updated Jun-17-06 11:09:27 PDT Now that the page is all green rather than Strawberry, the blue links sort of clash. Now normally, I'm not a fan of changing the way links look. After all, do you have an expectation when you see blue underlined text? Of course, you do and you get upset when someone makes text blue and underlines it but it's not a link. Blue underlined has come to be a cue for a link so messing with it can be a bad idea. For those of you who want to make such changes though, I'll talk about styling of links. Suppose we want to make all the links in the nav area and the blog area green so they don't clash like the current blue ones do. We could add the following two lines to our customization rules: div.nav a {color: #006611} div#insideFrame a {color: #006611} The first rule colors all the tags (links) in the nav areas. Recall that all nav areas are surrounded by a |
)  About eBay | Announcements | Security Center | eBay Toolbar | Policies | Government Relations | Site Map | Help | |
Copyright © 1995-2008 eBay Inc. All Rights Reserved. Designated trademarks and brands are the property of their respective owners. Use of this Web site constitutes acceptance of the eBay User Agreement and Privacy Policy.
| |