Ergebnis 1 bis 3 von 3

Thema: Button bei hover,active gedrückt aussehend halten

  1. #1
    Unregistriert
    Gast

    Standard Button bei hover,active gedrückt aussehend halten

    Wie soll ich das erklären, der Startseitebutton ist so eingedrückt. Nun soll bei meinem Script der Startseite Button nicht gedrückt sein sondern nur wenn man klickt und danach bevor man zu einer anderen seite wechselt. Ken emich nicht so gut aus und habe schon viel versucht zu ändern aber dads gewünschte ergebnis nicht erhalten. Google hilft mir in meinem speziellen Fall auch nicht weiter. Hier mal mein Code:

    Html Code:
    HTML-Code:
    <ul id="navi">
    		<li id="active"></li><a href="index.php" id="current">Startseite</a></li>
            		<li><a href="index.php">&Uuml;ber uns</a></li>
            		<li><a href="schutz-aktionen.php">Tierschutz und Aktivit&auml;ten</a></li>
           		<li><a href="spenden.php">Unterst&uuml;tzen Sie uns</a></li>
            		<li><a href="kontakt.php">Kontakt</a></li>
        	</ul>


    Css-Code
    HTML-Code:
    ul#navi {
    list-style-type: none;
    background: #369;
    border-top: 1px solid #9cc;
    font: normal 11px consolas, candara, Arial, Helvetica, sans-serif;
    margin: 20px 0 0 0;
    text-align: center
    }
    ul#navi li {
    display: inline;
    position: relative;
    bottom: 11px;
    line-height: 1.2em;
    }
    html>body ul#navi li {
    background: #000;
    margin: 0 3px 0 0;
    padding: 4px 0px 4px 0;
    }
    ul#navi a, ul#navi a:link, ul#navi a:visited {
    background: #900;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    display: inline;
    height: 1em;
    padding: 3px 5px 3px 5px;
    position: relative;
    right: 2px;
    bottom: 2px;
    text-decoration: none;
    }
    ul#navi a:hover {
    background: #c00;
    bottom: 1px;
    color: #fff;
    position: relative;
    right: 1px;
    }
    ul#navi a:active {
    background: #999;
    bottom: 0px;
    color: #fff;
    position: relative;
    right: 0px;
    }
    ul#navi li#active {
    background: #369;
    bottom: 13px;
    display: inline;
    margin: 0 3px 0 0;
    position: relative;
    }
    html>body ul#navi li#active {
    background: #000;
    margin: 0 4px 0 4px;
    }
    ul#navi #active a, 
    ul#navi #active a:link, ul#navi #active a:visited,
    ul #navi #active a:hover {
    background: #369;
    border-bottom: none;
    border-left: 1px solid #9cc;
    border-right: 1px solid #9cc;
    border-top: 1px solid #9cc;
    color: #fff;
    cursor: text;
    padding: 2px 5px 0 5px;
    position: relative;
    right: 0;
    bottom: 0;
    }

    Danke für eure Hilfegebung
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Button bei hover,active gedrückt aussehend halten

    Dein Quellcode in der Zeile der Startseite ist nicht korrekt.

    Code:
    <li id="active"></li><a href="index.php" id="current">Startseite</a></li>
    So wäre es richtig:

    Code:
    <li id="active"><a href="index.php" id="current">Startseite</a></li>
    Kleiner Exkurs zu Link-Styles: es gibt 5 Pseudoklassen:

    link - normale Formatierung
    visited - Formatierung wenn der Browser schon die verlinkte Seite aufgerufen hat
    hover - wenn man mit der Maus drüber fährt
    active - wenn der Link angeklickt bzw. aktiviert wird
    focus - wenn der Fokus auf den Link gelegt wird

    In deinem Fall musst Du folglich für die Links die Pseudoklasse "active" nutzen um wie Du es sagst

    Nun soll bei meinem Script der Startseite Button nicht gedrückt sein sondern nur wenn man klickt und danach bevor man zu einer anderen seite wechselt.
    Noch ein Hinweis: achte auf die Reihenfolge der Formatierungsangaben im CSS. Erst die Standard-Formatierung definieren, danach spezielle Formatierungen per Klassen definieren.

  3. #3
    Unregistriert
    Gast

    Standard AW: Button bei hover,active gedrückt aussehend halten

    Zitat Zitat von threadi Beitrag anzeigen
    Dein Quellcode in der Zeile der Startseite ist nicht korrekt.

    Code:
    <li id="active"></li><a href="index.php" id="current">Startseite</a></li>
    So wäre es richtig:

    Code:
    <li id="active"><a href="index.php" id="current">Startseite</a></li>
    Danke, das war der minimalste Fehler den ich selbst eigentlich entdecken hatte müssen...
    Kleiner Exkurs zu Link-Styles: es gibt 5 Pseudoklassen:

    link - normale Formatierung
    visited - Formatierung wenn der Browser schon die verlinkte Seite aufgerufen hat
    hover - wenn man mit der Maus drüber fährt
    active - wenn der Link angeklickt bzw. aktiviert wird
    focus - wenn der Fokus auf den Link gelegt wird

    In deinem Fall musst Du folglich für die Links die Pseudoklasse "active" nutzen um wie Du es sagst



    Noch ein Hinweis: achte auf die Reihenfolge der Formatierungsangaben im CSS. Erst die Standard-Formatierung definieren, danach spezielle Formatierungen per Klassen definieren.

    Bei Css wäre mir mit einem Stückle Script schon eher geholfen, ich werde versuchen dann das :active mal mit position relative oder absolut dann mit right und bottom zu skalieren. Hoffe mal, ich habe das richtig aufgefasst

Ähnliche Themen

  1. Problem mit Linkzuweisungen a:link, visited, hover active
    Von reeperbahner11 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 10.06.2009, 08:38
  2. Bei class="active" kein Hover-Effekt: wie?
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.08.2008, 09:37
  3. Prüfen ob submit gedrückt wurde
    Von zahlenmeer im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 20.08.2008, 11:31
  4. Hover-Effekt bei "active"-Schaltfläche deaktiviere
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 31.03.2008, 12:49
  5. css active button
    Von Webmaus im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 28.07.2006, 08:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •