Søg
Avatar billede sezam Nybegynder
30. maj 2003 - 20:06 Der er 37 kommentarer og
3 løsninger

Links - flere udgaver

Dette spg. er formentlig besvaret et utal gange og jeg HAR skam kigget på nogle af de foregående. Alligevel vil jeg belønne vedkommende som på en pædagogisk måde forklarer hvordan jeg tilføjer flere slags links i en CSS.

Mine links ser i den nuværende CSS ud som følger;

<style>
<!--
A:link  { color: 333333 }
A:visited  { color: black }
A:hover {color: C0AE79;}
<!--
</style>


- og nu vil jeg ha' et alternativ til links på en mørk baggrund.
Avatar billede schaefner Juniormester
30. maj 2003 - 20:07 #1
Prøv at se: http://schaefner.dk/~exp/315701.html
Avatar billede sezam Nybegynder
30. maj 2003 - 20:11 #2
Så i mit tilfælde;

<style>
<!--
a.link1:link{ color: 333333 }
a.link1:visited{ color: black }
a.link1:hover{color: C0AE79;}

a.link2:link{ color: xxxxx }
a.link2:visited{ color: xxxxx }
a.link2:hover{color: xxxxx;}
<!--
</style>

?
Avatar billede schaefner Juniormester
30. maj 2003 - 20:13 #3
ja, og så:

<a href="" class="link1">Link med en farve</a>
<a href="" class="link2">Link med en anden farve</a>
Avatar billede roenving Novice
30. maj 2003 - 20:14 #4
f.eks.:

<style>
A:link  { color: #333333 }
A:visited  { color: black }
A:hover {color: #C0AE79;}
.BackgroundBlack A:link  { color: #CCCCCC ; text-decoration:none;}
.BackgroundBlack A:visited  { color: white }
.BackgroundBlack A:hover {color: #3f5197;}
</style>

-- og så skal dit afsnit med den sorte baggrund have class="BackgroundBlack"
Avatar billede sezam Nybegynder
30. maj 2003 - 20:19 #5
måske et dumt spørgsmål skal:

<a href=" class="link1">Link med en farve</a>
<a href=" class="link2">Link med en anden farve</a>

- også være med i selve css-filen eller skal det være i html-filen ?
Avatar billede schaefner Juniormester
30. maj 2003 - 20:22 #6
i html-filen.
Avatar billede roenving Novice
30. maj 2003 - 20:27 #7
>>schaefner

-- har du prøvet at udforske hierarki-definitionerne i selectors i css -- det kan faktisk gøre nogle ret besværlige ting ekstremt nemme ;O)
Avatar billede doggy82 Praktikant
30. maj 2003 - 20:33 #8
http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

www.w3schools.com ! kan det siges nok gange...
Avatar billede sezam Nybegynder
30. maj 2003 - 20:35 #9
roenving - bruger jeg din metode har jeg ikke brug for at indsætte noget kode på html-siden. Dét virker jo en del nemmere...eller overser jeg noget ?
Avatar billede schaefner Juniormester
30. maj 2003 - 20:38 #10
doggy82 >> Bringer den noget nyt på banen?
Avatar billede roenving Novice
30. maj 2003 - 20:40 #11
Du skal angive class="BackgroundBlack" på den del som har den sorte baggrund -- selv gør jeg det oftest med en div eller f.eks. i en iframe
Avatar billede roenving Novice
30. maj 2003 - 20:42 #12
>>schaefner er du så katten -- så kan vi få et slagsmål *gg*

-- de gange jeg har kigget efter -- henvisninger, oftest herfra -- har jeg mest fået indtryk af rimeligt kompetente svar/definitioner/lektioner på w3schools -- men det gør dem ikke til gud !-)
Avatar billede roenving Novice
30. maj 2003 - 20:45 #13
>>sezam

eksempel på tekst-tilføjning:

.mainText{
display:block;
text-decoration: none;
font-family: verdana,arial,sans-serif ;
font-size: 10pt ;
font-weight: normal ;
}

.mainText a{
display:inline;
text-decoration: none;
font-family: verdana,arial,sans-serif ;
font-size: 10pt ;
font-weight: normal ;
cursor:hand;
}

-- de ligger i samme div ...
Avatar billede sezam Nybegynder
30. maj 2003 - 20:46 #14
skal lige være med... jeg har en tabel med sort baggrund hvori teksten (og dermed linket) skal adskille sig i forhold til de andre link. Denne tekst skal så have class "BackgroundBlack", men hvordan skal jeg markere den sorte tabel ? Det er her jeg står lidt af...?
Avatar billede roenving Novice
30. maj 2003 - 20:50 #15
hvis du har et link inde i noget (=hvadsomhelst, hvis css-standarderne overholdes) med class="BackgroundBlack", så skal de <a>-tags følge
.BackgroundBlack A css-stylen
Avatar billede sezam Nybegynder
30. maj 2003 - 20:52 #16
det sidste var da sort snak ...sorry lærer :-))
Avatar billede sezam Nybegynder
30. maj 2003 - 21:07 #17
hvis jeg sætter en gennemsigtig gif ind i den sorte tabel - skal den så også markeres med "BackgroundBlack" fra CSS'en ?
Avatar billede roenving Novice
30. maj 2003 - 21:11 #18
hvis du ikke angiver nogen regel (=css-rule) for eksempelvis links (<a>) skriver f.eks. IE det med blåt og understreget.

