Søg
Avatar billede sn2002 Nybegynder
09. august 2004 - 12:44 Der er 12 kommentarer og
1 løsning

styre onMouseOver o.l. i CSS

Jeg er ved at prøve at styre en relativt simpel html-side med CSS. I den sammenhæng har jeg lige et spørgsmål:

Kan man styre onMouseOver og den slags elementer i CSS, og hvis ja, kan I så henvise til en side, der forklarer, hvordan det skal stilles op?
Jeg frygter lidt, at man ikke kan styre dem via CSS, men det kunne være så dejlig let, hvis man kunne.

Håber I kan hjælpe. Her følger lidt kode på den menu, jeg gerne vil styre via CSS:

<tr class="trmenu" id="text">
          <td class="tdmenu" onMouseOver="this.bgColor='#C64000';this.style.color='white';" onMouseOut="this.bgColor='#993300';this.style.color='black';" onClick="location.href='forside.html';">forside</td>
          <td class="tdmenu" onMouseOver="this.bgColor='#C64000';this.style.color='white';" onMouseOut="this.bgColor='#993300';this.style.color='black';" onClick="location.href='index.html';">nyheder</td>
          <td class="tdmenu" onMouseOver="this.bgColor='#C64000';this.style.color='white';" onMouseOut="this.bgColor='#993300';this.style.color='black';" onClick="location.href='3b.html';">3b</td>
          <td class="tdmenu" onMouseOver="this.bgColor='#C64000';this.style.color='white';" onMouseOut="this.bgColor='#993300';this.style.color='black';" onClick="location.href='billeder.html';">billeder</td>
          <td class="tdmenu" onMouseOver="this.bgColor='#C64000';this.style.color='white';" onMouseOut="this.bgColor='#993300';this.style.color='black';" onClick="location.href='forum.html';">forum</td>
        </tr>
Avatar billede roenving Novice
09. august 2004 - 12:59 #1
Da IE ikke har implementeret den del af css2-standarden (:hover på andet end a-tags, mange andre browsere understøtter det problemløst !-) må man bruge den teknik, du beskriver, eller placere a-tags inde i cellerne, som virker ligesådan:

