Fehler bei Validation durch W3C

tomtom · 19.01.2010

hallo,
ich habe gerade durch die web-developer-toolbar aus spass meine webseite kontrollieren lassen. unter den menüpunkt "extras" --> "lokales html validieren". es wurden mir fünf fehler angezeigt. es handelt sich um die trennstriche zwischen den links in der #navigation_oben, die im #header ihren platz findet. stehe total auf dem schlauch, ich weiss nicht, wie ich sonst diese trennung der links (trennstriche) im gleichen abstand, egal wie lang die links sind, hinbekomme, dass die fehler nicht mehr auftreten. anfängerfrage. danke für eure hilfe, der code kommt sofort im anschluss.

HTML:

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div id="content">
    <div id="headerContainer">
    <div id="navigation_oben">
        <div class="menu_oben">
      	<ul>
        	<li><a href="#">HOME</a></li>|
        	<li><a href="#">STUDIO</a></li>|
        	<li><a href="#">LEISTUNGEN</a></li>|
        	<li><a href="#">GÄSTEBUCH</a></li>|
        	<li><a href="#">KONTAKT</a></li>|
                <li><a href="#">ZURÜCK</a></li>
      	</ul>
    </div>
    </div>
    <div id="logo">
    </div>
    </div>
    </div>
    <div id="footerContainer">
    <p id="address">K ? E ? 3 ? FON 0
    </p>
      <ul id="navigation_unten">
      	<li><a href="#">ANFAHRT</a></li>
      	<li><a href="#">IMPRESSUM</a></li>
      </ul>
    </div>
</body>
</html>

sokie · 19.01.2010

AW: Fehler bei Validation durch W3C

HTML:

        <div class="menu_oben">
          <ul>
            <li><a href="#">HOME</a>|</li>
            <li><a href="#">STUDIO</a>|</li>
            <li><a href="#">LEISTUNGEN</a>|</li>
            <li><a href="#">GÄSTEBUCH</a>|</li>
            <li><a href="#">KONTAKT</a>|</li>
             <li><a href="#">ZURÜCK</a></li>
          </ul>
    </div>

so sollte es gehen, oder?

oder so:

HTML:

    <div class="menu_oben">
          <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">STUDIO</a></li>
            <li><a href="#">LEISTUNGEN</a></li>
            <li><a href="#">GÄSTEBUCH</a></li>
            <li><a href="#">KONTAKT</a></li>
             <li class="last"><a href="#">ZURÜCK</a></li>
          </ul>
    </div>

Code:

<style>
#menu oben li{
border-right: 1px solid black;
...
}
#menu oben li.last{
border: 0 none;
}
</style>

Tease · 19.01.2010

AW: Fehler bei Validation durch W3C

Du kannst den Trennstrich in die Liste (<li></li>) packen und dann der Liste ein margin-right von der gewünschten Pixelanzahl, sagen wir mal 10px, angeben.

Edit: ich war zu langsam. Sokie hat's ja auch noch beispielhaft dargestellt. Tja, so sind sie halt, unsere Mods! ;-)

tomtom · 19.01.2010

AW: Fehler bei Validation durch W3C

@sokie: vielen dank. hat leider nicht geklappt. ich glaube mein fehler liegt in der css-datei.
html-code habe ich lt. deiner vorgabe angepasst, das leuchtet mir auch ein. mir stellt sich nun die frage, wie ich das menu_oben schreiben soll. mit raute(#) oder punkt(.) als vorzeichen. was ist besser?

bezieht sich punkt (.) auf klasse und raute (#) auf id?
poste einfach mal die css.

Code:

#headerContainer {
	height:130px;
	width:900px;
	color:#009900;
	padding:5px 0px 5px 0px;
}

#navigation_oben {
	height:130px;
	width:650px;
	background-image:;
	background:#333333;
	float:left;
	margin-left:5px;
}

#logo {
	height:130px;
	width:235px;
	background-color:#666666;
	float:right;
	margin-right:5px;
}

.menu_oben {
	padding-top:25px;
	padding-left:25px;
}

.menu_oben ul, .menu_oben li {
	list-style-type: none;
	padding:10px;
	display:inline;
	font-size:13px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:#ff6633;
}

.menu_oben a:link, .menu_oben a:visited, .menu_oben a:active {
	background-color:transparent;
	text-decoration:none;
	display:inline;
	color:#ffffff;
	font-size:11px;
}

.menu_oben a:hover {
	color:#ff6633;
	text-decoration:none;
}

sokie · 19.01.2010

