Menu som på www.sh-online.dk

Du laver en mouseover i din td'er...

Ja? Og...? :o)

... hvordan gør jeg det?

www.dhtmlcentral.com

se efter coolmenus

http://www.dhtmlcentral.com/projects/coolmenus/?m=10

yousif, menuerne fra dhtmlcentral skal tilpasses. Man må kunne lave en simpel onmouse-over/onmouse-out?

ja.. du får lige et link til et program.. (exe)

http://web-nova.com/ezmenu.asp

<style>
a {width:100%;}
a:active, a:link, a:visited {background-color:blue; color:red;}
a:hover {background-color:red; color:blue;}
</style>

<table width="200" border="1">
<tr><td><a href="#">Nr1</a></td></tr>
<tr><td><a href="#">Nr2</a></td></tr>
<tr><td><a href="#">Nr3</a></td></tr>
</table>

gør tricket, men kun i ie.
ellers må du sætte
<td onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='blue';">indhold</td>

a {width:100%;display:block;}
istedet for
a {width:100%;}
så virker det også i NS6.

Ok, jeg vil prøve begge Jeres forslag. maddog, kan du ikke lægge et svar?

ok.
du kan se her hvorledes
http://www.dsr.kvl.dk/~maddog/232414.html
det er rart, da det er en CSS løsning, hvor alle tags ikke bliver plastret til med eventhandlers.
det er dog en god ide at lave det som klasser. du kan se hvordan på linket.

Fedest! Tak for hjælpen, begge to. I deler pointene, håber det er ok :o)

Jeg vil dog få brug for dit forslag også, yousif. Brattamenuen og dhtmlcentral-menuen kan man normalt ikke centrere eller sætte i tabeller tilfældige steder på siden. Men det kan man med ezmenu?

du kan godt putte coolmenu (dhtmlcentral) i tabeller, jeg finder lige et eksempel

http://www.dhtmlcentral.com/projects/coolmenus/examples/table_placement3.html

jeg har også selv brugt coolmenus i min hjemmeside (i tabeller), du kan se det her:

www.ys-software.tk

Ok, men jeg synes bedre om ezmenu. Kan den det samme?

da jeg ikke selv bruger ezmenu kan jeg desværre ikke hjælpe dig, men på deres hjemmeside kan jeg se at det er muligt med tabels

Fint, tak for hjælpen :o)

=maddog=: Det er først, når man fører musen hen over, at den tager farve. Det er jo ikke så fedt :o/

Kan det ikke fixes?

<td onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='blue';">indhold</td>

...og kan HELE cellen laves om til et link? Jeg opretter et nyt spørgsmål.

Jeg har oprettet det her: http://www.eksperten.dk/spm/235856

steen> hele cellen er et link, og hele cellen skifter farve ved mouseover, sådan som det er nu (med undtagelse af borders men det kan jo også sættes i stylesheetet). Hvad system bruger du siden det ikke virker?

husk at bruge sourcen fra det link jeg har lavet, og ikke det jeg har copy/pastet. Det var bare en prototype.

Ok, jeg har ikke sat det i stylesheet. Koden:

<tr>
  <td width="100%" onmouseover="this.style.backgroundColor='black';" onmouseout="this.style.backgroundColor='#1A4A6B';">
      <table border="0" cellpadding="6" cellspacing="0" width="100%">
        <tr>
            <td width="100%">
              <a href="default.asp?mode=own_profile" class="nn11w"><b>Rediger profil</b></a>
            </td>
        </tr>
      </table>
  </td>
</tr>

Jeg får onmouseover-effekten på cellen, men det er teksten, der er linket

steen> prøv at klikke på linket altså
http://www.dsr.kvl.dk/~maddog/232414.html
tricket er at sætte
a.className {width:100%; display:block;}
ind i stylesheetet. Så opfører links sig som blokke med fuld bredde og højde i stedet for linjer.

I stylesheet:
a.className {width:100%; display:block;}

I ASP-dokument:
<a href="default.asp?mode=own_profile" class="className">

Er det sådan, det skal være?

