hilfe CSS-Problem a:active

[mathi77]

Hallo an Alle,

ich bastle gerade an meinem Prüfungsprojekt und bitte um Eure Hilfe! :'(

Habe folgendes Problem:

Hab die Navi in einem Div-container erstellt. Bei hover, visited und active sollte jeweils ein anderer Button dargestellt werden! Leider funzt der CSS-deklarierte #navi a:active nicht!

Hier das CSS: <!--- komm leider nicht auf den Fehler -->

#navi a {
text-decoration: none;
color: #007934;
background-image: url(../img/button_1.png);
background-repeat: no-repeat;
display: block;
height: 30px;
width: 145px;
text-align: center;
line-height: 30px;
text-transform: uppercase; /* Großbuchstaben */
}

#navi a:link {
text-decoration: none;
color: #007934;
background-image: url(../img/button_1.png);
background-repeat: no-repeat;
display: block;
height: 30px;
width: 145px;
text-align: center;
line-height: 30px;
text-transform: uppercase; /* Großbuchstaben */
}

#navi a:visited {
text-decoration:none;
}

#navi a:hover {
text-decoration: none;
color: #930;
background-image: url(../img/button_2.png);
background-repeat: no-repeat;
height: 30px;
width: 145px;
display: block;
line-height: 30px;
}

#navi a:active {
text-decoration: none;
color: #F60;
background-image: url(../img/button_3.png);
background-repeat: no-repeat;
height: 30px;
width: 145px;
display: block;
line-height: 30px;
}

#navi a:focus {
text-decoration: none;
color: #F60;
background-image: url(../img/button_3.png);
background-repeat: no-repeat;
height: 30px;
width: 145px;
display: block;
line-height: 30px;
}

Kann ich hier eventuell das CSS noch ein bisschen vereinfachen?

Danke vielmals im voraus : und lg

Mathilde

 

[sokie]

AW: hilfe CSS-Problem a:active

dir ist schon klar, dass :active nur stattfindet wenn man grad draufklickt, und deshalb auch nur dann zu sehen ist?
ja, kannst du deutlich vereinfachen.


alles was du unter a{} notierst gilt für alle Zustände (link,visited,hover,active,focus) du musst es also nicht wiederholen, sondern bei den anderen pseudoklassen nur die eigenschaften notieren, die sich verändern.
also bei dir nur
background-image und color
zB:

#navi a:hover {
       color: #930;
       background-image: url(../img/button_2.png);    
    }

sagt alles aus.

ps: kennst du die Eigenschaft font-variant: small-caps;?

 

[Herr_D]

AW: hilfe CSS-Problem a:active

sokie ist schneller als ich... dein CSS ist zu umfangreich...

 

[mathi77]

wow, das geht ja schnell

ok, dann hab ich wohl den begriff a:active falsch interpretiert!
gibts über css dann keine möglichkeit den button_3 anzuzeigen, wenn gerade die jeweilige angesteuerte seite angezeigt wird?

oder muss ich das bei jeder html seite einzeln angeben?

danke nochmals

hallo,

nö, leider ist mir font-variant: small-caps kein begriff ...
was bewirkt das?

danke danke nochmals!

 

[wewin]

AW: hilfe CSS-Problem a:active

small-caps sid kapitälchen, sprich alle Buchstaben sind Großbuchstaben, aber die, die groß geschrieben sind (z.B. Satzanfang) sind von der Höhe her größer...

Ist das eigentlich normal, dass small-caps in Zusammenhang mit underline im IE nicht funktionieren?

 

[sokie]

AW: hilfe CSS-Problem a:active

ja, das musst du wohlper class einzeln auf der jeweiligen Seite für den jeweiligen link machen... oder eine geschickte javascript lösung.

(small-caps sehen bei der pasenden schrift chicker aus als grossbuchstaben)

 

[mathi77]

AW: hilfe CSS-Problem a:active

vielen dank

die small caps sehen stylistisch viel besser aus!

habs jetzt mit einer class probiert, jedoch zeigt er mir hier wieder denn button_3 nicht an - des funzt einfach ned

<div id= "navi">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a class="navi" href="team.html">Team</a></li>
<li><a href="sources/aktuelles.html">Aktuelles</a></li>
<li><a href="sources/kueche.html">K&Uuml;che</a></li>
<li><a href="sources/umgebung.html">Umgebung</a></li>
<li><a href="sources/anreise.html">Anreise</a></li>
</ul>
</div> <!-- navi end -->

