Notifikationer

Markér alle som læst Log ud

public2 Nybegynder

12. november 2007 - 21:21 Der er 3 kommentarer og
1 løsning

Problemer med Hover effekt på tabel og celler

Hejsa folkens.

Jeg har et problem med en CSS effekt. Jeg ønsker at lave en hover effekt på en navigationsbar, som er opbygget af én tabel og så nogle celler hvor der står ét menupunkt i hver celle, på nær den sidste, der bruges til at fyldes ud.

For at gøre det simpelt, så har jeg givet min nav tabel en div klasse (mainTable) og har givet mine tre celler (td) som jeg har mine menupunkter i, en klasse (menuItem).

I min CSS har jeg brugt denne kode:

div.menuTable a {

font-family: verdana;
text-decoration: none;
font-size: 12px;
text-align: center;
color: #FFFFFF;

display: block;
}

div.menuTable a:hover {
color: #000000;
background: #CCCCFF;
}
div.menuTable a:visited:hover {
color: #000000;
background: #CCCCFF;
}

Umiddelbart noget der skulle virke, og det gør det som sådan også. Jeg kan bedst beskrive fejlen, ved at I selv ser den...
http://www.familienstrange.dk/eksperten/

Hvis I prøve at kører musen over de tre links der i dagens anledning hedder "NOTHING" så kan I se, at den Hover effekt, altså den farve der kommer når musen kører over cellen, ikke går helt op til top og bund, men kun er på størrelse med selve teksten.

Jeg ønsker naturligvis, at den skal gå fra top til bund i tabellen. Jeg har prøvet mange ting, men synes ikke at kunne få det til at virke, det til trods.

Jeg vil være utrolig taknemmelig for et hjælpende svar, der kan løse dette mysterium.

På forhånd tak for jeres hjælp

Mvh
- Emil

Synes godt om

w13 Novice

12. november 2007 - 22:30 #1

For the record, så hedder det background-color: noget; men det skulle ikke kunne give fejlen.

Hvis du vil have det til at gå fra toppen til bunden kan du enten prøve at tilføje height:100%;

men er ikke sikker på, det løser det.

hover er jo kun beregnet til at ændre links.

Alternativt må du bruge javascript og lægge følgende på cellerne:

onmouseover="this.backgroundColor:'#ccccff';this.color:'#000000'"

Synes godt om

roenving Novice

13. november 2007 - 00:48 #2

For at height skal virke, skal du også sætte display:bblock; !-)

-- og en lille detalje:

<td onmouseover="this.backgroundColor='#ccf';this.color='#000';" onmouseout="this.backgroundColor='';this.color='';">

Synes godt om

public2 Nybegynder

13. november 2007 - 07:05 #3

Hej begge to og tak for jeres svar... Jeg har prøvet, at indsætte jeres kode:

onmouseover="this.backgroundColor='#ccccff';this.color='#000000';" onmouseout="this.backgroundColor='#225577';this.color='#FFFFFF';"

i mine celler, men der sker nada... Har jeg gjort noget forkert her?

Så har jeg prøvet med height og display:block. Det virker egentlig til en vis grad. Det sjove er blot, at der er ca. 1-2 pixel øverst i cellerne, som ikke er farvet ud. Højst mærkværdigt, og den vælger at kaste mine skridt helt op i toppen af hver celle. Det kan jeg dog udligne med noget padding.

Roenving, du ved ikke hvordan jeg får den sidste lille pixel eller to med i mit height / display:block udtryk?

Ellers så tak for jeres hjælp endnu engang

Synes godt om

public2 Nybegynder

13. november 2007 - 13:30 #4

Hejsa igen.

Jeg har løst det og gjorde det uden brug af Javascript og fandt også nogen lunde ud af hvori problemet lå...

Det jeg gjorde var:

Gav mine celler (td) en klasse og gav mit link en klasse, som var det samme som cellen. Så gav jeg tabellen en klasse, som var forskellige for cellen og linket.

Så lavede jeg følgende styles i mit CSS:

.menuItem {
border-right: 1px solid #FFFFFF;
padding-top: 0px;
color: #FFFFFF;
background-color: #225577;
}

.menuItem a {
background-color: #225577;
display: block;
width: 100%;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
height: 100%;
text-decoration: none;
}

.menuItem a:hover {
background-color: #CCCCFF;
display: block;
color: #000000;
width: 100%;
border-right: 1px solid #FFFFFF;
text-decoration: none;
height: 100%;
}

td.menuItem {
font: 10px verdana;
text-align: center;
line-height: 20px;
}

På den måde kom den både til få hele højden med og med display:block kom det til at passe indenfor den rigtige celle og vidde.

Så nu lykkes det. Tak for jeres hjælp begge to...

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS