✔ Problem bei aktivem Link hervorheben!

Status
Nicht offen für weitere Antworten.
D

DocHentai

Mitglied
Servus zusammen,

habe folgendes Problem und weiß nicht warum:
Habe die aktiven Links mit einer ID "aktiv" gekennzeichnet. Funktioniert auch aber wenn ich statt der ID ne Klasse verwenden will gehts nicht mehr genauso wenig wenn ich die ID umbennen. Es geht nur wenn die ID "aktiv" heißt und mich würde interessieren woran das liegt. Es soll sich jetzt hier keiner die Arbeit machen und alles optimieren usw. wie es schön öfter der Fall war, mich interessiert nur der eine Punkt und fertig :) Wenn mir die Antwort unklar ist dann meld ich mich schon wieder :suspekt:

hier der quelltext css

Code: 
body { margin:0px; padding:0px; background-image: url('../bilder/bg.jpg'); height:100%; }
html, body, table { height: 100%; }
img  { border:0px; }
h1 { font:bold 15px verdana; }
table { width:100%; text-align:center; }

#mitte { width:800px; height:600px; background-color:silver; border:1px solid #4A4A4A; text-align:left; margin:auto; }
#kopf { width:800px; height:85px; background-image:url('../bilder/kopf_logoline_hg.jpg'); }
#tab_leiste { background-color:#4A4A4A; height:20px; padding-left:164px; }

#linke_spalte { background-color:#A9A9A9; height:475px; width:164px; float:left;}

#menu1          { margin:0px; padding:10px 0px 0px 0px;  }
#menu1 li       { list-style: none; padding:0px; margin:0px; }
#menu1 a        { display:block; margin:0px 0px 2px 0px; padding:3px 7px; background-color:#999999; width:150px;text-decoration:none; font:11px verdana; color:black; }
#menu1 a:hover  { background-color:#666666; color:white; }
#menu1  #aktiv a { background-color:silver; color:black; }


/* UNTER MENU */
#menu_abstand { margin-left:8px; }
#menu_abstand ul { list-style:none; margin:0px; padding:0px; }
#menu_abstand a { color:black; text-decoration:none; font:11px verdana; }
#menu_abstand a:hover { color:white; }
#menu_abstand #aktiv a { color:white; }

#unter_menu { background:url('m_strich.gif') repeat-y; }

li.m_mitte { background:url('m_mitte.gif') no-repeat; padding-left:10px; }
li.m_mitte1 { background:url('m_mitte.gif') no-repeat; margin-left:12px; padding-left:10px; }
li.m_ende { background:url('m_ende.gif') no-repeat; padding-left:10px; }
li.m_ende1 { background:url('m_ende.gif') no-repeat; margin-left:12px; padding-left:10px; }
/* ENDE UNTER MENU*/

#tab        { float:left; list-style:none; margin:0px 0px 0px 0px; padding:0px; }
#tab h1   { font:normal 11px verdana; display:inline; }
#tab li     { float:left; margin:0px 5px 0px 0px; padding:0px; }
#tab a      { background-color:#999999; display:block; padding:3px 15px; text-decoration:none; font:11px verdana; color:black; }
#tab a:hover { background-color:#666666; color:white; }
#tab #aktiv a { display:block; background-color:silver; color:black; padding-bottom:4px; text-decoration:none; font:11px verdana; }
#tab strong { font:normal 11px verdana; }

#inhalt { font:11px verdana; line-height:160%; padding:13px; float:right; width:610px; overflow:auto; height:448px; }

#boden { background-color:#4A4A4A; clear:both; height:20px;  vertical-align:middle;}

#ol_menu { list-style:none; margin:0px 0px 20px 0px; padding:0px 0px 5px 0px; border-bottom:1px solid gray; }
#ol_menu strong { font:normal 11px verdana; }
#ol_menu li { display:inline; }
#ol_menu #aktiv a{ color:#333333; }
#ol_menu a { text-decoration:underline; color:gray; padding:0px 8px 0px 0px; margin:0px 0px 0px 0px; }
#ol_menu a:hover { color:black; }

#ol_produkte { height:417px; overflow:auto; }
#ol_produkte .produkt_box { padding-left:130px; height:125px; }
#ol_produkte .balken { color:white; font-weight:bold; background-color:#666666; padding:1px 0px 1px 4px; margin:10px 0px 20px 0px; }
#ol_produkte .balken div { width:125px; float:left; }
#ol_produkte em { font:bold 11px verdana; display:inline; margin-right:0px; }

#versandhilfen #z1 { width:40px; float:left; }
#versandhilfen #z2 { width:160px; float:left; }
#versandhilfen #z3 { width:70px; float:left; text-align:center; }
#versandhilfen #z4 { width:35px; float:left; text-align:right; margin-right:15px; }
#versandhilfen #z5 { text-align:right; padding-right:10px; }
#versandhilfen .ueber { font-weight:bold; padding-bottom:10px; }
#versandhilfen .ueber #z5 { padding-right:26px; }

#agb { margin-left:32px; padding:0px; }
#agb li { margin:0px; padding:0px; list-style:decimal; }
#agb_unter li { margin:0px; padding:0px; list-style:lower-alpha; }

#toolt { font-size:13px; background-color:#FFEFD5; position:absolute; top:0px; left:0px; padding:3px; border:1px solid black; visibility:hidden; z-index:2;}

.klein { font:9px verdana; color:gray; margin:4px 0px 0px 0px; float:right; width:650px; text-align:center; }
.suchfeld { float:left; height:13px; font:10px verdana; background-color:#A9A9A9; border:1px solid gray; width:100px; margin:5px 5px 0px 5px; padding:0px; color:#333333; }
.suchbutton { font:10px verdana; width:25px; height:15px; margin-top:5px; border:1px solid gray; background-color:#A9A9A9; }
.anker { font-size:8px; color:black; text-decoration:none; margin:0px; padding:0px; }
.strich_oben { border-top:1px solid gray; padding-top:5px; }

.auswahlbox a { text-decoration:none; background:url("../bilder/kasten0.gif") no-repeat ; width:11px; height:11px; margin-right:5px; }
.auswahlbox a:hover { background:url("../bilder/kasten1.gif") no-repeat ; }

.clearl { clear:left; }
.clearr { clear:right; }
.clearb { clear:both; }

.achtung { border:3px solid black; background-color:yellow; font:bold 35px verdana; float:left; padding:1px 14px; margin-right:5px; }

.fett_rot { color:#8B0000; font-weight:bold; }

und hier HTML

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IBA Hartmann GmbH</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<META NAME="author" CONTENT="...">
<META NAME="publisher" CONTENT="...">
<META NAME="copyright" CONTENT="Inhalt, Webdesign & Programmierung © ...">
<META NAME="Content-Language" CONTENT="de">
<META NAME="keywords" CONTENT="...">
<META NAME="description" CONTENT="....">
<META NAME="audience" CONTENT="Alle">
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<meta name="revisit-after" content="7 days">
<script type="text/javascript" src="../allgemein/js/slideshow.js"></script>
<link rel="stylesheet" type="text/css" href="../allgemein/css/layout.css">
<link rel="stylesheet" type="text/css" href="../allgemein/css/slideshow.css">
<style type="text/css">#kopf { background-image:url('../allgemein/bilder/kopf_logoline_hg1.jpg'); }</style>
</head>
<body onLoad="css_wechsel();">

<table border="0">
<tr>
<td valign="middle">

<div id="mitte">

	<div id="kopf">
	</div>
    
	<div id="tab_leiste">
	 <ul id="tab">  
		 <li><a href="#">Präsentieren</a></li>
		 <li><a href="ordnen.htm">Ordnen</a></li>
		 <li><a href="verpacken.htm">Verpacken</a></li>
		 <li id="aktiv"><a href="dokumentieren.htm">Dokumentieren</a></li>
		 <li><a href="schenken.htm">Schenken</a></li>
	 </ul>
	</div>
	
	<div id="linke_spalte">
     <ul id="menu1">
	   <li><a href="../index.html" title="Home">Home </a></li>
       <li><a href="../aktuelles/news.htm" title="News, Jobs, Update">Aktuelles </a></li>
	   <li><a href="../ueber_uns/iba.htm" title="IBA, Standort, Geschichte">Über uns</a> </li>
	   <li id="aktiv"><a href="praesentieren.htm" title="Produkte">Produkte</a></li>
	 </ul>	 
		 <div id="menu_abstand">
			<ul id="unter_menu">
			<li id="aktiv" class="m_mitte"><a href="praesentieren.htm">...</a></li>
			<li class="m_mitte1"><a href="logoline_musterwerkstatt.htm">Musterwerkstatt</a></li>
			<li class="m_ende1"><a href="wir_sind_logoline.htm">Wir sind...</a></li>
			<li class="m_mitte"><a href="../iba_hartmann_leder/leder_produkte.htm">... LEDER</a></li>  
            </ul>
			<ul>
			<li class="m_ende"><a href="../iba_hartmann_officeline/papiere.htm">...</a></li>
			</ul>
		 </div>
	 <ul id="menu1">	 
	   <li><a href="../iba_designordner/designordner.htm" title="Produktidee">IBA Designordner</a></li>
	   <li><a href="../aussendienst/uebersicht.htm" title="Kontakt zu unseren ADlern">Außendienst</a></li>
	   <li><a href="../digitale_services/go4pdf.htm" title="Go4PDF, Layoutvorlagen, Originalmuster">Digitale Services</a></li>
	   <li><a href="../referenzen/referenzen_show.htm" title="Diese sprechen für sich selbst">Referenzen</a></li>
	   <li><a href="../service/konfektionieren.htm" title="Konfektionieren, Logistik, Muster">Service</a></li>
	   <li><a href="../impressum/impressum.htm" title="Impressum/AGB">Impressum/AGB</a></li>
	   <li><a href="../shop/shop.htm" title="Kaufen Sie online bei uns ein">Shop</a></li>
	   <li><a href="../kontakt/anschrift.htm" title="Anschrift, Anfahrtsskizze, Email">Kontakt</a></li>
	   <li><a href="../sitemap.htm" title="Sitemap">Sitemap</a></li>
     </ul>
     <form action="../suche.htm" method="get" name="zursuche" style="margin:0px;">
	    <div>
	     <input type="text" value="suche" name="feld" class="suchfeld" onClick="document.zursuche.feld.value = ''; document.zursuche.feld.style.backgroundColor = 'silver'; document.getElementById('suchbutton').style.backgroundColor = 'silver';">
		</div>
		<div>
		 <input type="submit" value="los" id="suchbutton" class="suchbutton">
		</div>
     </form>
  	</div>
	
		<div id="inhalt">
			<div id="beschreibungstext">
				<div><div class="achtung">!</div>
				<b>ACHTUNG! Diese Anwendung benötigt Javascript!</b> Bitte aktivieren Sie Javascript in Ihrem Browser bzw. laden 
				Sie sich eine aktuelle Version des Microsoft Internet Explorers oder einen alternativen Browser herunter. 
				
				<p>Diese Seite kann ohne Javascript nur eingeschränkt genutzt werden. Wir bitten Sie um Verständnis.<p>
				</div>
				
				<img src="praesentieren/pics_kl/pic_1.jpg" alt="">
				<div id="beschreibung_1">
					<span class="fett_rot">Überschrift 1</span>
					<p>Beschreibung zu Überschrift Nummer 1</p>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_2.jpg" alt="">
					<div id="beschreibung_2">
						<span class="fett_rot">Überschrift 2</span>
						<p>Beschreibung zu Überschrift Nummer 2</p>
					</div>
				</div>

				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_3.jpg" alt="">
					<div id="beschreibung_3">
						<span class="fett_rot">Überschrift 3</span>
						<p>Beschreibung zu Überschrift Nummer 3</p>
					</div>
				</div>

				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_4.jpg" alt="">
					<div id="beschreibung_4">
						<span class="fett_rot">Überschrift 4</span>
						<p>Beschreibung zu Überschrift Nummer 4</p>
					</div>
				</div>

				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_5.jpg" alt="">
					<div id="beschreibung_5">
						<span class="fett_rot">Überschrift 5</span>
						<p>Beschreibung zu Überschrift Nummer 5</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_6.jpg" alt="">
					<div id="beschreibung_6">
						<span class="fett_rot">Überschrift 6</span>
						<p>Beschreibung zu Überschrift Nummer 6</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_7.jpg" alt="">
					<div id="beschreibung_7">
						<span class="fett_rot">Überschrift 7</span>
						<p>Beschreibung zu Überschrift Nummer 7</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_8.jpg" alt="">
					<div id="beschreibung_8">
						<span class="fett_rot">Überschrift 8</span>
						<p>Beschreibung zu Überschrift Nummer 8</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_9.jpg" alt="">
					<div id="beschreibung_9">
						<span class="fett_rot">Überschrift 9</span>
						<p>Beschreibung zu Überschrift Nummer 9</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_10.jpg" alt="">
					<div id="beschreibung_10">
						<span class="fett_rot">Überschrift 10</span>
						<p>Beschreibung zu Überschrift Nummer 10</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_11.jpg" alt="">
					<div id="beschreibung_11">
						<span class="fett_rot">Überschrift 11</span>
						<p>Beschreibung zu Überschrift Nummer 11</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_12.jpg" alt="">
					<div id="beschreibung_12">
						<span class="fett_rot">Überschrift 12</span>
						<p>Beschreibung zu Überschrift Nummer 12</p>
					</div>
				</div>

				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_13.jpg" alt="">
					<div id="beschreibung_13">
						<span class="fett_rot">Überschrift 13</span>
						<p>Beschreibung zu Überschrift Nummer 13</p>
					</div>
				</div>

				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_14.jpg" alt="">
					<div id="beschreibung_14">
						<span class="fett_rot">Überschrift 14</span>
						<p>Beschreibung zu Überschrift Nummer 14</p>
					</div>
				</div>

				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_15.jpg" alt="">
					<div id="beschreibung_15">
						<span class="fett_rot">Überschrift 15</span>
						<p>Beschreibung zu Überschrift Nummer 15</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_16.jpg" alt="">
					<div id="beschreibung_16">
						<span class="fett_rot">Überschrift 16</span>
						<p>Beschreibung zu Überschrift Nummer 16</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_17.jpg" alt="">
					<div id="beschreibung_17">
						<span class="fett_rot">Überschrift 17</span>
						<p>Beschreibung zu Überschrift Nummer 17</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_18.jpg" alt="">
					<div id="beschreibung_18">
						<span class="fett_rot">Überschrift 18</span>
						<p>Beschreibung zu Überschrift Nummer 18</p>
					</div>
				</div>
				
				<div style="clear:left">
					<img src="praesentieren/pics_kl/pic_19.jpg" alt="">
					<div id="beschreibung_19">
						<span class="fett_rot">Überschrift 19</span>
						<p>Beschreibung zu Überschrift Nummer 19</p>
					</div>
				</div>
			
			</div>					
			<div id="albuminhalt">
				<div id="boxwechsler"><img id="wechsler" src="dokumentieren/pics_gr/pic_1.jpg" alt=""></div>
				<div class="beschreibung" id="beschreibung">wird geladen...</div>
			
				<span class="slide">s l i d e s h o w: </span>
				<span id="playstop" class="buttonPlay"><a href="#" onClick="start()" title="Play/Pause"><img src="../allgemein/bilder/blind.gif"width="15" height="10" alt=""></a></span><span class="buttonStop"><a href="#" onClick="stop()" title="Stop"><img src="../allgemein/bilder/blind.gif" width="15" height="10" alt=""></a></span>

				<div id="fotoleiste"> 
					<!-- Verlinkung Bilder für die Fotoleiste  -->
					<span class="mini" id="bildleiste"></span>
				</div>
			</div>
			
		</div>
	
	<div id="boden">
	<span style="padding-left:5px; float:left; "><a href="#"><img src="../allgemein/bilder/deu.jpg" alt=""></a> <a href="#"><img src="../allgemein/bilder/eng.jpg" alt=""></a></span>
	<span class="klein">© 2006 by ...</span>
	</div>
	
</div>
</td>
</tr>
</table>
</body>
</html>
 
Zuletzt bearbeitet:
Hi,

ich kann da keine Probleme feststellen, wenn ich den ID-Namen ändere (#aktiv -> #test), oder die ID in eine Klasse umwandle (#aktiv -> .aktiv).

Stellt sich mir die Frage, ob du die Änderungen sowohl im Stylesheet, als auch im HTML-Quelltext vorgenommen hast?

Zudem solltest du beachten, dass eine ID in einem Dokument eindeutig sein muss, d.h. sie darf darin nur einmal vergeben werden.
 
Servus,

ja ich habe die Änderung im Stylesheet und im HTML vorgenommen. Bei ie6 klappt es dann auch aber ie7 und FireFox haut es nicht hin!

Nein ich habe nicht bedacht das die ID nur einmal vorkommen darf darum will ich das ja jetzt ändern wodurch ich erst auf das Problem gestoßen bin...
Man sagt ja normal erst denken dann lenken :rolleyes: habs halt mal wieder anders rum gemacht und nun versteh ich nicht warum das nicht so funktioniert wie ich das will! Wenn ich das in #test oder auch .test oder sonst wie umbenenne und das selbe dann auch in der HTML Datei dann passiert gar nichts. Die zuvor definierten Eigenschaften werden einfach weitergegeben. :confused:
 
ok, ich dreh jetzt dann voll ab! Ich habe vorhin bestimmt eine halbe Stunde rumprobiert und jetzt gehts auch... :suspekt:

Keine Ahnung was ich da wieder gemacht habe. Aber danke trotzdem :)
 
Folgende Angaben habe ich in allen mir zur Verfügung stehenden Browsern erfolgreich getestet:

Code: 
#menu1 #aktiv_menu1 a { background-color:silver; color:red; }

<li id="aktiv_menu1"><a href="praesentieren.htm" title="Produkte">Produkte</a></li>

Code: 
#menu_abstand #aktiv_menu_abstand a { color:yellow; }

<li id="aktiv_menu_abstand" class="m_mitte"><a href="praesentieren.htm">...</a></li>
Gleiches gilt, wenn ich die IDs in Klassen umwandle.
 
sag ja, ich weiß nicht was ich gemacht habe aber es war quatsch, bei mir gehts jetzt auch wie du gesagt hast, echt ich habe keinen Schimmer was ich falsch gemacht hatte, auf jeden Fall war es Mist!

Danke dir aber das du dir trotzdem die Mühe gemacht hast :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück