Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Hover-problem

1
Skriv svar
Permalänk
Medlem
●

Hover-problem

Har sökt, men hittar ingen lösning som passar.

Det är en meny där en bild visas vid hover, men bilden som visas blir bara lika hög som texten. Jag vill att bilden ska visas i sin fulla storlek, som är höjdmässigt lika hög som meny-bakgrunden.

Det svarta är menu.gif, och det oranga är hover-bilden, som det SKA se ut. Jävligt web 2.0

#meny {	
	background-image: url(img/bas/menu.gif);
	float: left;
	width: 582px;
	height: 30px;
	margin: 5px 10px 0px 10px;
	padding: 10px 0px 0px 10px;
	}
	
	
#meny a {
	display: inline;
	color: #ffffff;
	font-size:13px;
	font-family:arial;
	text-decoration: none;
	margin: 7px;
	height: 80px;
}

#meny a:hover {
	display: inline;
	background-image: url(img/bas/menu-hover.gif);
	background-repeat: no-repeat;
	height: 80px;


}
Redigera
Citera flera Citera
Permalänk
Medlem
●

Testat nåt med line-height?

Visa signatur

Griffon Sqd
The SketchUp Component Collection

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ja precis, det fel du gör dock är att du sätter attribut-data på själva "menyalternativet" och inte på länken. Din CSS-kod borde se ut såhär istället;

#meny {   
   background-image: url(img/bas/menu.gif);
   float: left;
   width: 582px;
   height: 30px;
   margin: 5px 10px 0px 10px;
   padding: 10px 0px 0px 10px;
   }
   
   
#meny a {
   display: inline;
   color: #ffffff;
   font-size:13px;
   font-family:arial;
   text-decoration: none;
   margin: 7px;

   display: block;
   height: 80px;
}
 
#meny a:hover {
   display: inline;
   background-image: url(img/bas/menu-hover.gif);
   background-repeat: no-repeat;

   display: block;
   height: 80px;
   margin: 5px 10px 0px 10px; /* (om du vill ha margin) */
   padding: 10px 0px 0px 10px; /* (om du vill ha padding) */
}

Och sen skulle koden på sidan se ut på något liknande sätt:

<div id="meny">
<a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
</div>
Redigera
Citera flera Citera
Permalänk
Medlem
●

Använd display: block; på dina a element istället.

Redigera
Citera flera Citera
1
Skriv svar