Avatar billede cygnet Praktikant
30. juli 2003 - 19:47 Der er 18 kommentarer og
1 løsning

Lidt basis viden.

Skal igang med at sætte grafik på en større programmeringsopgave jeg har lovet, så det kan komme til at se pænt ud.

I den forbindelse vil jeg gerne stifte lidt mere bekendtskab med CSS.

Det jeg kan vil have lidt info om er:

Hvordan får jeg forskellige links til at se forskellige ud.
Nogle skal være sorte, og hvide med mouse.over andre hvide og sorte med mouse.over.

Derudover skal der laves en menu ud af table celler. Altså <td>Menu punkt</td> - her skal baggrundsfarven ændres ved mouse.over.

Ser frem til besvarelse af dette spørgsmål og måske et link eller tre til mere info om udnyttelsen af CSS og måske nogle gode råd på vejen.

/cygnet
Avatar billede htm Nybegynder
30. juli 2003 - 19:50 #1
Du kan med fordel kigge her: http://www.w3schools.com/css/default.asp

Så er jeg sikker på at det er nemt derfra ;o)
Avatar billede cygnet Praktikant
30. juli 2003 - 19:51 #2
Vil gerne have eksempler skrevet her - kan ikke lige se hoved og hale i det derinde.
Avatar billede Slettet bruger
30. juli 2003 - 19:54 #3
Her er en tutorial, hvor der startes helt fra bunden. Den er ektremt go:
http://www.html.dk/tutorials/css/
Avatar billede michael-k Nybegynder
30. juli 2003 - 19:56 #4
vil også anbefale html.dk  specielt dette kapitel http://www.html.dk/tutorials/css/lektion6.asp  Så har du en ide til hvordan du laver links.
Avatar billede roenving Novice
30. juli 2003 - 19:56 #5
-- to simple indgangsvinkler:

1. Du sætter class på alle dine tags og definerer hver class for sig:

.hvidLink{
color:white;
text-decoration:none;
}
.sortLink{
color:black;
text-decoration:none;
}

2. Du har sikkert de link som skal opføre sig forskelligt grupperet inde i andre tags (eks. div eller td) og så kan du udnytte css-arvelighed og nøjes med at sætte class på dine containere:

.hvidLink a:link:visited:active{
color:white;
text-decoration:none;
}
.hvidLink a:hover{
color:white;
text-decoration:underline;
}

.sortLink a:link:visited:active{
color:black;
text-decoration:none;
}
.sortLink a:hover{
color:black;
text-decoration:underline;
}
Avatar billede htm Nybegynder
30. juli 2003 - 19:56 #6
Links er

a:link - selve linkets indstillinger
a:active - indstillinger når linket er aktivt
a:visited - indstillinger for et besøgt link
a:hover - effekt når musen er over.

et eks. på sorte link kunne være og underlined når musen er over kunne være:

a:link, a:active, a:visited {color : #000000;text-decoration : none;}
a:hover {color : #000000;text-decoration : underline;}
Avatar billede cygnet Praktikant
30. juli 2003 - 19:59 #7
HTML.dk er lidt bedre end den anden.

Mangler bare lige et svar fra roenving og eksempel på den menu der.
Så er jeg vist godt kørende
Avatar billede roenving Novice
30. juli 2003 - 20:00 #8
>>htm

-- du har en anelse rod i dine rækkefølger hvis du skal have pseudo-tingen på skal det være i denne rækkefølge for at virke som man forventer -- og en enkelt rettelse:

a:link - selve linkets indstillinger
a:visited - indstillinger for et besøgt link
a:hover - effekt når musen er over
a:active - indstillinger når musen trykkes ned

-- og så kan det selvfølgelig betale sig at bruge det shortcut, jeg angav ...
Avatar billede roenving Novice
30. juli 2003 - 20:01 #9
Velbekomme '-)
Avatar billede htm Nybegynder
30. juli 2003 - 20:03 #10
roenving>> Ok jeg kunne ikke lige helt huske det ;o) - men i denne situation hvor det er den samme indstilling der er til alle, på nær hover er det ligemeget funktionsmæssigt.
Avatar billede cygnet Praktikant
30. juli 2003 - 20:12 #11
Hvis jeg tager indgangsvinkel 1:

.hvidLink{
color:white;
text-decoration:none;
}
.sortLink{
color:black;
text-decoration:none;
}

Hvordan sætter jeg så hover og så videre på ?
Avatar billede cygnet Praktikant
30. juli 2003 - 20:14 #12
Og kan jeg ikke sætte en gennemgående font på en eller anden måde ?
Avatar billede Slettet bruger
30. juli 2003 - 20:25 #13
body{
    font-family:Verdana,Tahoma,Arial,serif;
    font-size: 12px;
    color: black;
}
Avatar billede roenving Novice
30. juli 2003 - 20:29 #14
.sortLink{
color:black;
text-decoration:none;
}
.sortLink:hover{
color:black;
text-decoration:underline;
}

-- så vil den idste kun matche hover, hvorefter andre tilfælde vil matche den øverste
Avatar billede cygnet Praktikant
30. juli 2003 - 20:37 #15
Dette giver hvid baggrund og hvid tekst.. hvordan kan det være ?

body {
background-color: #000000
font-family: arial, verdana, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
Avatar billede cygnet Praktikant
30. juli 2003 - 20:39 #16
Doh !! har fundet fejlen.
Avatar billede roenving Novice
30. juli 2003 - 20:40 #17
sikkert den manglende ; efter baggrundsfarven:
background-color: #000000;
Avatar billede cygnet Praktikant
30. juli 2003 - 20:40 #18
Damn - er ellers ikke newbie her - men der var vist en der fik alle pointene - ligger lige fem til jer hver i et nyt spørgsmål.
Avatar billede cygnet Praktikant
30. juli 2003 - 20:42 #19
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