About Me- Member since: Oct-26-98 12:59:40 PST
- Location: United States
- 2,107 views
| Most Recent Posts Posted Jul-27-07 18:22:04 PDT I'm at Adobe Flex Camp this evening learning to use Flex. It looks really cool and produces apps that run in the Flash player and hence in all browsers with Flash player. An interesting technology. I'm looking forward to learning more about it. Posted Feb-13-07 13:35:10 PST Updated Feb-13-07 14:11:26 PST Sometimes you need to run across a page that is wider than your screen. Dare I say that scrolling right-left-right-left... get old really quick. Why does this happen? There are two main causes:
A very long line with no spaces at all in it. The browser, just like people who typeset books, knows to break a long line of text between words (e.g. where there is a space). The poor browser that hits a very long stream of characters soldiers on hoping for a space where the line can be broken. Eventually, it reaches the width of your screen and just keeps on going causing the scrollbars to appear. When it eventually finds a space, a new line can start.
A very wide image (wider than your screen) is used. This is less common than the long string case but the problem is similar. There is no way to break the image in half so the browser pushes the content wider than your screen
What can you do to make such pages less painful to read? The easiest thing is to create a bookmarklet and just select it when you run into a page that is too wide. A bookmarklet is a canned piece of Javascript that, when selected, will be executed and can adjust the long strings on the page to make them breakable. For those technically interested, it inserts special tags called "wbr" tags which tell the browser "If you need to break this long string, I "Want BReak" here. This does not permanently change anything, just adjusts the page you are looking at so no worries about hurting anything. Where can you get such a wonderful bookmarlet you might ask?
Well, I found the bookmarklet at http://forums.mozillazine.org/viewtopic.php?p=1665448#1665448
The author of the post (makaiguy) got it from somewhere else earlier and was passing it along so I'm repeating the favor for eBay users. The essence of what you need to do is install the bookmarklet shown on that page. I can't post it here because it contains Javascript code which, if it was allowed here, could create security issues.If you also have wide image problems, there is a separate bookmarklet for that problem in the same posting. I've tried this and it seems to work fine in Firefox and Internet Explorer.Posted Aug-16-06 18:04:41 PDT The following new features are available in Blogs. They represent some
of the things that have been on people's "want it"
lists. - Store sellers will have "Visit Seller's
Store" in the member information line instead of "View items for sale"
making it easy to go to the Seller's store from their
blog.
- The blogs Hub page (http://blogs.ebay.com)
search area uses a pulldown instead radio buttons previously
used making UI consistent with other search areas.
- Blog comments will preserve line spacing of
the original comment. This will allow blog comments to retain the
appearance seen when the comment was written and help
readability
- The bug in the Html Editor (Rich Text
Editor) where pasted comment got lost has been
fixed.
- The bug in the Html Editor (Rich Text
Editor) requiring image tags to have quotes around the src reference to
work has been fixed.
- If Settings says "show all
posts in current month" and a new month starts and post count is zero
for month, we will now show a new message "No posts this month. See the
archives for older posts."
- RSS auto-discovery added
to the page so that browsers supporting this allow the reader to
subscribe to your blog RSS feed with a single click. Major browsers
that support this are: Firefox, Opera, and IE
7.
- The HTML Title tag has been made more
descriptive to include the title of your blog.
- A
number of cosmetic cleanups
"I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's." Posted Jul-04-06 20:33:39 PDT Updated Sep-15-06 16:03:58 PDT This is an attempt to gather all the feature requests for Blogs that I can find on the Blogs board into one place. Feel free to leave other suggestions as comments to this thread. I've also tried to list known bugs in Blogs along with workarounds at the end of this posting.
General
- Way to link your blog to your store
- Link to My Blog from My eBay
- An anchored Visit counter so it's easy to see
- Make tag more descriptive so bookmarking a member's blog leaves a readable name</font></li>
<li><font size="2">Link from feedback page to a member's blog</font></li>
<li><font size="2">Link to blogs relevant to a category on the relevant categories page</font></li>
<li><font size="2">Most popular blogs (ala Pulse) list</font></li>
<li><font size="2">Add icon to those after member's feedback info, about me, power seller etc. to link to member's blog<br></font></li>
<li><font size="2">Option to send a copy of a comment to your My Messages area with link back to the blog</font></li>
<li><font size="2">Easy way to find comments you have made on other's blogs</font></li>
<li><font size="2">Add "My Favorite Blogs" to My eBay area</font></li>
<li><font size="2">Ability to preview Custom Css effects when creating it.</font></li>
<li><font size="2">More links to blogs from more places (e.g. eBay Home Page)</font></li>
<li><font size="2">GoTo field on pagination control to go directly to a page</font></li><li><font size="2">Blog owner's own menu area in the left nav where they control the content.</font></li><li><font size="2">Ability to put Skype button in anchored place on the blog (maybe after Member Icons?)</font></li><li><font size="2">Option to receive email when someone comments on your blog</font></li><li><font size="2">Link for "Send this post to a friend:<br></font></li></font></ul><font style="font-weight: bold; font-family: Arial;" size="2">Rich Text Editor/Entry & Edit Page<br></font>
<ul style="font-family: Arial;">
<li><font style="font-family: Arial;" size="2">Link creator tool similar to that in Guide editor</font></li>
<li><font style="font-family: Arial;" size="2">Photo insertion tool similar to that in Guide editor</font></li>
<li><font style="font-family: Arial;" size="2">Allow owner theme color to be used here</font></li>
<li><font style="font-family: Arial;" size="2">Spell checker</font></li></ul><font style="font-weight: bold; font-family: Arial;" size="2">Comments to entry</font>
<ul style="font-family: Arial;"><font style="font-family: Arial;" size="2">
<li>Preserve linebreaks in responses</li>
<li>Simple HTML should be allowed , :-) icons</li>
<li>Links in responses</li>
<li>Allow comments to a comment to be threaded/connected to that comment</li>
<li>Ability to block posts on an entry rather than the whole blog</li><li>Per entry ability to block a list of users</li><li>Per entry ability to allow only a select list of users to view the entry<br></li></font></ul><font style="font-weight: bold; font-family: Arial;" size="2"><b>Blog Home Page<br></b></font>
<ul style="font-family: Arial;">
<li><font style="font-family: Arial;" size="2">Link at bottom when there are more posts than are being shown</font></li></ul><font style="font-weight: bold; font-family: Arial;" size="2"><b>Undesired features<br></b></font>
<ul style="font-family: Arial;">
<li><font style="font-family: Arial;" size="2">No rating of blogs</font></li></ul><font style="font-weight: bold; font-family: Arial;" size="2"><b><br>Known problems with Blogs and workarounds</b></font><font style="font-family: Arial;"><br><ul><li><font size="2">When Viewing HTML, don't apply the font selection to text typed. Cosmetic issue. Final results are not affected.</font></li>
</ul><pre><font size="-0"><font color="#a8a8a8" size="1">"I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's."</font></font></pre></font></div><div class="BE-CommentLinks BE_CommentLinks"><a href="http://blogs.ebay.com/ws/eBayISAPI.dll?BlogAddComment&user=rrragan&id=2583010#lastcomment" class="mr10">Comment</a>|<a href="http://blogs.ebay.com/ws/eBayISAPI.dll?ReportBlogAbuse&user=rrragan&type=e&id=2583010" style="margin:0 8px 0 10px">Report this post</a></div></div><div class="custumhr"></div><div class="BE-numComments"><a href="http://blogs.ebay.com/rrragan/entry/Blog-not-really-gone-eBay-Blogs-bug/_W0QQidZ2337010#comments">2 comments</a></div><h2 class="BlogEntryTitle"><a href="http://blogs.ebay.com/rrragan/entry/Blog-not-really-gone-eBay-Blogs-bug/_W0QQidZ2337010"><strong>Blog not really gone. eBay Blogs bug.</strong></a></h2><div class="BlogEntryContent"><div class="BE-PostDate BE_PostDate">Posted Jul-01-06 10:55:13 PDT</div><div class="BlogEntry"><font size="2"><span style="font-family: Arial;">Posting on the first of July in hopes that this gets around the bug in Blogs which makes it think my <span style="font-family: Arial;">b</span>log is new since a new month has started. Presumably a test for the number of posts<span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"></span></span></span></span></span></span></span></span></span></span></span></span></span> is coming up zero<span style="font-family: Arial;"> <span style="font-family: Arial;">(<span style="font-family: Arial;">i<span style="font-family: Arial;">m<span style="font-family: Arial;">p<span style="font-family: Arial;">r<span style="font-family: Arial;">o<span style="font-family: Arial;">p<span style="font-family: Arial;">e<span style="font-family: Arial;">r<span style="font-family: Arial;">l<span style="font-family: Arial;">y<span style="font-family: Arial;"> <span style="font-family: Arial;">b<span style="font-family: Arial;">a<span style="font-family: Arial;">s<span style="font-family: Arial;">e<span style="font-family: Arial;">d<span style="font-family: Arial;"> <span style="font-family: Arial;">o<span style="font-family: Arial;">n<span style="font-family: Arial;"> <span style="font-family: Arial;">p<span style="font-family: Arial;">o<span style="font-family: Arial;">s<span style="font-family: Arial;">t<span style="font-family: Arial;">s<span style="font-family: Arial;"> <span style="font-family: Arial;">i<span style="font-family: Arial;">n<span style="font-family: Arial;"> <span style="font-family: Arial;">t<span style="font-family: Arial;"><span style="font-family: Arial;">h<span style="font-family: Arial;">e<span style="font-family: Arial;"> <span style="font-family: Arial;">m<span style="font-family: Arial;">o<span style="font-family: Arial;">n<span style="font-family: Arial;">t<span style="font-family: Arial;">h<span style="font-family: Arial;">)</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> and making it look like I'm a new blogger. Here goes nothing.<br><br>"I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's."</span></font></div><div class="BE-CommentLinks BE_CommentLinks"><a href="http://blogs.ebay.com/ws/eBayISAPI.dll?BlogAddComment&user=rrragan&id=2337010#lastcomment" class="mr10">Comment</a>|<a href="http://blogs.ebay.com/ws/eBayISAPI.dll?ReportBlogAbuse&user=rrragan&type=e&id=2337010" style="margin:0 8px 0 10px">Report this post</a></div></div><div class="custumhr"></div><div class="BE-numComments"><a href="http://blogs.ebay.com/rrragan/entry/Height-matters/_W0QQidZ2151010#comments">2 comments</a></div><h2 class="BlogEntryTitle"><a href="http://blogs.ebay.com/rrragan/entry/Height-matters/_W0QQidZ2151010"><strong>Height matters...</strong></a></h2><div class="BlogEntryContent"><div class="BE-PostDate BE_PostDate">Posted Jun-29-06 18:17:28 PDT Updated Jun-29-06 18:17:59 PDT</div><div class="BlogEntry"><P><FONT face=Arial size=2>Css has a property named line-height. What might this be used for?</FONT></P>
<P><FONT face=Arial size=2>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. </FONT></P>
<P><FONT face=Arial size=2>.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.</FONT></P>
<P><FONT face=Arial size=2>Cheers</FONT></P><PRE><FONT size=+0><FONT color=#a8a8a8 size=1>"I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's."</FONT></FONT></PRE></div><div class="BE-CommentLinks BE_CommentLinks"><a href="http://blogs.ebay.com/ws/eBayISAPI.dll?BlogAddComment&user=rrragan&id=2151010#lastcomment" class="mr10">Comment</a>|<a href="http://blogs.ebay.com/ws/eBayISAPI.dll?ReportBlogAbuse&user=rrragan&type=e&id=2151010" style="margin:0 8px 0 10px">Report this post</a></div></div><div class="custumhr"></div><div class="BE-numComments"><a href="http://blogs.ebay.com/rrragan/entry/Text-alignment-left-right-left-right-left-ri/_W0QQidZ1139010#comments">0 comments</a></div><h2 class="BlogEntryTitle"><a href="http://blogs.ebay.com/rrragan/entry/Text-alignment-left-right-left-right-left-ri/_W0QQidZ1139010"><strong>Text alignment (left, right, left, right, left, right....)</strong></a></h2><div class="BlogEntryContent"><div class="BE-PostDate BE_PostDate">Posted Jun-23-06 20:45:59 PDT Updated Jun-23-06 20:46:47 PDT</div><div class="BlogEntry">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".<br><br>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 <div> tag with a border to better show the alignment. First we have text-align:center.<br><br><div style="border: 2px solid blue; 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</div><br>Let's show the other forms for comparison:<br><br><div style="border: 2px solid blue; text-align: right;">This
text is going to be aligned right within it's containing div tag so
you can see how it lays out</div><p></p><div style="border: 2px solid blue; text-align: justify; width: 20%;">This
text is going to be justified within it's containing div tag so
you can see how it lays out</div><br>and for completeness, let's see left alignment which is the default<br><br><div style="border: 2px solid blue; text-align: left;">This
text is going to be aligned left within it's containing div tag so
you can see how it lays out</div><br>I forced the justified case <div> 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.<br><br>Cheers<br><pre><font><font color="#a8a8a8" size="1">"I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's."</font></font></pre><br></div><div class="BE-CommentLinks BE_CommentLinks"><a href="http://blogs.ebay.com/ws/eBayISAPI.dll?BlogAddComment&user=rrragan&id=1139010#lastcomment" class="mr10">Comment</a>|<a href="http://blogs.ebay.com/ws/eBayISAPI.dll?ReportBlogAbuse&user=rrragan&type=e&id=1139010" style="margin:0 8px 0 10px">Report this post</a></div></div><div class="custumhr"></div><div class="BE-numComments"><a href="http://blogs.ebay.com/rrragan/entry/Back-to-font-basics/_W0QQidZ601010#comments">0 comments</a></div><h2 class="BlogEntryTitle"><a href="http://blogs.ebay.com/rrragan/entry/Back-to-font-basics/_W0QQidZ601010"><strong>Back to font basics</strong></a></h2><div class="BlogEntryContent"><div class="BE-PostDate BE_PostDate">Posted Jun-21-06 22:09:58 PDT Updated Jun-23-06 20:46:28 PDT</div><div class="BlogEntry"><p>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:</p>
<p>font-family (the name of the font you want, e.g.Times, Courier, sans-serif)</p>
<p>font-size This can take several value forms:</p>
<ul>
<li> a clothing-style size (xx-small, small, medium, large)</li>
<li>the words "larger" or "smaller" to get a font bigger or smaller than the one you currently have</li>
<li>a percentage (e.g. 150% of the current size)</li>
<li>a number plus a units designator (e.g 12pt, 1.5em, 1pc (pica), 12px (pixels on a screen), .3in (inches), .1cm, 25mm (centimeters/millimeters)</li></ul>
<p>font-style (normal, italic, or oblique)</p>
<p>font-variant (normal, small caps)</p>
<p>font-weight This can take several value forms:</p>
<ul>
<li>normal</li>
<li>bold</li>
<li>bolder</li>
<li>lighter</li>
<li>100, 200, 300,...900 for increasing density. 400=normal, 700=bold</li></ul>
<p>font-stretch Values are:</p>
<ul>
<li>normal</li>
<li>wider</li>
<li>narrower</li>
<li>ultra-condensed</li>
<li>extra-condensed</li>
<li>condensed</li>
<li>semi-condensed</li>
<li>semi-expanded</li>
<li>expanded</li>
<li>extra-expanded</li>
<li>ultra-expanded</li></ul>
<p>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</p>
<p style="font-weight: 900; font-size: x-large; font-style: oblique; font-variant: small-caps; font-stretch: ultra-expanded;">This is fairly distinctive text.</p>
<p>Happy fonting!</p><pre><font><font color="#a8a8a8" size="1">"I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's."</font></font></pre></div><div class="BE-CommentLinks BE_CommentLinks"><a href="http://blogs.ebay.com/ws/eBayISAPI.dll?BlogAddComment&user=rrragan&id=601010#lastcomment" class="mr10">Comment</a>|<a href="http://blogs.ebay.com/ws/eBayISAPI.dll?ReportBlogAbuse&user=rrragan&type=e&id=601010" style="margin:0 8px 0 10px">Report this post</a></div></div><div class="custumhr"></div><div class="BE-numComments"><a href="http://blogs.ebay.com/rrragan/entry/Pseudo-classes-for-links-and-text-decoration/_W0QQidZ427010#comments">0 comments</a></div><h2 class="BlogEntryTitle"><a href="http://blogs.ebay.com/rrragan/entry/Pseudo-classes-for-links-and-text-decoration/_W0QQidZ427010"><strong>Pseudo classes for links and text-decoration</strong></a></h2><div class="BlogEntryContent"><div class="BE-PostDate BE_PostDate">Posted Jun-19-06 21:46:49 PDT Updated Jun-19-06 22:34:13 PDT</div><div class="BlogEntry">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.<br><br><a href="http://blogs.ebay.com" style="text-decoration: none;">Go to main blogs page</a><br><br>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 <a> 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. <br><br>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. <br><br>The <a> 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 <a> tag and an example of the user of each are:<br>a:link {color: #FF0000} /* color for unvisited link */<br>a:visited {color: #00FF00} /* color for visited link */<br>a:hover {color: #FF00FF} /* color to show when mouse hovers over link */<br>a:active {color: #0000FF} /* color to show when mouse is clicked on link */<br><br>To help visually cue links on our China site (since they have no underline), we have a CSS rule like:<br><br>a:hover{color:#F60;text-decoration:underline;}<br><br>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.<br><br>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).<br><br>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:<br><br><style>a:hover.hoverpop {font-size:150%}</style><a href="http://www.ebay.com" class="hoverpop">eBay Home Page</a><br><br>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.<br><br>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:<br><a href="url you want to link to goes in between the quotes">text you want to show as a link</a>. After entering the link you can turn off View HTML and continue editing merrily along.<br><br>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. <span class="ebay">For example, here is the <span class="pipe"></span></span><a href="http://pages.ebay.com/sitemap.html">site map</a> 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.<br><br>Cheers<br><pre><font color="#a8a8a8" size="1">"I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's."</font></pre><br></div><div class="BE-CommentLinks BE_CommentLinks"><a href="http://blogs.ebay.com/ws/eBayISAPI.dll?BlogAddComment&user=rrragan&id=427010#lastcomment" class="mr10">Comment</a>|<a href="http://blogs.ebay.com/ws/eBayISAPI.dll?ReportBlogAbuse&user=rrragan&type=e&id=427010" style="margin:0 8px 0 10px">Report this post</a></div></div><div class="custumhr"></div><div class="BE-numComments"><a href="http://blogs.ebay.com/rrragan/entry/Top-Styling/_W0QQidZ338010#comments">0 comments</a></div><h2 class="BlogEntryTitle"><a href="http://blogs.ebay.com/rrragan/entry/Top-Styling/_W0QQidZ338010"><strong>Top Styling</strong></a></h2><div class="BlogEntryContent"><div class="BE-PostDate BE_PostDate">Posted Jun-18-06 09:39:32 PDT Updated Jun-18-06 09:42:53 PDT</div><div class="BlogEntry">There are some empty <div> 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.<br><br>I'm going to place an image and a fixed background color today. The three rules I added are:<br><br>#blogAT { display:block; background-color:#006611;height:63px;margin-top:-10px;margin-bottom:6px; } <br>#blogAT-2 { display:none; } <br>#blogAT-3 { display:block; width:100%; height:63px; background-image:url(http://216.101.109.210/SmallGreenMe.jpg); background-repeat:no-repeat; }<br><br>These three id's are attached to the three <div>'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.<br><br>In the #blogAT rule, I set the usual background green. Then height:63px makes the <div> 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. <br><br>The #blogAT-3 rule sets a width of 100%. This is not strictly necessary since <div>'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 <div>. 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.<br><br>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).<br><br>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 <a href="http://blogs.ebay.com/shipscript/entry/Customize-your-Blog-with-Stylesheets/_W0QQidZ286015">posting</a>. 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.<br><br><pre><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font><font color="#a8a8a8" size="1">"I am an eBay employee. The opinions expressed in my blog are my own, and not eBay's."</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></pre></div><div class="BE-CommentLinks BE_CommentLinks"><a href="http://blogs.ebay.com/ws/eBayISAPI.dll?BlogAddComment&user=rrragan&id=338010#lastcomment" class="mr10">Comment</a>|<a href="http://blogs.ebay.com/ws/eBayISAPI.dll?ReportBlogAbuse&user=rrragan&type=e&id=338010" style="margin:0 8px 0 10px">Report this post</a></div></div></div></div></div></div></div></td></tr></table><div id="SupportiveNavigation"><!-- SupportiveNav --><!--cacheStatus: false--><span class="ebay"><div id="glbfooter"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="g-pipe"><img src="http://pics.ebaystatic.com/aw/pics/s.gif" height="10" width="1"><br><a href="http://pages.ebay.com/aboutebay.html">About eBay</a> | <a href="http://www2.ebay.com/aw/marketing.shtml">Announcements</a> | <a href="http://pages.ebay.com/securitycenter/index.html">Security Center</a> | <a href="http://sofe.ebay.com/ws/eBayISAPI.dll?SojRedirect&cid=1285&ebayredir=http://pages.ebay.com/ebay_toolbar/index.html">eBay Toolbar</a> | <a href="http://pages.ebay.com/help/policies/index.html" rel="nofollow">Policies</a> | <a href="http://www.ebaymainstreet.com">Government Relations</a> | <a href="http://pages.ebay.com/sitemap.html">Site Map</a> | <a href="http://pages.ebay.com/help/index.html">Help</a></td></tr><tr><td height="4"></td></tr><tr><td height="1" bgcolor="#CCCCCC" colspan="2"></td></tr><tr><td height="4"></td></tr><tr class="g-hlp" valign="top"><td class="g-nav coreFooterLegalNotice">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 <a href="http://pages.ebay.com/help/policies/user-agreement.html" rel="nofollow">User Agreement</a> and <a href="http://pages.ebay.com/help/policies/privacy-policy.html" rel="nofollow">Privacy Policy</a>.<br><img src="http://pics.ebaystatic.com/aw/pics/s.gif" height="10"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="g-nav" width="100%"><a href="http://viv.ebay.com/ws/eBayISAPI.dll?EbayTime">eBay official time</a></td></tr></table></td></tr></table><div id="cobrandFooter"></div></div></span><script src="http://include.ebaystatic.com/categoryjs/82/en_US_MAIN/category_82en_US_MAIN0.js" type="text/javascript"></script><script type="text/javascript">var un="undefined";if(typeof(vjo)!=un && typeof(vjo.darwin)!=un && typeof(vjo.darwin.core)!=un && typeof(vjo.darwin.core.ebayheader)!=un && typeof(vjo.darwin.core.ebayheader.rtm)!=un && typeof(vjo.darwin.core.ebayheader.rtm.GlobalHeaderRtmCall)!=un)vjo.darwin.core.ebayheader.rtm.GlobalHeaderRtmCall.submitRTMCall("http://include.ebaystatic.com/v4js/en_US/e567/GlobalNavVjoOpt23_Rtm_e5676717327_1_en_US.js")</script><script><!--
var pageID='BlogHome';
var pageName='Blog_Home';
//--></script></div></div><!--nu.s2qjs63,RcmdId BlogHome,RlogId p4ulpdlwc%3D9mt*u1pnu52-11afb4964d9--><script type="text/javascript">vjo.dsf.cookie.VjCookieJar.writeCookieEx("lucky9", "5796373", 730);
</script><script type="text/javascript" src="http://include.ebaystatic.com/v4js/en_US/e563/BlogApp_blogHome_e5636564648_6_en_US.js"></script><script type="text/javascript">vjo.needs("vjo.dsf.typeextensions.string.Comparison");
String.prototype.replaceToken=function(_1,_2,_3){
var rv=_1;
while(rv.has(_2)){
rv=rv.replace(_2,_3);
}
return rv;
};
String.prototype.replaceTokensEx=function(_5){
var rv=this,re,tkn,a=arguments,l=a.length;
for(var i=1;i<l+1;i++){
rv=this.replaceToken(rv,_5.replace("n",(i)),a[i]);
}
return rv;
};
String.prototype.replaceTokens=function(){
var rv=this,re,tkn,a=arguments,l=a.length;
for(var i=0;i<l;i++){
rv=this.replaceToken(rv,"<#"+(i+1)+"#>",a[i]);
}
return rv;
};
vjo.needs("vjo.dsf.cookie.VjCookieJar");
vjo.needs("vjo.dsf.typeextensions.string.TokenReplacement");
vjo.needs("vjo.dsf.document.Element");
vjo.type("vjo.darwin.core.ebayheader.rebate.Rebate").props({Refresh:function(_1,_2,_3){
var D=vjo.dsf.document;
var E=D.Element;
var _6=E.get(_1);
if(_6){
if(this.IsShowMagicRebate(_6,_2)){
E.toggleHideShow(_1,true);
}else{
if(this.IsShowVibrantCoupon()){
var _7=_6.getElementsByTagName("span")[0];
if(_7){
_7.innerHTML=_3;
E.toggleHideShow(_1,true);
}
}
}
}
},IsShowVibrantCoupon:function(){
var _8=vjo.dsf.cookie.VjCookieJar.readCookie("ebay","sbf");
if(_8){
return vjo.dsf.cookie.VjCookieJar.getBitFlag(_8,29)==1;
}
},IsShowMagicRebate:function(_9,_a){
var _b=_9.getElementsByTagName("img")[0],rate=vjo.dsf.cookie.VjCookieJar.readCookie("npii","mri"),perc;
if(this.IsExpired()){
return false;
}
if(!rate){
return false;
}
perc=this.GetRate(rate);
if(perc){
perc=this.IsValidRate(perc);
}
if(perc!==null&&_b){
_b.src=_b.src.replaceToken(_b.src,_a,perc);
return true;
}else{
return false;
}
},IsExpired:function(){
var _c=new Date().getTime();
var _d=this.getClientOffset(_c);
var _e=vjo.dsf.cookie.VjCookieJar.readCookieObj("npii","mri");
if(_e!==null){
var _f=parseInt(_e.maxage,16)*1000;
if(_f>0){
var _10=_f-_c+_d;
if(_10<0){
return true;
}
}
}
return false;
},getClientOffset:function(_11){
var _12;
var _13=vjo.dsf.cookie.VjCookieJar.readCookie("ebay","cos");
if(_13!==null&&_13.length>0){
_12=parseInt(_13,16)*1000;
}else{
_12=3600000;
}
return _12;
},IsValidRate:function(_14){
var R=parseInt(_14,10);
return (R>0&&R<100)?R:null;
},GetRate:function(cv){
var ar=cv.split(":");
return ar.length>3?ar[2]:null;
}});
</script><script type="text/javascript">vjo.darwin.tracking.rover.Rover.roverTrack();
(function(){
var _d = vjo.dsf.EventDispatcher;
var _r = vjo.Registry;
_d.add('v4-0','click',function(event) { return this.open("http://pages.ebay.com/help/welcome/contextual/rss.html", "jsWin0", "width=472,height=320,location=no,menubar=no,scrollbars=yes,resizable=no,status=no", false, false, 472, 320); },vjo.dsf.window.utils.VjWindow);_d.add('v4-0','click',function(event) { return false });})();
</script><script type="text/javascript">// @JsDoNotOptimize
// @JsDoNotLintValidate
// @Package vjo.dsf
vjo.dsf.EventDispatcher.load(document.body);
</script></body></html>
|
)