BlackBoard | Druckvorschau: Drei verschiedene Linkformatierungen

Geschrieben von stabo am 29.01.2005 um 13:50:

Drei verschiedene Linkformatierungen

moin

Wie der Titel schon sagt möchte ich drei verschiede Linkformatierungen im meiner Seite verwenden.

Imo habe ich zwei davon.
Das habe ich einmal über die Option Pseudoformate und einmal über "#id" gemacht.

So wurde alles auch richtig angezeigt.

Die "#id" Version wird mir nach w3c als Fehler ausgegeben, als ich also versucht habe es in eine Classdefinition zu packen, haben sich die beiden Formate gegenseitig behindert.

Daher meine Frage wie kann dieses Problem lösen?

Geschrieben von COCYHOK am 29.01.2005 um 14:11:

Was sind denn Pseudoformate? Wär schön, wenn du mal einen Codeabschnitt posten würdest.

Geschrieben von stabo am 29.01.2005 um 14:23:

moin

Ich hoffe ihr könnt damit was anfangen.
Mit Pseudoformate meine ich die Linkformartierung "a:/ a:Link" usw.

Quelltext aus dem Head Bereich

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

<style type="text/css">
<!-- 
.bg {background-image: url(images/balken.gif);}

#menu1 a {display: block; background-image: url(images/back_button.jpg); color:silver; text-decoration:none ;font-family:verdana, sans-serif; font-size: 10pt;width:160px;
padding-left: 4px; padding-bottom: 4px;   padding-top: 4px;margin: 0px auto;border:solid 1px #89a9b8;}

#menu1 a:visited{ background-image:url(images/back_button.jpg);color:silver;text-decoration:none;font-family:verdana, sans-serif; font-size: 10pt;width:160px;
padding-left: 4px; padding-bottom: 4px;   padding-top: 4px;margin: 0px auto;border:solid 1px #89a9b8;}

#menu1 a:active{background-image: url(images/back_button.jpg); color:white;text-decoration:none;font-family:verdana, sans-serif; font-size: 10pt;width:160px;
padding-left: 4px; padding-bottom: 4px;   padding-top: 4px;margin: 0px auto;border:solid 1px #89a9b8;}

#menu1 a:hover {background-color:#89a9b8;background-image: url(images/back_button_b.jpg);color: white; text-decoration:none ;font-family:verdana, sans-serif; font-size: 10pt;width:160px;
padding-left: 4px; padding-bottom: 4px;   padding-top: 4px;margin: 0px auto;border:solid 1px #999999;}
--></style>

textbereich aus dem Body

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<table bgcolor="black" border="0px" cellpadding="0px" cellspacing="0px" width="160px">
  <tr>
   <td valign="top">
<table width="160px"  border="0px" cellpadding="0px" cellspacing="1px" id="menu1">
  <tr>
   <td bgcolor="#4E6F81" width="160px" height="20px" style="padding:4px" class="bg">.::&nbsp;Navigation&nbsp;::.</td>
  </tr>

  <tr>
   <td width="160px"><a href="index.html">&nbsp;&nbsp;&raquo;&nbsp;Home&nbsp;&laquo;</a></td>
  </tr>
  <tr>

und noch Text aus der css datei

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

/* allgemeine links */

a:link{ color: white; text-decoration:underline; ;font-family: verdana,sans-serif; font-size: 10pt;border:solid 0px #89a9b8;padding:1px }

a:visited{color: white;text-decoration:underline;font-family: verdana,sans-serif; font-size: 10pt;border:solid 0px #89a9b8;padding:1px }

a:active{ color:white;text-decoration:underline;font-family: verdana,sans-serif; font-size: 10pt;border:solid 0px #89a9b8;padding:1px  }

a:hover{ color: #808080;background-color:white;  text-decoration:none;font-family: verdana,sans-serif; font-size: 10pt;border:solid 1px black;padding:1px  }

Geschrieben von LX am 29.01.2005 um 14:32:

Also IDs sind in HTML eineindeutig, sprich es darf nur genau ein Element mit derselben ID geben auf der Seite. Wenn du also eine Gruppe von Links gleich gestalten willst, kommst du an einer Klasse nicht vorbei.

Du kannst übrigens auch in einer Klasse noch die Pseudoformate verwenden

code:
1:	a.whatever:hover { text-decoration: underline; }

Oder falls eine Gruppe von Links nur in einem bestimmten Teil deiner Seite vorkommt, beispielsweise in derselben Tabellenzelle, kannst du über die ID des übergeordneten Elements gehen:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

<style type="text/css">
#nav a:link { ...}
#nav a:hover { ... }
</style>
[...]
<table>
<tr>
  <td id="nav">
    <a href="...">klick mich blau</a>
    <a href="...">nicht so dolle</a>
  </td>
</tr>
</table>

Entdecke die Möglischgeiten

Geschrieben von stabo am 29.01.2005 um 21:21:

moin

@LX

Zitat:

Oder falls eine Gruppe von Links nur in einem bestimmten Teil deiner Seite vorkommt, beispielsweise in derselben Tabellenzelle, kannst du über die ID des übergeordneten Elements gehen:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

<style type="text/css">
#nav a:link { ...}
#nav a:hover { ... }
</style>
[...]
<table>
<tr>
  <td id="nav">
    <a href="...">klick mich blau</a>
    <a href="...">nicht so dolle</a>
  </td>
</tr>
</table>

So ist es im moment ja, aber das wird mir beim w3c test angekreidet mit folgender Fehlermeldung:

Zitat:

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hock for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Misel war gestern so freundlich, und hatte sie schon mal ins deutsche gebracht.

Ich habe es auch mal mit deinem ersten Code versucht, aber ohne Erfolg.

Hier mal die Seite inklusiver Cssdatei mit angeheftet :click

Geschrieben von Misel am 30.01.2005 um 00:15:

Stabo: Erklär mal genauer, was für Effekte Du haben willst.

Der Code macht genau das, was in der CSS steht

Sogar im IE5

Geschrieben von stabo am 30.01.2005 um 00:23:

moin

Zitat:

Der Code macht genau das, was in der CSS steht großes Grinsen Sogar im IE5

Ja das ist mir klar das er das macht .
Nur w3c hat was gegen den

code:

1:
2:
3:
4:
5:
6:
7:

<table width="160px"  border="0px" cellpadding="0px" cellspacing="1px" id="menu1">
  <tr>
   <td bgcolor="#4E6F81" width="160px" height="20px" style="padding:4px" class="bg">.::&nbsp;Navigation&nbsp;::.</td>
  </tr>

  <tr>
   <td width="160px"><a href="index.html">&nbsp;&nbsp;&raquo;&nbsp;Home&nbsp;&laquo;</a></td>

und das möchte ich beseitigen.

Edit: Es ist jetzt 01:42Uhr und ich habe es doch noch hinbekommen.
der erste code von Lx war Ausschlaggebend. Ich hatte nur die Classdatei falsch eingebunden.

Danke für eure Hilfe