Angiver du en regel for links, f.eks.
A:link  { color: #333333 }

bliver den fulgt i stedet for (altså mørk grå, men stadig understreget -- den del af reglen er jo ikke ændret) medmindre andre regler har overtaget.

Derfor var det også med vilje, at jeg brugte rækkefølgen ovenfor, selvom det ikke her har en betydning ...

.BackgroundBlack gælder for _alt_ som findes inde i <tags> med den class, men den kan yderligere specificeres med de tags, som er inde i, som jeg viste ...

<a>-tags findes jo overalt, og er derfor en af de almindeligste specifikationer

så:

<body> <!--ingen class her A er standard-style-->
<table class="BackgroundBlack"> <!--class defineret, så A har den alternative style-->
... en masse th og tr og td osv.
</table>
<table class="BackgroundWhite"> <!--class BackgroundWhite har ikke nogen A-specifikation, så nu har vi standard-links igen-->

hth
jes
Avatar billede sezam Nybegynder
30. maj 2003 - 21:45 #19
Jeg er sikker på at du gør alt for forklare tingene på den mest pædagogiske måde, men jeg har det med koder som en ordblind med bogstaver...

Jeg er med til og med; "bliver den fulgt i stedet for (altså mørk grå, men stadig understreget -- den del af reglen er jo ikke ændret) medmindre andre regler har overtaget"

Bær over med mig
Avatar billede roenving Novice
30. maj 2003 - 21:59 #20
Prøv det -- se mit eksempel sidst i indlægget ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Eksemple på style</TITLE>
<STYLE TYPE="text/css">
a {color: #ff0000;
text-decoration:none;
font-weight:bold;
}
.andetLink a{
color: #0000ff;
text-decoration:underline;
font-weight:bolder;
}
</STYLE>
</HEAD>

<BODY>
<A HREF="#">Et link med standard-style</A>
<TABLE CLASS="andetLink">
<TR><TD><A HREF="#">Et link med andetLink-style</A></TD></TR>
</TABLE>
<TABLE>
<TR><TD><A HREF="#">Et link med standard-style</A></TD></TR>
</TABLE>
</BODY>

</HTML>
Avatar billede roenving Novice
30. maj 2003 - 22:05 #21
For lige at illustrere hvad jeg mener med overtager, så prøv at smide det her ind i en browser og check koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Eksemple på style</TITLE>
<STYLE TYPE="text/css">
a {color: #ff0000;
text-decoration:none;
font-weight:bold;
}
.andetLink a{
color: #0000ff;
text-decoration:underline;
font-weight:bolder;
}
.tredjeLink a{
font-family:arial;
color: #0077ff;
text-decoration:overline;
font-weight:100;
}
</STYLE>
</HEAD>

<BODY>
<A HREF="#">Et link med standard-style</A>
<TABLE CLASS="andetLink">
<TR><TD><A HREF="#">Et link med andetLink-style</A><BR></TD></TR>
<TR class="tredjeLink"><TD><BR><A HREF="#">Et link med tredjeLink-style</A><BR></TD></TR>
<TR><TD><A HREF="#">Et link med andetLink-style</A><BR></TD></TR>
</TABLE>
<TABLE>
<TR><TD><BR><A HREF="#">Et link med standard-style</A></TD></TR>
</TABLE>
</BODY>

</HTML>
Avatar billede sezam Nybegynder
30. maj 2003 - 22:06 #22
roenving - det hjalp ikke..jeg bliver kun mere forvirret.
Jeg er med på proceduren omkring at de alternative links skal defineres i CSS'en, men hvad jeg rent konkret skal gøre på siden og i dens HTML er stadig et mysterium for mig.
Avatar billede roenving Novice
30. maj 2003 - 22:10 #23
-- der er defineret en standard for <a>-tags -- den bruges hvis ikke andet er angivet (den røde);
-- der er så angivet en standard, når noget er inde i en andetLink-class (den blå);
-- og så er der angivet en standard, når noget er inde i tredjeLink-class'en (den cyane/lyseblå med streg over) -- selvom den ligger inde i andetLink, så er tredjeLink det nærmeste, så den bruges -- udenfor tredjeLink-class'en gælder den ikke mere, så det er andetLink

-- Hope This Helps
jes
Avatar billede roenving Novice
30. maj 2003 - 22:12 #24
Kan du se, at den del af din side, som har en mørk baggrund (hvilket iøvrigt kan defineres med det samme), skal have et specielt class-name ?
Avatar billede sezam Nybegynder
30. maj 2003 - 22:21 #25
yes - jeg er med på at den mørke baggrund skal skal ha' én eller anden form for mærkat. Men jeg aner bare ikke hvordan jeg gør. Den eneste erfaring jeg har med CSS er i forhold til tekst. Det er nok også derfor jeg ikke fatter det helt store...
Avatar billede roenving Novice
30. maj 2003 - 22:27 #26
Har du prøvet at smide de ovenstående eksempler ind i browseren ?-)

