Elemente/Bereiche das Layouts verlinken?

B
New member
Hallo,
Ich weiss ja, dass man CSS Elemente nicht verlinken kann;
aber da frage ich mich wie so etwas wie z.B. hier auf PCM das "Karteikartenmenü" realisiert wird?
Wenn man z.B. auf "News"geht ist ja auch der gesamte Bereich verlinkt der auch diesen Mouse-over-Effekt hat und nicht nur das Wort?!
Wie wird sowas gemacht?

danke und Lg
 
Wie wäre es (simples Beispiel) so:

Code: 
.linkklasse {
color:blue;
background-color:white;
}
.linkklasse:hover {
color:white;
background-color:blue;
}

Das kannst du nicht nur mit Links, sondern auch mit so ziemlich Allem machen.
 
Das Problem dabei ist aber das ich damit zwar den ganzen bereich "hovern" kann, aber verlinken kann ich höchstens das hineingeschriebene Wort, nicht aber den kompletten bereich der class.


EDIT (autom. Beitragszusammenführung):


Edit:
Ich hab das ganze jetzt so gelöst:

<div class="box1"onclick="location.href='Index.php?action=startseite';">Startseite</div>

jedoch funktioniert der Hover-Effekt mit Css dann nicht mehr :(
".box1:hover"wird sozusagen nicht mehr angezeigt wenn ich mit der Maus über die box fahre....
 
Zuletzt bearbeitet:
Zum Beispiel so:

HTML: 
<html>
<body>

<style type="text/css">
a { 
color: #fff;
padding: 10px 40px;
background: red;
border: 1px solid black;
border-radius: 10px 10px 0px 0px;
}

a:hover {
 background: blue;
}
</style>
<br/><br/>
<a href="#">Text</a>
</body>
</html>
 
Funktioniert schonmal wunderbar, allerdings sieht dann ja jeder link auf der ganze Seite so aus.
Wie kann ich nur bestimmten Links dieses Aussehen geben?
bzw. nur die Links in einem div?
 
Zuletzt bearbeitet:
Gib den Links eine Klasse (zB "menuLink" => a.menuLink:hover {...} ).

Oder alternativ: Gib deinem Menü eine Klasse oder eine ID (zB id="menu" => #menu a:hover {...} ).
 
ich modifiziere hier nun den Code von pixelflat:
Code: 
[COLOR=#000080]<html>[/COLOR]
[COLOR=#000080]<body>[/COLOR]
[COLOR=#800080]<style type=[COLOR=#0000FF]"text/css"[/COLOR]>[/COLOR]
#linkname {  color: #fff;
padding: 10px 40px;
background: red;
border: 1px solid black;
border-radius: 10px 10px 0px 0px; 
}
#linkname:hover {  background: blue; 
}
[COLOR=#800080]</style>[/COLOR]
[COLOR=#000080]<br/>[/COLOR][COLOR=#000080]<br/>[/COLOR]
[COLOR=#008000]<a href=[COLOR=#0000FF]"#" id="linkname"[/COLOR]>[/COLOR]Text[COLOR=#008000]</a>[/COLOR]
[COLOR=#000080]</body>[/COLOR]
[COLOR=#000080]</html>[/COLOR]
 
Zuletzt bearbeitet:
Dann hast du aber auf einer Seite nur einen Link. Eine ID muss immer eindeutig sein. Besser wäre daher eine Klasse - davon kannst du so viele haben wie du willst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Online-Statistiken

Zurzeit aktive Mitglieder
1
Zurzeit aktive Gäste
313
Besucher gesamt
314
Die Summen können auch versteckte Besucher enthalten.

Neueste Themen

Beliebte Forum-Themen

X
Keine passende Antwort gefunden?
Jetzt kostenlos anmelden
Zurück
Oben Unten