 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
dr88
Threadersteller
Dabei seit: 14.09.2010
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 09.08.2011 18:54
Titel Javascript-Navigation Problem mit Schriftfarbe |
  |
|
Hi,
Ich bin mir nicht sicher, ob das Thema hier richtig ist oder ob es zum Allgemeinen gehört, weil es eigentlich ja CSS ist, aber iwie klappt es ja auf die simple Methode nicht und das ganze Konstrukt ist ja ein Javascript, von daher hoffe ich hier am richtigen Fleck zu sein.
Aber jetzt zum eigentlichen Thema: Ich hab ein letztes Problem mit meiner Navigation. Hab sie jetzt endlich eingebaut, angepasst etc. funktioniert auch, zumindest hoffe ich es  doch jetzt kommt das aber, ich schaffe es einfach nicht die Schriftfarbe der aktivierten Headline zu verändern, also wenn sie braun hinterlegt ist. Ich kann die Schriftfarbe für den grauen also normalen Link oder auch für den mouseover ändern, aber nicht für den aktivierten. Jetzt ist meine Frage warum. Ich hab schon alles versucht, aber es funktioniert nichts. Vielleicht könnt ihr mir ja helfen, das wäre super.
Internetseite
Head-Bereich
| Code: | <!-- NAVIGATION -->
<style type="text/css">
html {
overflow-Y: scroll;
}
*, * focus {
outline: none;
margin: 0;
padding: 0;
}
.container {
width: 378px;
margin: 0 auto;
}
h1 {
font: 4em normal Arial, Helvetica, sans-serif;
text-align:center;
padding: 20px 0;
color: #aaa;
}
h1 span { color: #666; }
h1 small{
font: 0.3em normal Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 0.5em;
display: block;
color: #666;
}
h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background-image:url(images/background_navigation_1.png);
height: 24px;
line-height: 24px;
border: 1px solid #dadada;
width: 378px;
font-size: 14px;
font-weight:bold;
float: left;
}
h2.acc_trigger a {
color: #8a8a8a;
text-decoration: none;
display: block;
padding: 0 0 0 10px;
}
h2.acc_trigger a:hover {
color: #fff;
background-image:url(images/background_navigation_2.png);
height: 24px;
}
h2.active {
background-image:url(images/background_navigation_2.png);
height: 24px;
color: #fff;
}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 378px;
height:355px;
clear: both;
background-image:url(images/background_navigation_3.png);
border: 1px solid #dadada;
font: 11px normal Arial, Helvetica, sans-serif;
}
.acc_container .block {
padding: 10px;
}
.acc_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.acc_container h3 {
font: 2.5em normal Arial, Helvetica, sans-serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
});
</script> |
Body-Bereich
| Code: | <div class="navigation">
<div class="container">
<h2 class="acc_trigger"><a href="#">Navigation</a></h2>
<div class="acc_container">
<div class="block">
<div align="justify">Diese Navigation wird Sie durch unseren gesamten Internetauftritt führen.
Informieren Sie sich über den Rehabilitationssport, unsere Angebote, unser Team, die Räumlichkeiten und unsere Partner.
Zusätzlich erfahren Sie von uns regelmäßig Neues rund um das Thema Gesundheit.</div>
<img src="images/trennlinie_gross.png" style="margin-top:15px; margin-bottom:15px;" />
<table width="363" cellpadding="0" cellspacing="0">
<tr>
<td width="120" height="120" valign="top"><img src="images/home_o.png" name="Home" width="100" height="100" border="0" id="Home" style="border:solid 1px #dadada; padding:3px;" /></td>
<td width="120" height="120" valign="top"><a href="rehasport.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Rehasport','','images/rehasport_o.png',1)"><img src="images/rehasport.png" name="Rehasport" width="100" height="100" border="0" id="Rehasport" style="border:solid 1px #dadada; padding:3px;" /></a></td>
<td width="100" height="120" valign="top"><a href="angebot.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Angebot','','images/angebot_o.png',1)"><img src="images/angebot.png" name="Angebot" width="100" height="100" border="0" id="Angebot" style="border:solid 1px #dadada; padding:3px;" /></a></td>
</tr>
<tr>
<td width="120" height="100"><a href="team.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Team','','images/team_o.png',1)"><img src="images/team.png" name="Team" width="100" height="100" border="0" id="Team" style="border:solid 1px #dadada; padding:3px;" /></a></td>
<td width="120" height="100"><a href="kursraum.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kursraum','','images/kursraum_o.png',1)"><img src="images/kursraum.png" name="Kursraum" width="100" height="100" border="0" id="Kursraum" style="border:solid 1px #dadada; padding:3px;" /></a></td>
<td width="100" height="100"><a href="partner.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Partner','','images/partner_o.png',1)"><img src="images/partner.png" name="Partner" width="100" height="100" border="0" id="Partner" style="border:solid 1px #dadada; padding:3px;" /></a></td>
</tr>
</table>
</div>
</div>
<h2 class="acc_trigger"><a href="#">Ansprechpartner</a></h2>
<div class="acc_container">
<div class="block">
<div align="left">
<img src="images/ansprechpartner.jpg" style="border:solid 1px #dadada; background-color:#FFF; padding:3px; float:left; margin-right:5px;" />
<table>
<tr>
<td><b>Ihr Ansprechpartner:</b></td>
</tr>
<tr>
<td><img src="images/trennlinie_ansprechpartner.png" /></td>
</tr>
<tr>
<td>Anne Janser</td>
</tr>
<tr>
<td><span style="font-style:italic;">(Fachbereichsleiterin Rehasport)</span></td>
</tr>
</table>
<br /><table>
<tr>
<td width="47"><b>Kontakt:</b></td><td>Gesundheitssport Bitburg e.V.</td>
</tr>
<tr>
<td></td><td>Bahnhofstraße 25</td>
</tr>
<tr>
<td></td><td>54634 Bitburg</td>
</tr>
<tr>
<td></td><td>Tel.: 06561 / 96 73 0</td>
</tr>
<tr>
<td></td><td><a href="kontaktformular.php">info@gsv-bitburg.de</a></td>
</tr>
</table>
</div>
<div align="justify" style="margin-top:20px;">Mein Name ist Anne Janser und ich durfte gemeinsam mit unseren Gründungsmitgliedern und dem Vorstand den Gesundheitssport Bitburg e.V. gründen und aufbauen. Zu meinen Aufgaben als Fachbereichsleiterin Rehabilitationssport gehören unter anderem die Planung der Kurse, Aufnahmegespräche mit neuen Teilnehmern und die Betreuung der Reha Sport Plus Mitglieder. Im Anschluss an mein Studium zur Gesundheitsmanagerin (B.A.) absolvierte ich beim Behindertensportverband Rheinland-Pfalz die Ausbildung zum Fachübungsleiter Rehabilitationssport. Bei Fragen oder Problemen können Sie sich gerne persönlich, telefonisch oder per E-Mail bei mir melden.</div>
<div align="left" style="margin-top:10px;"><a href="kontaktformular.php">» zum Kontaktformular</a></div>
</div>
</div>
<h2 class="acc_trigger"><a href="#">Impressum</a></h2>
<div class="acc_container">
<div class="block">
<div style="margin-top:-7px; "><table width="360" style="font-size:11px;" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2" align="left" style="padding-top:5px; padding-bottom:2px;"><b>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</b></th>
</tr>
<tr>
<th colspan="2" align="left"><img src="images/trennlinie_gross.png" /></th>
</tr>
<tr>
<th colspan="2" style="padding-bottom:10px; padding-top:2px; font-weight:normal; font-size:10px;" align="left"><i>Angaben gemäß § 5 TMG</i></th>
</tr>
<tr>
<td width="50" style="padding-bottom:1px;">Adresse:</td><td style="padding-bottom:1px;">Anne Janser</td>
</tr>
<tr>
<td width="50" style="padding-bottom:1px;"></td><td style="padding-bottom:1px;">Bahnhofstraße 25</td>
</tr>
<tr>
<td width="50" style="padding-bottom:1px;"></td><td style="padding-bottom:1px;">54634 Bitburg</td>
</tr>
<tr>
<td width="50" style="padding-bottom:1px;">Telefon:</td><td style="padding-bottom:1px;">06561 - 96 73 0</td>
</tr>
<tr>
<td width="50" style="padding-bottom:15px;">E-Mail:</td><td style="padding-bottom:15px; color:#88504c;">info@gsv-bitburg.de</td>
</tr>
<tr>
<th colspan="2" align="left" style="padding-bottom:1px;"><b>Wirtschafts-ID:</b></th>
</tr>
<tr>
<th colspan="2" align="left" style="padding-bottom:15px; font-weight:normal;">10/666/2068/9</th>
</tr>
<tr>
<th colspan="2" align="left" style="padding-bottom:1px;"><b>Aufsichtsbehörde:</b></th>
</tr>
<tr>
<th colspan="2" align="left" style="padding-bottom:15px; font-weight:normal;">ADD Trier</th>
</tr>
<tr>
<th colspan="2" align="left" style="padding-bottom:1px;"><b>Haftungsauschluss:</b></th>
</tr>
<tr>
<th colspan="2" align="left" style="padding-bottom:15px; font-weight:normal;">» <a href="haftung.html" rel="#overlay">weitere Informationen</a>
</th>
</tr>
<tr>
<th colspan="2" align="left" style="padding-bottom:1px;"><b>Konzept & Realisierung:</b></th>
</tr>
<tr>
<th colspan="2" align="left" style="font-weight:normal;">» <a href="konzept.html" rel="#overlay">weitere Informationen</a>
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div> |
Vielen Dank schon mal.
Grüße
|
|
| |
  |
 |
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Di 09.08.2011 19:52
Titel
|
|
|
Weil dort das Bild ausgetauscht wird 
|
|
| |
|
|
|
Anzeige
|
|
|
dr88
Threadersteller
Dabei seit: 14.09.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 09.08.2011 21:20
Titel
|
|
|
|
Das Bild wird ausgetauscht, aber das dürfte ja nicht relevant sein, weil die schriftfarbe sich ja mit ändern soll. Außerdem funktioniert es ja beim mouseover auch ohne Problem, da wird der Hintergrund ja auch braun und die Schrift weiß, so müsste es ja auch beim aktivierten Link hinzubekommen sein.
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Di 09.08.2011 22:06
Titel
|
|
|
Ach da meinst Du, sorry, Deine Frage ist lang, aber das konnte ich dort nicht entnehmen.
Mit Firebug siehst Du es ganz einfach. Aktiv ist das H2 (und das definiert auch Weiß als Farbe). Darin geschachtelt ist aber ein A und das definiert eben grau als Farbe. Eine entspr. Regel für ein A in aktivenm H existiert nicht.
| Code: |
h2.active {
color: #FFFFFF;
}
h2.acc_trigger a {
color: #8A8A8
} |
|
|
| |
|
|
lgorse
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 09.08.2011 22:12
Titel
|
|
|
| Code: |
.active > a {
color: #FFFFFF !important;
}
|
Das fehlt bei deinem CSS. Du weist der active-Klasse zwar die Schriftfarbe #FFF zu, aber wendest die Klasse auf das h2-Element an. Im untergeordneten a-Element wird dieser Wert dann überschrieben.
Tipp: Mit Firebug kannst du dir ganz einfach die CSS-Regeln anschauen und auch, welche überschrieben bzw. vererbt wurden.
//edit: da war wohl jemand schneller als ich
Gute Nacht,
lgorse
Zuletzt bearbeitet von lgorse am Di 09.08.2011 22:13, insgesamt 1-mal bearbeitet
|
|
| |
|
|
dr88
Threadersteller
Dabei seit: 14.09.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 10.08.2011 17:18
Titel
|
|
|
super leute! hat bestens funktioniert. hab mein css ergänzt und jetzt funktioniert es. bin darauf nicht gekommen.
vielen dank für die hilfe!
gruß
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
mein Problem: CSS/JavaScript-DropDown-Navigation
[Javascript] Navigation
JavaScript-Navigation geblockt: Popupblocker in IE6 was tun?
Navigation mit javascript ausgelagert - wo ist der Fehler
[JavaScript] GoogleMaps API Navigation anpassen/Formular/...
Dreamweaver Navigation über Javascript-Slideshow einfügen
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