<style type="text/css">
.trmenu td a{display:block;height:22px;background-color:#930;color:black;}
.trmenu td a:visited{color:white;}
.trmenu td a:hover{background-color:#c64000;color:white;}
.trmenu td{}
/*I stedet for tdmenu, skal du bruge 'trmenu td' som selector !-) */
</style>

<tr class="trmenu" id="text">
          <td><a href='forside.html'>forside</a></td>
          <td><a href='index.html'>nyheder</a></td>
          <td><a href='3b.html'>3b</a></td>
          <td><a href='billeder.html'>billeder</a></td>
          <td><a hrf='forum.html'>forum</a></td>
        </tr>

-- på den måde opnaår man at det virker ens, men man skal ofte bruge nogle kræfter på at få højderne til at passe, derfor height-tingen ...
Avatar billede roenving Novice
09. august 2004 - 13:13 #2
-- og måske lidt mere gennemført, så du helt kan se det:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>

<style type="text/css">
.trmenu{border-collapse:collapse;border:2px inset red;}
.trmenu tr,.trmenu td{border:0px;padding:0px;}
.trmenu td a{display:block;height:12px;padding:1px 3px;border:0px;font-family:verdana,arial,sans-serif;font-size:9px;font-weight:900;}
.trmenu td a:link{background-color:#930;color:black;text-decoration:none;}
.trmenu td a:visited{color:black;}
.trmenu td a:hover{background-color:#c64000;color:white;}
/*I stedet for tdmenu, skal du bruge 'trmenu td' som selector !-) */
</style>
</head>

<body onresize onload>
  <table class="trmenu">
    <tr id="text">
      <td><a href='forside.html'>forside</a></td>
      <td><a href='index.html'>nyheder</a></td>
      <td><a href='3b.html'>3b</a></td>
      <td><a href='billeder.html'>billeder</a></td>
      <td><a href='forum.html'>forum</a></td>
    </tr>
  </table>
</body>
</html>
Avatar billede roenving Novice
09. august 2004 - 13:16 #3
-- og hele stylen for :link skal gentages for :visited, så det vil være lettere, at:

.trmenu td a:link,.trmenu td a:visited{background-color:#930;color:black;text-decoration:none;}
Avatar billede sn2002 Nybegynder
09. august 2004 - 13:23 #4
Tak for respons :)

ok - så for at få lov til at styre den slags menu via CSS, skal man altså behandle den som et a-element?

Dvs. jeg skal sætte første del af det du beskriver (<style>..</style> ind i CSS-dokumentet, og resten ind i menu tabellen?

Hvorfor skal jeg bruge trmenu td som selector i stedet for tdmenu? Er det ikke ligemeget, hvad man kalder sin selektor, bare der er overensstemmelse mellem style-sheet'et og html-dokumentet?

Jeg har ikke den store erfaring i stylesheet, så hvis du gider kigge på min 'teknik, så er siden der er tale om www.geocities.com/grenaagym (en simpel klassekontakt-side) og hele stylesheetet ser sådan her ud:

body    {
    background-color:#993300;
    text-align: center;
}

table.tablemain    {
    width: 640;
    border-width: 1;
    border-style: solid;
    border-color: #FFFFFF;
}

table.tablemenu    {
    width: 600;
    border-width: 1;
    border-style: solid;
    border-color: #FFFFFF;
}

table.tablecontent    {
    width: 620;
    border-width: 0;
    text-align: center;
}

table.tablecopy    {
    width: 500;
    border-width: 0;
    text-align: center;
}

tr.trmenu    {
    background-color: #993300;
    border-width: 1;
    border-style: solid;
    border-color: #990000;
}

td        {
    cursor: default;
}

td.tdtop    {
    cursor: default;
    height: 90;
    text-align: center;
    border-width: 1;
    border-style: solid;
    border-color: #990000;
    background-image: url(billeder-design/top.jpg);
    background-color: #C64000;
}

td.tdmenu    {
    width: 117;
    text-align: center;
    font-weight: bold;
    border-width: 1;
    border-style: solid;
    border-color: #990000;
}

td.tdcontentmain    {
    background-color: #C64000;
    border-width: 1;
    border-style: solid;
    border-color: #990000;
    height: 410;
    vertical-align: top;
    text-align: center;   
}

td.tdcontent    {
    background-color: #C64000;
    height: 150;
    border-width: 0;
    vertical-align: top;
    text-align: left;
}

a    {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
}

.scroll    {
    scrollbar-base-color: #993300;
    scrollbar-face-color: #C64000;
    scrollbar-shadow-color: #990000;
    scrollbar-darkshadow-color: #993300;
    scrollbar-highlight-color: #C64000;
    scrollbar-arrow-color: white;
    scrollbar-3dlight-color: #993300;
}


#text     {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
}

#textcopy     {
    text-align: center;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #990000;
}

.hrrule    {
    color: #993300;
}


( kan godt oprette et 30-point spørgsmål mere, hvis det bliver for omfattende at rette ovenstående igennem - bare sig til ;)
Avatar billede sn2002 Nybegynder
09. august 2004 - 13:24 #5
glemte at opdatere - kigger lige det du har skrevet igennem ;)
Avatar billede sn2002 Nybegynder
09. august 2004 - 13:30 #6
ok - det ser ud til at det kan lade sig gøre, som du beskriver det :) - smart! Vil prøve at bruge lidt tid på at lege med det.

Hvis du har tid, må du stadig gerne kigge ovenstående igennem og kommentere det - alle råd er velkomne.
Avatar billede roenving Novice
09. august 2004 - 14:51 #7
Grunden til at jeg anbefaler dig at bruge .trmenu td er at det er meget nemmere at skrive een lang selector end det er at skrive mange gange class/id i html-koden !o]

-- og da css jo er cascading (c'et i css !-) vil det sige at det breder sig nedad i elementerne, så så meget man kan udnytte det og css-selektor-syntaksen, hvor ovenstående betyder alle td'er indenfor elementer med class="trmenu", jo nemmere er det at skrive tingene og se den logiske opbygning ...

-- man skal selvfølgelig holde tungen lige i munden, hvis man laver rigtig komplicerede træer vha. denne mulighed, men det bliver _meget_ nemt at vedligeholde html-koden, da der stort set ikke er noget at holde øje med ...

-- du skal bare vælge et relativt lille antal top-elementer, så kan resten styres udfra dette !o]

-- men du har selvfølgelig ret i, at bare man sikrer overenstemmelsen, har man noget der virker, men det svarer jo faktisk til gamle dages 'spaghetti-kode' ...

-- af generelle kommentarer har jeg umiddelbart kun een, som dog er vigtig:

Sæt enheder på _alt_ (undtaget 0-værdier !-), da css-standarden faktisk stipulerer at tal-værdi-angivelser uden enhed skal ignoreres (der er dog enkelte relative værdier, men dem har du ikke brugt !-)

-- derfor vil andre browsere end IE ikke bruge dine definerede størrelser til noget, men tage udgangspunktet i, hvor meget indholdet fylder i stedet !o]

-- og nåehjo ...

Du bruger jo generelt den samme skrift-type, så sæt den på body, så skulle den cascades ned igennem alle elementer, evt. kan du også sætte en default-størrelse, men det skal så gøres med universal-selektoren: *
Avatar billede roenving Novice
09. august 2004 - 14:52 #8
-- og hvis du mener, at der skal bruges flere point, kan du, indtil et svar er accepteret, afsætte flere point ved at kigge i menuen oppe til venstre under Funktioner ...
Avatar billede sn2002 Nybegynder
09. august 2004 - 15:17 #9
ang. .trmenu td>> selvfølgelig, smart!

Jeg tror måske, jeg skal have fat i IDGs CSS-hæfte, da det lader til, at der er lidt mere i det, end jeg liiiiige havde regnet med. Eller måske du kender et sted på nettet, der forklarer lidt mere om selve det at strukturere et html-dokument udfra et stylesheet og vice versa? Jeg har selvf. været omkring the basics på html.dk, echoecho.com og htmlhelp.com - men der findes jo et hav af den slags sider...
Avatar billede roenving Novice
09. august 2004 - 15:33 #10
Jeg har desværre ikke set en side, som rigtig grundigt gennemgår css, kun som dem, du omtaler, som relativt smalt beskriver nogle nærmere bestemte funktionaliteter i forbindelse med noget ret konkret html, men ikke tilnærmelsesvis kommer ud i hjørnerne ...

Selv har jeg min viden fra at plukke fra hundredevis af spørgsmål herinde, samt de mere hardcore ting, som f.eks. w3cs css-standard-definition: http://www.w3.org/TR/REC-CSS2/, hvor specielt selektor-syntaks i kapitel 5: http://www.w3.org/TR/REC-CSS2/selector.html, og videre er noget jeg har kigget i, samt appendix F, property-index: http://www.w3.org/TR/REC-CSS2/propidx.html har været brugt som en håndbog, forøvrigt med index.dot.css som cross-browser-reference: http://blooberry.com/indexdot/css/index.html ...

Men det kan man nu også komme langt med, hvilket du blive overbevist om, hvis du prøver at kigge i spørgsmålene i denne kategori, for der er ikke mange css-relaterede problemer, jeg ikke har været i stand til at komme med mindst et input til !-)
Avatar billede sn2002 Nybegynder
09. august 2004 - 15:41 #11
det lyder skidegodt, pardon my french!

Jeg vil bruge tiden med det her skrækkeligt gode vejr med at sidde inde og bladre i dine foreslåede links ;)

Tak for hjælpen - hvis du lægger et svar, så har jeg en mistanke om, at der er en sending point på vej til dig ;)
Avatar billede roenving Novice
09. august 2004 - 15:45 #12
Velbekomme '-)
Avatar billede roenving Novice
09. august 2004 - 16:32 #13
-- og tak for point ;~}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 21:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
I går 20:06 email adresse Af Malm i Forslag til ændringer
I går 19:54 problem med google crome Af Malm i Andet software
I går 09:36 Alternativ holder til to skærme... Af Don G i Skærme
20/0815:01 Samsung smart TV Af postpeter@outlook.dk i Fri debat
White papers
Flere white papers »