Har länkar placerade i tabellceller och när jag hovrar över dem så vill jag att vissa css-egenskaper ska appliceras som border-color och background-color. Har tittat hur de gjort på följande sida http://www.zeldauniverse.net/ men det blir inte som det är där när jag försöker göra likadant. Om jag gör såhär så blir bakgrundsfärgen bara som en ruta som endast är så pass stor så att texten får plats:
Egenskaperna appliceras naturligtvis men jag vet inte varför det inte blir likadant som på deras sida när jag använder exakt samma kodsnutt. Har gjort precis som de har gjort. Lagt länken i en <td> och applicerat class="mainlevel" på rätt ställe och klipt och klistrat direkt in i style.css Jag vill at bakgrundsfärgen ska täcka inte bara under länken utan den ska läggas för hela cellen som länken ligger i och dessutom så ska den ha en border.
Vet inte om det går att göra så att egenskaperna läggs till cellen istället, när jag hovrar över länken? Kan man göra det?
Lagt märke till att länken ej avser endast själva texten utan en större del, om inte en tabellcell så åtminstonde lika stor som en. Hur har de löst det? Har kollat i deras css men kan inte fatta hur det som de skrivit där kan ådstakomma vad som faktiskt händer i det renderade resultatet.
Stod visst så i deras css också, vet inte, måste ha tagit bort det av någon anledning. Kollade fram och tillbaka men tänkte inte att det kunde vara den som gjorde att det blev fel.
Nej, det är cellen som anpassar sig till innehållet. ;) När du lägger till en ram på en pixel ökar höjden med två pixlar. För att slippa den effekten kan du ange en ram redan från början, tex
a { border:1px solid transparent; }
a:hover { border-color:lime; }
Anpassningen sker pss som för en <div> - dvs den tar 100% i sidled, och den höjd som innehållet "spänner ut" i höjdled (om inget explicit värde anges på width och height - vilket jag antar att du inte har på länken utan bara på den <td> som länken ligger i... ;) )
border-bredden ligger utanför boxens bredd och höjd, så det du gör när du lägger på en border på 1 px är att du ökar höjden med 1 + 1 px (border-top och border-bottom) vilket gör att du får innehållets höjd + 2 px och är det högre än vad som får plats i din <td> så ökas <td>:ns höjd automatiskt per definition
I sidled däremot anpassas storleken till den omgivande (tabell)cellens bredd så att boxens bredd + 2*border fyller ut 100% av <td>:ns bredd eftersom du inte angett width på <a>-taggen - och det är precis så som en a-tagg med display:block förväntas fungera...
/red: Äsch, nu var jag långsam :birp
... Men du kan ju ha border-color == background-color i "icke-hovrat läge" om du bara vill slippa se kanten och sedan bara byta färg på den vid hover istället för att lägga till och ta bort den hela tiden ;)
Anade att det var något sådant, får testa om jag kan lösa det med padding så storleken på boxen och placeringen av texten blir rätt vid både hover och icke-hover.
Det löste sig med padding istället. Jag tog bort ramen för icke.hover lägena och kompenserade med att ange padding för top och botten till 1px vardera istället för att fylla upp med en border på 1px. Kom på att det måste bli samma sak. Sedan körde jag en padding på 3px för right i samtliga lägen av länkarna. Detta innebar att när jag tog bort border för alla lägen utom hover så kommer ju texten i alla lägen utom hover att hamna en pixel längre åt höger, så det kompenserade jag med att sätta en padding för höger till 4px istället för 3px som jag nu bara kör för hover eftersom det läget även har en ram.
Tror det verkar vara en bra lösning, hoppas det funkar som det är tänkt.
Då fattas egentligen bara en sak nu, jag har fortfarande inte förstått hur man för länken att gälla för hela boxen. Alltså css'n appliceras ju till länken så jag vet inte varför själva href-attributet endast gäller för texten och inte hela boxen. Jag vill kunna klicka utanför texten men innanför boxen för att följa länken, inte bara texten.
Då fattas egentligen bara en sak nu, jag har fortfarande inte förstått hur man för länken att gälla för hela boxen. Alltså css'n appliceras ju till länken så jag vet inte varför själva href-attributet endast gäller för texten och inte hela boxen. Jag vill kunna klicka utanför texten men innanför boxen för att följa länken, inte bara texten.
Om du sätter display:block som sagts tidigare och padding:0 för tabellcellen så får du en box vars storlek du kontrollerar med a {padding:xxx}.
Kan inte sätta tråden som löst eftersom allas svar var bra svar på mina frågor. Det är inte bara ett svar som kan anses som det slutgiltiga svaret. Sorry.
Tack för all hjälp hursomhelst.
268 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
