HTML Anfänger: Schriftgröße auf Mobilen Geräten

0 44

Schriftgröße auf Mobilen Geräten

HTML Anfänger
  • css
  1. 0
    Gunnar Bittersmann
    1. 0
      HTML Anfänger
      1. 0
        Matthias Apsel
        1. 1

          Internetbenutzer sind zart wie eine Mimose!

          Erwin
          1. 0
            HTML Anfänger
            1. 1
              Der Martin
              1. 0
                Mitleser
              2. 0
                Gunnar Bittersmann
      2. 0
        Gunnar Bittersmann
    2. 0
      ralphi
      1. 0
        Gunnar Bittersmann
        1. 0
          ralphi
          1. 0
            Gunnar Bittersmann
        2. 0
          MudGuard
  2. 0

    HTML Elemente

    HTML Anfänger
    • html
    1. 0
      Matthias Scharwies
      1. 0
        Auge
      2. 0

        Hier nochmals dein HTML Entwurf von mir

        HTML Anfänger
  3. 0

    Meine erste HTML und CSS Seite - Bitte um Bewertgung

    HTML Anfänger
    1. 0
      Matthias Apsel
      1. 0
        HTML Anfänger
        1. 0
          Matthias Apsel
          1. 0
            Matthias Apsel
            1. 0

              Neue Navigation

              HTML Anfänger
          2. 0
            HTML Anfänger
            1. 0
              Auge
      2. 0
        Gunther
        1. 0
          HTML Anfänger
          1. 0
            Gunther
            1. 0
              HTML Anfänger
  4. 0

    Rechte Box immer oben anordnen

    HTML Anfänger
    1. 0
      Matthias Apsel
      1. 0
        HTML Anfänger
        1. 0
          Matthias Apsel
          1. 0
            HTML Anfänger
            1. 0
              Matthias Apsel
              1. 0

                Navigation

                HTML Anfänger
  5. 0

    Font Awesome Icons

    HTML Anfänger
    1. 0
      Matthias Apsel
      1. 0
        HTML Anfänger
        1. 0

          erledigt - Font Awesome Icons

          HTML Anfänger
  6. 0

    Ist die Schrift zu groß?

    HTML Anfänger
    1. 0
      Auge

Guten Morgen,

ich gestellte gerade meine Seite um, dass sie auch auf Mobilen Geräten gut aussieht. Allerdings ist dieses alles Neuland für mich.

Für meine Texte habe ich eine Schriftgröße von 1.1em definiert dieses sind laut PXtoEM.com 17px. Auf dem Laptop und großen Bildschirm sieht es gut aus.

