Beiträge von MrMurphy

Hallo

Zitat

Wo krieg ich denn kleine Deutsch und Englisch Flaggen her?

Am besten nirgends.

Flaggen respräsentieren Länder und keine Sprachen. Es ist eine Unart und sachlich falsch Flaggen zu einer Sprachauswahl zu verwenden.

Zumal häufig mit Flaggen zur Sprachauswahl negative Gefühle / Emotionen in Ländern ausgelöst werden, denen die Sprache aufgezwungen wurde. Stichwort: Kolonien.

Zudem: Welche Flagge soll für welche Sprache stehen? Das Land mit den meisten Einwohnern? Warum für Deutsch nicht die österreichische oder die schweizer Flagge? Warum für englisch dann nicht die US-Flagge? Die haben schließlich mehr Einwohner als England. Und meinst du mit englischer Flagge wirklich die englische - oder doch die viel bekanntere von Vereinigten Königreich? Wobei einige Mitglieder des Vereinigten Königreichs überhaupt keine begeisterten Mitglieder (mehr) sind.

Nur durch die Auswahl von bestimmten Flaggen als Sprachauswahl zeigst du vielen Menschen gegenüber also direkt ein gewisse Arroganz, Gedankenlosigkeit und Rücksichtslosigkeit. Und das nur weil du deine Seite dadurch etwas schöner findest. Ein Einladung deine Seite zu besuchen ist das nicht.

Der einzig richtige Weg zur Sprachauswahl ist deshalb die Sprachen in ihrer Schreibweise auszuschreiben. In deinem Fall also deutsch und english. Für französisch dann français oder für italienisch dann italiano.

Siehe zum Beispiel auch

http://gregor-moellring.de/anleitungen/fl…s-sprachsymbol/

oder

http://bittersmann.de/articles/no-flags/article.de

oder

http://www.btitze.net/flaggen_vs_sprachen.html

Gruss

MrMurphy

Hallo

Zitat

und war eigentlich der Meinung, dass datetime ein Datum und ne Uhrzeit verlangt

Genau. Mit datetime kann nur ein bestimmter Zeitpunkt angegeben werden. Aber keine Zeiträume. Und zwar als Datum

datetime="2017-10-02"

als Zeitpunkt

datetime="17:01"
datetime="17:01:04"

oder als Kombination von Datum und Zeitpunkt

datetime="2011-11-18T15:00"

Und für die Besserwisser: Es können auch Sekunden, Sekundenbruchteile und Zeitzonen im vorgeschriebenen Format angegeben werden.

Die Beispiele, die du erwischt hast, sind also falsch. Das kannst du auch prüfen, indem du die Beispiele direkt validieren lässt. Die Fehlermeldung des Validators ist also berechtigt.

Zitat

Wie gebe ich denn Öffnungszeiten korrekt an?

In HTML gibt es dafür keine speziellen Elemente oder Vorschriften. Am sinnvollsten ist eine dl-Liste.

Für eine genauere Bestimmung bleiben also nur die Microdaten. Die Anleitung in schema.org hast du bereits gefunden.

Gruss

MrMurphy

Hallo

Zitat

Ich habe es denke ich aber genau so gemahct wie hier http://schema.org/openingHours beschrieben....

Nö.

datetime kommt im Beispiel überhaupt nicht vor und hat mit itemprop nichts zu tun.

datetime ist ein html-Attribut und muss deshalb den html-Regeln entsprechen. Da kannst du nicht einfach beliebigen Text hineinschreiben.

Gruss

MrMurphy

Hallo

Zitat

muss dann die Dateiendung .php werden

Ja.

Zitat

oder kann es bei .html bleiben?

Nein.

Soweit zur Praxis.

Es hängt im Endeffekt von den Einstellungen des Webservers des Providers ab, auf die man in der Regel keinen Einfluß hat.

Wer einen eigenen Webserver aufsetzt hat meist Zugriff auf alle Einstellungen und kann das natürlich ändern. Dann können auch PHP-Befehle in Dateien mit den Endung html ausgeführt werden.

Gruss

MrMurphy

Hallo

Die Seite ist leider sehr unsinnig erstellt worden. Dass der Doctype fehlt ist noch das geringste Problem.

Eine Webseite sollte zunächst mit passenden HTML-Elementen erstellt werden.

Dann wird die Webseite mit CSS gestaltet.

Zum Schluß werden mittels JavaScript noch fehlende Funktionen hinzugefügt und ausnahmsweise CSS-Anweisungen überschrieben, falls die Darstellung sich dadurch entscheidend verbessern lässt. Bei dem gezeigten Layout sehe ich keinen Grund für solche Ausnahme.

Bei der aktuellen Webseite ist das CSS-Layout Schrott und wird mittels JavaScript wieder halbwegs zurechtgerückt. Das funktioniert in der Praxis jedoch nicht und bereitet bei jeder Änderung Probleme.

Ansicht mit JavaScript:

Mit JavaScript

Ansicht ohne JavaScript:

Ohne JavaScript

Deshalb sollte die Seite komplett neu erstellt werden. Das Layout sollte nur mittels CSS gestaltet werden.

Auf position-Angaben sollte dabei verzichtet werden, speziell position: absolute. Gleiches gilt für height-Angaben. Regel: Die Höhe von Elementen richtet sich nach ihrem Inhalt.

Gruss

MrMurphy

Hallo

Die Prefexie für Flexbox sind schon lange nicht mehr erforderlich.

Zitat

aber ich hab schon nicht verstanden, warum sie unterhalb des Textes angezeigt werden,

Bei mir werden die Symbole dann gar nicht angezeigt.

Zitat

Ich hab die Spalten wie oben beschrieben gemacht. In den Spalten möchte ich gerne downloads zu Verfügung stellen. Da das sowohl als pdf als auch in office-Formaten der Fall sein soll hab ich mir kleine Icons gebastelt, die hinter dem Text erscheinen sollen und dann als Link funktionieren sollen.

Dann solltest du die Bilder nicht als Hintergrundgrafiken einbinden, sondern mittels img-Elements. Flexbox ist dann auch falsch.

Zudem ist es schlechter Stil nur kleine Symbole zum Anklicken / Antouchen anzubieten. Nicht Jeder kann die Maus so zielsicher wie du verwenden. Du kannst die Links zum Beispiel benutzerfreundlicher als Buttons mit mehr Inhalt gestalten. Platz gibt es auf Webseiten schließlich ohne Ende.

Gruss

MrMurphy

Hallo

Zitat

Warum sollte das nicht gehen?

Bitte meinen Text nicht aus dem Zusammenhang reißen:

Zitat

Als Bootstrap-Panel geht das nicht. Dafür ist ein Panel nicht gedacht.

Oder du musst mit CSS nachhelfen.

Ich bin davon ausgegangen, das Germanikus grade kein CSS verwenden möchte, sondern nur die Bootstrapklassen. Mit CSS ist das natürlich kein Problem.

Gruss

MrMurphy

Hallo

Als Bootstrap-Panel geht das nicht. Dafür ist ein Panel nicht gedacht.

Oder du musst mit CSS nachhelfen.

Gruss

MrMurphy

Hallo

Da liegt wohl ein Mißverständnis von dir vor.

HTML kann nicht automatisch Texte übersetzen. Durch das lang-Attribut teilst du nur mit in welcher Sprache der Text weitergeht. Den in deinem Beispiel englischen Text musst du schon selbst eintippen.

Dadurch können Programme wie Suchmaschinen oder Screenreader den Text besser auswerten. An der Darstellung im Browser ändert das lang-Attribut hingegen nichts.

Gruss

MrMurphy

Hallo

Zitat

Der ie hält weder Abstand noch macht er die Rahmen hin sondern zerhaut die irgendwie.

