Otto Wyss: Zwei Bilder (img) auf einer Zeile

Ich dachte mit <span> kann ich zwei Bilder nebeneinander auf einer Zeile anzeigen. Als das nicht ging habe ich noch ein "margin:0px" eingefügt, was aber nichts nützt. Hier mein Code

<span>
  <img src="images/logo01.jpg" style="width=:90px; height:90px; margin:0px">
  <img src="images/title.jpg" style="width=:690px; height:90px; margin:0px">
</span>

Das Resultat kann man unter "http://www.mobo-fahrschule.ch" anschauen. Was mache ich falsch?

  1. Habe es jetzt doch selber herausgefunden, mit "align=left" und "align=right" gehts.

    Ist das eigentlich HTML5 konform, oder muss ich es anders formulieren?

    1. Om nah hoo pez nyeetz, Otto Wyss!

      Habe es jetzt doch selber herausgefunden, mit "align=left" und "align=right" gehts.

      Sämtliche Darstellung sollte ins Stylesheet wandern. Dein HTML ist stark überarbeitungswürdig. Ich wüsste nicht, warum die Seite zwingend JavaScript benötigt. Lies mal in unserem Blog der weg zu HTML5 sowie neue Elemente für die Seitenstruktur.

      Matthias

      --
      1/z ist kein Blatt Papier.

      1. Sämtliche Darstellung sollte ins Stylesheet wandern. Dein HTML ist stark überarbeitungswürdig.

        Es ist mir klar, dass ich momentan ein Mischmasch aus HTML4 und HTML5 verwende. Der Grund ist, dass es in SelfHtml noch kein HTML5 gibt. Sobald es mal eine vernünftige Beschreibung von HTML5 gibt, stelle ich alles um. Ich werde jetzt mal den Blog lesen und dann sehe ich weiter.

        1. Hallo,

          Sämtliche Darstellung sollte ins Stylesheet wandern. Dein HTML ist stark überarbeitungswürdig.
          Es ist mir klar, dass ich momentan ein Mischmasch aus HTML4 und HTML5 verwende.

          nein, das ist nicht der Punkt - du hast zwar einen HTML-5-DOCTYPE, verwendest aber bisher gar keine Features von HTML 5, soweit ich das erkennen kann. Selbst unter den Gesichtspunkten von HTML 4.01 ist dein Markup verbesserungsfähig. Ich denke an die zahlreichen div-Elemente, die teils einfach unnötig sind, teils durch andere, besser geeignete Elemente ersetzt werden könnten. Oder an deine Navi-Leiste, die in HTML 4.x einfach eine Liste (ul) sein könnte.

          Und ich denke daran, dass du noch wesentlich konsequenter das Layout durch CSS, anstatt durch veraltete (und zum Teil falsche) Attribute im Markup regeln könntest.

          So long,
           Martin

          --
          Alleine sind wir stark ...
          gemeinsam sind wir unausstehlich!
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        2. Om nah hoo pez nyeetz, Otto Wyss!

          Es ist mir klar, dass ich momentan ein Mischmasch aus HTML4 und HTML5 verwende.

          Das wäre nicht schlimm. Schlimm sind die inline-styles und die unnötigen Elemente.

          Eine gute Arbeitsgrundlage wäre folgendes Markup:

          <!DOCTYPE html>  
          <html lang="de">  
          <head>  
            <link rel="stylesheet" href="main.css">  
            <!-- eins reicht, das print kann in das normale mit rein -->  
            <meta charset="utf-8">  
            <meta name="author" ... >  
            <meta name="description" ...>  
            <meta name="keywords" ...>  
            <meta name="robots" ...>  
            <meta name="google-site-verification" ...>  
            <title>Mobo−Fahrschule - Motorboot−Fahrschule</title>  
          </head>  
          <body>  
            
          <header>  
            <img src="images/title.jpg" width="690" height="90" alt="Motorboot−Fahrschule" title="Motorboot−Fahrschule: So schön kann Motorbootfahren auf dem Zürichsee und Obersee sein.">  
          </header>  
            
          <nav>  
            <ul>  
              <li>Start</li>  
              <li><a href="boot.php">Schulboot</a></li>  
              <li><a href="tarife.php">Tarife</a></li>  
              <li><a href="kontakt.php">Kontakt</a></li>  
              <li><a href="lehrbuch.php">Lehrbuch</a></li>  
              <li><a href="anlegestellen.php">Fotos</a></li>  
            </ul>  
          </nav>  
            
          <header>  
            <img src="images/logo01.jpg" alt="Mobo−Fahrschule" title="Mobo−Fahrschule"> <!--Das sollte vielleicht ein Hintergrundbild werden -->  
            <h2>Mobo−Fahrschule - Ihre Motorboot−Fahrschule</h2>  
          </header>  
            
          <article>  
            <img src="images/wyssotto01.png" alt="Fahrlehrer" title="Fahrlehrer: Otto Wyss">  
            <p>Wir sind eine junge <b>Motorboot−Fahrschule</b> mit erfahrenem Fahrlehrer, der nach den neuesten Erkennt&shy;nissen unterrichtet. Alle Manöver werden genau vorgezeigt, erklärt und anschliessend eingehend geübt. Das <a href='boot.php'>Schulboot</a> der Fahrschule ist ein kleines, wendiges und angenehm zu steuerndes Kabinenboot.</p>  
            <p>Zur Unterstützung und Vertiefung des Lernerfolgs wird das Lehrbuch &quot;<a href='lehrbuch.php'>Motorboot&shy;fahren - Lehrbuch für die Praxis</a>&quot; eingesetzt, in dem alle Übungsteile detailliert beschrieben sind. Das Lehrbuch ist noch nicht erhältlich.</p>  
            <p>Im weiteren wird für jedermann zum Ausdrucken &quot;<a href='anlegestellen.php'>Fotos der Zu- und Wegfahrts&shy;wege</a>&quot; zu den Hafen und anderen Anlegestellen in ver&shy;schiedenen Prüfungsgebieten zur Verfügung gestellt. Auch dies ist momentan noch nicht fertig.</p>  
          </article>  
            
          <p class="aktion"><b>Einführungsaktion 2 für 1</b>, gültig bis <b>30. April 2013</b>. Zwei Lektionen buchen, eine bezahlen. Anmeldung via Web siehe <a href='kontakt.php'>Kontakt</a>.</p>  
            
          <article>  
            <p>Die <b>Mobo−Fahrschule</b> ist auf dem <a href='karte01.php'>Zürichsee / Obersee</a> beheimatet in den Übungsgebieten mit den folgenden Treffpunkten (die mit <img src='images/star01.png' class='icon_star' alt='*'> bezeichneten Treffpunkte werden bevorzugt):</p>  
            
            <img src="images/zuerichsee-zh.jpg" alt="Zürichsee ZH" title="Zürichsee: Prüfungsgebiet Oberrieden" usemap="#Zürichsee-ZH">  
              <map name="Zürichsee-ZH">  
                ...  
              </map>  
          	<img src="images/zuerichsee-sg.jpg" alt="Zürichsee SG" title="Obersee: Kanton St.Gallen" usemap="#Zürichsee-SG">  
              <map name="Zürichsee-SG">  
                ...  
              </map>  
          	<img src="images/zuerichsee-sz.jpg" alt="Zürichsee SZ" title="Obersee: Kanton Schwyz" usemap="#Zürichsee-SZ">  
              <map name="Zürichsee-SZ">  
                ...  
              </map>  
            
          	<ul>  
          	<li>Zürichsee - Kanton Zürich (Prüfungsgebiet Oberrieden)  
          		<ul>  
          			<li><a href='karte43.php'>Hafen Thalwil Farbsteig</a></li>  
          			<li><a href='karte44.php'>Steg AWEL-Gebäude Oberrieden</a></li>  
          			<li><a href='karte45.php'>Seepo Oberrieden</a>(nur Prüfungsfahrten)</li>  
          			<li><a href='karte47.php'>Hafen Horgen</a>(Landungsstelle ZSG)<img src="images/star01.png" <!-- als Hintergrund-->></li>  
          			<li><a href='karte49.php'>Hafen Herrliberg</a></li>  
          		</ul>  
          	</li>  
          	<li>Obersee - Kanton St.Gallen  
          		<ul>  
          			<li><a href='karte34.php'>Stützpunkt Schmerikon</a><img src="images/star01.png" class="icon_star" alt="*"></li>  
          		</ul>  
          	</li>  
          	<li>Obersee - Kanton Schwyz  
          		<ul>  
          			<li><a href='karte38.php'>Schifffahrtsinspektorat Pfäffikon</a></li>  
          			<li><a href='karte39.php'>Hensa Werft Altendorf</a><img src="images/star01.png" class="icon_star" alt="*"></li>  
          		</ul>  
          	</li>  
          	</ul>  
          </article>  
            
          <footer>  
               &copy; 2013 <b>Mobo−Fahrschule GmbH</b> <a href="impressum.php">Impressum</a>  
          </footer>  
            
          <script>  
            ga  
          </script>  
            
          </body>  
          </html>
          

          Matthias

          --
          1/z ist kein Blatt Papier.

          1. @@Matthias Apsel:

            nuqneH

            <meta charset="utf-8">

            Die Angabe der Zeichencodierung sollte so früh wie möglich stehen, am besten als erstes im head.

            <header>
            <nav>
            <header>

            Die Navigation darf auch gerne im header stehen. Dann genügt ein header-Element.

            <article>

            article?? Handelt es sich tatsächlich um „a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication“? [HTML5]

            Wäre section nicht passender?

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Tach!

              <meta charset="utf-8">
              Die Angabe der Zeichencodierung sollte so früh wie möglich stehen, am besten als erstes im head.

              Es gibt die HTML5-Regel, dass die Angabe in den ersten 1024 Bytes stehen soll. Angenommen im HTTP-Header ist keine drin, ist schon einmal in freier Wildbahn bei relevanten Browsern, Suchmaschinen und anderen Verarbeitern eine Nicht-Auswirkung auf Text, der davor steht, beobachtet worden? Die Angabe spezifiziert ja die "document's character encoding", gilt also für das gesamte Dokument und nicht erst ab der Angabe.

              dedlfix.

              1. @@dedlfix:

                nuqneH

                Es gibt die HTML5-Regel, dass die Angabe in den ersten 1024 Bytes stehen soll. Angenommen im HTTP-Header ist keine drin, ist schon einmal in freier Wildbahn bei relevanten Browsern, Suchmaschinen und anderen Verarbeitern eine Nicht-Auswirkung auf Text, der davor steht, beobachtet worden?

                Nö. Vermutlich spezifiziert HTML5 das Verhalten, das Browser schon vorher gezeigt hatten.

                Wenn man aber erstmal damit anfängt, andere Dinge vor der Angabe der Zeichencodierung zu notieren, läuft man in die Gefahr, dass nach Ergänzungen (zusätzliche Stylesheets, Scripte, Metadaten) die Angabe der Zeichencodierung nicht mehr innerhalb der ersten 1024 Bytes steht.

                Deshalb: Wehret den Anfängen. meta[@charset] als erstes, dann bleibt man auf der sicheren Seite.

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            2. Om nah hoo pez nyeetz, Gunnar Bittersmann!

              article?? Handelt es sich tatsächlich um „a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication“? [HTML5]

              Wäre section nicht passender?

              Hm. Könntest du den Unterschied zwischen beiden einmal richtig deutlich machen, bitte?

              Matthias

              --
              1/z ist kein Blatt Papier.

              1. @@Matthias Apsel:

                nuqneH

                Hm. Könntest du den Unterschied zwischen beiden einmal richtig deutlich machen, bitte?

                Ian Devlin und Bruce Lawson haben.

                Qapla'

                PS. „Consider this real-world article: Bruce Lawson is World's Sexiest Man“ LOL.

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. @@Gunnar Bittersmann:

                  nuqneH

                  PS. „Consider this real-world article: Bruce Lawson is World's Sexiest Man“ LOL.

                  Well, maybe he is. ;-)

                  Qapla'

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. Eine gute Arbeitsgrundlage wäre folgendes Markup:

            Hei, danke vielmals. Du hast warscheinlich die Ostern für mich gerettet.

        3. Hallo,

          Es ist mir klar, dass ich momentan ein Mischmasch aus HTML4 und HTML5 verwende. Der Grund ist, dass es in SelfHtml noch kein HTML5 gibt. Sobald es mal eine vernünftige Beschreibung von HTML5 gibt, stelle ich alles um.

          SELFHTML ist schon seit dutzenden Jahren nicht mehr die Anlaufstelle für zuverlässige und aktuelle Infos über HTML. Das heißt nicht, dass es nicht viele andere Websites gibt, die vernünftige Beschreibungen bieten. Englischsprachige gibt es tausende, z.B. html5doctor.com, Dive into HTML5 oder MDN.

          Auch Deutschsprachiges wirst du beim googlen finden. Stefan Münz hat ein HTML5-Handbuch geschrieben, das auch online verfügbar ist. Ein weiteres gutes deutschsprachiges Buch ist HTML5 – Webseiten innovativ und zukunftssicher von Peter Kröner, was allerdings einen starken JavaScript-Fokus hat.

          Es gibt auch gute Übersetzungen wie HTML5: Eine Einführung für Umsteiger oder Durchstarten mit HTML5.

          Grüße,
          Mathias

          1. SELFHTML ist schon seit dutzenden Jahren

            LOL. Ich neige zur Übertreibung. SELFHTML ist nicht einmal zwei dutzend Jahre alt. ;)

  2. Om nah hoo pez nyeetz, Otto Wyss!

    <span>
      <img src="images/logo01.jpg" style="width=:90px; height:90px; margin:0px">
      <img src="images/title.jpg" style="width=:690px; height:90px; margin:0px">
    </span>

    Lass das span-Element und sämtliche Style-Angaben weg (letztere gehören ins Stylesheet). Verwende einen alternativ-Text für Leute, die die Bilder nicht sehen können oder wollen und ggf. auch das title-Attribut und setze die Bilder direkt nebeneinander.

    <img src="images/logo01.jpg" width="90px" height="90px" alt="Text, falls das Bild nicht zu sehen ist" title="Text der beim Überfahren des Bildes angezeigt wird"><img src="images/title.jpg" width="290px" height="90px" alt="Text, falls das Bild nicht zu sehen ist" title="Text der beim Überfahren des Bildes angezeigt wird">

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Hallo,

      okay, du warst schneller, ich hab mir etwas Zeit gelassen mit meiner Antwort.
      Dafür ist sie ausführlicher. ;-)

      <img src="images/logo01.jpg" width="90px" height="90px" alt="Text, falls das Bild nicht zu sehen ist" title="Text der beim Überfahren des Bildes angezeigt wird"><img src="images/title.jpg" width="290px" height="90px" alt="Text, falls das Bild nicht zu sehen ist" title="Text der beim Überfahren des Bildes angezeigt wird">

      Das überdenken wir nochmal: Der Inhalt des width- und des height-Attributs ist ein reiner Zahlenwert, der generell als Pixel interpretiert wird, oder ein Zahlenwert gefolgt von einem Prozentzeichen.

      Schöne Feiertage,
       Martin

      --
      TEAM: Toll, Ein Anderer Macht's.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    2. Lass das span-Element und sämtliche Style-Angaben weg (letztere gehören ins Stylesheet). Verwende einen alternativ-Text für Leute, die die Bilder nicht sehen können oder wollen und ggf. auch das title-Attribut und setze die Bilder direkt nebeneinander.

      Alt, Title, etc habe hier weggelassen, weil es nichts mit meinem Problem zu tun hat. Auf meiner Webseite sind sie drauf. Allerdings habe ich wieder auf die zwei Bilder verzichtet, das es optisch nicht passt.

  3. Hallo,

    Ich dachte mit <span> kann ich zwei Bilder nebeneinander auf einer Zeile anzeigen.

    nein, das ist vermutlich ein Missverständnis. Ein span-Element fasst nur andere Elemente und/oder Text zu einem gemeinsamen Element zusammen, ist aber selbst auch noch ein inline-Element. Das heißt, das span-Element verhält sich mitsamt seinem Inhalt weiter wie Fließtext.

    Wenn du zwei Bilder nebeneinander in einer Zeile anzeigen lassen möchtest, schreib sie einfach lückenlos hintereinander. Lückenlos, weil sonst das Leerzeichen oder der Zeilenumbruch als Abstand wirkt. Voraussetzung dafür, dass die Bilder dann tatsächlich nebeneinander stehen, ist natürlich eine ausreichende Breite des Elternelements.
    In hartnäckigen Fällen kannst du noch mit white-space:pre fürs Elternelement den Zeilenumbruch verhindern; das sollte aber nicht nötig sein, wenn man für ausreichende Breite (min-width) sorgt.

    <span>
      <img src="images/logo01.jpg" style="width=:90px; height:90px; margin:0px">
      <img src="images/title.jpg" style="width=:690px; height:90px; margin:0px">
    </span>

    Was macht das '=' innerhalb des style-Attributs? Das ist fehlerhafte Syntax und hat da nichts verloren. Aber die Angabe der Breite als style-Attribut ist auch nicht wirklich sinnvoll. Wenn du sie vorab angeben möchtest, dann direkt als width- und height-Attribut, und margin:0 ist bei img-Elementen eh die Defaulteinstellung.

    Das Resultat kann man unter "http://www.mobo-fahrschule.ch/" anschauen. Was mache ich falsch?

    Nichts, soweit ich erkennen kann (vom falschen und überflüssigen style-Attribut abgesehen). Bei mir stehen die beiden Bilder sauber lückenlos nebeneinander (Opera 12.14, Firefox 19.0.2).

    Zum restlichen Code ...
    Warum packst du einige Elemente (Etwa den header oben, aber auch die Navi-Zeile darunter) gleich doppelt in div-Container ein? Das ist völlig überflüssig.
    Für den Header bietet sich, da du ohnehin schon HTML 5 verwendest, das header-Element an. Das ersetzt dann die zwei div-Elemente und das span völlig. Das gleiche gilt sinngemäß für den Footer.
    Und die Navi-Zeile darunter möchte wohl ein nav-Element mit einer Liste darin sein, keine aufwendig zurechtgetackerte einzeilige Tabelle.

    Und "Diese Seite benötigt zwingend Javascript, damit sie richtig angezeigt werden kann"? Nö, wozu das? Sie wird bei mir im Opera auch ohne Javascript prima angezeigt. Soweit ich das auf die Schnelle sehe, benutzt du nirgends Javascript - außer für das Google-Schnüffelscript (und das möchte man nicht) und einen Frame-Breaker, der aber wegen der SOP sowieso nicht funktionieren kann, wenn das Dokument in einem fremden Frameset läuft.

    Oh, und den Link "Zurück" in der Navi würde ich weglassen. Es ergibt keinen Sinn, Funktionen nochmal nachzubauen, die jeder Browser von sich aus bietet.

    Schöne Ostertage,
     Martin

    --
    Wer es in einem Unternehmen zu etwas bringen will, muss so tun, als hätte er es schon zu etwas gebracht.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Was macht das '=' innerhalb des style-Attributs? Das ist fehlerhafte Syntax und hat da nichts verloren. Aber die Angabe der Breite als style-Attribut ist auch nicht wirklich sinnvoll.

      Das "=" ist ein Schreibfehler, korrigiert. Ich habe vorher width und height gehabt, aber der W3C-Validator mekert das an, allerdings ohne wirklich eine Hilfestellung zu geben. Umd weil SelfHTML noch kein HTML5 kennt, habe ich eben einfach etwas gebastelt.

      Warum packst du einige Elemente (Etwa den header oben, aber auch die Navi-Zeile darunter) gleich doppelt in div-Container ein? Das ist völlig überflüssig.

      Weil ich erstens meine Webseite seitwärts zentriert im Fenster haben will und zweitens ich beidseits einen definierten Rand von 10px haben will. Das geht nur über 2 Divs. Leider gibt es auf SelfHTML (oder sonstwo im Netz) kein vernünftiges Beispiel, wie man das sinnvollerweise macht. Ich werde es gerne anders machen, wenn du mir sagst wie.

      Für den Header bietet sich, da du ohnehin schon HTML 5 verwendest, das header-Element an. Das ersetzt dann die zwei div-Elemente und das span völlig. Das gleiche gilt sinngemäß für den Footer.

      Natürlich, nur sind sie weder in SelfHTML noch sonstwo sinnvoll beschrieben.

      Und die Navi-Zeile darunter möchte wohl ein nav-Element mit einer Liste darin sein, keine aufwendig zurechtgetackerte einzeilige Tabelle.

      Was ist ein nav-Element, wo ist das dokumentiert? Bitte jetzt nicht eine Referenz zu W3C angeben, ich habe keine Zeit um wochenlang nach der richtigen Syntax zu suchen.

      Und "Diese Seite benötigt zwingend Javascript, damit sie richtig angezeigt werden kann"?

      Du hast recht, diese Seite benötigt Javascript nicht, dafür andere meiner Seiten.

      Oh, und den Link "Zurück" in der Navi würde ich weglassen. Es ergibt keinen Sinn, Funktionen nochmal nachzubauen, die jeder Browser von sich aus bietet.

      Oh nein, der Zurück-Link gehört auf jede gute Seite. Die meisten Leute wissen nicht, dass es so etwas wie ein "Zurück" im Menu gibt.

      Schöne Ostertage,

      Danke gleichfalls.

      1. Hallo,

        Was macht das '=' innerhalb des style-Attributs? Das ist fehlerhafte Syntax und hat da nichts verloren. Aber die Angabe der Breite als style-Attribut ist auch nicht wirklich sinnvoll.
        Das "=" ist ein Schreibfehler, korrigiert. Ich habe vorher width und height gehabt, aber der W3C-Validator mekert das an, allerdings ohne wirklich eine Hilfestellung zu geben.

        das wundert mich; hier würde mich der Wortlaut der Validator-Meldung interessieren. Warnt der vielleicht nur, dass es ungünstig sein kann, Grafiken durch width- oder height-Angaben zu skalieren?

        Warum packst du einige Elemente (Etwa den header oben, aber auch die Navi-Zeile darunter) gleich doppelt in div-Container ein? Das ist völlig überflüssig.
        Weil ich erstens meine Webseite seitwärts zentriert im Fenster haben will ...

        Das erreicht man durch margin: 0 auto; beispielsweise für das body-Element in Verbindung mit einer Breitenangabe.

        ... und zweitens ich beidseits einen definierten Rand von 10px haben will.

        Also außerdem padding: 10px; ebenfalls für body.

        Für den Header bietet sich, da du ohnehin schon HTML 5 verwendest, das header-Element an. Das ersetzt dann die zwei div-Elemente und das span völlig. Das gleiche gilt sinngemäß für den Footer.
        Natürlich, nur sind sie weder in SelfHTML noch sonstwo sinnvoll beschrieben.

        Ja, stimmt. HTML 5 ist in SELFHTML noch nicht angekommen. Im Wiki schon (aber noch nicht "flächendeckend"), aber die alte Doku wird nicht mehr gepflegt.

        Und die Navi-Zeile darunter möchte wohl ein nav-Element mit einer Liste darin sein, keine aufwendig zurechtgetackerte einzeilige Tabelle.
        Was ist ein nav-Element, wo ist das dokumentiert? Bitte jetzt nicht eine Referenz zu W3C angeben, ich habe keine Zeit um wochenlang nach der richtigen Syntax zu suchen.

        Das nav-Element ist auch Bestandteil von HTML 5, und soll als Containerelement die Seitennavigation umschließen. Der Vorteil ist, dass man ein semantisch sinnvolles Element hat, das die eigentliche Linkliste und beispielsweise eine Überschrift oder andere Elemente kombiniert, die zusammen die Navi-Leiste ausmachen.
        Es hat AFAIK sonst keine funktionale Bewandtnis und keine exotischen Attribute.

        Und "Diese Seite benötigt zwingend Javascript, damit sie richtig angezeigt werden kann"?
        Du hast recht, diese Seite benötigt Javascript nicht, dafür andere meiner Seiten.

        Dann würde ich den Wortlaut ändern, zum Beispiel: "Einige Seiten dieses Webauftritts brauchen Javascript. Um alle Funktionen nutzen zu können, ..."
        Noch schöner wäre allerdings, wenn du Javascript als Muss-Anforderung eliminieren könntest. Im besten Fall schaffst du es, dass die Grundfunktion auch ohne JS gegeben ist, aber Javascript (wenn erlaubt) für mehr Komfort, mehr Ästhetik oder optionale zusätzliche Funktionen sorgt.

        Oh, und den Link "Zurück" in der Navi würde ich weglassen. Es ergibt keinen Sinn, Funktionen nochmal nachzubauen, die jeder Browser von sich aus bietet.
        Oh nein, der Zurück-Link gehört auf jede gute Seite. Die meisten Leute wissen nicht, dass es so etwas wie ein "Zurück" im Menu gibt.

        Nanu, was sind das für Leute?? Das ist doch meist eine der ersten Browserfunktionen, die man als Nutzer kennenlernt, zumal diese Funktion bei den meisten Browsern doch recht prominent in der Symbolleiste vertreten ist, von einem schnellen Fingerdruck auf die Backspace-Taste gar nicht zu reden. - Abgesehen davon, dass ich selbst den "Zurück"-Button fast nie nutze, weil ich Links fast immer in einem neuen Tab öffnen lasse (außer wenn ich mir wirklich absolut sicher bin, dass die aktuell angezeigte Seite im Moment erledigt ist).

        Ciao,
         Martin

        --
        Treffen sich zwei Holzwürmer im Käse: "Na, auch Probleme mit den Zähnen?"
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. @@Der Martin:

          nuqneH

          Das erreicht man durch margin: 0 auto; beispielsweise für das body-Element in Verbindung mit einer Breitenangabe.

          Berichtigung: Maximal-Breiten-Angabe. Think mobile. Beispiel

          Das nav-Element […] hat AFAIK sonst keine funktionale Bewandtnis und keine exotischen Attribute.

          Doch, es hat. Think screenreader.

          Nutzer können die Navigation gezielt überspringen, um zum Inhalt zu kommen. Oder gezielt zuer Navigation springen.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. Tach!

            Das nav-Element […] hat AFAIK sonst keine funktionale Bewandtnis und keine exotischen Attribute.
            Doch, es hat. Think screenreader.
            Nutzer können die Navigation gezielt überspringen, um zum Inhalt zu kommen. Oder gezielt zuer Navigation springen.

            Screenreader werden meiner Meinung nach in solchen Diskussionen überbewertet. Weit mehr als "den paar Blinden" hilft es zum Beispiel  "normalen" Besuchern von Suchmaschinen, wenn sie solche Seiten nicht bevorzugt gelistet bekommen, die den Suchbegriff nur in ihrer Navigation (oder anderen Nebenbereichen) haben. Stattdessen ist das Suchergebnis meist besser, wenn der Begriff in einem Hauptbereich auftaucht.

            dedlfix.

        2. Ich habe vorher width und height gehabt, aber der W3C-Validator mekert das an, allerdings ohne wirklich eine Hilfestellung zu geben.

          das wundert mich; hier würde mich der Wortlaut der Validator-Meldung interessieren. Warnt der vielleicht nur, dass es ungünstig sein kann, Grafiken durch width- oder height-Angaben zu skalieren?

          z.B. folgendes: "Line 84, column 247: Bad value 84px for attribute width on element img: Expected a digit but saw p instead".

          Mein Code: "<img src="images/wyssotto01.png" width=84px height=120px ..." ist noch so auf meiner Webseite.

          Das erreicht man durch margin: 0 auto; beispielsweise für das body-Element in Verbindung mit einer Breitenangabe.

          Gut, werde ich ausprobieren.

          Ja, stimmt. HTML 5 ist in SELFHTML noch nicht angekommen. Im Wiki schon (aber noch nicht "flächendeckend"), aber die alte Doku wird nicht mehr gepflegt.

          Werde in Zukunft ins Wiki schauen und das korrigieren was vorhanden ist.

          Nanu, was sind das für Leute?? Das ist doch meist eine der ersten Browserfunktionen,

          Ganz, ganz normale Leute ohne Informatik-Ausbildung. Du muss nur mal zuschauen, wie sie mit dem Web umgehen. Bevor sie den Zurück-Knopf betätigen, tippen sie den gesamten Text nochmals in die Browser-Adresse. Zum Glück kommt dort heutzutage der Lookup, sonst tippen sie wirklich alles nochmals ein.

          fast nie nutze, weil ich Links fast immer in einem neuen Tab öffnen lasse (außer wenn ich mir wirklich absolut sicher bin, dass die aktuell angezeigte Seite im Moment erledigt ist).

          Auch Tabs ist eine Errungenschaft, die viele Leute einfach nicht benutzen.

          1. Om nah hoo pez nyeetz, Otto Wyss!

            z.B. folgendes: "Line 84, column 247: Bad value 84px for attribute width on element img: Expected a digit but saw p instead".

            Wie Martin mich berichtigte: Das width-Attribut ist eine natürliche Zahl oder eine Prozentangabe.

            Matthias

            --
            1/z ist kein Blatt Papier.

          2. Hallo,

            das wundert mich; hier würde mich der Wortlaut der Validator-Meldung interessieren. Warnt der vielleicht nur, dass es ungünstig sein kann, Grafiken durch width- oder height-Angaben zu skalieren?
            z.B. folgendes: "Line 84, column 247: Bad value 84px for attribute width on element img: Expected a digit but saw p instead".

            "Habe eine Ziffer erwartet, aber stattdessen ein p gesehen."
            Ja, als Wert des width- oder height-Attributs steht nur ein reiner Zahlenwert. Die Angabe einer Einheit (z.B. "px") ist in CSS erforderlich, aber im HTML gilt automatisch die Einheit Pixel. Es sei denn, der Zahlenwert wird von einem '%' gefolgt, dann ist es eine Prozentangabe.

            Mein Code: "<img src="images/wyssotto01.png" width=84px height=120px ..." ist noch so auf meiner Webseite.

            Ja, hab ich gesehen, und der Fehler ist mir auch aufgefallen. Das habe ich unter anderem gemeint, als ich etwas früher schon von fehlerhaften Attributwerten sprach.

            Nanu, was sind das für Leute?? Das ist doch meist eine der ersten Browserfunktionen,
            Ganz, ganz normale Leute ohne Informatik-Ausbildung. Du muss nur mal zuschauen, wie sie mit dem Web umgehen. Bevor sie den Zurück-Knopf betätigen, tippen sie den gesamten Text nochmals in die Browser-Adresse.

            Gut, kann man auch machen ...

            Zum Glück kommt dort heutzutage der Lookup, sonst tippen sie wirklich alles nochmals ein.

            Eine Funktion, die mich tierisch nervt, weswegen ich sie bei meinen Browsern abgeschaltet habe.

            Auch Tabs ist eine Errungenschaft, die viele Leute einfach nicht benutzen.

            Das stimmt. Ich habe das erst neulich meiner Mutter gezeigt, die zwar wenig technisches Hintergrundwissen hat, den modernen Medien aber sehr offen gegenübersteht, und sie fand das ungemein praktisch. Seither nutzt sie gern auch mal mehrere Tabs und weiß das zu schätzen.

            So long,
             Martin

            --
            Die letzten Worte des Helden:
            Feigling! Traust dich ja doch nicht!
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(