[Erledigt] aktiven link im zustand von hover anzeigen?

litterauspirna · 01.11.2008, 10:46

Halleo Leute!

Ich hofe der Titel ist einigermaßen Temnbezogen gewählt. Folgende Frage.

Ich habe diesen CSS Code:

Code:

.table_link
{
width: 100px;
line-height: 20px;
text-align: center;
}
.table_link a
{
width: 100px;
display: block;
height: 24px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
}
.table_link a:hover
{
background-color: #ECD888;
width: 100px;
display: block;
height: 23px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
font-weight: bold;
}

Wie kann ich es machen das der Link der angeklickt wurde im Zustand wie hover bleibt? So ist es übersichtlicher und der User weis wo er grad ist bzw. welchen Link er betätigt hat.

So wie es hier ist in den Profilen wo man Kontakte und Über mich und so klicken kann.

Habe es mit a:active probiert das geht aber nicht.

Danke für eure Tipps mfg der litter

nikosch · 01.11.2008, 10:53

Das hat mit hover nichts zu tun. Ist einfach ein Menü (bspw. Liste) mit CSS Klasse, die bspw. über PHP abhängig vom aktuellen Seiteninhalt gesetzt wird.

litterauspirna · 01.11.2008, 10:57

Das heist also wenn ich einen Link angeklickt habe und diesen mit $_GET aufrufe dann so etwas hier?

PHP-Code:

  if(isset($_GET['kontakte']))
{
      echo 'class="aktiver link"';
}

Das,dass mit hover nix zu tun hat weis ich. Ich meinte das auch so das der aktive Link so angzeigt wird wie er aussieht wen er im hover zustand ist.

nikosch · 01.11.2008, 10:58

Ganz genau. Wenn Du einen Controller für Deine Seiten benutzt, dann bau Dir am besten auch gleich noch einen für das Menü.

Manko10 · 01.11.2008, 11:00

Es gibt die Pseudo-Klasse :active, bloß funktioniert die ein wenig anders als das, was du meinst.
Du musst entweder die Klasse class="active" setzen und diese dann speziell formatieren oder du gibst jedem Menü-Eintrag eine eindeutige ID. Dazu bekommt noch das Body-Tag eine ID und zwar auf jeder Seite eine andere. Dann kannst du mit CSS- wie folgt arbeiten:

Code:

#mainpage #nav-mainpage,
#imprint #nav-imprint {
    /* ... */
}

nikosch · 01.11.2008, 11:01

Interessanter Ansatz, aber das ist ja ein gewaltiger CSS Overhead. Zudedm keine generische Lösung. Da wärs ja sogar noch besser ein Dokumenten Stylesheet zu schreiben.

Manko10 · 01.11.2008, 11:05

Das ist das einzige Problem dabei. Deshalb ist das auch eine Lösung für Toplevel-Navigationen bzw. Navigationen mit wenigen und relativ festen Einträgen.
Wenn man eine Seite mit einer Navigation auf zwei Ebenen hat, ist das ein durchaus sinnvoller Ansatz. Die Toplevel-Navi formatiert man auf diese Weise und die Sublevel-Navi mit class="active".
Dann muss man nicht class="toplev-active" und class="sublev-active" verwenden.

nikosch · 01.11.2008, 11:06

Höh? Wieso? active ist active. Und als Klasse kannst Du das doch mehrfach vergeben. Was genau meinst Du? (Beispiel?)

Manko10 · 01.11.2008, 11:09

Ja, okay. Dieser Ansatz ermöglich aber, dass man die Toplevel-Navi auslagert und sich nicht weiter darum kümmern muss.
Wie auch immer. Letztendlich muss man sich selbst entscheiden, was den Zweck gerade am besten erfüllt.

litterauspirna · 01.11.2008, 12:16

Ich habe es soweit geschafft.

Nur habe ich ein Problem,das wenn ich einen Link anklicke der sich in der Höhe und Farbe abhebt und ändert. Nur die naderen daneben ligenden dann in der Luft hengen.

ungefähres Beispiel.

PHP-Code:

 
<div <?php if(isset($_GET['upload'])) echo 'id="link1"'; else echo 'id="link1_aktiv"'; ?>>
</div>
 
<div <?php if(isset($_GET['upload'])) echo 'id="link2"'; else echo 'id="link2_aktiv"'; ?>>
</div>
 
<div id="text_contend">
     hier erscheint alles was aufgerufen wird
</div>

