Positioning the nav tree

[Kitten4u]

Board: eurekatest.proboards.com/

I am trying to make it so the sub menus (in .popup_html) are aligned more like a grid and only overlap on the borders.  I managed to get everything on the first "tier" of tables to align correctly, so no matter which category you pick the next menu will be aligned the way I like.  However, once you get into the second tier (going into sub-boards) this isn't always the case.  I managed to get my hidden category and the first of my guest viewable categories to display correctly, but the last category does not.  So as an example:

Out of Character --> Important Information | this displays correctly
General --> General Board | this does not display correctly

EDIT: I found that this is different for logged out users because I have an extra category I'd rather not reveal to the general public.  For logged out users it's like this:

Out of Character --> Important Information | This does not display correctly (sub-menu is too far down)
General --> General Board | This displays correctly

I haven't done any cross-browser checks, so this is with Chrome.  I'm not sure if that makes a difference.  I've had some success with a very hacky way to fix it all, but I cannot get those two boards to behave.  If one is correct, than the other one isn't.  I think I just need a less hacky way of getting this to work because all this absolute positioning is making my head hurt.  Here's my kind of solution:

.ui-menu ul {margin-left: 156px; margin-top: 56px; width: 200px;}

.ui-menu ul ul {margin-left: 358px; margin-top: 85px;}

.ui-menu ul ul:nth-child(n+3) {margin-left: 358px; margin-top: 115px;}

As a note, if I make that nth-child n+2 instead, the last category displays correctly, it just makes the sub-boards in the Out of Character category display too low.

[Kitten4u]

bump

[Kitten4u]

bump

[Kitten4u]

bump

[Kitten4u]

bump

[Kitten4u]

bump

[Kitten4u]

bump

[Tumbleweed]

Jun 22, 2015 19:52:39 GMT -8 Kitten4u said:

bump

I know you have been bumping this and I have been avoiding this hoping someone else will help. I suck at menus like that but I'm willing to try but I'd need all the css changes you made.

Also, I'm surprised you are saying the Out of Character --> Important Information displays correctly because for me in Chrome and IE, that is the only one that is down one line. When I hover over Out of Character, the five menu items line up even with Out of Character. Same with General, your two menu items line up with General. Going to the next tier, General --->General Board, again the two menu items line up evenly with General Board. So they all are lining up with whatever you hover over except when you go to Out of Character-->Important Information.

Anyway, If you prefer to have someone that is good at these type of menus, feel free to just keep bumping.

[Kitten4u]

You are correct.  I did a bit more flailing since creating this thread and forgot to put it back the way it was.  It is how I described it in the OP now.

I'm willing to try anything at this point because I've done everything I can think of.  Any help would be appreciated.

[Tumbleweed]

Jun 23, 2015 7:26:58 GMT -8 Kitten4u said:

You are correct.  I did a bit more flailing since creating this thread and forgot to put it back the way it was.  It is how I described it in the OP now.

I'm willing to try anything at this point because I've done everything I can think of.  Any help would be appreciated.

So I'm confused. Currently it is the same as I said in my previous post. So are all the submenu items supposed to be even with whatever you hover over or one line down. Or am I still not understanding.

 Edit, Actually, thinking about it, you need them even or you can't select the sub-menu item that appears, which is what I'm experiencing now to select "must reads".

I know I can't help by just what you posted and I don't know if it would be too much of a hassle to pm me (or post it here) all the css pertaining the changes you made to the menu or not, considering I may throw up my hands too. Up to you.

[Kitten4u]

They're supposed to align with the menu you selected.  Here's a quick screenshot of what I consider the problem.  I got .ui-menu the way I want it (categories).  I got .ui-menu ul the way I want it (boards).  Now I'm trying to get .ui-menu ul ul (sub boards) the way I want it.  I don't plan on making any sub-sub boards, so that should be enough.  Here's a screenshot to help:




As for all the css, I could PM it to you, but it'd take me a moment to find it all.  Let me know if that clears things up enough or if you still need it.

[Tumbleweed]

Jun 24, 2015 5:18:20 GMT -8 Kitten4u said:

They're supposed to align with the menu you selected.  Here's a quick screenshot of what I consider the problem.  I got .ui-menu the way I want it (categories).  I got .ui-menu ul the way I want it (boards).  Now I'm trying to get .ui-menu ul ul (sub boards) the way I want it.  I don't plan on making any sub-sub boards, so that should be enough.  Here's a screenshot to help:




As for all the css, I could PM it to you, but it'd take me a moment to find it all.  Let me know if that clears things up enough or if you still need it.

I think I better step out of this because I see nothing bad with what you say is bad. The sub-boards "second" and "subboard" line up evenly with the board "General Board". In fact, everything is lining up perfectly except with the sub-boards in "Important Information". I can't select any of the sub-boards "Must Read", "Lore", "Announcements" and "Suggestions & Questions" because it is one line down and when I move my mouse to select, they disappear because I'm no longer hovering over "Important Information".

The good and bad examples you gave look identical to me unless you are talking a couple pixels too low or something. I can't fix what I'm not seeing so I wish you luck and sorry, I had good intentions of giving it my best shot to help.

[Kitten4u]

Jun 24, 2015 9:14:07 GMT -8 Tumbleweed said:

Jun 24, 2015 5:18:20 GMT -8 Kitten4u said:

They're supposed to align with the menu you selected.  Here's a quick screenshot of what I consider the problem.  I got .ui-menu the way I want it (categories).  I got .ui-menu ul the way I want it (boards).  Now I'm trying to get .ui-menu ul ul (sub boards) the way I want it.  I don't plan on making any sub-sub boards, so that should be enough.  Here's a screenshot to help:




As for all the css, I could PM it to you, but it'd take me a moment to find it all.  Let me know if that clears things up enough or if you still need it.

I think I better step out of this because I see nothing bad with what you say is bad. The sub-boards "second" and "subboard" line up evenly with the board "General Board". In fact, everything is lining up perfectly except with the sub-boards in "Important Information". I can't select any of the sub-boards "Must Read", "Lore", "Announcements" and "Suggestions & Questions" because it is one line down and when I move my mouse to select, they disappear because I'm no longer hovering over "Important Information".

The good and bad examples you gave look identical to me unless you are talking a couple pixels too low or something. I can't fix what I'm not seeing so I wish you luck and sorry, I had good intentions of giving it my best shot to help.

I logged out and I see what you see now. When I log in, there's another category, so I see something slightly different. I'll update the OP.

The behavior you see is what I describe as what happens when I make a piece of css n+2 instead of n+3 (I have since removed that line). So, you are seeing stuff correctly.

[Tumbleweed]

Jun 24, 2015 10:07:22 GMT -8 Kitten4u said:

Jun 24, 2015 9:14:07 GMT -8 Tumbleweed said:

I think I better step out of this because I see nothing bad with what you say is bad. The sub-boards "second" and "subboard" line up evenly with the board "General Board". In fact, everything is lining up perfectly except with the sub-boards in "Important Information". I can't select any of the sub-boards "Must Read", "Lore", "Announcements" and "Suggestions & Questions" because it is one line down and when I move my mouse to select, they disappear because I'm no longer hovering over "Important Information".

The good and bad examples you gave look identical to me unless you are talking a couple pixels too low or something. I can't fix what I'm not seeing so I wish you luck and sorry, I had good intentions of giving it my best shot to help.

I logged out and I see what you see now. When I log in, there's another category, so I see something slightly different. I'll update the OP.

The behavior you see is what I describe as what happens when I make a piece of css n+2 instead of n+3 (I have since removed that line). So, you are seeing stuff correctly.

It wasn't just what I see as a guest on your site although that is a problem, I don't see any difference in the screen cap you posted. You circled the good and bad and to me I see nothing wrong and the examples are working as they should. The sub boards are both showing evenly with the board you are hovering over. Perhaps explain what is wrong with the one you circled as bad? Sorry, just confused on that aspect.

[Kitten4u]

Jun 24, 2015 12:05:05 GMT -8 Tumbleweed said:

Jun 24, 2015 10:07:22 GMT -8 Kitten4u said:

I logged out and I see what you see now. When I log in, there's another category, so I see something slightly different. I'll update the OP.

The behavior you see is what I describe as what happens when I make a piece of css n+2 instead of n+3 (I have since removed that line). So, you are seeing stuff correctly.

It wasn't just what I see as a guest on your site although that is a problem, I don't see any difference in the screen cap you posted. You circled the good and bad and to me I see nothing wrong and the examples are working as they should. The sub boards are both showing evenly with the board you are hovering over. Perhaps explain what is wrong with the one you circled as bad? Sorry, just confused on that aspect.

If you look closely, the bad one is just a few pixels off (I'd estimate around 2-3). I want the borders to line up perfectly.