ComputerBase Menü
Aktuelles

CSS active link

W

wosola

Newbie
Registriert
Juni 2009
Beiträge
5
hallo leute
irgendwie bekomme ich es nicht hin mit dem active-link. kann mir mal jemand helfen?
das rollover funktioniert einwandfrei. bin noch neuling in css und php.

Code: 
    /* allg. Anweisung, entfernt Unterstrich von Links */
    a
    {
        text-decoration: none;
    }
    
    /*************************************/
    /* Anfang Link-Definitionen Obermenü */
    /*************************************/
    
    /* Links Obermenü in Liste */
    div.topnav li a
    {
        /* Schriftgröße relativ zu font-size: 0.8em; bei body */
        font-size: 0.8em;
        /* Schriftfarbe */
        color: #000000;
        /* Hintergrundfarbe */
        background-color: #eeeeee;
        /* Innenabstände oben rechts unten links */
        padding: 2px 8px 3px 8px;
        /* Macht aus Inline- ein Blockelement und floatet es */
        float: left;
        /* Rahmen */
        border: 1px solid #000000;
        /* links keinen Rahmen */
        border-left: none;
    }

    /* "RollOver"-Definition Obermenü */
    div.topnav li a:hover
    {
        /* Hintergrundfarbe */
        background-color: #DDE8F3;
    }
    
     div.topnav li a:active
    {
    
         /* Schriftfarbe */
        color: #002274;
    
    
        /* Hintergrundfarbe */
        background-color: #DDE8F3;
    }
    
    /* Ausnahmedefinition für Link "home" */
    div.topnav li a.home
    {
        /* linker Rahmen muss gesetzt werden */
        border-left: 1px solid #000000;
    }
    
    /***********************************/
    /* Ende Link-Definitionen Obermenü */
    /***********************************/
    
    /**************************************/
    /* Anfang Link-Definitionen Hauptmenü */
    /**************************************/
    
    /* Links Hauptmenü in Liste */
    div.shortnav li a
    {
        /* Schriftgröße relativ zu font-size: 0.8em; bei body */
        font-size: 0.9em;
        /* Schriftdicke */
        font-weight: bold;
        /* Schriftfarbe */
        color: #ffffff;
        /* Hintergrundfarbe */
        background-color: #002274;
        /* Innenabstand oben rechts unten links */
        padding: 2px 8px 2px 8px;
        /* Macht aus Inline- ein Blockelement und floatet es */

        float: left;
        /* Rahmen */
        border: 1px solid #002274;
    }
    
    /* "RollOver"-Definition Hauptmenü */
    div.shortnav li a:hover
    {
        /* Schriftfarbe */
        color: #002274;
        /* Hintergrundfarbe */
        background-color: #ffffff;
    }

    /* Definition aktiver Punt Hauptmenü */
    div.shortnav li a:acttive
    {
        /* Schriftfarbe */
        color: #003374;
        /* Hintergrundfarbe */
        background-color: #ffffff;
    }
    
    /************************************/
    /* Ende Link-Definitionen Hauptmenü */
    /************************************/

    /**************************************/
    /* Anfang Link-Definitionen Untermenü */
    /**************************************/
    
    /* Links Untermenü in Liste */
    div.navi li a
    {
        text-transform:uppercase;
        /* Schriftgröße relativ zu font-size: 0.8em; bei body */
        font-size: 0.85em;
        /* Schriftfarbe */
        color: #fff;
        /* Hintergrundfarbe */
        background-color: #5671b1;
        /* Innenabstand oben rechts unten links */
        padding: 2px 8px 4px 8px;
        /* macht aus Inline- ein Blockelement */
        display: block;
      
        /* Rahmen oben */
        border-top: 1px solid #ffffff;
        /* Rahmen unten */
        border-left: 20px solid #002274;
        /* feste Breite wegen möglichem rechten Rahmen bei :hover */
        width: 215px;
    }

    /* "RollOver"-Definition Untermenü */
    div.navi li a:hover
    {
        /* Hintergrundfarbe */
        background-color: #002274;
        /* dicker, rechter "Balken" */
        border-right: 20px solid #789bec;
    }
    
    /* Definition aktiver Punt Untermenü */
    div.navi li a:active
    {
        /* Hintergrundfarbe */
        background-color: #003374;
        /* dicker, rechter "Balken" */
        border-right: 20px solid #789bec;
    }
    
    /* Links der zweiten Ebene im Untermenü */

    div.navi ul ul li a
    {
        /* dicker, linker "Balken" */
        border-left: 20px solid #002274;
        /* feste Breite */
        width: 160px;
        /* Außenabstand links */
        margin-left: 10px;
    }
    
    /************************************/
    /* Ende Link-Definitionen Untermenü */
    /************************************/

    /*************************************/
    /* Anfang Link-Definitionen Infofeld */
    /*************************************/

    /* Links Infofeld, keine Liste */
    div.info a
    {
        /* Schriftfarbe */
        color: #002274;
        /* Außenabstand links */
        margin-left: 15px;
    }
    
    /* "RollOver"-Definition Infofeld */
    div.info a:hover
    {
        /* Text wird unterstrichen */
        text-decoration: underline;
    }
    
    /***********************************/
    /* Ende Link-Definitionen Infofeld */
    /***********************************/

    /**************************************************************/
    /* Anfang Link-Definitionen Copyright -> <p class="funktion"> */
    /**************************************************************/

    /* allg. Definitionen */
    p.funktion a
    {
        /* Schriftfarbe */
        color: #789bec;
        /* Macht aus Inline- ein Blockelement und floatet es */
        float: left;
        /* Innenabstand oben */
        padding-top: 2px;
        /* Innenabstand unten */
        padding-bottom: 2px;
        /* Hintergrundbild wird nciht gekachelt */
        background-repeat: no-repeat;
    }

    /* allg. Definition "RollOver"-Effekt */
    p.funktion a:hover
    {
        /* Hintergrundfarbe */
        color: #002274;
    }

    /* spez. Definition für Link "Druckversion */
    a.druck
    {
        /* Pfad zu Hintergrundbild */
        background-image: url(../pics/menue/druck_b.gif);
        /* Position Hintergrundbild links oben */
        background-position: 0px 2px;
        /* Abstand links, ergibt sich aus Hintergrundbild */
        padding-left: 18px;
    }
    
    /* Definition "RollOver"-Effekt für Link "Druckversion */
    a:hover.druck
    {
        /* Pfad zu Hintergrundbild */
        background-image: url(../pics/menue/druck_o.gif);
    }
    
    /* spez. Definition für Link "Seitenanfang */
    a.top
    {
        /* Außenabstand links zu Link "Druckversion" */
        margin-left: 10px;
        /* Pfad zu Hintergrundbild */
        background-image: url(../pics/menue/top_b.gif);
        /* Position Hintergrundbild links oben */
        background-position: 0px 5px;
        /* Abstand links, ergibt sich aus Hintergrundbild */
        padding-left: 10px;
    }
    
    /* Definition "RollOver"-Effekt für Link "Seitenanfang */
    a:hover.top
    {
        /* Pfad zu Hintergrundbild */
        background-image: url(../pics/menue/top_o.gif);
    }
    
    /************************************************************/
    /* Ende Link-Definitionen Copyright -> <p class="funktion"> */
    /************************************************************/