So klicke ich nun link1 an dann ändert sich wie gewünscht die Höhe. Nur die anderen Links hängen in der Luft. Ich will es aber wie hier im Profil.wie kann ich das dann erreichen. Die Link divs sind mit float: left; angeordnet.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bilder bzw. link mit php anzeigen bzw. verstecken		PHP Tipps 2005-2	2	07.10.2005 13:40
Daten aus MySQL-abfrage zum Link mit id zusammensetzen	maccoder	Datenbanken	2	13.09.2005 16:49
Suche Tipps für Persormance-Steigerung (Geld für Nützliches)		Beitragsarchiv	18	16.08.2005 10:57
aktiven Link kennzeichnen in Listennavigation		PHP Tipps 2004-2	4	12.12.2004 18:29
Auslesen vom letzten aktiven (besuchten) Link		PHP-Fortgeschrittene	3	09.11.2004 09:35
Fehler im Script für aktiven Link	tikal	PHP Tipps 2004	4	22.09.2004 10:37
PHP Link ???		PHP Tipps 2004	4	25.06.2004 17:24
Upload-Script: Link nach Upload anzeigen?		PHP Tipps 2004	4	18.06.2004 21:52

01.11.2008, 10:46
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	[Erledigt] aktiven link im zustand von hover anzeigen? Halleo Leute! Ich hofe der Titel ist einigermaßen Temnbezogen gewählt. Folgende Frage. Ich habe diesen CSS Code: Code: .table_link { width: 100px; line-height: 20px; text-align: center; } .table_link a { width: 100px; display: block; height: 24px; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000; } .table_link a:hover { background-color: #ECD888; width: 100px; display: block; height: 23px; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; font-weight: bold; } Wie kann ich es machen das der Link der angeklickt wurde im Zustand wie hover bleibt? So ist es übersichtlicher und der User weis wo er grad ist bzw. welchen Link er betätigt hat. So wie es hier ist in den Profilen wo man Kontakte und Über mich und so klicken kann. Habe es mit a:active probiert das geht aber nicht. Danke für eure Tipps mfg der litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

01.11.2008, 10:53
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das hat mit hover nichts zu tun. Ist einfach ein Menü (bspw. Liste) mit CSS Klasse, die bspw. über PHP abhängig vom aktuellen Seiteninhalt gesetzt wird. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.11.2008, 10:57
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Das heist also wenn ich einen Link angeklickt habe und diesen mit $_GET aufrufe dann so etwas hier? PHP-Code: `if(isset($_GET['kontakte'])) { echo 'class="aktiver link"'; }` Das,dass mit hover nix zu tun hat weis ich. Ich meinte das auch so das der aktive Link so angzeigt wird wie er aussieht wen er im hover zustand ist. __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

01.11.2008, 10:58
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ganz genau. Wenn Du einen Controller für Deine Seiten benutzt, dann bau Dir am besten auch gleich noch einen für das Menü. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.11.2008, 11:00
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Es gibt die Pseudo-Klasse :active, bloß funktioniert die ein wenig anders als das, was du meinst. Du musst entweder die Klasse class="active" setzen und diese dann speziell formatieren oder du gibst jedem Menü-Eintrag eine eindeutige ID. Dazu bekommt noch das Body-Tag eine ID und zwar auf jeder Seite eine andere. Dann kannst du mit CSS- wie folgt arbeiten: Code: #mainpage #nav-mainpage, #imprint #nav-imprint { /* ... */ } __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

01.11.2008, 11:01
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Interessanter Ansatz, aber das ist ja ein gewaltiger CSS Overhead. Zudedm keine generische Lösung. Da wärs ja sogar noch besser ein Dokumenten Stylesheet zu schreiben. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.11.2008, 11:05
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Das ist das einzige Problem dabei. Deshalb ist das auch eine Lösung für Toplevel-Navigationen bzw. Navigationen mit wenigen und relativ festen Einträgen. Wenn man eine Seite mit einer Navigation auf zwei Ebenen hat, ist das ein durchaus sinnvoller Ansatz. Die Toplevel-Navi formatiert man auf diese Weise und die Sublevel-Navi mit class="active". Dann muss man nicht class="toplev-active" und class="sublev-active" verwenden. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

01.11.2008, 11:06
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Höh? Wieso? active ist active. Und als Klasse kannst Du das doch mehrfach vergeben. Was genau meinst Du? (Beispiel?) __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.11.2008, 11:09
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Ja, okay. Dieser Ansatz ermöglich aber, dass man die Toplevel-Navi auslagert und sich nicht weiter darum kümmern muss. Wie auch immer. Letztendlich muss man sich selbst entscheiden, was den Zweck gerade am besten erfüllt. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

01.11.2008, 12:16
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Ich habe es soweit geschafft. Nur habe ich ein Problem,das wenn ich einen Link anklicke der sich in der Höhe und Farbe abhebt und ändert. Nur die naderen daneben ligenden dann in der Luft hengen. ungefähres Beispiel. PHP-Code: `<div <?php if(isset($_GET['upload'])) echo 'id="link1"'; else echo 'id="link1_aktiv"'; ?>> </div> <div <?php if(isset($_GET['upload'])) echo 'id="link2"'; else echo 'id="link2_aktiv"'; ?>> </div> <div id="text_contend"> hier erscheint alles was aufgerufen wird </div>` So klicke ich nun link1 an dann ändert sich wie gewünscht die Höhe. Nur die anderen Links hängen in der Luft. Ich will es aber wie hier im Profil.wie kann ich das dann erreichen. Die Link divs sind mit float: left; angeordnet. __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de