Bättre lösning? mouseOver på TD

7 svar · 422 visningar · startad av streetrobban 27 aug. 2008

streetrobbanMedlem sedan jan. 20011 140 inlägg

Frågan27 aug. 2008 12:34#1

Hej,

Jag har följande kod på min hemsida för att få liknande funktion som Bredbandsbolaget 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 :)

voigtann1Medlem sedan juni 20019 519 inlägg

27 aug. 2008 12:38#2

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>

streetrobbanMedlem sedan jan. 20011 140 inlägg

27 aug. 2008 14:05#3

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?

voigtann1Medlem sedan juni 20019 519 inlägg

27 aug. 2008 14:10#4

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;

streetrobbanMedlem sedan jan. 20011 140 inlägg

27 aug. 2008 14:29#5

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.

voigtann1Medlem sedan juni 20019 519 inlägg

27 aug. 2008 14:40#6

vertical-align: middle;

silfverMedlem sedan apr. 200312 679 inlägg

27 aug. 2008 14:48#7

voigtann1 skrev:

vertical-align: middle;

Måste man inte skriva:

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

voigtann1Medlem sedan juni 20019 519 inlägg

27 aug. 2008 14:57#8

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