a.navi a:link {
font-weight: 700;
font-style: italic;
color: #FCC;
background-image:url(../img/button_3.png) no-repeat;
}


/** bin für jeden Tipp dankbar @-,-`-- **/

lg Mathi

 

[zmart]

AW: hilfe CSS-Problem a:active

hy mathi77, ok also classes gleich wie id's zu benennen würd ich nicht machen - kannst immer selber in konflikte kommen wenns komplexer wird (hier vielleicht navi_active oder so ähnlich).
dann wird das nicht mit a.navi a:link angegeben sondern mit
a.navi:link -> wirds wohl in dem fall auch dann sein

 

[maxxscho]

AW: hilfe CSS-Problem a:active

Ich weis nicht wie umfangreich dein Projekt ist.

Eine Möglichkeit wäre, das du auf jeder Seite dem "body"-Tag eine id gibts.
z.B.:

<body id="seite1">

Dann gibts du deine Links eine Klasse.

<div id= "navi">
<ul>
<li><a class="link1" href="../index.html">Home</a></li>
<li><a class="link2" href="team.html">Team</a></li>
<li><a class="link3" href="sources/aktuelles.html">Aktuelles</a></li>
<li><a class="link4" href="sources/kueche.html">K&Uuml;che</a></li>
<li><a class="link5"href="sources/umgebung.html">Umgebung</a></li>
<li><a class="link6" href="sources/anreise.html">Anreise</a></li>
</ul>
</div> <!-- navi end -->

Um jetzt den Link als aktiv anzuzeigen, definierst du das in Kombination mit der body-id im CSS.

#seite1 .link1, #seite2 .link2, #seite3 .link3     {
Definition
}

Das heißt auf der Seite1 bekommt der Link1 eine eigene Definition, auf Seite2 der Link2, usw.

Ich hoffe das ist verständlich und es ist kein Fehler drinnen. Bin nämlich grad auf der Arbeit und hab eigentlich keine Zeit^^

 

[sokie]

AW: hilfe CSS-Problem a:active

a.navi a:link {
    font-weight: 700;
    font-style: italic;
    color: #FCC;
    background-image:url(../img/button_3.png) no-repeat;    
    }

zielgenau gibst du damit der besonderen klasse "navi" die selben formatierungen wie den gewöhnlichen links. klar, dass es das nicht sein kann.

versuch mal einen der anderen zB

#navi a:hover, a.navi{
  /* formatierungen */
}

anonsten ist der Hinweis auf einem besseren klassennamen gut: current oder aktuell oder ähnlich

jedoch zeigt er mir hier wieder denn button_3 nicht an

nach der css müssten alle links den button_3 anzeigen.

 

[mathi77]

AW: hilfe CSS-Problem a:active

vielen vielen Dank an Alle! Jetzt funzt es

habs mit der .class gelöst! Danke ihr seid echt eine Wucht!

 

[maxxscho]

AW: hilfe CSS-Problem a:active

Kein Problem^^

 

[ugo12]

AW: hilfe CSS-Problem a:active

ich hatte mal proble bei .class und den IE6, lag es an .class oder der funktion osition

 

[LongDonGold]

AW: hilfe CSS-Problem a:active

Probiere mal das hier:

a.navi a:link {
    font-weight: 700;
    font-style: italic;
    color: #FCC;
    background-image:url(./img/button_3.png) no-repeat;    
    }

Oder das:

a.navi a:link {
    font-weight: 700;
    font-style: italic;
    color: #FCC;
    background-image:url(img/button_3.png) no-repeat;    
    }

Weil das Inhaltsverzeichnis wird unterschiedlich von Server abgerufen.

Bei manchen Server muss man ../img bei anderen wiederum so ./img und bei manchen kannst du es auch komplett weglassen.

Die ../ oder die ./ ist der Ausgangspunkte von Rootverzeichnis auf jenen Server

 

[Bigmemo]

AW: hilfe CSS-Problem a:active

...
Die ../ oder die ./ ist der Ausgangspunkte von Rootverzeichnis auf jenen Server

da die meisten Server Linux drauf haben, sind das relative Pfadangaben...

[B]./[/B] --> aktuelles Verzeichnis

[B]../[/B] --> steht für das übergeordnete Verzeichnis

root(/) ist eigentlich das Ausgangsverzeichnis...