som du kan se på koden styres de _ikke_ på tekst-niveau, men helt oppe på tabel- eller tabel-række-niveau ...

du kunne også prøve at smide et link, eller din kode, så ville vi ikke famle i mørke -- og du kunne måske nøjes med det du har brug for nu, og ikke hele studiet ;O)
Avatar billede sezam Nybegynder
30. maj 2003 - 23:39 #27
ok - har lavet en lille testside; http://www.sezam.dk/CSS/

Fyr løs :-)
Avatar billede doggy82 Praktikant
31. maj 2003 - 01:00 #28
www.w3schools.com  = olympen !
Avatar billede roenving Novice
31. maj 2003 - 10:57 #29
-- vender tilbage senere ;-)
Avatar billede schaefner Juniormester
31. maj 2003 - 11:32 #30
doggy82 >> Tror vi har fattet det ;)
Avatar billede roenving Novice
31. maj 2003 - 22:18 #31
Prøv dette !-)

-- har selvfølgelig flyttet css ind i filen, men den kan du vel nok få på plads !!--))

<!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 name="generator" content="Adobe Golive 5.0">
        <title>Welcome to Adobe GoLive 6</title>
<STYLE TYPE="text/css">
a {color: #ff0000;
text-decoration:none;
font-weight:bold;
}
.headingOne a{
color: #ffffff;
text-decoration:none;
font-weight:bolder;
}
.headingTwo a{
font-family:arial,sans-serif;
color: #0077ff;
text-decoration:underline;
}
</STYLE>    </head>

    <body bgcolor="#ffffff">
        <table width="180" border="1" cellspacing="2" cellpadding="0">
            <tr>
                <td bgcolor="#b22222"><img src="spacer.gif" alt="" height="50" width="150" border="0"></td>
                <td bgcolor="#b22222"><span class="headingOne"><a href="http://www.eksperten.dk" target="_self">LINK</a></span></td>
            </tr>
            <tr>
                <td><img src="spacer.gif" alt="" height="1" width="1" border="0"></td>
                <td><span class="headingTwo"><a href="http://www.eksperten.dk" target="_blank">LINK</a></span></td>
            </tr>
        </table>
        <p></p>
    </body>

</html>
Avatar billede sezam Nybegynder
01. juni 2003 - 00:32 #32
ak roenving - tror simpelthen ikke det skal lykkes for mig at forstå ! :-((
Avatar billede doggy82 Praktikant
01. juni 2003 - 00:35 #33
Hvad er det du vil vide ?
Avatar billede doggy82 Praktikant
01. juni 2003 - 00:41 #34
Har du ikke set det link jeg smed:
http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

CSS fil som hedder main.css:

a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

HTML-fil:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<link rel="stylesheet" type="text/css"
href="main.css" />
</head>

<body>
<a class="one" href="bla.htm" target="_blank">This link changes color</a><br>
<a class="two" href="bla.htm" target="_blank">This link changes font-size</a>
</body>
</html>
Avatar billede doggy82 Praktikant
01. juni 2003 - 00:43 #35
Lær alt om css her:
http://www.html.dk/tutorials/css/ - god fordi den er på dansk.
http://www.w3schools.com/css/default.asp - god fordi det er den bedste!
Avatar billede sezam Nybegynder
01. juni 2003 - 00:59 #36
roenving så var den der sgu' !..... jeg har været snotforvirret eftersom jeg troede at jeg skulle gøre noget bestemt med siden. Indsættelse af noget kode eller en markering af min sorte baggrund.
Doggy - du må hellere også belønnes for din anbefaling..af specielt ét link ;-))

Men roenving - du skal sgu' belønnes for din tålmodighed. Post et svar så får du points...
Avatar billede doggy82 Praktikant
01. juni 2003 - 01:08 #37
"Normalt" så har man en ekstern css-fil (f.eks. main.css). Så henviser man til den fil ved at putte følgende ind i head:

<head>
<link rel="stylesheet" type="text/css"
href="main.css" />
</head>

Men man kan også "undgå" en ekstern fil, ved at flytte alt det som man ellers ville ha' haft i sin CSS-fil over i html-filen. Det skal så blot sættes ind i <style> </style> så browseren læser det som CSS. Det er det som roenving har gjort så'n her:

<STYLE TYPE="text/css">
a {color: #ff0000;
text-decoration:none;
font-weight:bold;
}
.headingOne a{
color: #ffffff;
text-decoration:none;
font-weight:bolder;
}
.headingTwo a{
font-family:arial,sans-serif;
color: #0077ff;
text-decoration:underline;
}
</STYLE>

u c ?
Avatar billede roenving Novice
01. juni 2003 - 01:10 #38
Muy bueno '-)
Avatar billede sezam Nybegynder
01. juni 2003 - 01:12 #39
Håber det er acceptabelt :-)
Avatar billede roenving Novice
01. juni 2003 - 01:25 #40
Takker for points ;~}
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 dag 14:10 Komme ind på : YouSeeMusic" Af Ikke-ekspert i Musik & videoafspillere
I dag 13:27 Send/modtag i Outlook 2024 Af ErikHg i E-mail programmer
10/0915:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
White papers
Flere white papers »