Die Formatierung des aktiven Links...

von **Asap** » 21.06.2006, 03:39

Grüße,

ich habe ein an sich einfaches Problem. Hab im Inet auch schon gesucht und auch in dem Forum, aber irgendwie hab ich nirgends was richtiges gefunden, was mir wirklich weiter hilft.
Bitte helft mir. Ich bin ziemlich am verzweifeln.

Die HP besteht auf nem CMS System. Style entsprechend über CSS definiert.
Über den Kopf der Seite kann man 5 große Bereiche der Site aufrufen, welche dann wieder Untermenüs haben. Diese fünf links sind "bold" und "schwarz" formatiert.
bei hover werden die gelb (im CSS a:hover {color: #FFD100}). Soweit klappt auch alles super. Allerdings soll immer der jeweilige aktive von den fünf links auch gelb bleiben, wärend ich dann die untermenüs benutze.
Hab keine so richtig ahnung, wie ich das machen soll. a:active funzt nicht.
Das Prob ist glaube ich auch, dass ich für alle Seiten spezielle Templates nutze (nicht für die fünf großen Menüpkt im Kopf, aber für die Untermenüs)...

Im Net haben einige geschrieben, dass das über Javascript gelöst werden kann. Allerdings hab ich keine beispiel scripts gefunden und von javascript hab ich keinen plan (was nicht heißt, dass es bei dem rest großartig anders ist!!!).

Jetzt bin ich mal wirklich gespannt, ob das jemand verstanden hat und ob sich sogar jemand erbarmt und antwortet.

Mit freundlichem Gruß und voreiligem Dank
Asap

von **Laus** » 21.06.2006, 07:40

Hallo
Das einfachste ist wenn du für aktiv eine classe setzt und diese dann entsprechend formatierst. Das heißt aber dann du musst in dem Template für das Untermenü eben diese classe auch eintragen
ZB:

Code: Alles auswählen: a.aktiv{color: #FFD100} im html <a class="aktiv" href="#">link</a>

Gruß Xaver

von **Asap** » 22.06.2006, 01:01

Hi,

danke für deine schnelle Antwort. So einfach ist es dann aber doch nicht.

Die einzelnen Seiten haben einen zugeordneten Menücode und ein Template. Bei der Bearbeitung legt man fest, ob diese Seite im Menü erscheinen soll. Über den Menücode wird festgelegt, dass alle Seitennamen, bei denen "anzeigen" selektiert ist und deren Template den Menücode benutzt, im Headermenu angezeigt werden.
Das anzeigen des Headermenüs übernimmt also der Menücode. Im Template wird nur festgelegt, wo das Menü auftauchen soll...

das ist der Templatecode...

<div id="headerNav">
[menu1]
</div>

...und das der menücode

<div class="headerNavItem">
<a href="[menuLink]">
<span class="firstChar">
[menuNameChar1]
</span>
[menuNameCharRest]
</a>
</div>

Ich hoffe, das man damit was anfangen kann.

Vielen herzlichen Dank Asap

von **Laus** » 22.06.2006, 18:49

Wenn der Menücode in einer schleife abgearbeitet wird dann wird es schwierig. Wenn das der Code ist der für den zu formatierenden Link zuständig ist einfach bei <a href="[menuLink]"> das class="aktiv" einfügen .
Ansonsten müsste man etwas mehr vom Template und Menü Code und dem dazugehörendem css sehen.
Gruß Xaver

von **Asap** » 23.06.2006, 01:02

Vielen Dank für die schnelle Antwort!

Leider wird der Menücode in einer Schleife abgearbeitet. Es werden einfach alle Seitennamen in der ersten Ordnerebene angezeigt, für die aktiviert ist, dass sie angezeigt werden sollen (das sind 4 stück).

Ich kann dir gerne das gesamte Template zeigen...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<title>xxx[Title]</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="[MetaKeywords]" />
<meta name="description" content="[MetaDescription]" />

<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link rel="stylesheet" href="css/body.css" type="text/css" />

<link rel="icon" href="favicon.ico" type="image/gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/gif" />

</head>
<body>
<div id="wrapper">

<div id="header">
<div id="headerLinkNav">
<a href="default.asp">Home</a> | <a href="search.asp">Search</a>      <a href="xxx">xxx <img src="img/flag_de.gif" alt="" /></a>
</div>
<div id="headerBody">
<div id="headerLogo">
<a href="default.asp"><img src="img/ssg_logo.gif" alt="xxx" title="xxx" /></a>
</div>
<div id="headerNav">
[menu1]
</div>
</div>
</div>
<div id="sub-wrapper">

<div id="content">
<div id="contentNav">
<div id="contentNavSub">
<ul>
[submenu2]
</ul>
</div>
</div>
<div id="contentMain">
<div id="contentGraphic"><img src="img/sg_radial.jpg" width="540" height="190" alt="" /></div>
[breadcrumbs]
<div id="main-content">
<h1>[heading]</h1>

[content]
</div>
</div>
</div>

<div id="footer">
<div id="footerBody">
<div id="footerNav">
Copyright 2006 © xxx | <a href="default.asp">Home</a> | <a href="search.asp">Search</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Den gesamten Menücode hab ich schon gepostet (mehr is das ni^^)

das komplette css is recht groß...

/* ------ //items: #header ------------------ */

#headerLinkNav
{
height: 11px;
width: 792px;
background-color: #000000;
background-image: url(../img/background_headlinknav.gif);
background-repeat: no-repeat;
padding-left: 28px;
padding-top: 3px;
}
#headerLinkNav a
{
text-decoration: none;
color: #000000;
}

#headerBody
{
width: 795px;
background-image: url(../img/header_bg.gif);
background-repeat: repeat-x;
height: 95px;
* height: 94px;
text-align: left;
padding-left: 25px;
}

#headerLogo
{
top: 11px;
left: 620px;
position: relative;

}
#headerNav
{
position: relative;
padding-left: 3px;
top: 19px;
}
.headerNavItem
{
float: left;
position: relative;
padding-right: 22px;
}
.headerNavItem a
{
font-family: Arial;
font-weight: bold;
color: #000000;
text-decoration: none;
font-size: 11px;
}
.headerNavItem a:hover
{
color: #FFD100;
}

#headerNav .firstChar
{
font-size: 12px;
}

/* ------ //items: #content ------------------ */

#contentNav
{
width: 260px;
float: left;
padding-left: 17px;
padding-top: 15px;
padding-bottom: 0px;
padding-right: 0px;
color: #717171;

}
#contentNav p
{
margin-bottom: 0px;
margin-top: 5px;
}
#contentNav .newsflash
{
background-image: url(../img/sep_dash.gif);
background-repeat: repeat-x;
background-position: bottom left;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
margin-bottom: 0px;
}
#contentNav .contact
{
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
margin-bottom: 0px;
}
#contentNavSub
{

}
#contentNavSub a
{
text-decoration: none;
}
#contentNavSub ul
{
list-style: none;
padding: 0px;
margin-left: 20px;

}
#contentNavSub ul ul
{
padding-left: 5px;
padding-top: 10px;
padding-bottom: 10px;
}

#contentNavSub ul li
{
font-weight: bold;
padding-bottom: 10px;
}
#contentNavSub ul li li
{
font-weight: normal;
padding-bottom: 5px;
}
#newsletterSignup
{
width: 200px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
}

So ich hab etwa die hälfte rausgenommen, die definitiv nichts mit dem Menücode zu tun hat...is immer noch viel und nicht wirklich übersichtlich!

Hoffe, dass du trotzdem etwas damit anfangen kann.

Thx Asap

Die Formatierung des aktiven Links...

Die Formatierung des aktiven Links...

Ähnliche Beiträge zu "Die Formatierung des aktiven Links..."

Wer ist online?