[css] selektoren

Internet
1

Hi Ihr,

ich habe ein CSS-Problem:
Ziel: Navigationsbalken links mit 2ter Ebene

also an Selfhtml angelehnt und mit Nachfahren-selektoren gemacht:

ul#nav
ul#nav li
ul#nav li ul
ul#nav li ul li

Das geht auch alles richtig in IE6, aber Firefox ordnet den Eintraegen zweiter Ebene keine Style-Eigenschaften zu. Z.B. erscheint trotz „border:1px solid black;“ bei ul#nav li ul eben kein Rahmen um die untergeordnete Liste. Was mach ich falsch? Oder ist es FF?

Verzweifelt, Dennis

Es folgt das Original-Stylesheet:

/*Basic Stylesheet GibbonEXP*/
body, a {
font: normal 100.01% Helvetica, sans-serif;
color: #000000;
margin:0;
padding:0;
border: none;
background-color: #fff;
}

p {
padding:0px;
margin:0px;
}
div#hd{
/*Header-Section*/
margin-bottom:10px;
height: 110px;
width: 100%;
display:block;
}

/* picture-links without border*/
a img {
border-style:none;
}

/*Navigation-Bar*/
/*==============*/
div#n-list{
padding: 0px;
margin: 0px;
width: 9em;
float:left;
clear:both;
}

ul#nav-vert-list{
/*List-Container 1st Level*/
margin-top:0px;
margin-left:10px;
margin-right:10px;
text-decoration: none;
padding: 0px;
}
ul#nav-vert-list li{
/*List-Element 1st Level*/
padding: 0px;
list-style: none;
text-decoration: none;
font-size: small;
margin-top:10px;
}
ul#nav-vert-list a {
/*Button 1st Level*/
display: block;
padding: 4px;
height: 1.2em;
background: #008000;
border-right: solid #004000 2px;
border-bottom: solid #00FF00 2px;
}

ul#nav-vert-list li a:link {
/*Behaviour of Link-Button 1st-Level*/
color: #FFFF80;
text-decoration:none;
}
ul#nav-vert-list li a:visited {
/*Behaviour of Link-Button 1st-Level*/
color: #FFFF80;
text-decoration:none;
}
ul#nav-vert-list li a:hover {
/*Behaviour of Link-Button 1st-Level*/
text-decoration:none;
font-weight:bold;
}
ul#nav-vert-list li a:active {
/*Behaviour of Link-Button 1st-Level*/
text-decoration:underline;
}
ul#nav-vert-list li a:focus {
/*Behaviour of Link-Button 1st-Level*/
text-decoration:none;
font-weight:bold;
}

/*second level Navigation*/
/*List-Container 2nd Level*/
ul#nav-vert-list li ul{
margin-left:10px;
margin-top:0px;
margin-right:0;
clear:both;
list-style: none;
text-decoration: none;
font-size: x-small;
}

ul#nav-vert-list li ul li{
/*Button for vertical Navigation*/

text-decoration: none;
margin:0 0em 0 0 ;
}

ul#nav-vert-list li ul li a {

border-right: solid #004000 2px;
border-top: solid #101010 1px;
border-left: solid #101010 1px;
border-right: solid #101010 1px;
border-bottom: none;
display:block;
background: #00aa80;
padding: 0.1em ;
padding-left: 1em;
}
ul#nav-vert-list li ul li a:link {
color: #000000;
text-decoration:none
}
ul#nav-vert-list li ul li a:visited {
color: #000000;
text-decoration:none;
}
ul#nav-vert-list li ul li a:hover {
text-decoration:none;
font-weight:bold;
background-color: white;
}
ul#nav-vert-list li ul li a:active {
text-decoration:underline;
}
ul#nav-vert-list li ul li a:focus {
text-decoration:none;
font-weight:bold;
}

/*=============================*/
/* Main Content*/
div.cont-txt {
/*Freeflow-text indented*/
clear: right;
margin-top:20px;
margin-left:11.8em;
font: Arial, Helvetica, Verdana, sans-serif;
font-size: small;
}
div.cont-txt p:first-letter {
/*Big Initials in content-texts*/
font-size:200%;
color:red;
}
div.cont-txt p{
text-align:justify;
}

div.cont-txt h1 {
color:#777;
font-size:200%;
padding:0px;
margin:0px;

}
div.cont-txt img {
background-color: #ddd;
margin: 8px;
padding: 10px;

}

p.cnt {
/*centered*/
text-align:center;
}

img.lng {
/*language buttons*/
right: 0px;
margin-right:10px;
padding-top:0px;
float:right;
}

2

Hast du eine kleine Beispielseite, die das Ding verwendet?

3

Hast du eine kleine Beispielseite, die das Ding verwendet?

schau dir mal folgendes an:
http://www.movetivation.net/gibbonexp/en/project.htm

ich moechte, dass die Unterpunkte von „The Project“ anders aussehen als der Knopf fuer „The Project“.

Dennis

4

anstatt

ul#nav-vert-list li ul{

ul#nav-ver-list ul

hmm, scheint ein logischer fehler zu sein, weil du ja tatsächlich „ul li ul li“ hast

„ul xyz“ bedeutet doch nur, das alle elemente xyz die auf _irgendeiner_ ebene unterhalb von ul vorkommen so formatiert werden ?!
dann kannst du das oben genannte eigentlich schreiben

mfg TLF

5

Hallo,

hmm, scheint ein logischer fehler zu sein, weil du ja
tatsächlich „ul li ul li“ hast

genau das hat er eben nicht (was aber besser wäre).
Die zweite Liste ist nicht in einem Listenpunkt der ersten Liste eingeschlossen sondern folgt direkt auf ul.
Außerdem sind noch ein paar ander kleine Fehler drin
Bitte validiren - das ist immer bei mir der erste Schritt wenn irgend etwas nicht klappt.

Grüße Dirk

6

Erst mal Valide…

Hast du eine kleine Beispielseite, die das Ding verwendet?

schau dir mal folgendes an:
http://www.movetivation.net/gibbonexp/en/project.htm

Das sagt der Validator:
Ergebnisse des W3C CSS-Validator mit Objekt: http://www.movetivation.net/gibbonexp/en/project.htm
Damit Ihr CSS-Stylesheet wie gew?nscht funktioniert, ist ein korrekter Parsebaum erforderlich. Das bedeutet, da? Sie g?ltiges HTML verwenden sollten.

Fehler
URI : http://www.movetivation.net/gibbonexp/css/standard.css
Zeile: 162 Kontext : div.cont-txt
Ung?ltige Nummer : font Arial ist kein font-size-Wert : Arial,Helvetica,Verdana,sans-serif

Zeile: 193 Kontext : a.inline-nav
Ung?ltige Nummer : color darkred ist kein color-Wert : darkred

Viel Spass und Erfolg
Stefan

7

Und nochmal nicht valide…

Hast du eine kleine Beispielseite, die das Ding verwendet?

schau dir mal folgendes an:
http://www.movetivation.net/gibbonexp/en/project.htm

Schau dir das mal an:
(diesmal das HTML)

This page is not Valid HTML 4.01 Strict!
Below are the results of attempting to parse this document with an SGML parser.

Line 20, column 13: document type does not allow element „A“ here; missing one of „P“, „H1“, „H2“, „H3“, „H4“, „H5“, „H6“, „PRE“, „DIV“, „ADDRESS“ start-tag

The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as " " or " ") inside an inline element (such as „“, „“, or „“).

:email:

