Klassen in verschachtelten listen
Susanne Hugo
- css
0 Rafael0 Arbeitsloser
Liebe Forumsbesucher. Ich programmiere gerade die Site www.dorettehugo.de.
Da ich mit der Navigation noch nicht zufrieden war, habe ich ausgehend von einem Beispiel eine neue Navigation ausprobiert. Dazu habe ich die Liste verschachtelt und den Listenpunkten der zweiten Klasse ein eigenes class attribut zugewiesen.
Dies funktioniert leider nur bei drei der insgesamt sechs mit class definierten Punkte.
Kann mir da jemand weiterhelfen? Schon mal vielen Dank.
Susanne Hugo
Der Quellcode ist folgendermassen:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Unbenannte Seite</title>
<style type="text/css" media="screen"><!--body /* formatiert den gesamten Hintergrnd der Seite */
{ color: black; font-size: 100.01%; font-family: Verdana, Arial, Helvetica, sans-serif; background: #ff8c00; margin: 0; padding: 1em }
#navigation {
color: inherit;
text-decoration: none;
background: transparent;
visibility: visible;
position: absolute;
top: 2px;
border: solid 1px #ff4500
}
#navigation LI {
color: inherit;
font-size: 90%;
font-weight: bold;
text-decoration: none;
background: transparent none;
list-style: none;
margin: 0;
padding: 0;
width: 208px }
#navigation UL {
color: inherit;
background: transparent none;
padding: 0;
margin: 0;
}
#navigation A {
color: inherit;
text-decoration: none;
background-color: transparent;
display: block;
margin: 1px 0 0; padding: 3px 4px;
width: 198px;
border: solid 2px #ff4500;
-moz-border-radius: 4px;
border-radius: 4px
}
#navigation A:link, {
color: #ff0;
background: #f60;
padding: 3px 4px;
border-style: solid;
border-width: 2px;
border-color: #ff8c00 #ff4500 #ff4500 #ff8c00
}
#navigation A:visited {
color: #ff9;
background: #f60;
padding: 3px 4px;
border-style: solid;
border-width: 2px;
border-color: #ff8c00 #ff4500 #ff4500 #ff8c00
}
#navigation A:hover, #navigation A:focus {
color: #ff0;
background: #f00 none; padding: 4px 3px 2px 5px;
border-style: inset;
border-width: 2px;
border-color: #ff4500 #ff8c00 #ff8c00 #ff4500
}
#navigation A.ca{
color: inherit;
line-height: normal;
background: #f60;
display: block;
margin: -5px 0 0;
padding: 3px 4px 3px 20px;
border-top: medium none
}--></style>
</head>
<body>
<div id="navigation">
<ul>
<li><a title="Willkommen bei dorettehugo.de" href="seite1.html">Willkommen</a>
</ul>
<ul>
<li><a title="Meine Arbeit als Dialogregisseurin." href="#Regie">REGIE</a>
<li><a class="ca" title="Dialogregie 1997 bis 2007 in Kinofilmen" href="dialogregiekino.html">Kino</a>
<li><a class="ca" title="Dialogregie 1997 bis 2006 für TV, auf Video und DVD." href="dialogregietvdvdvideo.html">TV-DVD-Video</a>
</ul>
<ul>
<li><a title="Meine Arbeit als Synchron-Sprecherin" href="#Stimme">STIMME</a>
<li><a class="ca" title="Dorette hören im MP3-Format" href="hoerproben.html">Stimmproben</a>
<li><a class="ca" title="Meine Stimme in Kinofilmen" href="sprechrollenfilme.html">im Kino</a>
<li><a class="ca" title="Meine Stimme in Fernsehserien" href="sprechrollenserien.html">in Serien</a>
<li><a class="ca" title="Meine Stimme in Hörspielen" href="hoerspiele.html">in Hörspielen</a>
</ul>
<ul>
<li><a title="über Dorette, von Dorette" href="dorette.html">Privates</a>
<li><a title="nützliche Verweise" href="Linksammlung.html">Links & Credits</a>
<li><a title="das Gästebuch" href="#gästebuch">Gästebuch</a>
<li><a title="Kontaktinformationen und Rechtliches" href="impressum.html">Impressum</a>
</ul>
</div>
</body>
</html>
Nur als kleiner Trost. Der Grund warum dir noch niemand geantwortet hat ist der Folgende:
Komplette Webseitenquelltexte zu posten macht die Fehlerbehebung unglaublich Zeitaufwändig. Die meisten hier Fragen beantwortenden lösen zwar gerne Probleme für Fragende, durchwälzen aber nicht kilometerlangen Code.
Vielleicht kannst du deine Frage nocheinmal stellen und die betreffenden Stellen selbst heraussuchen.
Nur als kleiner Trost. Der Grund warum dir noch niemand geantwortet hat ist der Folgende:
Komplette Webseitenquelltexte zu posten macht die Fehlerbehebung unglaublich Zeitaufwändig. Die meisten hier Fragen beantwortenden lösen zwar gerne Probleme für Fragende, durchwälzen aber nicht kilometerlangen Code.
Vielleicht kannst du deine Frage nocheinmal stellen und die betreffenden Stellen selbst heraussuchen.
Hallo Rafael,
danke für deien Antwort, dann frage ich nochmal mit kürzerem code :)
Gruß Susanne
Hallo,
Dies funktioniert leider nur bei drei der insgesamt sechs mit class definierten Punkte.
Vermutlich liegts am Quelltext. Den zu durchforsten war ich jetzt zu faul.
Wohl nicht nötig, nur meine Meinung: <li>s besser abschließen, und im css nur kleingeschriebene Selektoren.
Du must für Listen in Listen keine Extraklassen definieren.
ul {} //aeusserste Liste
ul ul {} //innere Liste
ul ul ul {} //innere der inneren Liste
etc...
Das geht natürlich mit allen Elementen, nicht nur <ul>s
Gruß, der Arbeitslose
Hallo,
Dies funktioniert leider nur bei drei der insgesamt sechs mit class definierten Punkte.
Vermutlich liegts am Quelltext. Den zu durchforsten war ich jetzt zu faul.
Wohl nicht nötig, nur meine Meinung: <li>s besser abschließen, und im css nur kleingeschriebene Selektoren.
Du must für Listen in Listen keine Extraklassen definieren.
ul {} //aeusserste Liste
ul ul {} //innere Liste
ul ul ul {} //innere der inneren Liste
> etc...
>
> Das geht natürlich mit allen Elementen, nicht nur <ul>s
>
> Gruß, der Arbeitslose
Hallo Arbeitsloser.
Vielen Dank für deine Antwort. Das habe ich schon probiert, aber wenn ich den Klassenstil in einen Elementstil umwandele, funktioniert die Formatierung nicht mehr.
Gruß Susanne
Hallo,
Ich hab gerade erst dieses in deinem ersten Posting entdeckt:
meta name="generator" content="Adobe GoLive"
Da macht es nicht sehr viel Spaß zu helfen, weil man weiß, das es im nichts verpufft.
Das es bei Dir links rein, rechts raus zu gehen scheint, sieht man ferner daran, das Du Rafaels Einwurf nicht dahingehend interpretierst, das auch das Rezitieren des gesamten Vorpostings (inclusive Unterschrift des Vorposters) eine Verschwendung von Bytes darstellt... (Ganz anders die Fußnote, hier darf man sich immer und immer wieder wiederholen, angemeldete Nutzer können diese ausblenden. )
Also viel Erfolg noch, hilf Dir selbst :-)
Das habe ich schon probiert, aber wenn ich den Klassenstil in einen Elementstil umwandele, funktioniert die Formatierung nicht mehr.
Das kann nicht sein, Hilfe ist aber nur erfolgreich, wenn Du anfängst, einen Texteditor zu verwenden. (Hätte jetzt einen Link gepostet zu Phase 5, aber der Käufer diese Editors hat im Gegensatz zum Autor seltsame Ansichten von Usability)
Gruß, der Arbeitslose