Forums » Help » CSS Help

I've been messing around with Jacky's template and I moved the navigation to the top right of the template while retaining the original list order. The problem I'm having now is that when this list expands, the character content beneath it doesn't get pushed down. With too many links it will create an overlap of links onto the content.

I think I created some dirty fixes but I'm uncomfortable with that. Anyone got any idea how to fix that? I want to add another image in the navigation menu but only after I fix this.

Thanks!

Edit: Dropdowns for the menu are also a mess. I want the dropdown to show to the right of a link, where the Pokeballs are. I can't seem to figure those out anymore either, although I'm sure I've fixed that sometime in the past. Blargh brainfart.

Start by floating ul#pagetabs to the right instead of clear: right. You could also put the bag as the background of that with padding to the right for some spacing, or you can add an overflow: hidden to #alltabs, which would make it stretch back out after the float is done. To help with the dropdown (which I would suggest having to the left, or it may vanish off the right side of small screens), you can also define a somewhat width on ul#pagetabs, which would making pushing the dropdown around easier.

It would take a LOT of links for that list to overlap the content, probably more than you'll ever use. An alternative to pushing it down would be to restrict the width of ul.inUseWidgets so that no content sits under those links.

And I recommend trying out percentages in your layout, if you feel up to playing with it. That way, you could do something like having your widgets be something like 80% of the width and the navigation be just 20%.

...I hope the things I said make sense. I'm used to explaining a bit more visually.

Add:

#charheader {height: auto;}
#charcontent {clear: both;}

I kept the clear;right; and everything else pretty much intact, but you did make my ask myself why the dropdown was so far on the left instead of on the right. I realized the div layer was 900+ pixels wide so the dropdown aligns to the left of the layer. I fixed it up by setting a new width and redefining the margin and so forth.

It's probably not ideal but the dropdown works for now. I prefer flexible coding to accommodate most content but I'm not feeling good enough to rewrite what works for the sake of that. x_x If you feel up to rewriting the part of the code that makes this work to what you're suggesting then please do, I'm having trouble with it myself.

That did exactly what I wanted, thank you! I remembered it was something simple but it wouldn't come to me.

Much simpler than my sleepy hammering.

I maybe have done literally hundreds and hundreds of these. Maybe.

Looks like I'll have to step up my game