CSS og link

Jeg forstår ikke helt hvad du mener, kan du ikke forklare det?

MVH
Yousif
ysubhi@hotmail.com

Jo, jeg har en masse lange links på min hjemmeside, som jeg gerne vil have lidt "central styring på", til hvilket jeg med fordel kan bruge CSS.

Rent HTML-mæssigt ville det se således:

<p><a href="index.asp">
<b>Titlen på en artikel<br>
</b><i>skrevet af</i><br>
Den artikel handler om...</a></p>

Og så kommet 1000 kr. spørgsmået - kan dette på en smart måde laves om til CSS?

kommet = er ;)

Nej, jeg mener ikke at det kan lade sige gøre, desværee :-(

MVH
Yousif

Du kan bare dele teksten op med div's:

<a href="Index.asp">
<div style="font:bold 12px Verdana; color:#0000FF">
Dette er første linie</div>
<div style="font:italic 12px Verdana; color:#000000">
Dette er anden linie</div>
<div style="font:12px Verdana; color:#000000">
Dette er tredie linie</div>
</a>

/tjacob

stylene kan du lægge i et ekstent css-doc, og kalde med class eller id.

tjacob>det ville jeg også have skrevet, men det er ikke det han spørger om!

"...følgende I ET LINK..."

MVH
Yousif

Det ER i et link. Hele baduljen er omkranset af <a> - </a>.
Jeg formoder det er det han mener. På denne måde er alle 3 linier linket.

Yes, det er i et link.

F.eks. sådan her:

i et style tag eller i en css-fil:

div.linktop{font:bold 12px Verdana; color:#0000FF}
div.linkmidt{font:italic 12px Verdana; color:#000000}
div.linkbund{font:12px Verdana; color:#000000}

I den kode jeg skrev før erstattes divs med:
<div class="linktop">Dette er første linie</div> osv

/tjacob

>>tjacob

Det virker jo langt hen ad vejen, ud over at følgende kode bliver ignoreret/"overskrevet", hvorved linket forbliver blå selv om man har klikket på det.

a:visited {
      text-decoration: none;
      color: gray
  }

Hvordan gøres det (med din kode), således at linket bliver grå, når man har klikket på den?

Det KUNNE være fordi din visited-kode står før den anden kode i style-taggen eller i css-filen. Den skal stå EFTER det kode jeg foreslog.

/tjacob

Det har jeg prøvet - det giver desværre ingen forskel.

Det må være fordi divs overrider a:visited, da de læses sidst af browseren.
(Først når vi ER inde i a). Jeg ser på sagen, men er nødt til at smutte et par timer.

Ok - tak for hjælpen indtil nu :-)

lol... sådan gør du....

i css delen skrives følgende:

A.asp1:link {
  color : blue;
  font-weight : bold;
  text-indent : 20px;
}

A.asp2:link {
  color : black;
  font-weight : italic;
  text-indent : 20px;
}

A.asp3:link {
  color : blue;
  text-indent : 20px;
}

(asp1, asp2 og asp3 = er en klassifikation) (kan ændres til hvad du nu vil kalde dem....)

------

På siden skrives:

<a class="asp1" href=".........">bla bla</a>
<br>
<a class="asp2" href=".........">bla bla</a>
<br>
<a class="asp3" href=".........">bla bla</a>

NB.. forskellen fra normale links er, at her sættes [class="asp3"] for at fortælle hvilken den skal bruge...

sådan... nu skulle det være klaret :)

Kenneth

den kode jeg gav oven over... gøres bare på samme måde med Hover, Visited og Active.....

nå ja...

text-indent : 20px gør at den bliver rykket 20px ind fra venstre

<style>
    p:first-line {
    font: bold;
    color: blue;
    }
    i, a p {
    color: black;
    }
</style>

og så
<a href="index.asp"><p>Titlen på en artikel<br>
<i>skrevet af</i><br>
Den artikel handler om...
osv.osv.
</p></a>

husk at <a> skal omkapsle blok-elementet <p>. ellers mister du den blå overskrift

faktisk behøver du kun
<style>
p:first-line {font: bold; color: blue; }
a p { color: black; }
</style>
hvis du vil angive andre styles for HELE linket så gøres det sådan
a { text-decoration: none; }
bemærk at NS4.x ikke understøtter :first-line pseudo-elementet

Hverken aspprograms eller (delvist) maddogs løsninger tillader forskellige styles INDEN i et link. maddogs kan dog give to forskellige, men der vil være de samme problemer med visited. Jeg tror ikke det er muligt at definere forskellige visited-farver i det samme link. (Eller den samme, hvis link-farverne er forskellige ;-)).
Jeg tror man er nødt til at lave noget betinget JavaScript der kan ændre disse farver dynamisk, -men det er ikke min stærke side.

-Alternativt kunne du jo lave det som 3 links, der blot linker til den samme url. Så er der jo ingen problemer.

Endelig kunne du lave det helt uden <a>, og i stedet lave noget onclick-kode der åbner dit link. (Men det er jo også JavaScript ;-)).
(Men der er stadig problemet med visited---).

/tjacob

Eller -naturligvis VBscript, som du sikkert kender hvis du bruger asp.

a { text-decoration: none; }
anullerer også alle psuedoklasser. jeg har testet det i IE5 og 6 og farverne bevares uden problemos. så den endelige løsning må være:
<style>
a p:first-line {font: bold; color: blue; }
a p { color: black; }
a { text-decoration: none; }
</style>

=maddog= >>

Problemet, som er blevet diskuteret ovenfor, er, at "a:visited" bliver overrided, hvilket ikke er meningen:

<html>

<head>
<style>

a:visited {
      text-decoration: none;
      color: gray
      } 

a p:first-line {font: bold; color: blue; }
a p { color: black; }
a { text-decoration: none; }
</style>

</head>

<body>

<a href="index.asp"><p>Titlen på en artikel<br>
<i>skrevet af</i><br>
Den artikel handler om...
</p></a>

</body>

</html>

vil du stadig have blå overskrift:
<style>

a:visited p { text-decoration: none; color: gray  } 
a:visited p:first-line {font: bold; color: blue; }
a p:first-line {font: bold; color: blue; }
a p { color: black; }
</style>

vil du ikke
<style>
a:visited p { text-decoration: none; color: gray  } 
a p:first-line {font: bold; color: blue; }
a p { color: black; }
</style>

den bliver ikke overskrevet som sådan, men når browseren skal vælge mellem to styles for samme element scorer den dem:
1 for normal, ganget med antal elementer tilsluttet så:
a, p, table {color:red} scorer 3
10 for nestet, ganget med antal elementer tilsluttet så:
a p, a table {color:blue} scorer 20
100 for klassetildeling så:
a.mylink {color:green} scorer 100
1000 for id-specifik så:
#minDiv {color:white} scorer 1000
i
<div id="minDiv"><a class="mylink">text</a></div>
bliver teksten altså hvid, da #minDiv scorer højest.
i dit tilfælde bliver
a:visited kun scoret til 1, men a p og a p:first-line bliver scoret 10.
derfor skal du lave en nestning af a:visited så de for samme score.

Det' jo smukt! Det virker, dvs. at linkets overskrift er blå mens linkets tekst er sort - og hele linket bliver rigtigt nok grå, når det er besøgt. Jeg prøvede at bygge videre på koden efter dit princip, men det virkede mystisk nok ikke:

<style type="text/css">
a:hover p { text-decoration: underline }
a:active p { text-decoration: underline }

a:visited p { text-decoration: none; color: gray  } 
a p:first-line {font: bold; color: #004080 }
a p { text-decoration: none; color: black }

</style>

Jeg indsatte disse linier, som ikke virkede - hvorfor?
a:hover p { text-decoration: underline }
a:active p { text-decoration: underline }

Det skal lige tilføjes, at jeg havde overset, at "a:active p { text-decoration: underline }" faktisk virkede. (Men det gør "a:hover p { text-decoration: underline }" stadig ikke.)

:hover er lidt sær fordi den ikke vil nestes.
a:hover p { text-decoration: underline }
virker aldrig
a:hover { text-decoration: underline }
virker, men har jo lavere 'vægt' jvf. forklaringen ovenfor.
du bliver kanske nød til at knalde et par mouseover og mouseout på.

sidenote: layout på din kursiv 'skrevet af' sættes
a p i {font-size:10pt;}

du kan jo sætte en attribut der ikke er sat i de andre på :hover og holde den uden nest
<style type="text/css">
a:link p:first-line {font: bold; color: #004080 }
a:link p { text-decoration: none; color: black }
a:visited p { text-decoration: none; color: gray  } 
a:hover { background:red; }
a:active p { text-decoration: underline; }
</style>

virker fint. hvis du genovervejer det med den blå overskrift er der jo
<style type="text/css">
p:first-line {font: bold; color: #004080 }
a:link  { text-decoration: none; color: black }
a:visited  { text-decoration: none; color: gray  } 
a:hover { text-decoration: underline; }
a:active  { text-decoration: underline; }
</style>
men det kan være det f**ker noget af dit andet layout up.

Surt at "hover" ikke kan "nestes". Desværre er løsningen unden "nesting" ikke så god - jeg havde allerede prøvet den og fundet den uhensigtsmæssig.

Her kommer lige et side-spørgsmål, hvis du stadig har lyst og tid til at hjælpe mig, hvilket jeg er meget taknemmelig for :-)

Findes der ikke en kommando, som kan erstatte "first-line"? Problemet er, at "first-line" difinerer den første linie udfra ens browser-vindues-størrelse, hvilket ikke er smart ved lange links, fordi det kommer til se forskellig ud fra browser til browser. Findes der ikke i stedet en kommando, som hedder noget med "first-line-br", alså en kommando som difinerer den første linie værende indtil det første <BR>. (Jeg ved godt, at man kan difinere "first-line", men dette ville kræve meget arbejde, fordi jeg har mange links.)

jeg har aldrig hørt om andre pseudoklasser end :first-line :first-letter(hedder den vist) :link :hover :active og :visited.
.... Problemet er, at "first-line" difinerer den første linie udfra ens browser-vindues-størrelse ....
Nej. Det første linje er altid den første linje (goddag mand økseskaft). Jeg ved hvad du mener. Der er ikke altid det samme indhold i første linje. Meeeeen. Er det ikke dit problem? Så må du bare sætte dit <BR> rigtigt og have korte og sigende overskrifter.
husk text-align:center; i p:firstline { og a p i { så det ser sprødt ud.
CSS kan IKKE opfatte og håndtere <BR> som tag. Det ser kun et linjeskift.

Ok, tak for alt hjælpen.

tak. jeg synes vi to har bevist at eksperten ikke bare handler om point-jagt. jeg er virkelig glad hvis jeg har hjulpet dig.
mere om pseudo elementer:
http://www.w3.org/TR/REC-CSS1#pseudo-classes-and-pseudo-elements
mere om om scoring (jeg huskede ikke helt rigtig her)
http://www.w3.org/TR/REC-CSS1#cascading-order
det er det samme dokument, men det er lidt svært at navigere i. håber du har fået et indtryk af hvordan browseren vurderer CSS og vælger layout. mange gange kan man spare adskillige linje HTML med en linje CSS og få et bedre layout.

Helt enig (ang. points så har jeg kun de points, som man dagligt får). Igen, tak for hurtig og god hjælp :-)

jamen det skulle også være nok. hvis man er så heldig at have små problemer (-: