---
title: "Bättre lösning? mouseOver på TD"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/173677-bättre-lösning-mouseover-på-td"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "streetrobban"
published: "2008-08-27T12:34:21.000Z"
updated: "2008-08-27T14:57:32.000Z"
replies: 7
views: 427
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/173677-bättre-lösning-mouseover-på-td"
---

# Bättre lösning? mouseOver på TD

## #1 — streetrobban, 2008-08-27T12:34Z

Hej,

Jag har följande kod på min hemsida för att få liknande funktion som [Bredbandsbolaget](http://www.bredbandsbolaget.se/wps/portal/privat/kundservice?page=new&WCM_GLOBAL_CONTEXT=/wps/wcm/connect/b2/privat/kundservice) har på sin vänstra meny. Men jag undrar om det finns enklare sätt att lösa det på än koden jag skrivit?

**EDIT:** Själva mouseOver funktionen verkar inte funka i IE, utan bara i FF har jag märkt. Det blir liksom ingen hover-effekt i IE.

CSS-koden:

```
td.min_sida {
	background-image: url(../images/ms_menu_off.gif);
	width: 125;
	height: 30;
}

td.min_sida:hover {
	background-image: url(../images/ms_menu_on.gif);
	width: 125;
	height: 30;
}

td.min_sida:visited {
	background-image: url(../images/ms_menu_off.gif);
	width: 125;
	height: 30;
}

td.min_sida:active {
	background-image: url(../images/ms_menu_on.gif);
	width: 125;
	height: 30;
}
```

Och HTML-koden:

```
<table border="0" style="width: 125; background-color: #FFFFFF" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 20">
</td>
</tr>
<tr>
<td style="padding-left: 10" class="min_sida">
<a href="sida.php" class="forumWriter">Menyval 1</a>
</td>
</tr>
<tr>
<td style="height: 2">
</td>
</tr>
<tr>
<td style="padding-left: 10" class="min_sida">
<a href="sida.php" class="forumWriter">Menyval 2</a>
</td>
</tr>
<tr>
<td style="height: 2">
</td>
</tr>
<tr>
<td style="padding-left: 10" class="min_sida">
<a href="sida.php" class="forumWriter">Menyval 3</a>
</td>
</tr>
</table>
```

Tack :)

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

## #2 — voigtann1, 2008-08-27T12:38Z

ja,
först: 
Gör om menyn du använder dig av idag till en \<ul\> lista, ändra om a-elementen till block element i just denna lista där du har din navigering, och använd dig av a elementens :active, :hover osv.

red:
något i stil med: 

```
#left-navigation {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 125px;
	padding-top: 20px;
}
#left-navigation a {
	display:block;
	width: 125px;
	height: 30px;
	background-image: url(../images/ms_menu_off.gif);
	margin-top: 2px;
}

#left-navigation a:hover, #left-navigation a:active {
	background-image: url(../images/ms_menu_on.gif);
}
#left-navigation a:visited {
	background-image: url(../images/ms_menu_off.gif);
}
```

```
<ul id="left-navigation">
	<li><a href="sida.php">Menyval 1</a></li>
	<li><a href="sida.php">Menyval 2</a></li>
	<li><a href="sida.php">Menyval 3</a></li>
</ul>
```

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

## #3 — streetrobban, 2008-08-27T14:05Z

Tack för ett snabbt svar!

Jag testade att göra någon liknande lösning. Men jag fick aldrig texten att ligga rätt i rutan. Nu ligger texten uppe i det vänstra hörnet. Men jag vill att den ska ligga i mitten av rutan, med lite distans från vänsterkanten (typ padding-left: 10). Men använder man padding-left: 10, så hoppar hela rutan och inte bara texten. Förstår du?

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

## #4 — voigtann1, 2008-08-27T14:10Z

om du ökar padding så måste du minskar width och höjden (om du kör padding på höjden). och använda sig av line-height + height på typsnittet. behöver nog se hur det är idag för att kunna lösa det perfekt. men det skall gå och ge betydligt mindre kod än vad du använder dig av idag.

text-align: center fungera med och till en viss del vertical-align: middle;

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

## #5 — streetrobban, 2008-08-27T14:29Z

Det funkar bra med line-height: 2; för att få texten med jämt rum mellan taket och golvet. Men jag får inte texten att ligga 10px från vänsterkanten.

**EDIT:** Det funkade med text-indent: 10px :)

Finns det något kommando som lägger texten i mitten vertikalt? Typ som \<center\>\</center\> gör horisontellt.

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

## #6 — voigtann1, 2008-08-27T14:40Z

vertical-align: middle;

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

## #7 — silfver, 2008-08-27T14:48Z

> **voigtann1 skrev:**
>
> vertical-align: middle;

Måste man inte skriva: 

```
display:table-cell; vertical-align:middle;
```

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

## #8 — voigtann1, 2008-08-27T14:57Z

mycket möjligt... använder aldrig vertical-align, kör upp och kompensera det med padding istället ;)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/173677-bättre-lösning-mouseover-på-td