Verschillende CSS stylen op 1 pagina - Softwareontwikkeling

donderdag 15 juli 2004 13:33

Acties:

Topicstarter

Heb een probleem bij het maken van een opmaak voor een pagina met CSS.
Heb de search gebruikt maar kom d'r nog niet echt uit, ben een n00b wat CSS betreft

Ok een voorbeeldje van wat ik wil, als dit werkt dan snap ik ook wel hoe het in de uiteindelijke stijl werkt

:html pagina met twee links, eerste link:

color #000000
hover color #000000 underline
visited #000000

tweede link:

color #cccccc
hover color #cccccc underline
visited #cccccc
___________________________
HTML:

<html>
<head>
<title>Untitled Document</title>

</head>

<body>
<a href="blabla2" class="link1" target="mainFrame">link 1</a>

<br><BR>

<a href="blabla2" class="link2" target="mainFrame">link 2</a>

</body>
</html>
_______________________________

Vraag is dus, hoe zet ik dit in de CSS? Heb nu dit;
_______________________________
CSS:

a:link1

{ font-family: Verdana;
font-size: 10pt;
font-style: normal;
color: #000000;

}

a:link2

{ font-family: Verdana;
font-size: 10pt;
font-style: normal;
color: #cccccc;
}
__________________________

Hoe voeg ik hier de andere aspecten als ahover, avisited, en active aan toe??
Kan iemand mij hiermee helpen?
Avb!!

donderdag 15 juli 2004 13:36

Acties:

Verwijderd

Kijk even op www.handleidinghtml.nl Daar staat er een geweldige cursus CSS die je probleem kan oplossen.

donderdag 15 juli 2004 13:37

Acties:

eborn

code:

a.link:link, a.link:hover, a.link:active {
  font-family: Verdana; 
  font-size: 10pt; 
  font-style: normal; 
  color: #000000;
}
a.link:link, a.link2:hover, a.link2:active {
  font-family: Verdana; 
  font-size: 10pt; 
  font-style: normal; 
  color: #cccccc;
}

[ Voor 16% gewijzigd door eborn op 15-07-2004 13:37 ]

donderdag 15 juli 2004 13:38

Acties:

onne

Topicstarter

eborn schreef op 15 juli 2004 @ 13:37:

code:

a.link:link, a.link:hover, a.link:active {
  font-family: Verdana; 
  font-size: 10pt; 
  font-style: normal; 
  color: #000000;
}
a.link:link, a.link2:hover, a.link2:active {
  font-family: Verdana; 
  font-size: 10pt; 
  font-style: normal; 
  color: #cccccc;
}

bedankt voor beide reacties!!! Mooi idee dat CSS (als het werkt

)

donderdag 15 juli 2004 13:39

Acties:

OkkE

CSS influencer :+

Je hebt het bijna goed.

a geeft aan welk element, de link dus.
:link1 geeft de status van het element aan. Dit moet dus 'hover', 'active', enz zijn.
.bla geeft de zelf bedachte naam aan.

Het zou dus zo moeten:

code:

a.link1 { color: #ccc; }
a.link1:hover { color: #000; }

a.link2 { color: #0f0; }

/* enz */

[ Voor 4% gewijzigd door OkkE op 15-07-2004 13:40 . Reden: pfffff spuit 11-honderd.. ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 15 juli 2004 13:40

Acties:

André

Analytics dude

www.w3schools.com

donderdag 15 juli 2004 13:54

Acties:

onne

Topicstarter

OkkE schreef op 15 juli 2004 @ 13:39:
Je hebt het bijna goed.

a geeft aan welk element, de link dus.
:link1 geeft de status van het element aan. Dit moet dus 'hover', 'active', enz zijn.
.bla geeft de zelf bedachte naam aan.

Het zou dus zo moeten:
code:
1
2
3
4
5
6
a.link1 { color: #ccc; }
a.link1:hover { color: #000; }

a.link2 { color: #0f0; }

/* enz */

thnx het werkt nu, voor de geinteresseerden, hier het resultaat (site nog lang niet af overigens) maar menu nu dus wel

http://www.janisdeman.nl/new_site/index.htm

nogmaals bedankt!

donderdag 15 juli 2004 19:37

Acties:

crisp

Devver

Pixelated

/basic dus...

ps: [ code ] [ /code ] aub

[ Voor 56% gewijzigd door crisp op 15-07-2004 19:38 ]

Intentionally left blank