| Autor |
Nachricht |
niederberger
Threadersteller
Dabei seit: 26.07.2005
Ort: Buochs NW - Schweiz
Alter: 46
Geschlecht: 
|
Verfasst Fr 05.10.2007 16:37
Titel Überschreiben der externen CSS <LI> durch eine Class |
  |
|
Hallo Zusammen
Ich habe folgenden Code, mir ist aufgeallen, dass der InternetExplorer 7.0 keine zusätzliche Formatierung (class="li-li-li-active") zulässt nachdem ich diese in einer externen CSS Datei definiert habe. In Safari hingegen funktioniert dies einwandfrei. Primär geht es darum, dass ein anderes Aufzählungszeichen geladen wird wenn der Navigationspunkt aktiv ist. Ist jemand ein Hack oder ne Lösung bekannt?
| Code: |
<div id="Navigation">
<ul>
<li><a href="#">Nav1</a>
<ul>
<li><a href="#">Nav2-1</a>
<ul>
<li><a href="#">Nav3-1</a></li>
<li class="li-li-li-active">Nav3-2</a></li>
<li><a href="#">Nav3-3</a></li>
</ul>
</li>
<li><a href="#">Nav2-2</a></li>
</ul>
</li>
<li><a href="#">Nav2</a></li>
</ul>
</div>
|
Freue mich auf Eure Antwort, Thomas.
|
|
| |
   |
 |
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Fr 05.10.2007 18:21
Titel
|
|
|
|
das CSS dazu wär sicher nicht uninteressant...
|
|
| |
|
|
|
Anzeige
|
|
|
niederberger
Threadersteller
Dabei seit: 26.07.2005
Ort: Buochs NW - Schweiz
Alter: 46
Geschlecht:
|
Verfasst Fr 05.10.2007 19:17
Titel
|
|
|
| Code: |
div#boxNavigation {
padding:0px;
margin:0px;
}
div#boxNavigation ul {
margin-top:10px;
margin-left:0px;
padding-left:25px;
}
div#boxNavigation li, div#boxNavigation li a, div#boxNavigation li a:link, div#boxNavigation li a:visited {
font: normal 11px Tahoma, Verdana, Arial, Helvetica, Sans;
line-height:15px;
color:#000000;
text-decoration:none;
list-style-position:outside;
list-style-image:url(images/nav-0684BB.gif);
margin-bottom:2px;
}
div#boxNavigation li a:hover {
color:#0084BB;
text-decoration: none;
}
div#boxNavigation .li-active {
color:#0684BB;
font-weight:bold;
}
div#boxNavigation ul ul {
margin-top:3px;
margin-left:0px;
padding-left:15px;
}
div#boxNavigation li li, div#boxNavigation li li a, div#boxNavigation li li a:link, div#boxNavigation li li a:visited, div#boxNavigation li li a:hover {
list-style-image:url(images/nav-73BFDD.gif);
}
div#boxNavigation .li-li-active {
color:#0684BB;
font-weight:bold;
list-style-image:url(images/nav-0684BB.gif);
}
div#boxNavigation ul ul ul {
margin-top:3px;
margin-left:0px;
padding-left:15px;
}
div#boxNavigation li li li, div#boxNavigation li li li a, div#boxNavigation li li li a:link, div#boxNavigation li li li a:visited {
list-style-image:url(images/nav-9B9D9E.gif);
}
div#boxNavigation li li li a:hover {
list-style-image:url(images/nav-0684BB.gif);
}
div#boxNavigation .li-li-li-active {
color:#0684BB;
font-weight:bold;
list-style-image:url(images/nav-0684BB.gif);
}
|
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 05.10.2007 19:17
Titel
|
|
|
Über die Li zu gehen ist ein wenig anstrengen,
versuchs mal so:
| Zitat: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bunte liste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
UL A {
background:lightgrey;
}
UL A.aktiv {
background:green;
}
UL UL A.aktiv {
background:red;
}
UL UL UL A.aktiv {
background:pink;
}
-->
</style>
</head>
<body>
<ul>
<li><a href="#">level 1</a></li>
<li><a href="#" class="aktiv">level 1 aktiv</a></li>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#" class="aktiv">level 2 aktiv</a>
<ul>
<li><a href="#">level 3</a></li>
<li><a href="#" class="aktiv">level 3 aktiv</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
|
|
|
| |
|
|
niederberger
Threadersteller
Dabei seit: 26.07.2005
Ort: Buochs NW - Schweiz
Alter: 46
Geschlecht:
|
Verfasst So 07.10.2007 13:50
Titel
|
|
|
|
Merci, aber ich denke nicht, dass dies die Lösung ist da ich möchte, dass das Aufzählungszeichen umgefärbt wird beim hover. Es geht mir mehr darum einen Workaround oder Hack für den IE zu haben - denn der Safari frisst ja meinen Code...?!
|
|
| |
|
|
niederberger
Threadersteller
Dabei seit: 26.07.2005
Ort: Buochs NW - Schweiz
Alter: 46
Geschlecht:
|
Verfasst So 07.10.2007 21:27
Titel
|
|
|
Habe die Navigation nun mit einem anderen Ansatz gebaut:
| Code: |
div#boxMAIN160 ul {
margin:0px;
padding:0px;
list-style-type:none;
}
#boxMAIN160 li {
list-style-position:outside;
}
#boxMAIN160 a, #boxMAIN160 a:link, #boxMAIN160 a:visited {
font:normal 11px Tahoma, Verdana, Arial, Helvetica, Sans;
line-height:18px;
color:#000000;
text-decoration:none;
background:url(images/nav-2.gif) left top no-repeat;
padding-left:15px;
}
#boxMAIN160 a:hover {
color:#00398B;
font-weight:bold;
background:url(images/nav-1.gif) left top no-repeat;
}
#boxMAIN160active a:link, #boxMAIN160active a:visited, #boxMAIN160active a:hover {
color:#00398B;
font-weight:bold;
background:url(images/nav-1.gif) left top no-repeat;
}
|
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Überschreiben Fire-FTP
class
.img class --> css
InDesign verpackter Ordner überschreiben?
id oder class?
ID oder CLASS
|
|
Willkommen auf dem Portal für Mediengestalter
