Avatar billede basementjack Nybegynder
01. februar 2006 - 18:15 Der er 8 kommentarer og
2 løsninger

Text-decoration på nested elementer

Jeg vil gerne have alle liste-elementer i en liste, hvor teksten ikke er et link til at være gennemstreget. Jeg troede det var simpelt. Jeg har et eksempel på det der ikke virker til sidst i mit spm.

Jeg vil gerne vide hvordan jeg får det til at virke, samt hvordan du/I løste problemet...

Mvh. Jakob J.

Eksempel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta http-equiv="Content-Language" content="da">
        <title>css test</title>
        <style>
            li {text-decoration:line-through;}
            li a {text-decoration:none;}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">No decoration</a>
                <ul>
                    <li><a href="#">No decoration</a></li>
                    <li>Line-through decoration</li>
                </ul>
            </li>
        </ul>
    </body>
</html>
Avatar billede zappa Nybegynder
01. februar 2006 - 22:23 #1
Kan dette bruges?

..
<style>
  li.line {text-decoration:line-through;}
  li a {text-decoration:none;}
</style>
...

<ul>
  <li><a href="#">No decoration</a>
    <ul>
      <li><a href="#">No decoration</a></li>
      <li class="line">Line-through decoration</li>
    </ul>
  </li>
</ul>
Avatar billede basementjack Nybegynder
01. februar 2006 - 22:36 #2
Mmmja.. Men jeg ville gerne have unden IDs og Classes... Samt vide hvorfor li {text-decoration:line-through;} og li a {text-decoration:none;} ikke virker...
Avatar billede olebole Juniormester
01. februar 2006 - 23:34 #3
<ole>

Jamen, det gør det sandelig også ... du lægger bare ikke mærke til det  ;o)
Det er ikke mindst property'en 'text-decoration', der driller - da den på visse måder adskiller sig fra andre properties.
Den letteste måde at se det på er, hvis du prøver en anden værdi end 'none':

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta http-equiv="Content-Language" content="da">
        <title>css test</title>
        <style>
            li {text-decoration:line-through;}
            li a {text-decoration:underline;}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">No decoration</a>
                <ul>
                    <li><a href="#">No decoration</a></li>
                    <li>Line-through decoration</li>
                </ul>
            </li>
        </ul>
        <p><a href="#">hjhkjhkjh</a></p>
    </body>
</html>

Her kan du se, hvad det er, der sker. Alt indhold i li-elementet er gennemstreget - mens alt i a-elementet er understreget. I dit oprindelige eksempel, er alt i li-elementet gennemstreget - mens der ikke er nogen tekstdekoration på indholdet i a-elementet.

Selectoren her:
    li a {
        // regler
    }

- overskriver ikke:
    li {
        // regler
    }

... den udvider den! Det er noget helt andet, selvom resultatet ofte ser ud somom, den første selector overskriver den anden ... f.eks. hvis du havde angivet en tekstfarve i stedet for en tekstdekoration.

/mvh
</bole>
Avatar billede basementjack Nybegynder
02. februar 2006 - 00:05 #4
Det har du ret i Ole :) Men du siger samtidigt at der ikke er noget at gøre for at overskrive text-decoration?...
Avatar billede olebole Juniormester
02. februar 2006 - 00:30 #5
Jo, man overskriver med en klasse  :)

'li a' selectoren gør jo ikke noget ved nogen li-elementer - men ved a-elementer under et li-element.

Hvis du nu sætter to forskellige farver i stedet. Så er alt i li-elementet f.eks. farvet gult. Alt i a-elementet er farvet rødt - men da de to effekter 'ligger oveni hinanden' kan det ikke ses at teksten egentlig både er gul og rød på én gang  :)

Det kan til gengæld ses med gennemstregning og understregning, fordi effekterne ligger forskudt og kun består af en streg.

Et andet - og måske bedre - eksempel er, hvis li-elementerne er relativt positioneret. Så vil det ikke røre et li-element med et a-element som barn, hvis 'li a' selectoren refererer til en regel, der siger 'position:absolute'. Li-elementet vil stadig være positioneret relativt  :)
Avatar billede basementjack Nybegynder
02. februar 2006 - 04:48 #6
"'li a' selectoren gør jo ikke noget ved nogen li-elementer - men ved a-elementer under et li-element." - Det var jo derfor!.. Det tog sin tid, men den siv ind.. :)

Jeg ser ser gerne et par svar, I har jo begge fået fat i det rigtige...
Avatar billede zappa Nybegynder
03. februar 2006 - 01:12 #7
Svar...
Avatar billede olebole Juniormester
04. februar 2006 - 00:00 #8
Hehe ... jeg havde godt nok på fornemmeren, den ikke var sevet helt ind - men bare det lykkes, er alt jo godt  ;o)
Avatar billede olebole Juniormester
04. februar 2006 - 00:04 #9
Tak for points  ;o)
Avatar billede basementjack Nybegynder
04. februar 2006 - 00:09 #10
Tak for hjælpen.. ;)
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