dieses ist meine links.css

oder liegt es an meinem php?

Code: 
[PHP]<?php


  /* Konfigurationsvariablen */
  $base['title'] = 'Rezepte';
  $base['topnav'] = '<a href="index.php">Startseite</a> <a href="tipp.php">Tipps</a><a href="kochen.php">Kochen</a><a href="backen.php">Kuchen</a> <a href="keks.php">Keks</a><a href="drinks.php">Getr&auml;nke</a><a href="salat.php">Salate</a><a href="fondue.php">Fondue</a>';
  $base['shortnav'] = '<a href="$PHP_SELF?cmd=blatt">Bl&auml;tterteig</a><a href="$PHP_SELF?cmd=biskuit">Biskuit</a><a href="$PHP_SELF?cmd=brand">Brandteig</a><a href="$PHP_SELF?cmd=hefe">Hefeteig</a><a href="$PHP_SELF?cmd=ruehr">R&uuml;hrteig</a><a href="$PHP_SELF?cmd=plunder">Plunder</a><a href="$PHP_SELF?cmd=quark">Quark&ouml;lteig</a><a href="$PHP_SELF?cmd=baiser">Baiser</a><a href="$PHP_SELF?cmd=strudel">Strudel</a><a href="$PHP_SELF?cmd=muerb">M&uuml;rbteig</a><a href="$PHP_SELF?cmd=brot">Brot</a><a href="$PHP_SELF?cmd=grund">Grundteig</a><a href="$PHP_SELF?cmd=creme">Creme</a><a href="$PHP_SELF?cmd=phila">Philadelphia</a>';
  $base['navigation'] = '';
  $base['content'] = '';
  $base['actual'] = 'Sie sind hier bei: ';
  $base['template'] = 'templates/main.htm';
  //$base['personen']  = 'Personen:';
  $base['zutaten'] = 'Zutaten:';
  $base['zubereitung'] = 'Zubereitung:';
  $base['besonderes'] = 'Besonderes:';
  $base['tipps'] = 'Tipps:';
  $base[zeit] = 'Zeit:';


  $base['tag_start'] = '<@';
  $base['tag_end'] = '@>';

  /* Hilfsfunktionen */

  /* Datei als String einlesen */
  function get_file_as_string($filename)
  {
    $tmprslt = file($filename);
    $tmprslt = implode('',$tmprslt);
    return $tmprslt;
  }

