Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
Like Tree1Likes
  • 1 Post By brandMatt

Thread: Problem with underline image in my main menu

  1. #1
    Junior Member
    Join Date
    Nov 2015
    Posts
    5
    Member #
    52419

    Problem with underline image in my main menu

    Hello,

    I'm trying to create a webpage based on (an older version of) Skeleton.
    For so far it seems to work okay, but I'm having problems underlining my menu items for which I've made a custom image.
    So far I've got it to work in a way that the underline is actually centered under the text, but now I'm having the problem that when you put your cursor somewhere around the menu block that the underline image starts flickering. Seems like it is half registering that it should start showing the image. When you stand on the menu item itself i.e. the text however it stops flickering.
    Does anyone know how I can fix this? or if there's a better way to get the image showing under the text than I have done now?

    Below is the HTML and CSS of what I have so far

    HTML Code:
    <div class="band header">
    	<header class="container main">
    		<div class="five columns">
    				<h1 class="logo"><a href="#">Maisboerke</a></h1>
    		</div>
    		<nav class="primary">
    			<div class="eleven columns">
    					<ul>
    						<li><a href="#">Home</a></li>
    						<li><a href="#">Over Mij</a></li>
    						<li><a href="#">Service</a></li>
    						<li><a href="#">Machinerie</a></li>	
    						<li><a href="#">Contact</a></li>
    					</ul>
    
    			</div>
    		</nav>
    	<header>
    </div>
    This is the CSS:
    Code:
    /* Navigation */
    nav.primary ul,
    nav.primary ul li {
    	margin: 0px;
    }
    
    nav.primary ul li {
    	display: inline;
    	float: left;
    	position: relative;
    }
    
    nav.primary ul li a {
    	display: inline-block;
    	line-height: 77px;
    	padding: 14px;
    	color: #5f5e5e ;
    	text-transform: uppercase;
    	text-decoration: none;
    	font-weight: bold;
    	letter-spacing: 0.08em;
    }
    
    nav.primary ul li a:hover {
    	color: #5f7312;
    	cursor: pointer;
    	background: url(../images/Home_Underline.png) bottom center no-repeat;
    	height: 70px;
    }
    Thanks in advance

  2.  

  3. #2
    Junior Member
    Join Date
    Oct 2015
    Posts
    17
    Member #
    52118
    Liked
    7 times
    Hi, trying to reproduce a JSfiddle here, could you give me the URL to your PNG background file?
    Edit fiddle - JSFiddle

  4. #3
    Senior Member sarahswansea's Avatar
    Join Date
    Oct 2015
    Location
    Swansea, UK
    Posts
    155
    Member #
    52184
    Liked
    65 times
    I don't know for certain if this is your issue, but I've experienced a similar problem in the past.

    My guess would be you are seeing this because you are setting a height in nav.primary ul li a:hover

    What is probably happening is that the non-hover version is bigger than the hover version. The mouse will go over the non-hover version, the :hover CSS psuedo-class will be applied, the element will now be smaller, and the mouse as a result is no longer hovering over it, so the :hover CSS psuedo-class is removed. The non-hover version is bigger, so is under the mouse again, and the process repeats in a loop resulting in flickering.

    Similar things can happen if a :hover psuedo-class contains less/smaller borders or paddings, or has an offset.

    Maybe instead of the height attribute you can use background-size?

  5. #4
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    People should just share links to the troublesome web site/page. If they can't post the live site, then they should make a fiddle, prior to posting here.

    I just don't have the time in a day to spend creating fiddles.

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  6. #5
    Junior Member
    Join Date
    Nov 2015
    Posts
    5
    Member #
    52419
    I'm sorry about not posting a js.fiddle, quickly made one including a link which contains the image so now it should be perfectly visible what it looks like.

    Right now I've tried to fix it by giving a height to to "li" element on hover/active. The flickering does seem gone now, but I'm not sure if it's a good way to fix the problem or if there's a better way to do so.

    Here's the link to the jsfiddle: Edit fiddle - JSFiddle

    Hope this makes things a bit more clear.

  7. #6
    Senior Member sarahswansea's Avatar
    Join Date
    Oct 2015
    Location
    Swansea, UK
    Posts
    155
    Member #
    52184
    Liked
    65 times
    That seems to work better, but again, I'd move the height into a non-:hover class

    e.g.

    nav.primary ul li {
    display: inline;
    float: left;
    position: relative;
    height: 70px;
    }

    and remove height from the li:hover

  8. #7
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    Be sure to clear the float on the next block level element. An uncleared float can throw off a whole page.
    Vapr_Arts likes this.

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:47 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com