Thursday, August 18, 2005

(Blogger) Side Bar Help

I made these very nice dashed lines to separate the sections on my sidebar. They show up in my Preview, but even though I've made sure to republish (now at least three times!), they don't show up in the final product. Any thoughts?

3 comments:

paul said...

Is this how you're trying to do it?

≤a≥
≤span
style="font-size:7pt;text-align:left;width:100%;border-top:1px dashed;"≥≤border-top:1px dashed;"≥
≤/a≥≤/span≥

That's not gonna work. Besides the span and the anchor tag being nested wrong, the border-top tag isn't going to do anything, and the span itself really doesn't have anything inside it to allow it to take up any space.

You could do this a number of ways:

Create a div, instead of a span, give it a fixed size, with the top dashed border,

Create a styled HR,

Add a border-top to your sidebar title h2, with top padding to put the line where you want it.

Good luck!

Cate said...

OK, the code you have there looks identical to what I had. I don't get how it shows fine in the preview, but doesn't translate to the published blog. No matter. What I REALLY don't get is the instruction on how to do it properly ... :) Laymens terms? Please?

paul said...

The simpliest way to add a dashed border between your sidebar links is like this:

Add this style to your stylesheet (anywhere after your style type="text/css" in the beginning of your page code):

.sidebarDivider {
padding: 0px 0 0 0px;
border-top: 1px dashed #f00;
}

The first number in the padding is the amount of room it will be from the sidebar header. If you want more space make it say padding: 10px 0 0 0px;

By the way the numbers correspond to the space on the top, right, bottom, and left, in that order. In others words, the order goes clockwise around the div.

The #f00 is the color of the dashes. I picked red. You can look up rgb hex color stuff on the web (and I think we talked about it here somewhere) to help you choose a different color if you want.

By the way f00 is a short cut for what you might see elsewhere as ff0000 which means the first 2 numbers correspond to red, the next 2 to green, the next two to blue, in hex langauge (probably from some aliens with more than ten fingers) ff means 100%, 00 means 0%.

Next add your side bar divider code between your sidebar link lists (where you had the span stuff before)

≤div class="sidebarDivider"≥≤/div≥

(obviously change the brackets to real ones).

There's a few other ways to do this, some more clever like adding a border style to the bottom of the link list to make the divider, or using a stlye HR (horizontal rule tag) for better semantics, or changing the background image, already applied, to do something fancier that you couldn't do with palin old html style (a dotted line made of kittens or broccoli).

Hope this helps more than it confuses.