?>[/PHP]

auszug aus funktion.php:
PHP: 
  /* Gesamtübersicht Mürbteig laden */
  function load_inhalt_muerb()
  {
    include('inc/database.inc.php');
    $tmprslt = '';
    $connection = mysql_connect($db['host'],$db['uid'],$db['pwd']);
    if($connection)
    {
      mysql_select_db($db['db']);
      $sql = 'SELECT id, titel FROM rezepte WHERE cat_id = 49 ORDER BY titel asc ';
      $result = mysql_query($sql);
      if($result)
      {
        while($muerb = mysql_fetch_object($result))
        {
          $tmprslt .= "<a href=\"$PHP_SELF?cmd=muerbdet&id=$muerb->id\">$muerb->titel</a><br>\n";
        }
      }
      mysql_close();
    }
    return $tmprslt;
  }

  /* Detailansicht Mürbteig laden */
  function load_content_muerbdetailed($id)
  {
    include('inc/database.inc.php');
    $tmprslt = '';
    $connection = mysql_connect($db['host'],$db['uid'],$db['pwd']);
    if($connection)
    {
      mysql_select_db($db['db']);
      $sql = 'SELECT titel, personen, zutaten, zubereitung, besonderes, tipps, zeit, bild FROM rezepte WHERE id = '.$id;
      $result = mysql_query($sql);
      if($result)
      {
        $muerb = mysql_fetch_object($result);
        $tmprslt .= "<h3>$muerb->titel</h3>";
      //  $tmprslt .= "<h4>F&uuml;r $muerb->personen Personen</h4><br />";
        $tmprslt .= "<h4>Zutaten:</h4> $muerb->zutaten<br />";
        $tmprslt .= "<h4>Zubereitung:</h4> $muerb->zubereitung<br />";
        $tmprslt .= "<h4>Besonderes:</h4> $muerb->besonderes<br />";
        $tmprslt .= "<h4>Tipps:</h4> $muerb->tipps<br />";
        $tmprslt .= "<h4>Zeit:</h4> $muerb->zeit<br />";
        $tmprslt .= $muerb->bild  ;
        $tmprslt .= $muerb->content;
      }
      mysql_close();
    }
    return $tmprslt;
  }

ich hoffe, das ich alle relevanten codes gepostet habe.

danke im voraus Wolfgang
 
Wo liegt den genau das Problem?
Willst du den Link der gerade aktive Seite anders darstellen?
Da nützt dir :active nichts, active tritt ein, sobald geklickt wurde, wird eine andere Seite geladen, ist erstmal kein Link geklickt, also auch nicht active.

Einfach eine .active-Klasse machen und dann zuweisen, falls das dein Problem sein sollte
 
erst einmal sorry für die darstellung.
Patric_ du hast es schon richtig erkannt wonach ich suche. eine möglichkeit den link der aktuellen seite nach dem laden noch sichtbar zu haben. danke für deinen tipp mit der klasse, werde es einmal versuchen.

bekomme ich es vielleicht auch mit einer blättern-funktion hin?
falls ich nicht weiterkomme melde ich mich noch mal.
danke für eure mühe und schnelle antwort
 
Hmm, ich mach das immer so:

Aktuelle Seite auslesen und dann halt per
<?php if ($page == "bla") { echo "class=\"active\"; } ?>
oder so ähnlich ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

M
Jabra Elite 7 Active linker Kopfhörer wird immer im Case entladen.
Antworten
3
Aufrufe
1.313
Mr.Zweig
Mr.Zweig
A
Monitor Latency - Active Dual Link Converter
Antworten
3
Aufrufe
866
eLeSDe
eLeSDe
Snooty
Jabra Elite Active 65t knacken im linken Köpfhörer
Antworten
13
Aufrufe
9.729
Amorgeddon
A
S
Samsung S4 Active LineageOS?
Antworten
10
Aufrufe
3.877
Skarrensson
S
S
CSS spans über link ausrichten
Antworten
8
Aufrufe
1.430
Schwenni
S
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 187 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz