I want to put a "Grid" of square nav buttons (with rollover) in the right side bar. I did a search and found:
"Sidebar buttons HTML & CSS not showing" and,

Juggledad's: HOWTO: float a button over the header and have it change when hovering.

The "how to" was very helpful and I was able to get a button (with hover/rollover) I wanted in the header, But I am not smart enough to figure out how to apple that to a Text widget in the side bar.

My Side bar will be 200px wide, I want to have a grid of 18 (54px x 54px) buttons (six rows deep of three across). They would have 10px space between (so padding on all sides of 5px for each button?).

I have tried a few things from the two above threads but just keep getting myself lost.

I'm on ata353 and wordPress3.01. But still a rookie!!

Thanks for any help!!

What have you tried that hasn't worked? Maybe I can look at the code and give you some ideas. Building one from scratch could get kind of involved.

Well I tried the html code from Juggledad's "How-to" but put it in the text widget instead of header area. That placed the transparent gif and the link worked. But I don't know how to work with the code for CSS Insert to get the up and down button images to show.

If someone could get me started with one or two buttons, I think I could figure all the putzy Placement of the other buttons to form the grid.

Hey Imilesw,
On another note, back on thread http://forum.bytesforall.com/showthread.php?t=8658 You were talking about custom Links in the page menu. I see were I can create a custom link & add it to the menu. But how can you force that link to open into a new window?

Thanks

On the menu page click on "Screen Options" at the top right. Put a check in the "Link Target" box. Now you will have a choice in each menu to choose "Same Window" or "New Window"

Thanks Larry.

As far as the buttons, I placed this code in the text widget:

<div id="CN_Test">
<a id="CN_Test_image" href="http://mydomain.com"><img src="./wp-content/themes/atahualpa353/images/CN_blank.gif" ></a>
</div>

The link works... But then I don't really know what to place in html/Css Inserts...
Could it be some version of this:

div#CN_Test {z-index: 4; position: relative; float: left; width: auto; margin-right: 50%; margin-left: 50%;
margin-top: -100px;
}
/*--------------------------------------------*/
/*-- This defines the space for the buttons --*/
/*--------------------------------------------*/
a#CN_Test_image img {
height: 300px; width: 200px; border-width: 0; z-index:999;}
/*--------------------------------------*/
/*-- This is the normal buttons image --*/
/*--------------------------------------*/
a#CN_Test_image img {
background: url(./wp-content/themes/atahualpa344/images/CN_normal.jpg) top left no-repeat;}
/*-------------------------------------*/
/*-- This is the hover buttons image --*/
/*-------------------------------------*/
a#CN_Test_image:hover img {
background: url(./wp-content/themes/atahualpa344/images/CN_hover.jpg) top left no-repeat;}
/*------------------------------------------------------------*/
/*---------------- MY login button CSS - END ----------------*/
/*------------------------------------------------------------*/

I tried it and tried to figure out how to adjust the margins to find it, never got anything to show.

It looks like you are defining a single 200px by 300px image instead of 18 single images. Have you tried a table?

With regards to your code a couple of things I would suggest. Instead of defining an ID for the <a> tag use the div ID + a to define. For example

<div id="CN_Test">
<a href="http://mydomain.com"><img src="./wp-content/themes/atahualpa353/images/CN_blank.gif" ></a>
</div>

would be what you put in the text widget and

div#CN_Test a
OR
div#CN_Test img

would go in CSS inserts

This has nothing to do with how you accomplish your grid but is just a though in passing. The grid would either need to be a table as mentioned or a bunch of floating divs.

I THINK all of what I just wrote is accurate. If anyone sees issues please chime in.