Nun meine Frage, auf einem Mobilen Gerät muss da die Schrift größer gemacht werden?

  1. @@HTML Anfänger:

    nuqneH

    Nun meine Frage, auf einem Mobilen Gerät muss da die Schrift größer gemacht werden?

    Nein, mit Größen um 1em solltest du bei allen Geräten richtig liegen.

    Sorge dafür, dass die Seite nicht verkleinert wird: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    Qapla'

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

      Nein, mit Größen um 1em solltest du bei allen Geräten richtig liegen.

      Ok, dann kann ich dieses so lassen.

      Sorge dafür, dass die Seite nicht verkleinert wird: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      Sollte ich hier auch dafür sorgen, dass die Seite nicht vergrößert werden kann, ich meine z.B. Bilder können dadurch verpixel rüber kommen.

      1. Om nah hoo pez nyeetz, HTML Anfänger!

        Sollte ich hier auch dafür sorgen, dass die Seite nicht vergrößert werden kann, ich meine z.B. Bilder können dadurch verpixel rüber kommen.

        Nein, du möchtest jedmöglichen Komfort für deine Nutzer erhalten.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Feme und Femen.

        1. Sollte ich hier auch dafür sorgen, dass die Seite nicht vergrößert werden kann, ich meine z.B. Bilder können dadurch verpixel rüber kommen.

          Nein, du möchtest jedmöglichen Komfort für deine Nutzer erhalten.

          Er möchte seine Besucher zudem nicht für dämlich halten. Wenn die beim Vergrößern gruselig vergrößerte Bilder zu sehen bekommen … ja, wo ist da eigentlich das Problem? Dass sie weinend vom Stuhl fallen, weil das so unerwartet war?

          Sollte sich ein Besucher beschweren, dass er vor dieser traumatischen Erfahrung hätte geschützt werden müssen – ich würde keine Vergrößerungssperre einbauen, ich würde diesem Spinner bescheinigen, dass er halt nicht wiederkommen braucht.

          1. Moin,

            Sollte sich ein Besucher beschweren, dass er vor dieser traumatischen Erfahrung hätte geschützt werden müssen – ich würde keine Vergrößerungssperre einbauen, ich würde diesem Spinner bescheinigen, dass er halt nicht wiederkommen braucht.

            Ich möchte nochmals auf dieses hier eingehen:

            Nein, du möchtest jedmöglichen Komfort für deine Nutzer erhalten.

            Das würde für mich aber bedeuten, dass ich die Bilder etwas größer hochlade, dass selbst beim vergrößern der Seite die Bilder noch immer gut und scharf rüber kommen, das ist für mich jedmöglichen Komfort, deshalb war meine Frage auch ernst gemeint.

            1. Hallo,

              Ich möchte nochmals auf dieses hier eingehen:

              Nein, du möchtest jedmöglichen Komfort für deine Nutzer erhalten.
              Das würde für mich aber bedeuten, dass ich die Bilder etwas größer hochlade, dass selbst beim vergrößern der Seite die Bilder noch immer gut und scharf rüber kommen, das ist für mich jedmöglichen Komfort, deshalb war meine Frage auch ernst gemeint.

              kann man so sehen, muss man aber nicht. Jeden Komfort erhalten bedeutet für mich in diesem Zusammenhang: Verhindere nicht das Zoomen. Wenn einer die Anzeige etwas größer haben möchte, bitte sehr. Dass Bilder beim Hochskalieren etwas "matschig" werden (pixelig werden sie selten, dazu skalieren die meisten Browser doch schon zu gut), ist ein normaler Nebeneffekt, den man dann in Kauf nimmt.

              Es kommt natürlich stark darauf an, was das Bild letztendlich darstellt: Ist es eine Ziergrafik, dann kommt's auf Detailschärfe nicht so an; ist es ein Foto, fällt der Effekt eventuell gar nicht auf; ist es eine Liniengrafik, möchte man vielleicht auf SVG ausweichen und hat die Klippe damit auch elegant umschifft.

              Größere Bilder ausliefern, obwohl man weiß, dass die in der Mehrheit der Fälle eh verkleinert angezeigt werden, halte ich jedenfalls nicht für eine gute Idee.

              So long,
               Martin

              --
              Die letzten Worte des Architekten:
              Mir fällt da gerade was ein...
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              1. Größere Bilder ausliefern, obwohl man weiß, dass die in der Mehrheit der Fälle eh verkleinert angezeigt werden, halte ich jedenfalls nicht für eine gute Idee.

                Doch, das kann sinnvoll sein - wenn man es geschickt anstellt. Die Dateigröße muss nicht ansteigen und Retina-Displays profitieren direkt davon, auch ohne Zoom. Gunnars Link beschreibt das gut. Da die Browser mittlerweile gute Interpolationsalgorithmen implentieren, müsste man max. für ältere IE in Kauf nehmen, dass die Runterskalierung optisch nicht mehr ganz so schöne Ergebnisse bringt. Aber selbst denen könnte man mit "ms-interpolation-mode : bicubic" auf die Sprünge helfen...

              2. @@Der Martin:

                nuqneH

                Größere Bilder ausliefern, obwohl man weiß, dass die in der Mehrheit der Fälle eh verkleinert angezeigt werden, halte ich jedenfalls nicht für eine gute Idee.

                Doch, die Idee ist wirlich gut: Retina Revolution, wie ich schon sagte.

                Große Bilder (in Pixel) heißt ja nicht zwangsläufig große Dateien.

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. @@HTML Anfänger:

        nuqneH

        Sollte ich hier auch dafür sorgen, dass die Seite nicht vergrößert werden kann,

        Nein. Nutzer mit Sehschwäche sind auf die Möglichkeit der Vergrößerung angewiesen.

        ich meine z.B. Bilder können dadurch verpixel rüber kommen.

        Protip: Retina Revolution

        Allerdings gibt Estelle Weyl zu bedenken, dass jegliches Skalieren von Bildern Rechenleistung (d.h. Zeit zum Rendern und Akkuverbrauch) kostet. Bei wenigen Bildern sollte das noch kein Problem sein, bei vielen kann es durchaus zu einem werden.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. Hi all - Gunnar,

      Nein, mit Größen um 1em solltest du bei allen Geräten richtig liegen.

      man googelt sich ja durchs Leben :-|
      folgendes ist bei mir hängen geblieben:

      • em ist der Faktor, der sich auf die Größe in pixel bezieht, die beim Elternelement angegeben wurde (zB. im body).
      • vw bezieht sich auf device – Monitor Größe
      • % auf Browsergöße
      • cm ist unabhängig

      korrigiert mich, wenn ich falsch liege ;-)

      Viele Grüße aus LA

      --
      ralphi
      1. @@ralphi:

        nuqneH

        • em ist der Faktor, der sich auf die Größe in pixel bezieht,

        Und zwar auf die Schriftgröße. Und streiche „in pixel“. Vergiss, dass es sowas wie Pixel überhaupt gibt.

        die beim Elternelement angegeben wurde (zB. im body).

        … oder die von einem Vorfahrenelement geerbt wurde.

        • vw bezieht sich auf device – Monitor Größe

        Und zwar auf die Breite. (BTW: weder rechts und links vom Bindestrich noch zwischen „Monitor“ und „Größe“ gehören Leerzeichen hin.)

        • % auf Browsergöße

        Nein. Ebenfalls auf die Größe des Elternelements bzw. eines anderen Vorfahrenelements. Im Gegensatz zu em nicht auf die Schriftgröße, sondern auf die Breite o.a.

        • cm ist unabhängig

        cm ist für die Bildschirmausgabe unbrauchbar. Sicher wird das irgendwie umgesetzt, ich würde mich aber nicht drauf verlassen, dass das über verschiedene Systeme hinweg gleichermaßen geschieht.

        cm könnte bei Druckausgabe sinnvoll sein. So stiefmütterlich, wie diese von Browsern behandelt wird, würde ich mich aber auch da nicht drauf verlassen.

        Qapla'

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

          • em ist der Faktor, der sich auf die Größe in pixel bezieht,

          Und zwar auf die Schriftgröße. Und streiche „in pixel“. Vergiss, dass es sowas wie Pixel überhaupt gibt.

          nun irgendwo muss die Schriftgröße ja mal in Pixel festgelegt werden, auf was sich der Faktor em bezieht?
          Hab noch mal nachgesehen: Im Firefox find ich nur die Möglichkeit der Pixelangabe (Ausgangsschriftgröße).
          Könnte man natürlich (zB. im body) überschreiben.
          Funktioniert auch -> wenn ichs ändere zB. 30px , ändern sich alle em's mit.

          Oder meinst du was anderes?

          Viele Grüße aus LA

          --
          ralphi
          1. @@ralphi:

            nuqneH

            nun irgendwo muss die Schriftgröße ja mal in Pixel festgelegt werden, auf was sich der Faktor em bezieht?

            Ja. Aber das ist für dich als Webentwickler irrelevant. Vergiss einfach, dass Computerbildschirme aus Pixeln bestehen.

            Die Einheit px kann dennoch nützlich sein bei der Angabe von border-width oder der Größe von Bilder, wenn man dise nicht vom Browser skalieren lassen möchte.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. Hi,

          • vw bezieht sich auf device – Monitor Größe

          Und zwar auf die Breite. (BTW: weder rechts und links vom Bindestrich noch zwischen „Monitor“ und „Größe“ gehören Leerzeichen hin.)

          bezieht sich vw wirklich auf die Monitorgröße? Nicht auf den Viewport?
          Dann müßte es doch eher mw heißen ...

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          O o ostern ...
          Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
  2. Guten Abend,

    passt vielleicht nicht ganz zur meiner Frage, möchte aber nicht schon wieder ein Thema eröffnen. Ich möchte meine Seite vom Aufbau wie diese Seite machen:

    http://sicherheitsdienst-sauerland.de/notruf-und-serviceleitstelle.html (hab sie wegen Google nicht verlinkt)

    Meine Frage zum Aufbau ob ich damit richtig liege, wenn ich es wie folgt umsetzte:

      
    <!doctype html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <title>Versuch 1 - Startseite</title>  
    </head>  
      
    <body>  
      
        <header>  
            <div id="logo"></div>  
            <nav>  
                <ul>  
                    <li>Startseite</li>  
                    <li>Punkt 1</li>  
                    <li>Punkt 2</li>  
                    <li>Punkt 3</li>  
                </ul>  
            </nav>  
        </header>  
      
    ^	<main role="main">  
    		  
            <nav>  
            	<li>Unterpunkt 1</li>  
                <li>Unterpunkt 2</li>  
                <li>Unterpunkt 3</li>  
                <li>Unterpunkt 4</li>  
            </nav>  
        	  
            <section id="content">  
            	<header>  
                	<picture><img src="" alt=""></picture>  
                </header>  
                <article>  
                 	<h1>Hier kommt eine Überschrift rein</h1>  
                    <p>Hier kommt der Inhalt rein</p>  
                </article>  
            </section>  
      
    	</main>  
      
        <footer>  
        	  
            <div id="footer-links">  
            	<p>Hier der Inhalt für die linke Box</p>  
            </div>  
            <div id="footer-mitte">  
            	<p>Hier der Inhaöt für die Box in der Mitte</p>  
            </div>  
            <div id="footer-rechts">  
            	<p>Hier der Inhalt für die rechte Box </p>  
            </div>  
      
        </footer>  
      
    </body>  
    </html>  
    
    

    Bin für jeden Tipp und Hilfe dankbar. Jetzt habe ich noch die Möglichkeit es zu ändern. Später wird es schwer, wenn alle Seite fertig sind.

    1. Meine Frage zum Aufbau ob ich damit richtig liege, wenn ich es wie folgt umsetzte:

      <main role="main">

      <nav>
              </nav>
          
              <section id="content">
               <header>
                   <picture><img src="" alt=""></picture>
                  </header>
                  <article>
                    <h1>Hier kommt eine Überschrift rein</h1>
                      <p>Hier kommt der Inhalt rein</p>
                  </article>
              </section>

      </main>

        
      Sieht gut aus, nach dem nu-Validator braucht [section](http://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/section) eine Überschrift, das erreichst Du, indem Du den header vielleicht in h1 oder h2 umbenennst. h2 darf ja auch Bilder enthalten.  
        
      Wenn Du im header eine h1 hast, muss article eine h2 bekommen, sonst passt es so.  
        
      Alternativ könntest Du nav aus main heraus  (und evtl. in header) tun und hättest dann:  
      ~~~html
        
      <nav>  
      </nav>  
        
      <main role="main">  
        <header>  
          <picture><img src="" alt=""></picture>  
        </header>  
        <article>  
          <h1>Hier kommt eine Überschrift rein</h1>  
          <p>Hier kommt der Inhalt rein</p>  
        </article>  
      </main>  
      
      

      LG Matthias

      1. Hallo

        Sieht gut aus, nach dem nu-Validator braucht section eine Überschrift, das erreichst Du, indem Du den header vielleicht in h1 oder h2 umbenennst. h2 darf ja auch Bilder enthalten.

        … wie auch h1, h3, h4, etc. pp.

        Wenn Du im header eine h1 hast, muss article eine h2 bekommen, sonst passt es so.

        Ja, aber warum sollte jeder Artikel sowohl h1 als auch, direkt darauf folgend, h2 haben?

        Wenn die Seite selbst eine h1 als Titel hat, sollte die Überschrift/der Titel eines jeden Artikels eine h2 sein. Dies unbelassen der Diskussion, ob es nicht besser nur noch ein Element für Überschriften gäbe und sich die Struktur durch die bestimmt überall konsequent erfolgende Strukturierung des Dokuments mit den passenden Elementen erfolgen würde.

        Apropos Strukturierung. Bisher habe ich in Beschreibungen immer folgenden Aufbau gesehen, was nicht heißt, dass es nicht anders ginge. Vielleicht ergeben sich da noch andere Sichtweisen.

        Meine Schlussfolgerung aus den Beschreibungen, die ich gelesen habe, war, dass entweder Article benutzt wird und Section dann Kind von Article ist oder, dass Section allein benutzt wird.

        Also

        <header>  
         <h1></h1>  
        </header>  
        <main role="main">  
         <article>  
          <section>  
           <h2></h2>  
          </section>  
          <section>  
           <h2></h2>  
          </section>  
         </article>  
         <article><!-- oder -->  
          <h2></h2>  
          <section>  
           <h3></h3>  
          </section>  
          <section>  
           <h3></h3>  
          </section>  
          <section>  
           <h3></h3>  
          </section>  
         </article>  
        </main>
        

        oder

        <header>  
         <h1></h1>  
        </header>  
        <main role="main">  
         <section>  
          <h2></h2>  
         </section>  
         <section>  
          <h2></h2>  
         </section>  
         <section>  
          <h2></h2>  
         </section>  
         <section>  
          <h2></h2>  
         </section>  
        </main>
        

        Gibt es dafür feste Regeln?

        Und zu guter Letzt, beim Element <picture> sollte man beachten, dass es momentan nur mit Chrome und Opera funktioniert. Zudem ist es nicht sinnvoll angewendet, wenn es nur das Element <img> beïnhaltet. Dann kann es auch weggelassen werden. Sinnvoll ist es in Kombination mit <source>, damit man für verschiedene Auflösungen verschiedene Bilder referenzieren.

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
      2. Moin,

        hab nochmals einen HTML Entwurf gemacht. Laut dem W3 Validator ist dieser auch OK, aber er hat 6 Warnungen, wie Matthias und Auge schon geschrieben haben, benötigt <section> eigentlich eine <h1> Überschrift, ich finde aber leider nichts passendes. Alternativ könnte ich auch eine <h1> einbauen und die mit CSS wieder ausblenden, so wäre auch der Validator glücklich.

          
        <!DOCTYPE html>  
        <html lang="de">  
        <head>  
            <meta charset="UTF-8">  
            <title>Titel der Homepage</title>  
            <meta name="description" content="">  
            <meta name="viewport" content="width=device-width, initial-scale=1">  
        	  
            <!--[if lt IE 9]>  
        	<script src="js/html5shiv.js"></script>  
        	<script src="js/respond.js"></script>  
          	<![endif]-->  
          
        	<link rel="stylesheet" href="css/normalize.css">  
            <link rel="stylesheet" href="css/style.css">  
          
        </head>  
        <body>  
          
            <header>  
        	 	<h1>Name der Seite</h1>  
         	 	<img src="img/logo.png" alt="Logo">  
          	</header>  
          
            <nav>  
            	<ul>  
                    <li>Startseite</li>  
                    <li>News</li>  
                    <li>About</li>  
                    <li>Pictures</li>  
                    <li>Videos</li>  
                    <li>Music</li>  
                    <li>Contact</li>  
                </ul>  
            </nav>  
          
            <main role="main">  
          
            	<section>  
                    <header>  
                        <img src="img/header/1.jpeg" alt="Headerbild - 1">  
                    </header>  
          
                    <article>  
                        <h1>Hier kommt eine Überschrift rein</h1>  
                        <p>Hier kommt der Inhalt rein</p>  
                    </article>  
        		</section>  
          
                <aside>  
                	<section>  
                    	<h1>Newsletter</h1>  
                        <p>Hier kommt das Formluar rein</p>  
                    </section>  
                    <section>  
                    	<h1>Werde Fan auf Facebook</h1>  
                        <p>Hier kommt die Facebook Box rein<p>  
                    </section>  
                </aside>  
          
            </main>  
        	  
            <footer>  
            	<p>Copyright © 2014</p>  
            </footer>  
          
        </body>  
        </html>  
        
        

        Auf einer Webseite habe ich gelesen dass eine Warnung nicht weiter schlimm ist, diese kann man auch überspringen. Hättet ihr vielleicht noch ein Vorschlag, sonst mache ich dieses mit <h1> und blende diese dann einfach aus bzw. lass sie einfach komplett weg.

  3. Guten Abend,

    habe heute den ganzen Tag an der Seite gearbeitet, könnt ihr vielleicht mal kurz drüber schauen, ob ich dieses so lassen kann was das HTML und CSS angeht? Wenn ja dann kann ich damit weiter arbeiten, wenn nicht dann bitte ich um verbesserungsvorschläge.

    Leider ist mir zum Thema Überschrift in der Section noch nichts eingefallen :/

    Hier ein Link zu meiner Live Seite

    1. Om nah hoo pez nyeetz, HTML Anfänger!

      Hier ein Link zu meiner Live Seite

      Deins:

      <section>
                  <article>
                      <h2>Hier kommt eine Überschrift rein</h2>
                      <p>Hier kommt der Inhalt rein</p>
                  </article>
      </section>

      <aside>
               <section>
                   <h2>Newsletter</h2>
                      <p>Hier kommt das Formluar rein</p>
                  </section>
                  <section>
                   <h2>Werde Fan auf Facebook</h2>
                      <p>Hier kommt die Facebook Box rein<p>
                  </section>
              </aside>

        
      Mein Vorschlag:  
      ~~~html
      <article>  
        <h1>Hier kommt eine Überschrift rein</h1>  
        <p>Hier kommt der Inhalt rein</p>  
      </article>  
        
      <aside>  
        <h1>Newsletter</h1>  
        <p>Hier kommt das Formluar rein</p>  
        <h1>Werde Fan auf Facebook</h1>  
        <p>Hier kommt die Facebook Box rein<p>  
      </aside>
      

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Hans und Hansestadt.

      1. Hallo,

        Mein Vorschlag:

        <article>

        <h1>Hier kommt eine Überschrift rein</h1>
          <p>Hier kommt der Inhalt rein</p>
        </article>

        <aside>
          <h1>Newsletter</h1>
          <p>Hier kommt das Formluar rein</p>
          <h1>Werde Fan auf Facebook</h1>
          <p>Hier kommt die Facebook Box rein<p>
        </aside>

          
        Und was mache ich, wenn ich oben mehr als nur ein Artikel drin habe?  
          
        Dann habe ich noch ein Problem, wenn ich mit der Maus über die Navigation fahre, warum geht der Hover über den Rand? :/
        
        1. Om nah hoo pez nyeetz, HTML Anfänger!

          Und was mache ich, wenn ich oben mehr als nur ein Artikel drin habe?

          na noch ein Artikel-Element hineinschreiben.

          Dann habe ich noch ein Problem, wenn ich mit der Maus über die Navigation fahre, warum geht der Hover über den Rand? :/

          Es geht auch sonst über den Rand, nur siehst du es nicht.

          Setze etwa nav ul li a { backround: red; } Der Selektor braucht im Übrigen nicht so spezifisch zu sein, nav li bzw. nav a sollten reichen.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Not und Notar.

          1. Om nah hoo pez nyeetz, Matthias Apsel!

            nav ul li a { backround: red; }

            Korrektur
            nav ul li a { background: red; }
            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Web und Webstuhl.

            1. Hallo Matthias,

              hab eine neue Navigation eingebaut, jetzt sollte es besser sein oder? http://html-anfaenger.bplaced.net/ allerdings habe ich jetzt ein kleines Problem, dass nicht alle Bereiche gleich groß verteilt sind, der letzt läuft etwas aus dem ruder :/

          2. Hallo,

            Es geht auch sonst über den Rand, nur siehst du es nicht.

            Setze etwa nav ul li a { backround: red; } Der Selektor braucht im Übrigen nicht so spezifisch zu sein, nav li bzw. nav a sollten reichen.

            OK, ich habe es mit display:inline-flex; hinbekommen. Allerdings sagt mir caniuse.com diese CSS Eigenschaft gibt es nicht. Chrome hat es aber in den Entwicklertools selber vorgeschlagen. Wird also wohl nur in den Modernen Browsern gehen? Ich sehen schon ist doch mehr Arbeit als angenommen :/

            1. Hallo

              OK, ich habe es mit display:inline-flex; hinbekommen. Allerdings sagt mir caniuse.com diese CSS Eigenschaft gibt es nicht. Chrome hat es aber in den Entwicklertools selber vorgeschlagen. Wird also wohl nur in den Modernen Browsern gehen?

              … oder gar nur im Chrome und wenn es so sein sollte, auch in der danach erscheinenden Opera-Version (weil die die selbe Engine nutzt).

              Ich sehen schon ist doch mehr Arbeit als angenommen :/

              Sieh's als Chance, neues zu lernen.

              Tschö, Auge

              --
              Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
              Terry Pratchett, "Wachen! Wachen!"
              ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
              Veranstaltungsdatenbank Vdb 0.3
      2. Hallo Matthias!

        Mein Vorschlag:

        <article>

        <h1>Hier kommt eine Überschrift rein</h1>
          <p>Hier kommt der Inhalt rein</p>
        </article>

        <aside>
          <h1>Newsletter</h1>
          <p>Hier kommt das Formluar rein</p>
          <h1>Werde Fan auf Facebook</h1>
          <p>Hier kommt die Facebook Box rein<p>
        </aside>

          
        Aus Gründen der Accessibility aber H2-Elemente anstatt der H1.  
        Aufgrund mangelnder Fähigkeiten der Screenreader wird das aktuell ja so vom W3C Validator empfohlen, sprich es sollte auf jeder Seite nur genau ein H1-Element geben, welches den Seitentitel zum Inhalt hat.  
          
        @HTML Anfänger: Eine öffentlich zugängliche Seite, deren Links "Contact" und "Impressum" einen 404er als Antwort liefern, können über kurz oder lang teuer werden ...!  
          
        Außerdem interessiert dich vielleicht auch [Framing – Einbetten von Youtube-Videos alltägliche, millionenfache Urheberrechtsverletzung?](http://www.lhr-law.de/magazin/framing-einbetten-von-youtube-videos-alltagliche-millionenfache-urheberrechtsverletzung)  
          
          
        Gruß  
        Gunther
        
        1. Hallo,

          Außerdem interessiert dich vielleicht auch Framing – Einbetten von Youtube-Videos alltägliche, millionenfache Urheberrechtsverletzung?

          Zu diesem Thema gibt es eine Grundsatzentscheidung des EuGH. Mehr dazu auch hier: https://www.youtube.com/watch?v=qtoyUlYpsaU&list=UUb5TfGtSgvNPVPQawfCFuAw davor muss man also keine Angst mehr haben.

          Zum Thema Impressum, diese Seite ist nur eine Demo Seite, da hier immer wieder geschrieben wird, zeig die Seite dann können wir dieses besser beurteilen. Außerdem ist das eine rein private Seite, da ist ein Impressum nicht nötig. Ich werde die Seite aber in den nächsten Stunden sollte ich mit meiner Navigation weiter gekommen sein wieder löschen.

          1. Hallo HTML Anfänger!

            Außerdem interessiert dich vielleicht auch Framing – Einbetten von Youtube-Videos alltägliche, millionenfache Urheberrechtsverletzung?

            Zu diesem Thema gibt es eine Grundsatzentscheidung des EuGH. Mehr dazu auch hier: https://www.youtube.com/watch?v=qtoyUlYpsaU&list=UUb5TfGtSgvNPVPQawfCFuAw davor muss man also keine Angst mehr haben.

            Ah, ist man gar nicht gewohnt, dass Gerichte so schnell sind ...! ;-)
            Das Urteil vom EuGH war mir bis jetzt noch nicht untergekommen - danke für den Hinweis!

            Zum Thema Impressum, diese Seite ist nur eine Demo Seite,

            Das ist aufgrund des Fehlens eines entsprechenden Hinweises aber nicht erkennbar.

            da hier immer wieder geschrieben wird, zeig die Seite dann können wir dieses besser beurteilen.

            Das ist ja auch richtig, aber s.o.!

            Außerdem ist das eine rein private Seite, da ist ein Impressum nicht nötig.

            Das hat schon so mancher Seitenbetreiber angenommen, und musste hinterher Lehrgeld bezahlen.
            De facto kannst du in Deutschland mal davon ausgehen, dass eine frei zugängliche Seite (also ohne Zugangsbeschränkung) im Zweifelsfall eher nicht als "rein privat" angesehen wird.

            Ich werde die Seite aber in den nächsten Stunden sollte ich mit meiner Navigation weiter gekommen sein wieder löschen.

            Was ja nicht nötig ist, nur solltest du dann eben die entsprechenden Punkte korrigieren. ;-)

            Gruß
            Gunther

            1. Hallo Gunther,

              Außerdem ist das eine rein private Seite, da ist ein Impressum nicht nötig.

              Das hat schon so mancher Seitenbetreiber angenommen, und musste hinterher Lehrgeld bezahlen.
              De facto kannst du in Deutschland mal davon ausgehen, dass eine frei zugängliche Seite (also ohne Zugangsbeschränkung) im Zweifelsfall eher nicht als "rein privat" angesehen wird.

              Ok, dann werde ich das später beim nächsten Update ändern, so dass die Seite da sind mit einem Hinweis :) Danke dir dafür.

              Ah, ist man gar nicht gewohnt, dass Gerichte so schnell sind ...! ;-)

              Da hatte bestimmt Google die Finger mit im Spiel :)

  4. Hallo,

    ich habe mal etwas Demo Inhalt eingefügt, klappt soweit auch ganz gut nur die rechte Box spielt einfach nicht mit, diese sollte immer oben angedockt werden, wie auch auf der Startseite, wie kann ich dieses erreichen?

    http://html-anfaenger.bplaced.net/videos.html

    1. Om nah hoo pez nyeetz, HTML Anfänger!

      ich habe mal etwas Demo Inhalt eingefügt, klappt soweit auch ganz gut nur die rechte Box spielt einfach nicht mit, diese sollte immer oben angedockt werden, wie auch auf der Startseite, wie kann ich dieses erreichen?

      http://html-anfaenger.bplaced.net/videos.html

      Definiere „rechte box“

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rat und Ratatouille.

      1. Hallo,

        http://html-anfaenger.bplaced.net/videos.html

        Definiere „rechte box“

        Damit meine ich die Box "Newsletter - Zum Newsletter anmelden" sowie die "Icons" die sind im HTML "<aside>> rechts neben dem Content, derzeit hängt die irgendwo in der Mitte :/

        1. Om nah hoo pez nyeetz, HTML Anfänger!

          Ein Vorschlag:

          main  { display: table; }  
            
          aside { display: table-cell; }
          

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mink und Minkowski-Diagramm.

          1. Hallo,

            OK, habe ich gemacht. Funktioniert auch fast. nun bekomme ich keinen Abstand mehr nach oben, wollte dieses so umsetzten:

              
            aside{  
            	display: table-cell;  
            	margin-top:2em;  
            	width:23%;  
            	padding:0 0 0 1.5em;  
            	border-left:1px solid #d3d3d3;  
            	font-size:0.9em;  
            }  
            
            
            1. Om nah hoo pez nyeetz, HTML Anfänger!

              margin wirkt nicht auf Elemente mit display: table-cell.

              Gib dem Inhalt von Aside ein entsprechendes margin.

              Matthias

              --
              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bar und Barsch.

              1. Hallo,

                sorry wenn ich heute etwas viel frage oder euch auf die Nerven gehe, hätte noch eine kleine Frage. Ist es möglich dass ich unter jedem „aktiven“ Navigationslink ein Pfeil nach unten anzeige lasse? Vielleicht sogar ohne Grafiken?

                Mein aktueller Stand findet ihr hier http://html-anfaenger.bplaced.net/videos.html

                Ich dachte in etwa an so etwas:

                http://img5.fotos-hochladen.net/uploads/navbildtbkn9m2l7o.png

  5. Guten Abend,

    ich wollte gerade die http://fortawesome.github.io/Font-Awesome/icon/calendar/ einbinden bzw. habe dieses auch gemacht. Aber leider sehe ich auf meiner Test Seite nur ein Kasten ohne Icons. An was könnte dieses liegen?

    http://html-anfaenger.bplaced.net/dates.html

    Auf der Seite wird zwar gesagt ich muss es mit einem <i> einbinden allerdings habe ich auf einem Youtube Video gesehen, dass ich es auch mit einem <span> machen kann, da <i> für etwas anderes steht.

    Vielleicht seht ihr ja den Fehler.

    1. Om nah hoo pez nyeetz, HTML Anfänger!

      ich wollte gerade die http://fortawesome.github.io/Font-Awesome/icon/calendar/ einbinden bzw. habe dieses auch gemacht. Aber leider sehe ich auf meiner Test Seite nur ein Kasten ohne Icons. An was könnte dieses liegen?

      http://html-anfaenger.bplaced.net/dates.html

      Auf der Seite wird zwar gesagt ich muss es mit einem <i> einbinden allerdings habe ich auf einem Youtube Video gesehen, dass ich es auch mit einem <span> machen kann, da <i> für etwas anderes steht.

      Du hast das CSS angepasst, wenn du span statt i verwendest?

      http://wiki.selfhtml.org/wiki/@font-face - 2. Achtung

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Nickel und Nickelodeon.

      1. Hallo,

        Du hast das CSS angepasst, wenn du span statt i verwendest?

        nein habe ich nicht. Muss man auch nicht laut Video. Einfach runter laden und entweder mit <i> oder <span> einbauen.

        1. Hallo,

          es geht nun. Der Link vom Matthias hat mir weiter geholfen. Ich musste den Pfad anpassen, da meine Dateien in verschiedenen Ordnern liegen.

  6. Hallo,

    ich habe nochmals eine Frage zu meiner Seite http://html-anfaenger.bplaced.net/dates.html ist die Schrift im Conten zu groß? Irgendwie kommt es mir alles so wuchtig vor :/ ich habe diese allerdings auf 1em. Was sagt ihr dazu?

    1. Hallo

      ich habe nochmals eine Frage zu meiner Seite http://html-anfaenger.bplaced.net/dates.html ist die Schrift im Conten zu groß? Irgendwie kommt es mir alles so wuchtig vor :/ ich habe diese allerdings auf 1em.

      Tja, wenn du es auf 1em eingestellt hast, dann kannst du davon ausgehen, dass es in den Browsern der Benutzer unterschiedlich aussehen kann, weil die Größe von der im Browser eingestellten Standardschriftgröße abhängt. Die meisten Nutzer verändern diese nicht und geben auch keine Mindestschriftgröße an, einige tun es jedoch, womit die Größe variiert.

      Da 1em der voreingestellten Schriftgröße entspricht, darfst du aber davon ausgehen, dass die Seite in der „vor Ort“ normalen Schriftgröße ausgegeben wird.

      Was sagt ihr dazu?

      Für mich sieht's, wie oben schon angedeutet, normal aus.

      Tschö, Auge

      --
      Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
      Terry Pratchett, "Wachen! Wachen!"
      ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
      Veranstaltungsdatenbank Vdb 0.3