Formular als inline nicht 4.01 w3 konform

[ottootto]

Hallo!
Ich habe für meine neue Website eine horizontale Navigationsleiste mit Hilfe einer inline-Aufzählungsliste geschrieben.

Der letzte (ganz rechte) Menüpunkt soll eine Select-Box für die Sprachauswahl sein - das geht aber nur, wenn ich diese in ein inline-Element verwandle.

Ich will aber 4.01 strict bleiben und bin etwas einfallslos, wie ich das Problem löse.

Versucht habe ich auch schon einen rechts-gefloateten Div-Container neben der Navigation innerhalb des Header-Divs. Das funktioniert, ist aber offenbar auch nicht erlaubt?!

Hier der abgespeckte Code:

  
<div>  
<!-- In diesem Container liegt die gesamte Seite -->  
  
	<div id="header">  
	<!-- Der Container für den Header -->  
  
	<ul id="nav" style="display:inline;">  
	<!-- Die Navigation -->  
		<li style="display:inline;"><a href=".">Menu1</a></li>  
		<li style="display:inline;"><a href=".">Menu2</a></li>  
		<li style="display:inline;"><a href=".">Menu3</a></li>  
		<li style="display:inline;">  
			<form action="select.html" style="display:inline">  
				<!-- Das Problem -->  
  
				<select name="language" size="1">  
      				<option selected>DE</option>  
					<option>EN</option>  
				</select>  
			</form>  
		</li>  
	</ul>  
  
	</div>  
  
	<div id="content">  
	<!-- In diesem Container liegt der Inhalt -->  
  
	<h1>&Uuml;berschrift</h1>  
  
	</div>  
  
</div>  
  
</body>  
</html>  

[Marc]

Hallo,

Der letzte (ganz rechte) Menüpunkt soll eine Select-Box für die Sprachauswahl sein - das geht aber nur, wenn ich diese in ein inline-Element verwandle.

Glaube ich nicht.

Ist aber auch so valide (zumindest HTML5) - Dein gesamter Code enthält keinen Fehler. Gut gemacht junger Shaolin! :-)

Und es sieht alles so aus, wie von Dir gewollt (wenn ich Dich recht verstanden habe). Alles schön nebeneinader.

Die inline-Styles solltest Du aber vermeiden (nur für das Beispiel reingepackt?!?)

Viele Grüße,
Marc.

[Der Martin]

Hi,

Der letzte (ganz rechte) Menüpunkt soll eine Select-Box für die Sprachauswahl sein - das geht aber nur, wenn ich diese in ein inline-Element verwandle.
Ich will aber 4.01 strict bleiben und bin etwas einfallslos, wie ich das Problem löse.

HTML und CSS sind vollkommen unabhängig voneinander. Was hat die Formatierung deiner Meinung nach für einen Einfluss auf die Validität des Markups?

Versucht habe ich auch schon einen rechts-gefloateten Div-Container neben der Navigation innerhalb des Header-Divs. Das funktioniert, ist aber offenbar auch nicht erlaubt?!

Wie kommst du darauf?

<div>
<!-- In diesem Container liegt die gesamte Seite -->

Damit ist er überflüssig - du hast mit dem body-Element schon einen Container, der die ganze Seite enthält.

<div id="header">
<!-- Der Container für den Header -->

Auch dieser Container ist überflüssig, solange er nur ein Element enthält (die Liste).

  <li style="display:inline;">  
  	<form action="select.html" style="display:inline">  
  		<!-- Das Problem -->  

Was genau ist "das Problem?"

So long,
 Martin

[Gunnar Bittersmann]

@@ottootto:

nuqneH

Der letzte (ganz rechte) Menüpunkt soll eine Select-Box für die Sprachauswahl sein

Select-Box für die Sprachauswahl? Äußerst zweifelhaft! [qa-navigation-select]

Und Sprachkürzel anstatt der Bezeichnung der Sprache (in der Zielsprache)?

Bist du _sicher_, dass jemand, der nicht deutsch spricht, auf der Seite also nichts lesen kann, erkennt, dass die select-Box [DE ▼] zur Sprachauswahl dient und ihn zur englischen Version führt?

