Opmaak hyperlinks &amp; CSS

donderdag 2 december 2004 20:48

It's a kind of magic

In IE kan je alleen aan de <a>-tag een CSS opmaak plakken...
IE kent dus niet de opmaak aan classes of ID's in CSS...

Voor jou is het trouwens makkelijker, om het als volgt te doen:

Cascading Stylesheet:

1	a:visited {color: #000;}*

In HTML is een hyperlink namelijk standaard al underlined, maar niet zwart...

Je zal dus voor die andere pagina, een andere CSS-file moeten includen, om de URL's wit te krijgen... Of gewoon IE pech laten hebben...

IE heeft imo namelijk nogal slechte CSS support...

* Als je kleuren hebt, waarbij je 2 dezelfde getallen hebt hexadecimaal, dan hoef je die maar 1x neer te zetten... Voorbeeld... #000000 word dus #000 en #FFFFFF word #FFF...

[ Voor 59% gewijzigd door CH4OS op 02-12-2004 20:40 ]

Acties:

donderdag 2 december 2004 20:50

mozilla is better

Topicstarter

Je zal dus voor die andere pagina, een andere CSS-file moeten includen, om de URL's wit te krijgen... Of gewoon IE pech laten hebben... IE heeft imo namelijk nogal slechte CSS support...

Het probleem is dat de twee soorten links door mekaar op dezelfde pagina's staan. Bovendien is IE nog steeds de meest gebruikte browser, dus ik zou er wel graag een oplossing voor vinden.

powered by iMac

Acties:

donderdag 2 december 2004 20:53

Twee verschillende soorten opmaak voor urls kan gewoon.

Dit werkt bijvoorbeeld gewoon bij mij:

code:

1 2	a{color: #000} .nav a{color:#FFF}

Ligt het niet gewoon aan je markup (HTML)?

Acties:

JHS

Splitting the thaum.

GJ-tje schreef op donderdag 02 december 2004 @ 20:34:
In IE kan je alleen aan de <a>-tag een CSS opmaak plakken...
IE kent dus niet de opmaak aan classes of ID's in CSS...

Dat klopt volgens mij echt niet

DM!

donderdag 2 december 2004 20:56

Acties:

McVirusS

JHS schreef op donderdag 02 december 2004 @ 20:53:
[...]
Dat klopt volgens mij echt niet

Ik vroeg mij ook al af wat hij hiermee bedoelde. Wil je het even toelichten GJ-tje?

donderdag 2 december 2004 20:57

Acties:

donderdag 2 december 2004 20:58

Je zal dus voor die andere pagina, een andere CSS-file moeten includen, om de URL's wit te krijgen...

Dat trouwens ook niet, voordat iemand dat geloofd

Acties:

donderdag 2 december 2004 21:05

mozilla is better

Topicstarter

Ligt het niet gewoon aan je markup (HTML)?

Dit is de HTML code die ik gebruik voor de navigatiebar:

HTML:

<div id="navigation">
<span class="nav">
<a href="./voorpagina.htm">frontpage</a> | 
<a href="./bio.htm">biography</a> | 
<a href="./portfolio.htm">portfolio</a> | 
<a href="./expo.htm">exhibitions</a> | 
<a href="./contact.htm">contact</a>
</span>
</div>

Het zou kunnen hoor dat er een fout in zit, maar ik zie ze dan toch niet.

powered by iMac

Acties:

Verwijderd

Semantiek, semantiek: lees: Taming Lists.

donderdag 2 december 2004 21:07

Acties:

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Loro schreef op donderdag 02 december 2004 @ 20:58:
[...]

Dit is de HTML code die ik gebruik voor de navigatiebar:
HTML:
1
2
3
4
5
6
7
8
9
<div id="navigation">
<span class="nav">
<a href="./voorpagina.htm">frontpage</a> | 
<a href="./bio.htm">biography</a> | 
<a href="./portfolio.htm">portfolio</a> | 
<a href="./expo.htm">exhibitions</a> | 
<a href="./contact.htm">contact</a>
</span>
</div>
Het zou kunnen hoor dat er een fout in zit, maar ik zie ze dan toch niet.

Waarom staat die span er omheen

Haal die eens weg, en hang die classes aan #navigation

GJ-tje schreef op donderdag 02 december 2004 @ 20:34:
In IE kan je alleen aan de <a>-tag een CSS opmaak plakken...
IE kent dus niet de opmaak aan classes of ID's in CSS...

Als jij bedoelt wat ik denk dat je bedoelt, is dit echt de grootste larie ooit

Schoenmaker, houd je bij je leest!

[ Voor 34% gewijzigd door Thijsmans op 02-12-2004 21:08 ]

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

donderdag 2 december 2004 21:07

Acties:

donderdag 2 december 2004 21:13

-- overbodig dankzij Prammenhanger :p--

[ Voor 139% gewijzigd door Blaise op 02-12-2004 21:09 ]

Acties:

donderdag 2 december 2004 21:21

It's a kind of magic

McVirusS schreef op donderdag 02 december 2004 @ 20:56:
Ik vroeg mij ook al af wat hij hiermee bedoelde. Wil je het even toelichten GJ-tje?

IE kan, icm met CSS alleen aan een hyperlink de CSS gebruiken, als het ALLEEN om de <a>-tag gaat...

Als je a#wit:hover of weet ik het wat, wil doen, dan doet IE dat niet... Omdat IE alleen de link, hover, activated en visited 'kent' bij <a> en verder niets...

het zal je dus nooit lukken, in combinatie met CSS en IE... Je zal er dan denk ik javascript voor 1 van de 2 moeten gebruiken...

Acties:

donderdag 2 december 2004 21:21

Als je a#wit:hover of weet ik het wat, wil doen, dan doet IE dat niet... Omdat IE alleen de link, hover, activated en visited 'kent' bij <a> en verder niets...

het zal je dus nooit lukken, in combinatie met CSS en IE... Je zal er dan denk ik javascript voor 1 van de 2 moeten gebruiken...

Je kan toch gewoon dit doen:

Cascading Stylesheet:

1	#wit a:hover{}

Acties:

Verwijderd

GJ-tje schreef op donderdag 02 december 2004 @ 21:13:
[...]
IE kan, icm met CSS alleen aan een hyperlink de CSS gebruiken, als het ALLEEN om de <a>-tag gaat...

Als je a#wit:hover of weet ik het wat, wil doen, dan doet IE dat niet... Omdat IE alleen de link, hover, activated en visited 'kent' bij <a> en verder niets...

het zal je dus nooit lukken, in combinatie met CSS en IE... Je zal er dan denk ik javascript voor 1 van de 2 moeten gebruiken...

test eens, da's dus onzin. IE kent juist alleen :hover en :active bij anchors en niet bij andere elementen

@blaise: da's niet hetzelfde, 1e is een a met id wit waar de muis over gaat, tweede is een element met id wit, waarin een a staat waar de muis over gaat

[ Voor 86% gewijzigd door Verwijderd op 02-12-2004 21:23 ]

donderdag 2 december 2004 21:26

Acties:

tsooj

Deze werkt toch gewoon:

HTML:

<html>
<head>
  <title>test</title>
<style>
  a{color:#F00;}

  a.ab{color:#FFF;}
  a.ab:visited{color:#F0F;}
  a.ab:hover{color:#F00;}

  a.abc{color:#0F0;}
  a.abcd{color:#00F;}
</style>
</head>
<body>
  <a href="#">test</a>
  <a href="#" class="ab">test</a>
  <a href="#" class="abc">test</a>
  <a href="#" class="abcd">test</a>
</body>
</html>

donderdag 2 december 2004 21:32

Acties:

donderdag 2 december 2004 21:36

It's a kind of magic

Verwijderd schreef op donderdag 02 december 2004 @ 21:21:
test eens, da's dus onzin. IE kent juist alleen :hover en :active bij anchors en niet bij andere elementen

Heb het zelf vaak zat geprobeerd, en ik kreeg het niet aan de gang...

Tot ik het ergens op internet las, dat het gewoon niet kon... Weet alleen niet meer waar dat dat was...

@ hierboven:

HTML:

1	<a href="#" class="abcd">test</a>

Dit gaat dus niet werken...

Omdat IE het gewoon niet ondersteund...

[ Voor 16% gewijzigd door CH4OS op 02-12-2004 21:36 ]

Acties:

donderdag 2 december 2004 21:38

mozilla is better

Topicstarter

Deze werkt toch gewoon

Als ik het zo doe lukt het niet. Wat een lullige browser die IE.

powered by iMac

Acties:

Verwijderd

code:

1 2	<style>a#green:hover{background:lime}</style> <a href="#foo" id="green">this link should get a green background on mouse over</a>

Werkt hier prima in IE 6.0.

donderdag 2 december 2004 21:39

Acties:

Verwijderd

Loro schreef op donderdag 02 december 2004 @ 20:29:
Ik ben een website aan het maken voor een vriend. Nu heb ik een pagina met twee soorten links: witte en zwarte. De witte links moeten altijd wit blijven omdat ze tegen een zwarte achtergrond staan. De zwarte links moeten op hun beurt steeds zwart blijven. Ik wil dus met andere woorden geen hover, active, vistited effecten.

Nu heb ik in m'n css bestandje de volgende lijnen staan:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
A       { color: #000000; }
A:link  { color: #000000; }
A:visited   { color: #000000; text-decoration: underline; }
A:active    { color: #000000; text-decoration: underline; }
A:hover { color: #000000; text-decoration: underline; }

.nav A      { color: #FFFFFF; }
.nav A:link { color: #FFFFF; }
.nav A:visited{ color: #FFFFF; text-decoration: underline; }
.nav A:active   { color: #FFFFF; text-decoration: underline; }
.nav A:hover    { color: #FFFFF; text-decoration: underline; }
De nav class gebruik ik dus om m'n links wit te maken. Nu werkt dit perfect in firefox en safari, maar IE weigert en doet koppig zijn eigen ding.

Weet iemand van jullie hoe ik IE zo ver kan krijgen om de pagina toch weer te geven zoals ik het wil?

Ik heb niet alle replies op jouw topic gelezen, hier heb ik even geen tijd voor. Maar wat je moet doen:

1. Aan a:link e.d. moet je geen kleur meegeven
2. In plaats daarvan creeer je 2 nieuwe classes, nl.:
.hyperlink_wit EN
.hyperlink_zwart
3. Als je een link plaatst geef je em een class mee:
<a href="welkom.htm" class="hyperlink_wit"> OF
<a href="welkom.htm" class="hyperlink_zwart">
4. Dan krijg je een witte en een zwarte hyperlink, ook in IE.

Zo werkt het dus wel.
Succes!

[ Voor 3% gewijzigd door Verwijderd op 02-12-2004 21:40 ]

donderdag 2 december 2004 21:43

Acties:

donderdag 2 december 2004 21:57

Loro schreef op donderdag 02 december 2004 @ 21:36:
[...]
Als ik het zo doe lukt het niet. Wat een lullige browser die IE.

Dat werkt wel hoor. Kijk maar goed naar wat de code zou moeten doen en wat IE6 daadwerkelijk doet.

@blaise: da's niet hetzelfde, 1e is een a met id wit waar de muis over gaat, tweede is een element met id wit, waarin een a staat waar de muis over gaat

Ja klopt. Ik vergis me omdat ik nooit classes geef aan individuele a-tags maar aan de containers.

Acties:

Rowanov

Kop eens wat anders...

Verwijderd schreef op donderdag 02 december 2004 @ 21:39:
[...]

Ik heb niet alle replies op jouw topic gelezen, hier heb ik even geen tijd voor. Maar wat je moet doen:

Dat moet je dus wel doen, dat antwoord was al lang gegeven. Overigens zeg jij ook niets over hover en link etc. waar het dus wel om gaat.

donderdag 2 december 2004 22:08

Acties:

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

GJ-tje schreef op donderdag 02 december 2004 @ 21:13:
[...]
IE kan, icm met CSS alleen aan een hyperlink de CSS gebruiken, als het ALLEEN om de <a>-tag gaat...

Als je a#wit:hover of weet ik het wat, wil doen, dan doet IE dat niet... Omdat IE alleen de link, hover, activated en visited 'kent' bij <a> en verder niets...

het zal je dus nooit lukken, in combinatie met CSS en IE... Je zal er dan denk ik javascript voor 1 van de 2 moeten gebruiken...

Volgens jou werkt onderstaande dus niet? Think again

HTML:

<html>
<head>
<style type="text/css">
a#spef{
    color: black;
}
a#spef:hover {
    color: blue;
}
</style>
</head>

<body>
<a href="spef" id="spef">melp melp</a>
</body>
</html>

Oh trouwens, ik heb ergens op internet gelezen dat de aarde plat was. Ik dacht altijd rond, maar dat was dus niet zo volgens internet

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

donderdag 2 december 2004 22:12

Acties:

donderdag 2 december 2004 22:17

It's a kind of magic

Prammenhanger schreef op donderdag 02 december 2004 @ 22:08:
Volgens jou werkt onderstaande dus niet? Think again
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style type="text/css">
a#spef{
    color: black;
}
a#spef:hover {
    color: blue;
}
</style>
</head>

<body>
<a href="spef" id="spef">melp melp</a>
</body>
</html>
Oh trouwens, ik heb ergens op internet gelezen dat de aarde plat was. Ik dacht altijd rond, maar dat was dus niet zo volgens internet

Ik heb het zelf geprobeerd... In IE werkt het gewoon niet... En ik weet zeker, dat ik het 'goed' gedaan had...

En besides... Je denkt dat ik zei, dat het NIET wertk... Zo bedoelde ik het niet... Ik bedoelde... Dat het NIET werkt IN IE...

Anders zou het bij mij immers wel gewerkt hebben, toen ik het probeerde

Acties:

darkrain

Moderator Discord / General Chat

Geniet. Punt.

GJ-tje schreef op donderdag 02 december 2004 @ 22:12:
[...]
Ik heb het zelf geprobeerd... In IE werkt het gewoon niet... En ik weet zeker, dat ik het 'goed' gedaan had... En besides... Je denkt dat ik zei, dat het NIET wertk... Zo bedoelde ik het niet... Ik bedoelde... Dat het NIET werkt IN IE...
Anders zou het bij mij immers wel gewerkt hebben, toen ik het probeerde

Wat voor versie van IE gebruik je dan?
Bij mij in IE 6 werkt het prima.
En ik ben er vrij zeker van dat het in IE 5.0 en IE 5.5 ook werkt, dat is alleen niet getest.

edit:
Wordt het niet eens tijd je ongelijk toe te geven?

[ Voor 6% gewijzigd door darkrain op 02-12-2004 22:18 ]

Tweakers Discord

donderdag 2 december 2004 22:23

Acties:

darkrain

Moderator Discord / General Chat

Geniet. Punt.

GJ-tje schreef op donderdag 02 december 2004 @ 22:22:
[...]
Was gewoon met IE6 (XP SP1 (toen nog), volledig geupdate)

Maar ik vraag me af, waarom je elke link een andere kleur zou nemen, word een site alleen maar onduidelijker op vind ik...

Je kunt je links in je menu toch een andere kleur geven dan links in de rest van de pagina?

Tweakers Discord

donderdag 2 december 2004 22:23

Acties:

donderdag 2 december 2004 22:27

mozilla is better

Topicstarter

Allemaal hartelijk bedankt voor de reacties. Ik heb het probleem als volgt opgelost:

Cascading Stylesheet:

A#zwart         { color: #000000; }
A#zwart:link    { color: #000000; }
A#zwart:visited { color: #000000; text-decoration: underline; }
A#zwart:active  { color: #000000; text-decoration: underline; }
A#zwart:hover   { color: #000000; text-decoration: underline; }

A#wit       { color: #FFFFFF; }
A#wit:link  { color: #FFFFF; }
A#wit:visited{ color: #FFFFF; text-decoration: underline; }
A#wit:active    { color: #FFFFF; text-decoration: underline; }
A#wit:hover { color: #FFFFF; text-decoration: underline; }

HTML:

<div id="navigation">
<a href="./voorpagina.htm" id="wit">frontpage</a> | 
<a href="./bio.htm" id="wit">biography</a> | 
<a href="./portfolio.htm" id="wit">portfolio</a> | 
<a href="./expo.htm" id="wit">exhibitions</a> | 
<a href="./contact.htm" id="wit">contact</a>
</div>

Zo werkt het wel.

powered by iMac

Acties:

darkrain

Moderator Discord / General Chat

Geniet. Punt.

Het werkt nu misschien maar het is niet correct.
ID's moeten namelijk uniek zijn.

Je moet toch echt classes gebruiken hiervoor ipv # moet je . gebruiken en in de links moet je ipv id="wit" er class="wit" van maken.

Cascading Stylesheet:

A.zwart         { color: #000000; }
A.zwart:link    { color: #000000; }
A.zwart:visited { color: #000000; text-decoration: underline; }
A.zwart:active  { color: #000000; text-decoration: underline; }
A.zwart:hover   { color: #000000; text-decoration: underline; }

A.wit       { color: #FFFFFF; }
A.wit:link  { color: #FFFFF; }
A.wit:visited{ color: #FFFFF; text-decoration: underline; }
A.wit:active    { color: #FFFFF; text-decoration: underline; }
A.wit:hover { color: #FFFFF; text-decoration: underline; }

HTML:

<div id="navigation">
<a href="./voorpagina.htm" class="wit">frontpage</a> | 
<a href="./bio.htm" class="wit">biography</a> | 
<a href="./portfolio.htm" class="wit">portfolio</a> | 
<a href="./expo.htm" class="wit">exhibitions</a> | 
<a href="./contact.htm" class="wit">contact</a>
</div>

Verder zou het voor de semantiek goed zijn om lists te gebruiken zoals anne al aangaf.

[ Voor 85% gewijzigd door darkrain op 02-12-2004 22:29 ]

Tweakers Discord

donderdag 2 december 2004 22:39

Acties:

vrijdag 3 december 2004 02:43

mozilla is better

Topicstarter

Je moet toch echt classes gebruiken hiervoor ipv # moet je . gebruiken en in de links moet je ipv id="wit" er class="wit" van maken.

Dan doet hij het dus niet. Heel eigenaardig maar het is zo. Mijn excuses. Het lukt wel.

[ Voor 14% gewijzigd door Loro op 02-12-2004 22:41 ]

powered by iMac

Acties: