SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Superfish css problems (please help)

    hi everyone. i am stumped with this css problem. i am currently working on a superfish menu and i am not sure how to correct a problem with the menu in my Css code. anyone in the know? please help if you can. this is the site with the menu.
    u will see what i mean when you move your mouse over the "behind the scenes" button. i have attached a screen shot

    ive been messing with the code for days now with no luck.
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi jgbauer, welcome to SitePoint!

    Here is a live link: http://windsofchangetv.com/

    Before making suggestions, could you clarify how you want the menu to look? E.g. Where do you want the flyout to sit. I can see the problem, but don't actually know how you want it to end up.

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks ralph well what happends is that when you mouse over "behind the scenes" the menu doesn't align properly you can see a bit of an overlap.

    also on the new popped up menu when you move your mouse over them the hover bg fills a space to the right of about 30px where the normal bg is just transparent.

    trying to fix the alignment as well as fill that transparent space.

    any suggestions im stumped.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jgbauer View Post
    the menu doesn't align properly...
    Yep, I can see what's happening; but I was asking what "properly" actually means. That is, what would be the proper alignment? Do you want the left side of the popups to align with the right side of the main menu? (You have an idea in your mind of what the "proper" look is, but before I make changes I need to know what look you are after. We could, of course, put the popups on the far right of the screen... which is obviously not what you have in mind )

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    trying to get the popup menu to line up with the right edge of the main menu.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The main problem seems to be that you <ul> is not wide enough. The <a> links are set to width: 100%, but they also have 1em right and left padding, making them wider than the <ul>. The <a>s have a bottom white line, which makes the menu appear to have the corrdct width, as the white lines fill the column; BUT, they are actually hanging outside the <ul>. So when you hover over a link, the popups are sitting right beside the parent <ul>.

    SO: you need to change the width of the <ul> so that it will actually fill the column, and then reduce the width of the <a>s to account for the padding (because padding is added to overall width, making the <a>s more than 100%.

    I've had a bit of trouble testing the changes from my end, hence I can't post the actual code you should use. The widths are all mixed up anyway: ems and %s, which doesn't help.

    I hope these suggestions can set you in the right direction. Otherwise, I'm sure someone with a better eye will post some code.

  7. #7
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok im making headway. i made some changes. the menus are lining up but now the problem is that the hoverbgs and the horizontal lines are extending past what i want. you can see what i mean on the live site.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, on this rule ".sf-menu, .sf-menu *" you set a width:181px. That rule will target all children. Anchors included .

    So you set padding on the anchor and then taht width and that's forcing it too wide.

    You can set width:auto on a rule with higher specificity to overcome this
    Code:
    .sf-menu a{width:auto;}
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet!!! ok im one step closer. ok last problem remaining in the menu. everything else is fixed. thank you thank you the last problem is that after you mouse over onto the submenu the hoverbg on the main menu shrinks by about 30px.

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The last problem is easily corrected.

    It is caused by the width change you have on hover. Quickest solution would be to just remove the width rule here.
    Code:
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    	background:		#99c2e7;
    	outline:		0;
    	width: 151px; 
    }
    And it is the padding expanding the link background before the mouse travels to the sub-list, that's making the link look right at default font-size.
    Code:
    .sf-menu a {
    	border-left:	1px solid #;
    	border-top:		1px solid #99c2e7;
    	padding: 		.75em 1em;
    	text-decoration:none;
    }
    Happy ADD/ADHD with Asperger's

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jgbauer View Post
    Sweet!!! ok im one step closer. ok last problem remaining in the menu. everything else is fixed. thank you thank you the last problem is that after you mouse over onto the submenu the hoverbg on the main menu shrinks by about 30px.
    Try removing the 151px width here and adding the 181px width here.

    Code:
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background:        #99c2e7;
        outline:        0;
    /*width:151px;*/
    }
    .sf-menu li:hover,.sf-menu li.sfHover {width:181px}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •