Support for CSS Flyout Menu

[sonjamichelle]

I installed the categories flyout module. I modified the buttons to better suit my site and functionality works just fine.

However on the aesthetics side, I have these rather ugly yellowish lines surrounding my categories.



Reading through the files, tpl_categories_css.php has the following comment:

// May want to add ............onfocus="this.blur()"...... to each A HREF to get rid of the dotted-box around links when they're clicked.
// just parse the $content string and insert it into each A HREF tag

I'm assuming this is telling me how to fix the issue, but I have no clue where to start looking for the $content strings. The statement
really isn't that clear. (Keep in mind I gave up html back when Netscape 2.0 was brand new and in beta and CSS is alien to me. I'm a firefighter not a programmer. )

Any clues, hints, answers, something?

The next issue, how can I left justify the text on the buttons. The centering isn't that pleasing to me.

I'd really love to have a menu like this one:



Though in the light grey of course. But that's wishful thinking and as long as I get rid of the yellow lines I'm happy with the look so far.

[sonjamichelle]

Bleh, I hate replying to myself, but there is no edit post function on my above post. (Weird)

After staring at the css file for an hour or so I figured out what was going on. My original confusion with justifying the text stemmed from the fact I was editing the local file and not the remote file on the server, thus no reflection of my changes on the server. DOH!

While realizing that I caught the section that controlled those ugly yellow lines, well solid-tan according to the css. They're gone too!

This is about I started getting the hang of that particular css file and things started to shape up the way I wanted them. Still not 100% perfect, but it's much better than it started.

Now on to the next tweak. (And here I thought I was done adding/changing functionality 2 days ago! )

[marksu]

My template is designed to widen to hole screen width.
Problem is on wide screen monitors.

When clicking on the menu to get sub menu visible the sub menu has too large gap to the root menu.

Problem comes when user moves cursor to the cap to reach the sub menu, the sub menu dissapears.

This is cause menu thinks user is hoovering out of the menu.

Any ideas how to make the gap fixed to small value?

[ckosloff]

My template is designed to widen to hole screen width.
Problem is on wide screen monitors.
When clicking on the menu to get sub menu visible the sub menu has too large gap to the root menu.
Problem comes when user moves cursor to the cap to reach the sub menu, the sub menu dissapears.
This is cause menu thinks user is hoovering out of the menu.
Any ideas how to make the gap fixed to small value?

You have posted this question before, it is a CSS issue.
In order to avoid this kind of problem you should set your CSS to work with no gaps at all.
You don't know if users will be looking at your site with a wide screen, so you cannot work for that scenario.
You will have to work on your stylesheet.
I suggest using a style editor that will show results in real time, without saving.
I use Top Style Pro, there may be others.
Try commenting out all paddings and margins.
See how it looks and then add them one at a time, until you get the look you want.

[marksu]

Thank you for your reply.
Yes I know it is css issue and was hoping somebody already had it solved as it is a bad feature effecting all users.
I will try to solve it on my own then and also taking in consideration your tips.
Thank you for your reply.

marksu

You have posted this question before, it is a CSS issue.
In order to avoid this kind of problem you should set your CSS to work with no gaps at all.
You don't know if users will be looking at your site with a wide screen, so you cannot work for that scenario.
You will have to work on your stylesheet.
I suggest using a style editor that will show results in real time, without saving.
I use Top Style Pro, there may be others.
Try commenting out all paddings and margins.
See how it looks and then add them one at a time, until you get the look you want.

[lankeeyankee]

Thank you for your reply.
Yes I know it is css issue and was hoping somebody already had it solved as it is a bad feature effecting all users.
I will try to solve it on my own then and also taking in consideration your tips.
Thank you for your reply.

marksu

Try giving your #nav-cat ul ul a negative left margin. Mine is is like this:

#nav-cat ul ul {
position:absolute;
top:5px;
left:149px;
display:none;
margin-left:-7px;
}

[Caralyn]

Hey my buttons are not "flying out"

Why is this?

I am pretty sure I put all the files where they were supposed to go. All I have are static buttons with the same blue/green but not any "movement" any ideas?

[ckosloff]

...any ideas?

Link to your site, please.

[Get Em Fast]

Hey my buttons are not "flying out"

Why is this?

I am pretty sure I put all the files where they were supposed to go. All I have are static buttons with the same blue/green but not any "movement" any ideas?

Yes, a link to your site would be very helpful. Double check all your files, to make sure that they all got put in the correct place. When we have a link to your site, I can fix the css, and give you a copy.

Hope this helps.

[ckosloff]

Hope this helps.

I can't believe you are back. Is it really you?