---
title: "Byta bakgrund på cell och få HELA cellen länkad"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/155612-byta-bakgrund-på-cell-och-få-hela-cellen-länkad"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "fedde"
published: "2007-01-05T23:14:50.000Z"
updated: "2007-01-14T22:01:59.000Z"
replies: 7
views: 623
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/155612-byta-bakgrund-på-cell-och-få-hela-cellen-länkad"
---

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

## #1 — fedde, 2007-01-05T23:14Z

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>
```

Permalänk: https://www.webforum.nu/p/155612

## #2 — Troxy, 2007-01-05T23:37Z

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.

Permalänk: https://www.webforum.nu/p/1918252

## #3 — fedde, 2007-01-06T00:05Z

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?

Permalänk: https://www.webforum.nu/p/1918256

## #4 — zcorpan, 2007-01-06T02:09Z

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

Permalänk: https://www.webforum.nu/p/1918268

## #5 — fedde, 2007-01-06T02:21Z

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>

Permalänk: https://www.webforum.nu/p/1918270

## #6 — fedde, 2007-01-06T13:55Z

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!   :)

Permalänk: https://www.webforum.nu/p/1918336

## #7 — Kalliban, 2007-01-07T14:06Z

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>
```

Permalänk: https://www.webforum.nu/p/1918549

## #8 — fedde, 2007-01-14T22:01Z

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.

Permalänk: https://www.webforum.nu/p/1923756

---

Tråden på webben: https://www.webforum.nu/amne/html-css/155612-byta-bakgrund-på-cell-och-få-hela-cellen-länkad