AW: Fehler bei Validation durch W3C

tomtom schrieb:
mit raute(#) oder punkt(.) als vorzeichen. was ist besser?

tomtom schrieb:
bezieht sich punkt (.) auf klasse und raute (#) auf id?

Nachdem ich da jetzt nochmal drauf schaue, muss ich feststellen, dass ich dich da ein bisschen in die Wüste geschickt habe. Du hast natürlich recht. Das Zeichen für die Klasse ist natürlich der Punkt, und somit mein CSS an der Stelle falsch, und kann so nicht funktionieren. Nach deinem html wäre es so

Code:

<style>
.menu oben li{
border-right: 1px solid black;
...
}
.menu oben li.last{
border: 0 none;
}
</style>

richtig.

Allerdings fände ich die Bezeichnung für das Bereich Menü-oben (das es sicherlich nur einmal in der Seite geben wird) per ID eindeutiger.
die Klasse wendet man eigentlich nur für Elemente an, die mehrmals (oder möglicherweise mehrmals) in einer Seite vorkommen (können).

tomtom · 19.01.2010

AW: Fehler bei Validation durch W3C

sokie schrieb:
Allerdings fände ich die Bezeichnung für das Bereih Menü-oben (das es sicherlich nur einmal in der Seite geben wird) per id eindeutiger.

kein thema, kann damit leben, will ja nur lernen. also per raute (#), wenn ich dich richtig verstanden habe. dann stelle ich natürlich um. habe soeben nochmal meine css gepostet. schaust du bitte unter eintrag #4.

Tease schrieb:
Du kannst den Trennstrich in die Liste (<li></li>) packen und dann der Liste ein margin-right von der gewünschten Pixelanzahl, sagen wir mal 10px, angeben.

danke für den post, funktioniert noch nicht, bin am basteln. habe gerade probleme mit meiner css, siehe eintrag #4. weiss nicht wo vorn und hinten ist. bin aber am lernen um struktur zu bekommen.

Bitte 'Edit' benutzen, um Doppelposts zu vermeiden.

tomtom · 21.01.2010

AW: Fehler bei Validation durch W3C

Tease schrieb:
Du kannst den Trennstrich in die Liste (<li></li>) packen und dann der Liste ein margin-right von der gewünschten Pixelanzahl, sagen wir mal 10px, angeben.

den trennstrich habe ich in die liste gepackt, nur das mit dem margin-right von 10px wollte nicht klappen. habe auch den hinweis von "sokie" mir zu herzen genommen und alles in meiner css umgestellt und mittels raute (#) als "id" definiert.

ich musste meinen links in der css (#menu_oben a:link, #menu_oben a:visited, #menu_oben a:active) ein padding 10px geben, damit es so aus sieht, wie ich es gerne hätte. war das richtig? laut meiner html in der vorschau, sind aber die links zwischen den trennungstrichen nicht mittig, die ich aber gerade mittig hätte. ich habe auch in der css die <ul> und die <li> getrennt, war das in ordnung?, oder können die beiden elemente zusammen definiert werden. im anschluss poste ich den vorläufigen code für html und css, vielleicht gibt es optimierungsmöglichkeiten, ganz sicher. ich möchte den code klein halten.

ich möchte nur eine trennung mittels "strich" die links in der "#navigation_oben", die im "#headerContainer" platziert ist. kann ich im css-code noch was optimieren, d.h. entfernen, was ich nicht benötige?

HTML:

<body>
	<div id="content">
    <div id="headerContainer">
    <div id="navigation_oben">
        <div id="menu_oben">
      	<ul>
        	<li><a href="#">HOME</a>|</li>
        	<li><a href="#">STUDIO</a>|</li>
        	<li><a href="#">LEISTUNGEN</a>|</li>
        	<li><a href="#">GÄSTEBUCH</a>|</li>
        	<li><a href="#">KONTAKT</a>|</li>
            <li><a href="#">ZURÜCK</a></li>
      	</ul>
    	</div>
    </div>
    <div id="logo">
    </div>
    </div>
    </div>
    <div id="footerContainer">
    <p id="address">KO • ER • 36 BA • FON 03
    </p>
    <ul id="navigation_unten">
      	<li><a href="#">ANFAHRT</a></li>
      	<li><a href="#">IMPRESSUM</a></li>
  	</ul>
    </div>
</body>

Code:

#headerContainer {
	height:130px;
	width:900px;danke 
	padding:5px 0px 5px 0px;
}

#navigation_oben {
	height:130px;
	width:650px;
	background-image:;
	background:#333333;
	float:left;
	margin-left:5px;
}

#logo {
	height:130px;
	width:235px;
	background-color:#666666;
	float:right;
	margin-right:5px;
}

#menu_oben {
	padding-top:25px;
	padding-left:25px;
}

#menu_oben ul {
	padding:10px;
	display:inline;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}

