 | 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." |
)  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.
| |