# Link auf HP wo man grade drauf ist farbig hinterlegt?!



## SnakeBite334 (28. Februar 2005)

wie bekomme ich es hin das wenn ich auf meiner Homepage auf der News Seite bin das dann dort die Tabellenreihe Farblich hinterlegt ist. Ich habe es im moment so das wenn ich mit der Maus rüber gehe das sich dann der Hintergrund der Tabellenreihe Farblich ändert. Ich möchte es aber auch gerne haben das wenn ich auf einem bestimmten Link auf der Seite bin das der ständig farblich hinterlegt ist und nicht nur wenn man mit der Maus rüber geht.

Wie geht das? mit stylesheets?!

Vielen Dank im Vorraus.

André


----------



## shutdown (28. Februar 2005)

Wie es am besten gemacht wird, weiß ich nicht 

Auf jeden Fall geht es mit PHP

Am Anfang der Seite:

```
<?php
$category = "News";
?>
```

Und dann bei deinen Links:

```
<?php
if($category == "News")
    echo //farbig hinterlegtes div
else
    echo //normalen Link
?>
```
Möglicherweise keine astreine Lösung - aber durchaus machbar


----------



## Thomas Lindner (28. Februar 2005)

Bitte keine Doppelposts inn verschiedenen Foren - danke!


----------



## SnakeBite334 (28. Februar 2005)

geht es auch ohne php wie z.B. in html oder css?!

Vielen Dank für die Hilfe.


----------



## SilentWarrior (28. Februar 2005)

Ich vermute , dazu braucht man JavaScript. Und die Frage, ob JavaScript oder PHP würde ich zumindest ganz klar mit PHP beantworten, da man PHP nicht einfach abschalten kann.


----------



## Thomas Lindner (28. Februar 2005)

Auf der Gegenseite setzt PHP aber einen Server voraus, der selbiges auch unterstützt... ^^

Ich glaube IE only gibt es auch eine CSS Lösung - bin mir aber nicht ganz sicher...

Aber, trotz meines Kommentars würde ich wenn PHP Unterstützung vorhanden ist PHP nehmen, erst dann wäre JavaScript die "Notlösung"...


----------



## versuch13 (28. Februar 2005)

hi,


a:link{style}
a:visited{style}
a:hover{style}
a:active{style}

> Das funktioniert allerdings nur, wenn du mit Framesets arbeitest, oder den Inhalt in einem iframe anzeigen lässt. Was ja nicht mehr unbedingt uptodate ist, aber so funkioniert es.

greetz


----------



## c2uk (28. Februar 2005)

Es gibt auch eine CSS Lösung wie Thomas richtig vermutet hat, allerdings muss man die jedes mal per Hand einfügen.

Bei dem aktiven Link der Seite folgendes schreiben:


```
<a href="news.html" id="active">News</a>
```

Und im css sieht das dann zum Beispiel so aus:

```
#active a  { color: red; }
#active a:hover { color: darkred; }
```

mit dem # legt man eine id fest, diese id darf dann pro html Seite nur einmal vorkommen, will man diese öfters verwenden, muss man Klassen benutzen. Dann einfach anstatt der id im <a> tag class nehmen und statt dem # einen Punkt.


----------



## versuch13 (28. Februar 2005)

@c2uk,

was hab ich denn da gerade geschrieben? 

sorry @c2uk: Es ist nicht notwendig das man das jedesmal in den Link einfügen muss!
Du legst die CSS im head an oder auch extern. Darum geht es ja nun mal bei style sheets,
ganz einfach komplette Seiten in einem Style anlegen zu können ohne haufenweise zu coden.

MfG


----------



## c2uk (28. Februar 2005)

Absoluter Schwachsinn?

 Ich höre wohl nicht recht, ich habe das zur gleichen Zeit wie Du geschrieben und jetzt mal ernsthaft das a:active ist nicht das was er braucht.

  Ach ja, das per Hand einfügen bezieht sich natürlich auf die id im <a> tag und nicht auf das css.

 P.S. Ich steh nicht auf Frames, diese sollte man wenn es geht vermeiden, deshalb auch keine Emfpehlung zu a:active !


----------



## versuch13 (28. Februar 2005)

@c2uk: Es geht nicht darum wann du was geschrieben hast, sondern was du geschrieben hast. Ich wollte dich ja nicht beleidigen, sorry, sag ja nur wie es aussieht. Und hallo? Hast du nicht gerade selbst zu pseudo klasse
active geraten?

@SnakeBite334: Id s für Links zu vergeben ist nicht gerade das beste, entweder klassen, oder gar nichts. Dann setzt du den style so wie oben einfach in den head, dieser bezieht sich dann auf alle Links im Dokument.

MfG


----------



## c2uk (28. Februar 2005)

Mir gefällt Dein Ton trotzdem nicht, ich habe fast zur gleichen Zeit wie Du geschrieben, ich kann doch nicht riechen, dass gerade jemand hier auch antworten will? Außerdem habe ich nicht das gleiche geschrieben wie Du:

 Es tut mir schrecklich Leid, aber les Dir meinen Beitrag nochmals durch, ich habe nicht zur Pseudoklasse active geraten, ich habe eine id geschaffen mit dem Namen active, damit klar aus dieser hervorgeht, dass es sich um den aktiven Link handeln soll. Ich denke das sollte sogar für css-Anfänger klar sein, dass ich nicht die Pseudoklasse :active verwendet habe.

 Und wenn man dieses nur einmal in der Seite benutzen möchte kann man auch ruhig IDs benutzen. Und ich denke wenn es darum geht den aktiven Link hervorzuheben, benutzt man diesen nur einmal. Im Endeffekt ist es natürlich egal, ich halte mir aber gerne in meiner CSS Datei (ich hatte ja extra geschrieben im CSS Bereich, ob das jetzt in der html-Seite mit drin steht oder in einer externen Datei liegt ist in dem Moment doch egal, ich will ja einen css-Anfänger nicht gleich zubomben mit Infos) Ordnung, und da gehört nunmal dazu, dass ich Sachen, die ich nur einmal pro Seite verwende, eine ID gebe und keine Klasse.

 Und jetzt zu kommen, dass IDs nichts sind für Links, also bitte? Du kannst IDs noch nicht mal von Pseudoklassen unterscheiden, woher kennst Du bitte dann den Unterschied zwischen Klassen und IDs und wann was nützlich ist?


