Toon posts:

[CSS] Spanlinks niet te combineren!

Pagina: 1
Acties:

dinsdag 21 december 2004 13:54

Acties:

Verwijderd

Topicstarter
Hey allemaal,

Ik zit met een probleem en ik kom er zelf maar niet uit.

Voor een website wil ik werken met een CSS die DIVs en SPANs bevat. De tekst werkt verder prima, elke SPAN neemt prima z'n eigen kleur, maar op het gebied van hyperlinks gaat het he-le-maal de mist in!

Dit is de test-CSS die ik gemaakt heb (gebaseerd op de werkelijke CSS):
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#h1 {
    font-family: Verdana;
    color: #000000;
    font-size: 16px;

}

span.h2 {
    font-family: Verdana;
    color: #FF0000;
    font-size: 12px;
}

span.h3 {

    font-family: Verdana;
    color: #808080;
    font-size: 10px;

}

#h1 a, a:link, a:hover, a:active, a:visited {
    color: #000000;
    text-decoration: none;

}

span.h2 a, a:link, a:hover, a:active, a:visited {
    color: #FF0000;
    text-decoration: underline;

}

span.h3 a, a:link, a:hover, a:active, a:visited {
    color: #808080;
    text-decoration: none;

}

En dit is de test-HTML-code waar het CSS aan verbonden is:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>

<head>
<title>Testpage</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<div id="h1"><a href="http://link">Test</a></div>
<br>
<span class="h2"><a href="http://link">Test 02</a></span>
<br><br>
<span class="h3"><a href="http://link">Test 03</a></span>
<p>Zo moet het;</p>
<div id="h1">Test</div>
<br>
<span class="h2">Test 02</span>
<br><br>
<span class="h3">Test 03</span>
<br><br>
(maar dan dus met links er onder!)
</body>

</html>

Om het te verduidelijken:
de CSS, de webpage.

Zoals je ziet werken de SPANs niet samen en krijgt h2 de hyperlink-kleur van h3...

Het is een wat omslachtige uitleg, maar op de webpagina is het wat duidelijker te zien.

Wie-o-wie weet wát ik fout doe?

Alvast bedankt,
De Soldaat.

[ Voor 56% gewijzigd door Verwijderd op 21-12-2004 13:56 ]

dinsdag 21 december 2004 14:05

Acties:
  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Als ik jou was zal ik even andere ID's gaan gebruiken, want als je het mij vraagt zijn h1 .. h6 preserved en mag je ze niet als ID's gebruiken.

Verder lijkt het mij ook niet handig om voor headings spans/divs te gaan gebruiken hiervoor heb je gewoon de <h1> (e.v.) tags voor...

dinsdag 21 december 2004 14:07

Acties:
  • RM-rf
  • Registratie: September 2000
  • Laatst online: 17:13

RM-rf

1 2 3 4 5 7 6 8 9

Waar je de fout ingaat is met CSS-selectoren:
code:
1
2
3
4

span.h3 a, a:link, a:hover, a:active, a:visited {
    color: #808080;
    text-decoration: none;
}

dit definieert een aantal rules voor 'span.h3 a', 'a:link', 'a:hover' ..etc

volgens mij bedoel je chter ermee:
code:
1
2
3
4

span.h3 a, span.h3 a:link, span.h3 a:hover, span.h3 a:active, span.h3 a:visited {
    color: #808080;
    text-decoration: none;
}


verder, volgens mij heeft het meer zin om in plaats van <SPAN CLASS="h3"> gewoon direkt een <H3> element te gebruiken (semantiek, semantiek...)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 21 december 2004 14:09

Acties:

Verwijderd

Mijnsinziens is het 'inpakken' van links met span's overbodig: een link is al een inline element, dus waarom zou je er dan een span omheen zetten?
Geef (gewoon) je link de class mee en dan werkt het al een stuk beter, denk ik.

Zoiets:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#h1 {
    font-family: Verdana;
    color: #000000;
    font-size: 16px;
    text-decoration: none;
}

.h2 {
    font-family: Verdana;
    color: #FF0000;
    font-size: 12px;
    text-decoration: underline;
}

.h3 {

    font-family: Verdana;
    color: #808080;
    font-size: 10px;
    text-decoration: none;
}


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>

<head>
<title>Testpage</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<a id="h1" href="http://link">Test</a>
<br>
<a class="h2" href="http://link">Test 02</a>
<br><br>
<a class="h3 href="http://link">Test 03</a>
<p>Zo moet het;</p>
<div id="h1">Test</div>
<br>
<span class="h2">Test 02</span>
<br><br>
<span class="h3">Test 03</span>
<br><br>
(maar dan dus met links er onder!)
</body>

</html>

[ Voor 21% gewijzigd door Verwijderd op 21-12-2004 14:10 ]

dinsdag 21 december 2004 14:13

Acties:

Verwijderd

Topicstarter
Bedankt voor de tips! Ik ga vanmiddag na school nog even prutsen...
Reageer