det skulle virke ja. Duer det ikke fint på linket? Altså det dur ikke i NS4, men det er en krig at sætte table mouseovers i NS4.

Jeg har MSIE 6.0, og det virker ikke :o(

Ups, jeg kiggede ikke i din kildekode, øjeblik...

virker det heller ikke her:
http://www.dsr.kvl.dk/~maddog/new.html
???. får så skal jeg da lige til at nærlæse min kode.

Dvs. ASP-dokumentet skal se sådan her ud:

<td width="100%">
<table border="0" cellpadding="4" cellspacing="0" width="100%">
<tr>
<td width="100%">
<a href="/default.asp/" class="menu"><b>Start</b></a>
</td>
</tr>
</table>
</td>

Og mit stylesheet ser sådan her ud:

a.menu
{
  width:100%;display:block;
  padding:4px 0px 4px 0px;
  font:bolder 11px Verdana, Arial, Helvetica;
  text-decoration: bold;
  color:white;
}
a.menu:active, a.menu:link, a.menu:visited
{
  background-color:#1A4A6B;
}


Eller har jeg misforstået det?

maddog, jeg bliver lige nødt til at smutte. Jeg prøver dit link senere :o)

nogenlunde ja. du behøver ikke <b> når du har sat font:bolder . Du skal heller ikke sætte text-decoration til bold, men til none (for at slippe at med den møgirriterende understreg)
stylesheetet ligger på www.dsr.kvl.dk/~maddog/css/styles.css og det er public domain (hvilket betyder du kan bruge det uden at kreditere mig)

Hej igen, maddog!

Det virker NÆSTEN efter hensigten. Der, hvor teksten er (padding:4px 0px 4px 0px;), bliver cellen sort ved onmouseover. Men kanten rundt omring beholder farven? Jeg ville gerne have HELE cellen sort ved onmouseover. Plus, at understregningen kommer ved onmouseover. Hvis jeg sætter text-decoration til none, er cellen sort, og teksten forsvinder?

a.menu {
    width:100%;display:block;
    padding:4px 0px 4px 0px;
    font:bold 11px Verdana, Arial, Helvetica;
    text-decoration:none;
    color:white;
}
a.menu:active, a.menu:link, a.menu:visited {
    background-color:#1A4A6B;
    color:white
}
a.menu:hover {
  background-color:#000000;
}

ASP-dokumentet:

<a href="default.asp?mode=opret" class="menu"><b>Opret ny bruger</b></a>

Sorry, glemte at fjerne <b></b>:

<a href="default.asp?mode=opret" class="menu">Opret ny bruger</a>

uhadadada jeg har testet både i IE6, NS6 og NS7 (altså new.html) og finder ingen problemer. Hvis du gerne vil have understregning og anden borderfarve ved Mouseover skriver du

a.menu:hover {
  background-color:#000000;
  border-color: [ny farve, fx. #333333;]
  text-decoration:underline;
}

Jeg vil netop IKKE have understregning :o)

Jeg har lavet en 2 px høj GIF-baggrund, som adskiller cellerne. ALT imellem disse "seperatorer" skal skifte farve, men borderen bibeholdes. Det var ikke meningen.

kom igen. vil du skifte baggrunds-billede? prøv at forklare hvordan du vil have det
1) Ved mouseover (så vidt muligt i pseudo CSS)
2) Ved mouseout (igen pseudo CSS)

Det her virker fint: Hele cellen skifter baggrundsfarve, men det er kun teksten, der er et aktivt link. Man skal holde musen hen over teksten for at kunne aktivere linket:

ASP-dokumentet, det første, som gjorde, at HELE cellen skifter fra #1A4A6B til #000000, men kun gør teksten til et aktivt link:

<tr>
<td width="100%" onmouseover="this.style.backgroundColor='black';" onmouseout="this.style.backgroundColor='#1A4A6B';">
<table border="0" cellpadding="4" cellspacing="0" width="100%">
<tr>
<td width="100%">
<a href="default.asp?mode=inbox" class="nn11w"><b>Postkassen</b></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" background="menu.gif"><img border="0" src="/images/menu.gif"></td>
</tr>
</table>
</td>
</tr>
<tr>