BTW, an automatische Sprachvereinbarung hast du gedacht? [qa-when-lang-neg]

<div>
<!-- In diesem Container liegt die gesamte Seite -->

Dass es keinen Grund für dieses div gibt, hat Der Martin ja schon gesagt. Und at auch. Und der Weihnachtsmann.

<h1>&Uuml;berschrift</h1>

Und zum Verstümmeln der Umlaute im Quelltext gibt es auch keinen Grund. Verwende ein richtiges Ü! [qa-escapes]

Qapla'

[ottootto]

@Alle die geantwortet haben:
Dankeschön!

Der letzte (ganz rechte) Menüpunkt soll eine Select-Box für die Sprachauswahl sein

Select-Box für die Sprachauswahl? Äußerst zweifelhaft! [qa-navigation-select]

Danke für den tollen Link! Hab mal überflogen, da sind ein paar gute Ideen und Anregungen dabei.

Und Sprachkürzel anstatt der Bezeichnung der Sprache (in der Zielsprache)?

BTW, an automatische Sprachvereinbarung hast du gedacht? [qa-when-lang-neg]

Daran habe ich gedacht, und bei den Sprachkürzeln wäre es so nicht geblieben, aber ich gebe zu, dass ich mir noch nicht bis ins Detail darüber Gedanken gemacht habe.

<div>
<!-- In diesem Container liegt die gesamte Seite -->

Dass es keinen Grund für dieses div gibt, hat Der Martin ja schon gesagt. Und at auch. Und der Weihnachtsmann.

Mit dem Weihnachtsmann hast du ins Schwarze getroffen, der Grund für mich war "margin: 0 auto;"
Den Header-Container benötige ich aber, auch wenn es im geposteten Beispielquelltext nicht ersichtlich ist. (keine Modesünde)

<h1>&Uuml;berschrift</h1>  

»»

Und zum Verstümmeln der Umlaute im Quelltext gibt es auch keinen Grund. Verwende ein richtiges Ü! [qa-escapes]

Werde ich beherzigen, danke für den Tipp!

Ich gebe mir ja Mühe..

Jedenfalls war das ursprüngliche Problem, warum ich geschrieben habe, dass in einer Liste kein Formular vorkommen darf. (sagt zumindest der Validator zu mir)

Vielleicht bleibe ich aber einfach bei Textlinks.
Ich ziehe mich mit den vielen Antworten mal zurück und melde mich nochmal, wenn das (vermutlich nicht vorhandene) Problem bestehen bleibt.

Danke!

[Gunnar Bittersmann]

@@ottootto:

nuqneH

Danke für den tollen Link! Hab mal überflogen, da sind ein paar gute Ideen und Anregungen dabei.

Einen hab ich noch …

Jedenfalls war das ursprüngliche Problem, warum ich geschrieben habe, dass in einer Liste kein Formular vorkommen darf. (sagt zumindest der Validator zu mir)

Doch, darf. Aber 'select' nicht ohne was dazwischen in einem Formular.

Qapla'

[dedlfix]

Hi!

Ich will aber 4.01 strict bleiben und bin etwas einfallslos, wie ich das Problem löse.

Such eine HTML-Referenz auf (im SELFHTML-Wiki ist beispielsweise eine) und schau dir an, welche Elemente im form-Element für deine gewählte DTD enthalten sein dürfen.

Lo!

[Gunnar Bittersmann]

@@ottootto:

nuqneH

Der letzte (ganz rechte) Menüpunkt soll eine Select-Box für die Sprachauswahl sein - das geht aber nur, wenn ich diese in ein inline-Element verwandle.

Das tust du nicht. Unterscheide zwischen HTML-Blockelementen und CSS-Blockelementen! http://forum.de.selfhtml.org/archiv/2006/6/t132132/#m854853, http://forum.de.selfhtml.org/archiv/2007/4/t149631/#m972077 ff.

Ich will aber 4.01 strict bleiben und bin etwas einfallslos, wie ich das Problem löse.

Dein Problem ist ein anderes: In Strict darf 'select' kein Kind von 'form' sein, sondern da muss noch ein (HTML-)Blockelement dazwischen.

<ul id="nav" style="display:inline;">