Line 46, column 40: there is no attribute „SUMMARY“

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the „Strict“ document type with a document that uses frames (e.g. you must use the „Transitional“ document type to get the „target“ attribute), or by using vendor proprietary extensions such as „marginheight“ (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

:email:

Line 64, column 22: document type does not allow element „H1“ here; missing one of „OBJECT“, „MAP“, „BUTTON“ start-tag

Practical Forest Conservation

:email:

Line 71, column 504: non SGML character number 145

…question the classical commitment to ¼/strong>?charity’ organizations that are falli

:email:

Line 71, column 512: non SGML character number 146

… the classical commitment to ‘charity’ organizations that are falling short

:email:

Line 73, column 35: document type does not allow element „A“ here

Top

:email:

Line 74, column 5: document type does not allow element „H1“ here; missing one of „OBJECT“, „MAP“, „BUTTON“ start-tag

Meeting the Gibbons

:email:

Line 76, column 3: document type does not allow element „P“ here; missing one of „OBJECT“, „MAP“, „BUTTON“ start-tag

Our team showed evidence in 1997 that a population of hylobates concolor lu

:email:

Line 77, column 23: document type does not allow element „A“ here

:email:

Line 78, column 35: document type does not allow element „A“ here

Top

:email:

Line 79, column 5: document type does not allow element „H1“ here; missing one of „OBJECT“, „MAP“, „BUTTON“ start-tag

We will not participate in „Ethnotourism“

:email:

Line 81, column 3: document type does not allow element „P“ here; missing one of „OBJECT“, „MAP“, „BUTTON“ start-tag

We consider that promoting tourism in Laos in a way that emphasizes ethnic o

:email:

Line 81, column 190: non SGML character number 145

…cated visitor a legitimate desire to ¼/strong>?see those strange tribes’. Consequent

:email:

Line 81, column 215: non SGML character number 146

…e desire to ‘see those strange tribes’. Consequently, his/her camera is nat

:email:

Line 82, column 16: document type does not allow element „A“ here

:email:

Line 83, column 35: document type does not allow element „A“ here

Top

:email:

Line 84, column 5: document type does not allow element „H1“ here; missing one of „OBJECT“, „MAP“, „BUTTON“ start-tag

ANIMO’s Mission Statement

:email:

Line 86, column 3: document type does not allow element „P“ here; missing one of „OBJECT“, „MAP“, „BUTTON“ start-tag

Animo is a conservation-based ecological tourism company with a mandate from

:email:

Line 86, column 844: non SGML character number 150

…nd cultural pollution. This project ¼/strong>? The Gibbon Experience – has been ent

:email:

Line 86, column 868: non SGML character number 150

…This project – The Gibbon Experience – has been enthusiastically welcomed b

:email:

Line 87, column 34: document type does not allow element „A“ here

Top

:email:

Line 89, column 5: end tag for „A“ omitted, but its declaration does not permit this

:email:

Line 87, column 97: start tag was here

…rc="…/img/up.gif" alt=„Up“ />Top

Line 89, column 5: end tag for „A“ omitted, but its declaration does not permit this

:email:

Line 87, column 1: start tag was here

:email: Line 83, column 2: start tag was here:email: Line 82, column 1: start tag was here

Line 89, column 5: end tag for „A“ omitted, but its declaration does not permit this

:email:

Line 78, column 2: start tag was here

:email: Line 77, column 1: start tag was here

Line 89, column 5: end tag for „A“ omitted, but its declaration does not permit this

:email:

Line 73, column 2: start tag was here

:email: Line 72, column 1: start tag was here

8

Kartoffeln auf der Augenleitung
Vielen Dank Dirk,

das mit dem - -tag habe ich einfach nicht gesehen. (Ich schreib die Seite in Internet-Cafes mit Wordpad, da habe ich leider kein Syntax-Highlighting).

Stefan, Du hast die Seite im nicht validierten Zustand erwischt, ich muss naemlich immer auf dem Server zwischenspeichern. Danke fuer Deine Wuensche und dass Du mir den Vali-Bericht mitgeschickt hast. Das spart mir Zeit.

Gruss, Dennis

9

Hallo Dennis,

(Ich schreib die Seite in Internet-Cafes mit Wordpad, da habe
ich leider kein Syntax-Highlighting).

wenn ich mich recht entsinne, kannst du den Editor Proton auch von CD oder USB-Stick benutzen http://www.meybohm.de/ ein Versuch ist es wert.

Gruss, Dirk