Hvis jeg prøver den sidste metode:

<tr>
<td width="100%">
<table border="0" cellpadding="4" cellspacing="0" width="100%">
<tr>
<td width="100%">
<a href="/stiangivelse/asp_dokument.asp" class="menu"><b>Start</b></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" background="/images/menu.gif"><img border="0" src="separator.gif"></td>
</tr>
</table>
</td>
</tr>
<tr>

- bliver hele cellen godt nok til et aktivt link, men der er en border på cellen. Farven #1A4A6B bliver godt nok til #000000, men kun inde i cellen. Hele vejen rundt om har jeg en border, og jeg får en underline på den hvide tekst.

CSS-filen:

a.menu {
    width:100%;display:block;
    padding:4px 0px 4px 0px;
    font:bold 11px Verdana, Arial, Helvetica;
    text-decoration:none;
    color:white;
}
a.menu:active, a.menu:link, a.menu:visited {
    background-color:#1A4A6B;
    color:white
}
a.menu:hover {
  background-color:#000000;
}

Jeg håber det er til at forstå? :o/

nej det er ikke til at forstå. bare drop at give mig kode det hjælper fedt for vi laver det fra bunden (det er lettest) bare følg mine anvisninger ovenfor
f.x.
1) celle rød, kant violet, link uden understreg, tekstfarve hvid, venstrestillet
2) celle bordeaux, kant pastelrød, link med understreg, tekst fed, creme.
eller hvad du nu vil have. så laver jeg et stylesheet.

HELE cellen onmouseover = #000000
HELE cellen onmouseout = #1A4A6B

HELE cellen skal have de to farver, der må ikke være nogen border af nogen art.

Font: 11px, Verdana, Arial, Helvetica, bold, #FFFFFF
- og det uanset om mouseover eller mouseout. Ingen underline, ingen farveskift. Bare hvid tekst uanset hvad.

HELE cellen skal blive til et aktivt link, ikke kun teksten. Det er noget nemmere at ramme en hel celle fremfor et tekstlink.

Er det til at forstå? :o)

ja, men det er ikke nemmere at ramme en hel celle end et helt link, idet hele cellen er linket, (godamandøkseskaft)
Filen er god nok. Super duper ingen problemer, men jeg har remmet en unødig (harmløs) linje ud og kommenteret hvad hver enkelt komponent gør.

/* dette gælder UANSET mouseover/out */
a.menu {
    width:100%;display:block; /* dette gør linket til en blok, der fylder hele containeren, kan udbygges med height:100%; */
    padding:4px 0px 4px 0px; /* sæt padding som du lyster. Her giver det 4px over og under skriften i linket*/
    font:bold 11px Verdana, Arial, Helvetica;
    text-decoration:none;
    color:white;
}
/* Disse style er unikke for MOUSEOUT */
a.menu:active, a.menu:link, a.menu:visited {
    background-color:#1A4A6B;
    /* color:white - unødig */
}
/* Disse styles er unikke for MOUSEOVER */
a.menu:hover {
  background-color:#000000;
}

Ingen af disse styles sætter en border. Det problem findes et andet sted.
For at overbevise dig har jeg lavet endnu en test side, hvor jeg anvender netop dette stylesheet, og jeg får ingen mystiske borders og ingen understregninger overhovedet.
URL'en er den samme: http://www.dsr.kvl.dk/~maddog/232414.html

NU er den der! Tak for det, maddog, bedste ven :o)

Nej, sq! Den hvide tekst forsvinder? Det står jo fint på http://www.dsr.kvl.dk/~maddog/232414.html, hvorfor gør det ikke det hos mig?

Jeg satte det her ind, og SÅ virker det:

a.menu:active, a.menu:link, a.menu:visited {
    background-color:#1A4A6B;
    color:white;
    text-decoration:none;
}

Det er bare mystisk, at det virker hos dig, men ikke hos mig. Men det virker, det er hovedsagen.

jeg kan altså dårligt give flere råd, når det nu virker... Der må være en anden lille fejl et sted. prøv at validere din kode og check at det ikke er en simpel HTML fejl der laver rav i maskineriet.