Trenne Markup (HTML) und Darstellung (CSS), mach Stilangaben NIEMALS* inline in @style-Attributen, sondern immer im Stylesheet!

  <li style="display:inline;"><a href=".">Menu1</a></li>  
  <li style="display:inline;"><a href=".">Menu2</a></li>  
  <li style="display:inline;"><a href=".">Menu3</a></li>  
  <li style="display:inline;">  

Hier siehst du , wie unsinnig Inline-Styles für jedes Elment anzugeben. Im Stylesheet wäre das eine Angabe für alle gleichartigen Elemente.

Qapla'

* Ergänzung für die Sag-niemals-nie-Sager: es sei denn, du weißt *genau*, was du tust

[ottootto]

Ich will aber 4.01 strict bleiben und bin etwas einfallslos, wie ich das Problem löse.

Dein Problem ist ein anderes: In Strict darf 'select' kein Kind von 'form' sein, sondern da muss noch ein (HTML-)Blockelement dazwischen.

Danke! Mit einem <p> davor klappt es.

<ul id="nav" style="display:inline;">  

Trenne Markup (HTML) und Darstellung (CSS), mach Stilangaben NIEMALS* inline in @style-Attributen, sondern immer im Stylesheet!

  <li style="display:inline;"><a href=".">Menu1</a></li>  
  <li style="display:inline;"><a href=".">Menu2</a></li>  
  <li style="display:inline;"><a href=".">Menu3</a></li>  
  <li style="display:inline;">  

Hier siehst du , wie unsinnig Inline-Styles für jedes Elment anzugeben. Im Stylesheet wäre das eine Angabe für alle gleichartigen Elemente.

Das mache ich eh. Beim Beispielcode habe ich mir gedacht, ich lösche alle nichtrelevanten Code-Teile der Website und füge die relevanten css-Formatierungen direkt ein, damit die "Einarbeitungszeit" für Leser kurz wird. (Mein Service für potentiell Antwortende)

Übrigens tolle Website und Artikel und danke für die Hilfe!

[Gunnar Bittersmann]

@@ottootto:

nuqneH

Danke! Mit einem <p> davor klappt es.

Na siehste. Nun, da du weißt, wie’s geht, kannst du die 'select'-Liste zur Sprachauswahl ja wieder entsorgen.

Das mache ich eh. Beim Beispielcode habe ich mir gedacht, ich lösche alle nichtrelevanten Code-Teile der Website und füge die relevanten css-Formatierungen direkt ein, damit die "Einarbeitungszeit" für Leser kurz wird. (Mein Service für potentiell Antwortende)

Schlechter Service. Der Code wird mit Inline-Styles unübersichtlicher als ein sauberes Markup und dazu ein Stylesheet.

Wenn du’s gleich richtig[tm] machst, ersparst du außerdem potentiell Antwortenden, den Hinweis zu geben, Styleangaben nie inline zu machen.

Übrigens tolle Website und Artikel und danke für die Hilfe!

Thx & sry, dass [qa-navigation-select] noch nicht übersetzt ist. ;-) Das liegt schon seit Ewigkeiten bei mir rum, allerdings nur noch als schlechter Ausdruck, die Datei ist mir verloren gegangen. Ich weiß nicht, ob OCR mir da noch helfen kann oder ob ich das alles nochmal abtippen muss.

Qapla'

[Auge]

Hallo

Das mache ich eh. Beim Beispielcode habe ich mir gedacht, ich lösche alle nichtrelevanten Code-Teile der Website und füge die relevanten css-Formatierungen direkt ein, damit die "Einarbeitungszeit" für Leser kurz wird. (Mein Service für potentiell Antwortende)

Schlechter Service. Der Code wird mit Inline-Styles unübersichtlicher als ein sauberes Markup und dazu ein Stylesheet.

Wenn du’s gleich richtig[tm] machst, ersparst du außerdem potentiell Antwortenden, den Hinweis zu geben, Styleangaben nie inline zu machen.

Nu heul mal nicht rum, *du* hast *diesen Hinweis* bestimmt in einer speziellen Zwischenablage, die in einem ROM gespeichert ist. ;-)

Tschö, Auge