Greetings everyone,
I currently updated and go things working on my wayfinder menu flyout system. I just tweaked the font size but I somehow screwed up the look a little and also need to fix the location of the text so I could use some help since I’m a newbie to CSS and all this good stuff.
Current Look:
http://www.tapanime.com/cms/
First Problem, if you hover over Test1 and you see Page FAQs you see the black border on the background image kind of over-laps the menu on the left there, I think that has something to do with when I increased the font size?
Second Problem, The text is centered but it is flush up against the top of the background/box, I’d like to get the text completely centered?
Last Issue, I know this is more a snippet question than a general but I’ll ask here anyway. If you check out this Link:
http://www.tapanime.com/cms/seriesinfo.php the letters are nice and all but I’d like to fix the CSS or anything needed to make them all fit on one line across nice and clean.
Example:
http://www.animenewsnetwork.com/encyclopedia/anime.php
Example2:
http://www.immerse.me.uk/index.php?id=17
Here is my CSS Code:
Main Menu
/********** Main Menu **********/
/* common styling */
#leftMenu {font-family: arial, sans-serif; width:110px; height:160px; position:relative; margin:0; font-size:15px; margin:20px 0;}
#leftMenu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:107px; height:22px; text-align:center; border:0px solid #fff; border-width:0px 0px 0 0; background:#c9c9a7; line-height:19px; font-size:15px; background:url(images/menu.jpg);}
#leftMenu ul {padding:0; margin:0;list-style-type: none;}
#leftMenu ul li {float:left; margin-right:1px; position:relative; }
#leftMenu ul li ul {display: none; }
/* specific to non IE browsers */
#leftMenu ul li:hover a {color:#fff; background:#b3ab79; background:url(images/menu.jpg);}
#leftMenu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
#leftMenu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
#leftMenu ul li:hover ul li:hover a.hide {width:150px;}
#leftMenu ul li:hover ul li ul {display: none;}
#leftMenu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px; background:url(images/menu.jpg);}
#leftMenu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
#leftMenu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
#leftMenu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
#leftMenu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
Any help would be great, still a newbie to CSS and some tweaking with modx
Thanks a bunch
MODX Staff
)
