Avatar billede tendal Nybegynder
15. november 2005 - 07:30 Der er 3 kommentarer og
1 løsning

Rollover liste som menu, men ikke hele feltet er "hot"

Hej
Jeg har lavet en liste som jeg gerne vil have som menu på min webside. Jeg har brugt en css til at lave rollover effekt, men jeg kan ikke få det til at spille max. Problemet er at der i toppen af hvert liste item er et felt som ikke bliver en del af rollover effekten. Desuden er hele feltet heller ikke "hot" - altså ikke hele feltet er et link. Jeg har lagt det jeg har lavet op på følgede url så I kan se hvad det er jeg mener www.stineoganders.dk/Eksperter/index.htm
Jeg læste et sted at det kunne skyldes browser versionen så jeg tilføjede følgende i slutningen af <head>:
<!--[if IE 5]>
<style>#navlist a {height: 1em; float: left; clear: both; width: 100%;}</style>
<![endif]-->
<!--[if IE 6]>
<style>#navlist a {height: 1em;}</style>
<![endif]-->

men det har ikke hjulpet :o(. Hvis der er nogen der kan hjælpe bliver jeg virkelig glad
Avatar billede udvikler Nybegynder
15. november 2005 - 08:07 #1
hvad er problemet egentlig, forstår det ikke helt, uddyb venligst lidt mere :)

så vidst jeg har forstået kommer rollover effekten kun hvis man holder musen over linket men det skal komme frem bare man har musen over feltet ?
Avatar billede tendal Nybegynder
15. november 2005 - 09:35 #2
Jep - det er rigtigt forstået. Desuden forekommer rollover effekten ikke på hele feltet - toppen sker der ikke noget med - i hvert fald ikke i min browser, men jeg ved ikke om det kan være derfor?
Avatar billede notes2c Nybegynder
15. november 2005 - 17:36 #3
Måske noget i denne stil:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
}

#menu {
    width:100%;
}

#menu ul {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    color:#999999;
}

#menu li {
    margin:0;
}

#menu a {
    text-decoration:none;
    display: block;
    padding: 20px 0px 20px 20px;
    border-bottom: 1px dotted #CCCCCC;
    background-image:url(http://www.stineoganders.dk/Eksperter/images/bulletgray.gif);
    background-repeat:no-repeat;
    background-position:left;
    width: auto !important;
    width: 100%;
}

#menu a:hover {
    background-color:#FFFFFF;
    }

#active_link a:link, #active_link a:visited, #active_link a:active  {
    background-image:url(http://www.stineoganders.dk/Eksperter/images/bulletblue.gif);
}

#active_link a:hover {
    background-color:transparent;
}
-->
</style>
<title>Untitled Document</title>
<!--[if IE 5]>
<style>#navlist a {height: 1em; float: left; clear: both; width: 100%;}</style>
<![endif]-->
<!--[if IE 6]>
<style>#navlist a {height: 1em;}</style>
<![endif]-->
</head>

<body>
<table width="800" border="1" align="center">
<tr>
<td>
<table width="98%" align="center">
<tr>

<td width="30%" background="http://www.stineoganders.dk/Eksperter/images/tdbackground.gif">
<div id="menu">
<ul>
    <li id="active_link"><a href="index.htm" class="active">FORSIDEN</a></li>
    <li><a href="turneringer.htm" class="menu">TURNERING</a></li>
    <li><a href="klubinfo.htm" class="menu">KLUBINFO</a></li></ul></div></td>
<td width="50%"></td>
<td width="20%">&nbsp;</td>
</tr>
</table>
</td>

</tr>
</table>
</body>
</html>
Avatar billede tendal Nybegynder
15. november 2005 - 20:27 #4
Jeg fik det til at virke i går aftes (jeg sidder på New Zealand - derfor aften pga tidsforskellen), men jeg fik ikke skrevet noget herinde. Din løsning ser dog ud at at virke, så vidt jeg kan se har du tilføjet width: auto !important; width: 100%; i #menu a og det ser ud som om det bare er det der skal til, så point til dig :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester