Byta bakgrund på cell och få HELA cellen länkad

7 svar · 614 visningar · startad av fedde 5 jan. 2007

feddeMedlem sedan dec. 1999137 inlägg

Frågan5 jan. 2007 23:14#1

Jag vill byta bakgrundsfärg på cellerna i en meny vid mouseover. Sedan vill jag att HELA cellen ska vara klickbar, alltså inte bara texten.
Allt detta har jag att fungera i en vertikal meny. Men nu vill jag ha den horisontell.
i IE funkar det med "display : block;" men i FireFox blir varje cell en rad.

.menyTop a	{
		background-color: transparent;
		color: #000000;
		font-family : 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size : 13px;
		font-weight : bold;
		vertical-align : middle;
		text-align : center;
		text-decoration : none;
		height : 28px;
		}
.menyTop a:hover {
		background-color: #bfbdbd;
		color: #000000;
		font-family : 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size : 13px;
		font-weight : bold;
		vertical-align : middle;
		text-align : center;
		text-decoration : none;
		height : 28px;
		}

<td class="menyTop" onMouseOver="this.style.backgroundColor='<%=menyColorOver%>'; this.style.cursor='hand'" 
			onMouseOut="this.style.backgroundColor=''"><a href="<%=indexsida%>?page=0">Startsida</a></td>

TroxyMedlem sedan mars 20041 505 inlägg

5 jan. 2007 23:37#2

Alltså allting blir mycket bättre om du skippar både tabeller och javascript och istället satsar på en fräsch CSS-lösning.

Först så byter du ut tabellen mot en lista istället, vilket är bättre eftersom en meny är en sorts lista och inte en tabell.
Sen så är det bara att göra om länkarna så att dom beter sig som block-element, och då kan man sätta width, height, padding och allt möjligt på dom.
Exempelvis så skulle det kunna se ut såhär:

ul#main_navigation {
	padding: 0;
	margin: 0;
	list-style-type:none;
}

ul#main_navigation li {
	display:inline;
}

ul#main_navigation li a {
		display: block;
		float: left;
		padding: .5em;
		background-color: transparent;
		color: #000000;
		font-family : 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 13px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
}

ul#main_navigation li a:hover {
		background-color: #bfbdbd;
}

<ul id="main_navigation">
	<li><a href="#">Startsida</a></li>
	<li><a href="#">Startsida</a></li>
	<li><a href="#">Startsida</a></li>
	<li><a href="#">Startsida</a></li>
</ul>

Sen så vill jag även tipsa om den här sidan: http://css.maxdesign.com.au/index.htm
Den har en hel avdelning som bara ägnar sig åt olika CSS-menyer som ser ut på alla möjliga sätt. En perfekt sida att länka till här.

feddeMedlem sedan dec. 1999137 inlägg

6 jan. 2007 00:05#3

Snyggt!
Men jag vill att "knapparna" ska sprida ut sig jämnt på raden. Som om man har en table med en viss bredd. Går det?

zcorpanMedlem sedan dec. 20042 245 inlägg

6 jan. 2007 02:09#4

Ja visst, med display:table och display:table-cell. Men... :OO

feddeMedlem sedan dec. 1999137 inlägg

6 jan. 2007 02:21#5

Ja jag hittade en sida som tog upp det. Men det funkar inget vidare. :l
http://dizque.lacalabaza.net/temp/full-width-navigation-bar-with-css.html

feddeMedlem sedan dec. 1999137 inlägg

6 jan. 2007 13:55#6

Har läst en massor av sidor och det verkar inte som om det går att sprida ut det jämnt via CSS.

Tack för hjälpen! :)

KallibanMedlem sedan feb. 200465 inlägg

7 jan. 2007 14:06#7

går väl alldeles utmärkt? eller tänker jag fel nu?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>meny</title>
	<style type="text/css" media="screen">
		* { margin: 0; padding: 0; }
		ul#meny {
			list-style: none;
		}
		ul#meny li {
			float: left;
			width: 20%;
		}
	</style>
</head>

<body>
	<ul id="meny">
		<li>Abc</li>
		<li>Def</li>
		<li>Ghi</li>
		<li>Jkl</li>
		<li>Mno</li>
	</ul>
</body>
</html>

feddeMedlem sedan dec. 1999137 inlägg

14 jan. 2007 22:01#8

Nja. Grejjen var ju att jag ville få hela cellen som en knapp. Så att den byter bakgrund vid mouseover och att det går att klicka på hela ytan, inte bara på den länkade texten.
Testa det vi nämnt ovan så ser du.