[Solved]Numerous Nav buttons in side bar?
 

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
would be what you put in the text widget and
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.

OK Larry
So I got ONE button in and working! I put this in the text widget:

<div
id="Auto">
<a href="http://autosnetwork.com" target= "blank"><img src="./wp-content/themes/atahualpa353/images/auto_blank.gif" ></a>
</div>

and this in CSS Inserts:

div#Auto {z-index: 4; position: top left; float: center; width: auto; margin-right: 0px; margin-left: 73px;
margin-top: 0px;
}
/*--------------------------------------------*/
/*-- This defines the space for the buttons --*/
/*--------------------------------------------*/
div#Auto {
height: 53px; width: 53px; border-width: 0; z-index:999;}
/*--------------------------------------*/
/*-- This is the normal buttons image --*/
/*--------------------------------------*/
div#Auto img {
background: url(./wp-content/themes/atahualpa353/images/Auto_normal.png) top left no-repeat;}
/*-------------------------------------*/
/*-- This is the hover buttons image --*/
/*-------------------------------------*/
div#Auto :hover img {
background: url(./wp-content/themes/atahualpa353/images/Auto_hover.png) top left no-repeat;}


I am able to move the button around with the Margin Left, margin right values. So to add buttons and build the grid, I assume (unless I went with a table) I would duplicate both sections (with new id) and adjust the margins. Correct? I realize this would looooong and probably not the most efficient, but it should work.

And you will have to get into floating the divs and then clearing the floats to start a new row. So if you had auto1 auto2 auto3 auto4 auto5 auto6 for IDs the float for two rows would be
I think the clear:right is correct.

This works:
Using your example (auto1, auto2, auto3) would be in the first row. 4/5/6 in the second.

For whatever reason auto2/auto5 go on their own, but auto3/auto6 I had to use negative top margin to force it up. But it works! All the rollovers work. Now just four more rows! :);)

div#auto1 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 10px; margin-top: 0px;}

div#Auto2 {z-index: 4; position: top left; float: center; width: auto; margin-right: 0px; margin-left: 68px; margin-top: 0px;}

div#Auto3 {z-index: 4; position: top left; float: right; clear:right; width: auto; margin-right: 10px; margin-left: 0px; margin-top: -53px;}

div#Auto4 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 10px; margin-top: 5px;}

div#Auto5 {z-index: 4; position: top left; float: center; width: auto; margin-right: 0px; margin-left: 68px; margin-top: 5px;}

div#Auto6 {z-index: 4; position: top left; float: right; clear:right; width: auto; margin-right: 10px; margin-left: 0px; margin-top: -53px;}

There is no float:center which probably part of the reason you are having to use negative margins. Also using float right can be problematic as you might have something like the follwoing happen in some cases.

xxxx xxxx xxxx
xxxx xxxx xxxx
xxxx xxxx xxxx


I typically use float:left as I showed you. Did you try that and it not work?

I think I tried it, but now can't remember. I will plug it in and let you know.

I would let you look at the site, but it's a localhost at this point.

Stay tuned...

OK... Yes, that worked my friend! I think the first time I tried it I had the margins way off. Learning everyday!!
Thanks for your help on this Larry!
This is what I have:

div#auto1 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 10px; margin-top: 0px;}

div#Auto2 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 5px; margin-top: 0px;}

div#Auto3 {z-index: 4; position: top left; float: left; clear:right; width: auto; margin-right: 0px; margin-left: 5px; margin-top: -53px;}

div#Auto4 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 10px; margin-top: 5px;}

div#Auto5 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 5px; margin-top: 5px;}

div#Auto6 {z-index: 4; position: top left; float: left; clear:right; width: auto; margin-right: 0px; margin-left: 5px; margin-top: 5px;}

I'm designing this on localhost otherwise I would show you, but attached is a screen grab. All the buttons are the same right now because I wanted to make sure I could get it to work before creating all the different buttons. Rollover turns it to a bright yellow gold.

I have another question though. All these buttons will take the viewer to another area. Right now the buttons have normal and hover view. How would I code a "selected" button? So if the viewer was on page "auto1" that button would be a different color than all others.

That's a bit more complicated and I have not used that kind of conditional logic. Here is an article that could help you build that logic though if you think you really need it.

After I read the article I got intrigued and started playing around. First you will need a php aware widget. I currently like My Custom Widgets. In that widget I put the following which rendered Page One according to some css I had written to make the text red if I am on the home page. #current {color:red;}
With your situation you would need to use something like the following.
I THINK that's right. Then you would create 2 different css entries for the selector auto1on for when you are on the page and auto1 off when not. Then just repeat for all the pages.

I hope that helps and doesn't confuse. My little test worked for me. You can see my teeny tine test on my super ugly test site. On the home page the words "Page One" on the right are red. On any other page there are not.

One other way of accomplishing what you want is to create 18 widgets with the code in each to highlight one particular button. Then use widget logic plugin or something of that sort to only show that widget on that particular page.

Good Luck.

Thanks Larry
I'll look at the article and your info. I need to decide if I really need to do it or not (still try to figure out the site). Hope you did not spend a lot of time on it.

Thanks for all your help.

I PM'd you as well.