Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Problem with hover attribute using image sprite as Navigation menu

Alex442
in Website Design and UX

Featured Replies

Hi there, when I hover over sections on my navigation menu they won't line up with the width of each tab.

 

Here's my website

 

HTML:

<html>

<head> <link href="marketingstyle.css" rel="stylesheet" type="text/css"> 

</head>

<title> Alex Francis Designs </title>

<header>`

<img src="Images/AFD5.png" alt="country" id="logo">


<ul id="topnav1">

<li><a href="#logos" class="Logos">Logos</a></li>
<li><a href="#Web" class="Web">Web</a></li>
<li><a href="#Print" class="Print">Print</a></li>
<li><a href="#Newsletters" class="Newsletters">Newsletters</a></li>
<li><a href="#GraphicDesign" class="GraphicDesign">Graphic Design<a/></li>


</ul>

</header>



<body>

<div id="humbletext">   
 

</div>

<div id="form2">

<div id="formfields">

<label for="name">First Name</label> <input type="text"><br>
<label for="e-mail">Last Name</label> <input type="text"><br>
<label for="e-mail">Email</label> <input type="text"><br>
<label for="e-mail">Phone</label> <input type="text"><br>
<label for="e-mail">Company</label> <input type="text"><br>
<label for="e-mail">Country</label> <input type="text"><br>

</div>

<div id="formheader">

See how easy it is to do Marketing big and thrive

</div>

<span style="text-align: center; display:block; font-size:14px; color:white;"> Fill out the form and one of<br> our representatives will contact you</span>

</div>


</body

</html>

CSS:

* {Margin: 0; Padding: 0;}


html {
   
        min-width: 1200px;
    }
	
	#logo {

height: 90px;
width: 280px;
padding-bottom: 15px; 

}


header {
    width:80%;
    left: 0px;
    top: 0px;
	margin-left: auto;
    margin-right: auto;
	margin-top: 20px;
}

body {

height: 1200;

}


ul#topnav1 {
    float: right;
	width: 680px; 
	list-style: none;
	position: relative;
	top: 38;
}

ul#topnav1 li { 
display: inline; 
}
	
ul#topnav1 li a {
    Position: relative;
	display: block; 
	float: left; 
	height: 52px;
	background-image: url(menu-sprite.png); 
	text-indent: -9999px;
}

ul#topnav1 li a.logos {
	width: 105px; 
	background-position: 0 0;	
}
	
ul#topnav1 li a.Web {
	width: 70px; 
	background-position: -100px 0;	
}

ul#topnav1 li a.Print {
	width: 105px; 
	background-position: -170px 0;	
	
}

ul#topnav1 li a.Newsletters {
	width: 158px; 
	background-position: -279px 0;

}	

ul#topnav1 li a.GraphicDesign {
	width: 198px; 
	background-position: -440px 0;
	
}

ul#topnav1 li a.logos:Hover, ul#topnav1 li a.logos:focus {
	background-position: 0px -51px;	
}
	
ul#topnav1 li a.Web:Hover, ul#topnav1 li a.Web:focus {
	background-position: -100px -51px;	
}

ul#topnav1 li a.Print:Hover, ul#topnav1 li a.Print:focus { 
	background-position: -170px -51px;	
}

ul#topnav1 li a.Newsletters:Hover, ul#topnav1 li a.Newsletters:focus {
	background-position: -279px -51px;
}	

ul#topnav1 li a.GraphicDesign:Hover, ul#topnav1 li a.GraphicDesign:focus {
	background-position: -440px -51px;
	
}


#humbletextbox {


line-height: 150%;
margin-left: 30px;
color: grey;
width: 430px;
top: 350px; 


}

#humbletext {

line-height: 150%;
margin-left: 30px;
color: grey;
width: 430px;
top: 280px; 


}


#form2 {

position: relative;
top: 500px;
float: right;
width: 350px;
height: 600px;
background-color: rgb(107, 179, 39);
}

}

#offeringtext {

left: 108px;
position: relative;
margin-top: -70px;
line-height: 95%;

}

.imageclass1 {

width: 60px;
height: 60px;
position: relative;
margin-left: 28px;
margin-top: 30px;

}

#formfields {

position: absolute;
top: 120px;
right: 75px;

}

#formheader {

width: 350px;
height: 70px;
background-color: #0066FF;
color: white;
text-align: center;
font-size: 24px;
font-family:lato;
}

label
{
width: 4em;
margin-right: 4em;
display: inline;
}

#middle input  {

width: 200px;
height: 32px;
display: block;
margin-left: 15px;

}

I'll paste the code from the tutorial I'm using because this guy has it done right.

 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Menu of Awesomeness</title>

<link rel="stylesheet" href="styles.css" />
</head>

<body>

<ul id="awesome-menu">
	<li><a href="#ninja" class="ninja">Ninja</a></li>
    <li><a href="#zombie" class="zombie">Zombie</a></li>
    <li><a href="#robot" class="robot">Robot</a></li>
    <li><a href="#assassin" class="assassin">Assassin</a></li>
    <li><a href="#jedi" class="jedi">Jedi</a></li>
</ul>


</body>
</html>

CSS

* { margin: 0; padding: 0; } /* Reset stuff */


ul#awesome-menu {
	width: 517px; 
	margin: 250px auto;
	list-style: none;
}

ul#awesome-menu li { 
display: inline; 
}
	
ul#awesome-menu li a {
	display: block; 
	height: 56px;
	background-image: url(menu-sprite.png); 
	text-indent: -9999px;
	
}

	ul#awesome-menu li a.ninja {
		width: 96px; 
		background-position: 0 0;	
	}
	
	ul#awesome-menu li a.zombie {
		width: 108px; 
		background-position: -96px 0;	
	}
	
	ul#awesome-menu li a.robot {
		width: 97px; 
		background-position: -204px 0;	
	}
	
	ul#awesome-menu li a.assassin {
		width: 121px; 
		background-position: -301px 0;	
	}
	
	ul#awesome-menu li a.jedi {
		width: 94px; 
		background-position: -422px 0;	
	}
	
	
	ul#awesome-menu li a.ninja:hover, ul#awesome-menu li a.ninja:focus {
		background-position: 0 -56px;	
	}
	
	ul#awesome-menu li a.zombie:hover, ul#awesome-menu li a.zombie:focus {
		background-position: -96px -56px;	
	}
	
	ul#awesome-menu li a.robot:hover, ul#awesome-menu li a.robot:focus {
		background-position: -204px -56px;	
	}
	
	ul#awesome-menu li a.assassin:hover, ul#awesome-menu li a.assassin:focus {
		background-position: -301px -56px;	
	}
	
	ul#awesome-menu li a.jedi:hover, ul#awesome-menu li a.jedi:focus {
		background-position: -422px -56px;	
	}
	

a { outline: none; }

I could just use the code in the example but I really want to know what it is I'm doing wrong. Thanks guys

The problem is that you're using an image as your menu buttons. You can create that same visual with pure CSS which also allows for some responsiveness.

 

To see why this problem is happening, remove these two styles:

 

ul#topnav1 li a {

float: left;

text-indent: -9999px;

}

  • Author

Thanks for taking the time to read through all of that. I won't be using image sprites for nav menus again in a hurry. Now my problem is choosing on a best way forward. Seems like a lot of options. JQuery, Javascript, pure CSS...any suggestions?

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.