Du meinst wahrscheinlich den IE11.

Der kennt das main-Element nicht. Deshalb solltest du das main-Element zu Beginn der CSS-Angaben als Blockelement bestimmen.

Was du mit Flexbox für Probleme hast kann ich nicht nachvollziehen.

Gruss

MrMurphy

Hallo

Zitat

Wegen dem Problem mit dem ie mach ich mal ein Bild, da wäre ein Hinweis sehr lieb.

Der Hinweis kam doch bereits: Float sinnvoll anwenden.

Zitat

Mit Flexbox müsste ich dann einen umschließenden Container haben

Ein umschließender Container kann für Float und Flexbox aus vollkommen unterschiedlichen Gründen sinnvoll sein, ist aber in beiden Fällen nicht unbedingt notwendig. Bei deiner Beispielseite würde ich keinen extra umschließenden Container für die drei section-Elemente verwenden. Das kommt letztendlich auf die endgültige Seite mit dem kompletten Inhalt an.

Gruss

MrMurphy

Hallo

Zitat

Wie gesagt, ich habs nun mit display:table gelöst.

Das kannst du machen. Die Lösung kommt aber wahrscheinlich an ihre Grenzen, wenn du dein Layout responsive gestalten willst.

Vor Flexbox gab es keine spezielle Möglichkeit Spaltenlayouts zu erstellen. Float wurde deshalb häufig dafür mißbraucht. Deshalb findet man dazu auch noch viele Anleitungen im Netz, die aber bereits seit einigen Jahren veraltet sind.

Zitat

Mit Float habe ich aber immer das Problem, dass der gefloatete Conainer nicht auf der Ebene ist, wo ihn gerne hätte.

Indirekt.

Wie schon geschrieben sollten alle nebeneinander stehenden Container eine Breite bekommen und immer in die gleiche Richtung floaten. Das hat sich am praxisgerechtesten erwiesen. Noch sinnvoller ist heutzutage Flexbox.

Zitat

damit meine ich wo auf der Seite sie beginnen

Jetzt verstehe ich (glaube ich zumindest). Die Überschriften beginnen nicht auf gleicher Höhe.

Das hat zwei Ursachen.

Zum einen wird die linke Box gefloatet, die mittlere nicht. (Also nebenbei wieder ein Grund alle nebeneinanderliegenen Container gleich zu behandeln).

Die zweite Ursache sind die sogenannten Collapsing Margins. Bei der linken gefloateten Box sind die Collapsing Margins durch das Float ausgehebelt, bei der mittleren ohne Float kommen sie zum Tragen.

Bei der Erstellung einer Seite ist es häufig hilfreich Containern und anderen wichtigen Elementen unterschiedliche Hintergrundfarben zu geben um ihre Größe besser erkennen zu können.

Gruss

MrMurphy

Hallo

Im CSS hast du bei spaltemitte den führenden Punkt vergessen. Das ist aber nicht das Problem.

Zum einen benutzt (mißbrauchst) du Float, obwohl es für solche Layoutaufgaben nie gedacht ist. Float dient dazu Text andere Elemente (meist Bilder) umfließen zu lassen.

Zum anderen benutzt du Float ohne es verstanden zu haben.

Damit die drei Spalten nebeneinander stehen solltest du allen Breiten (width) auf den Weg geben. Also zum Beispiel denen außen jeweils 33% und der mittleren 34%. Und dann alle drei in die gleiche Richtung floaten, sinnvollerweise nach links.

Zitat

aber das 2. Div ist höher als das erste

Die Höhe von Elementen wird von ihrem Inhalt bestimmt. Das zweite div div hat mehr Inhalt. Daran ändert auch float nichts.

Zitat

der Internet-Explorer zerschmeißt mir bei den Design im Main IMMER die Rahmen und margin und padding