#menu_oben li {
	display:inline;
	font-size:13px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:#ff6633;
}

#menu_oben a:link, #menu_oben a:visited, #menu_oben a:active {
	background-color:transparent;
	text-decoration:none;
	padding:10px;
	color:#ffffff;
	font-size:11px;
}

#menu_oben a:hover {
	color:#ff6633;
	text-decoration:none;
}

wo liegt mein fehler?, wer nicht fragt bleibt dumm. danke für eure hilfe.

tomtom · 21.01.2010

AW: Fehler bei Validation durch W3C

ich habe den css-code nach meinen wissen etwas geändert (#7). bekomme aber die links oben in der navi nicht mittig zwischen die trennstriche. hat jemand eine idee für mich.

Findwas · 21.01.2010

AW: Fehler bei Validation durch W3C

Du hast einen Abstand nach links definiert. Wenn Du die Links mittig haben möchtest, brauchst Du auch einen Abstand nach rechts (idealerweise den gleichen wie nach links)

Gruß findwas

tomtom · 21.01.2010

AW: Fehler bei Validation durch W3C

Findwas schrieb:
Du hast einen Abstand nach links definiert. Wenn Du die Links mittig haben möchtest, brauchst Du auch einen Abstand nach rechts (idealerweise den gleichen wie nach links)

meinst du #menu_oben: padding-left:25px. ?
daran liegt es nicht.

der fehler muss im listenelement liegen.

sokie · 21.01.2010

AW: Fehler bei Validation durch W3C

hab ichs denn an den Augen? für meinen Geschmack stehen die mittig zwischen den Trennern

(code aus #7)

tomtom · 21.01.2010

AW: Fehler bei Validation durch W3C

sokie schrieb:
hab ichs denn an den Augen? für meinen Geschmack stehen die mittig zwischen den Trennern

danke sokie für deine antwort. ich dachte es am anfang auch, dass sie links mittig sind, aber beim genaueren schauen ist der abstand links größer als rechts.

oder ich brauch ne brille. ;-)

kann ich das nicht mittels css genau definieren, das die links zu 100% mittig sind. dann bin ich beruhigt.

sokie · 21.01.2010

AW: Fehler bei Validation durch W3C

ja,stimmt, da ist ein leeres Zeichen mehr links.
das verschwindet, wenn du die umbrüche aus dem Quelltext entfernst:

Code:

          [COLOR=#000080]<ul>[/COLOR]
            [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]HOME[COLOR=#008000]</a>[/COLOR]|[COLOR=#000080]</li>[/COLOR][COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]STUDIO[COLOR=#008000]</a>[/COLOR]|[COLOR=#000080]</li>[/COLOR][COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]LEISTUNGEN[COLOR=#008000]</a>[/COLOR]|[COLOR=#000080]</li>[/COLOR][COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]GÄSTEBUCH[COLOR=#008000]</a>[/COLOR]|[COLOR=#000080]</li>[/COLOR][COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]KONTAKT[COLOR=#008000]</a>[/COLOR]|[COLOR=#000080]</li>[/COLOR][COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]ZURÜCK[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
          [COLOR=#000080]</ul>[/COLOR]

vielleicht findet da ja jemand eine besser Lösung...

tomtom · 21.01.2010

AW: Fehler bei Validation durch W3C

sokie schrieb:
ja,stimmt, da ist ein leeres Zeichen mehr links.
das verschwindet, wenn du die umbrüche aus dem Quelltext entfernst:

vielleicht findet da ja jemand eine besser Lösung...

danke sokie, hat geklappt. darauf muss man erstmal kommen. aber sag mal ehrlich, was ist den das für ein quatsch. vielleicht weiß ja jemand, wie es leichter geht. auf jeden fall habe ich die seite nochmal mit der developer-toolbar für xhtml + css überprüfen lassen. kein fehler, dass war ja mein eigentliches anliegen. danke danke für eure hilfe.

eine abschliessende frage habe ich noch. wie kann ich einem link die eigenschaft zuweisen, wenn man ihn drückt, dass dann der browser eine seite zurück geht. ich hoffe ich konnte mich einigermaßen verständlich ausdrücken.

habe doch was gefunden. <a href="javascript:history.back()"></a>