----------



## versuch13 (28. Februar 2005)

@c2ukok, danke, man lernt ja nie aus!


----------



## Maik (28. Februar 2005)

Hallo,

hier mal ein Beispiel für ein Listenmenü, das auf der geöffneten (aktiven) Seite den entsprechenden Menü-Link optisch markiert:

CSS-Code:

```
#listmenu
{
margin-left: 0;
padding-left: 0;
}

#listmenu li
{
display: block;
list-style-type: none;
margin: 0 0 3px 0;
}

#listmenu a
{
padding: 3px;
width: 160px;
border: 1px solid #304b64;
text-align: center;
}

#listmenu a:link, #listmenu a:visited
{
text-decoration: none;
padding: .2em 1em;
color: #304b64;
font-weight: bold;
border: 1px solid #304b64;
}

#listmenu a:link.active, #listmenu a:visited.active
{
padding: .2em 1em;
color: #90abc4;
font-weight: bold;
border: 1px solid #304b64;
border-left: 10px solid #90abc4;
}

#listmenu a:hover
{
padding: .2em 1em;
color: #90abc4;
font-weight: bold;
border: 1px solid #304b64;
border-left: 10px solid #90abc4;
}
```
HTML-Code:

```
<ul id="listmenu">
       <li><a class="active" href="#">item 1</a></li>
       <li><a href="#">item 2</a></li>
       <li><a href="#">item 3</a></li>
        <li><a href="#">item 4</a></li>
</ul>
```
So wird in jeder einzelnen Seite das *class*-Attribut im entsprechenden Menü-Link notiert:

```
<ul id="listmenu">
      <li><a href="#">item 1</a></li>
      <li><a class="active" href="#">item 2</a></li>
      <li><a href="#">item 3</a></li>
      <li><a href="#">item 4</a></li>
</ul>
```
usw.

greez, maik.l


----------



## c2uk (28. Februar 2005)

Genau das wollt ich nämlich nicht, einen offensichtlichen (sorry Snake falls Du kein css-Anfänger sein solltest, aber Dein erster Post lässt daraus schließen) css-Anfänger mit zu viel Infos überhäufen.


----------



## SilentWarrior (28. Februar 2005)

Ihr solltet euch mal mit dem Thema semantisches Markup beschäftigen. a:active bezeichnet lediglich die Situation, in der der Link angeklickt wird. Mal abgesehen von der Tatsache, dass das ohnehin nur mit Framesets funktioniert (die man aber aus bekannten Gründen nicht mehr verwenden sollte), verschwindet diese Hervorhebung, sobald der User irgendwoanders hinklickt - was durchaus vorkommen kann, z. B. bei Formularen.

Ideal ist diese Lösung also bei weitem nicht.


----------



## hela (28. Februar 2005)

Hallo,

         ich würde es ohne Rücksicht auf evtl. Informationsüberflutung in diesem Thread so machen, wie hier (_Anzeige des aktuell gewählten Menüpunktes_) vorgeschlagen wird:






Jedem Link in der Navigation einen eindeutigen Klassennamen geben.
Die Navigation mit einem umschließenden Block versehen, der eine eindeutige ID für die aktuelle Seite trägt.
In der CSS nach der allgemeinen Formatierung der Navigation einen kontextsensitiven Selektor mit den Linkformatierungen für die aktuelle Seite einfügen.
Hat man beispielsweise 4 Menüpunkte, dann würden die entsprechenden Stylesheets so aussehen:

```
#navigation a {
         	/* globale Eigenschaften der Links */
         }
         #navigation a:link, #navigation a:visited {
         	/* Eigenschaften für besuchte und unbesuchte Links */
         }
         #navigation a:hover, #navigation a:focus {
         	/* hover- und active-Eigenschaften der Links */
         }
         #id1 #navigation a.c1, #id2 #navigation a.c2, #id3 #navigation a.c3, #id4 #navigation a.c4 {
         	/* Eigenschaften des Links der aktuellen Seite */
        }
```
 Und der zugehörige HTML-Quelltext z.B. der Seite3, wenn das Menü als Liste ausgegeben wird: 
	
	
	



```
<div id="id3"><div id="navigation">						 
 <ul>														 
           <li><a class="c1" href="#">Menüpunkt 1</a></li>
           <li><a class="c2" href="#">Menüpunkt 2</a></li>  
           <li><a class="c3" href="#">Menüpunkt 3</a></li> <!-- Menüpunkt der aktuellen Seite -->
           <li><a class="c4" href="#">Menüpunkt 4</a></li>  
 </ul>														 
         </div></div>
```
 Die Seiten-ID (hier "id3") kann ja u.U. per PHP eingefügt werden.


----------



## Thomas Lindner (28. Februar 2005)

Ruhiger werden Jungs - kein Grund sich bei fast zeitgleichen Post und/oder unterschiedlichen Meinungen hier anzumaulen...

Also back2topic und die Hahnenkämpfe einstellen!


----------