Das lässt sich ohne Beispiel nicht nachvollziehen. Wahrscheinlich berechnest du die Breiten falsch, Stichwort: Box-Modell.

Zitat

Bezüglich des drei-Spalten-Designs möchte ich gerne etwas dazu lernen.

Dann beschäftigst du dich am Besten mit Flexbox. Das wurde speziell für solche Layoutwünsche entwickelt und kann so ganz nebenbei für die gleiche Höhe von nebeneinanderliegenden Spalten sorgen.

Zitat

der Internet-Explorer zerschmeißt mir bei den Design im Main IMMER die Rahmen und margin und padding

Nachtrag:

Ich habe grade gesehen: In deinem geposteten Beispiel liegt das an der falschen Anwendung von float / clear. Wie schon geschrieben solltest du darauf eh' verzichten.

Trotzdem mal drei Seiten mit Hintergrundinformationen zu Float:

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

und

http://www.thestyleworks.de/basics/float-rule.shtml

und

http://little-boxes.de/lb1/IV-css-positionierung.html

Gruss

MrMurphy

Hallo

Du musst zunächst die vielen sachlichen Fehler im Quelltext beseitigen. Geh deinen Quelltext einfach mal durch.

Dabei kannst du auch gleich ein paar "Schönheitsfehler" beseitigen. Damit meine ich Schreibweisen, die zwar zulässig sind, sich in der Praxis jedoch als problematisch erwiesen haben.

Vorher ist es eher sinnlos sich mit der Problemlösung zu beschäftigen.

Nachtrag: Ich habe grade gesehen dass der Link wohl "Shop" sein soll. Dann kannst du zu dem HTML

<div class="shop">
   <a href="">Shop</a>
</div>

das CSS verwenden:

.shop {
   background-image: url(http://lorempixel.com/180/90/nature/2);
   width: 180px;
   height: 90px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.shop a {
   color: white;
   font-size: 2rem;
}

Gruss

MrMurphy

Hallo Gunni

Meinst du so:

Flexible Grafik mit Text

Gruss

MrMurphy

Hallo

Zitat

Schrift haben wir lange nach gesucht und wollen wir nicht mehr ändern

Das ist das Hauptproblem. Du willst Besucher / Kunden, machst die Seite aber für dich. Das kann nicht funktionieren.

Dabei hast du vollkommen falsche Vorstellungen was die Besucher erwarten. Deshalb ist es leider auch sehr schwierig dir zu helfen.

Selbst für Personen ohne Sehschwierigkeiten ist es äußerst anstrengend deine Texte zu lesen. Zum einen vom fehlenden Kontrast her, aber auch von der Schriftart. Durch das nur langsam mögliche Lesen stiehlst du deinen Besuchern zudem Zeit. So etwas nervt einen als Besucher. Und die sind dann ganz schnell wieder weg.

Und das ist nur der Beginn der notwendigen Verbesserungen, gegen die du dich sträubst.

Zitat

SEO mosert

Vergiß solche Tests. Du hast weniger Arbeit und mehr Erfolg, wenn du die Seite nach den aktuellen Regeln von HTML und CSS erstellst.

Gruss

MrMurphy

Hallo

Es gibt offensichtlich viele Seiten die sich mit dem Thema beschäftigen.

Deshalb etwas provokant, aber dennoch mit ernstem Hintergrund gefragt:

Mit welcher Berechtigung sollte deine Website vor den anderen gelistet werden?

Deine Website handelt nur von deinem Hobby und damit von dir. Solche Seiten interessieren niemanden.

Das erkennt Google am Aufbau deiner Seite. Bei einer aktuellen Seite mit Informationen (dass sind die, die vorne gelistet werden) ist die Struktur eine andere.

Um von Google weiter vorne gelistet zu werden hast du zwei Möglichkeiten:

Du betreibst intensives SEO mit der "Gefahr" von Google wieder rausgekickt zu werden. Du schiebst deine Seite also künstlich und damit ungerechtfertigt nach oben. Google mag es nämlich überhaupt nicht, wenn Websites ohne Informationen ungerechtfertigt vorne gelistet werden, da ihre Kunden mit solchen Suchergebnissen unzufrieden sind und abspringen.

Oder du besorgst noch Informationen und erstellst deinen Quelltext nach den aktuellen HTML/CSS Regeln. Das CSS wird von Google zwar bislang nur am Rande berücksichtigt, das wollen die zukünftig aber ändern. Das CSS soll stärker berücksichtigt werden. Damit kannst du dann auch langfristig ohne Gefahr, von Google rausgekickt zu werden, vorne stehen.

Bilder sind für Google zum Beispiel keine Informationen. Der Text aus deinem header-Bild ist für Google nicht vorhanden und wird nicht zu einer besseren Wertung herangezogen. Der Text "Norwegische Waldkatze" taucht zum Beispiel auf deiner Startseite für Google überhaupt nicht auf. Wieso sollte Google die Seite deshalb bei so einem Suchbegriff auflisten?

Gruss

MrMurphy

Hallo

Ich selber verwende Font-Awesome (werden von Bootstrap unterstützt) statt Genericons (werden von Word-Press unterstützt). Die Anwendung ist aber ähnlich.

Für Genericons siehe zum Beispiel

https://www.elmastudio.de/

oder

https://www.drweb.de/

oder

https://www.vladimir-simovic.de/

Gruss

MrMurphy

Hallo

Zitat

Da die Zielgruppe jedoch die Opa-Generation ist, gehe ich mal davon aus, das eine große Anzahl der pot. User noch ältere Browser im Einsatz haben.

Mal abgesehen davon, dass es überhaupt keine Zielgruppen gibt:

Wenn ich so einen Unsinn lese kriege ich einen dicken Hals. Das ist schlicht eine Falschinformation. Grade die ältere Generation hat das Geld und die Lust sich aktuelle Geräte zu kaufen.

Seltsamerweise kommt diese Falschinfo immer von Personen, die sich offensichtlich vor aktuellen HTML-/CSS-Entwicklungen drücken wollen, auch wenn diese bereits seit Jahren problemlos verwendet werden können.

Gruss

MrMurphy

Hallo

Dein Vorgehen entspricht nicht mehr dem Stand der HTML-Technik.

Ich würde folgendermaßen vorgehen. Zu folgendem HTML-Quelltext

<footer class="pagefooter">
      <nav>
         <div>
            <a href="" class="sie-sind-hier">Home</a>
            <a href="">Schmalfilm</a>
            <a href="">Feinschliff</a>
            <a href="">Technik</a>
            <a href="">M - Disk</a>
            <a href="">Video</a>
         </div>
         <div>
            <a href="">Dias</a>
            <a href="">Tonkassette</a>
            <a href="">Tonband</a>
            <a href="">Schallplatte</a>
            <a href="">Service</a>
            <a href="">Über uns</a>
         </div>
         <div>
            <a href="">AGB</a>
            <a href="">Kundenstimmen</a>
            <a href="">Impressum</a>
            <a href="">Links</a>
         </div>
      </nav>
   </footer>

das folgende Grund-CSS:

/*.pagefooter nav - Flexbox*/
   @media all {
      .pagefooter nav a {
         display: block;
      }
   }
   @media only screen and (min-width: 600px) {
      .pagefooter nav div {
         display: flex;
         flex-wrap: wrap;
      }
      .pagefooter nav a {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(50% - 0.6rem - 6px - 0.6rem);
      }
   }
   @media only screen and (min-width: 1000px) {
      .pagefooter nav a {
         flex-basis: 1px;
      }
   }

Die weitere Gestaltung ( Abstände, Farben, ... ) geschieht dann ganz normal über CSS.

Eine Beispielseite könnte dann folgendermaßen aussehen:

Beispielseite für Navigation

Gruss

MrMurphy