Beiträge von MrMurphy

  • Offene Fragen bezüglich HTML5 und CSS3

    Hallo

    Vorweg: Das Verständnis deiner Fragen erfordert teilweise intensives Hintergrundwissen. Das alles zu erklären füllt bereits ein Buch und sprengt damit den Rahmen eines Forums. Deshalb kann ich die Fragen "nur" fundiert beantworten.

    Code
    *
{
    margin:0;
    padding:0;
}

    Diese Angabe war, ist und bleibt unsinnig. Also komplett weglassen.

    Zitat

    Darf dies überhaupt so umgesetzt werden?

    Der Rest - ja.

    Zitat

    Mein Bild hat eine Höhe von 91px und eine Breite von 251px. Die Höhe von 150px wird mit der Hintergrundfarbe: hsla ausgefüllt.

    Alle Bilder sollten auf die Größe gebracht werden, mit der sie maximal angezeigt werden. Die Größe per CSS anzupassen hat sich als problematisch erwiesen und ist benutzerunfreundlich.

    Zitat

    Sollte überhaupt noch eine alternative Farbe gewählt werden bezüglich unterstützung von Browser, genau gesagt werden überhaupt noch alte Browser häufig genutzt?

    Ja. Dabei geht es aber nicht um die Browserunterstützung sondern den Fall, dass das Bild (aus welchen Gründen auch immer) nicht aufgerufen werden kann.

    Zitat

    Ich habe keine Breite mitgegeben ist dies überhaupt erfoderlich

    Nein. Überhaupt sollten alle unnötigen CSS-Angaben weggelassen werden.

    Zitat

    Wie darf dies eigentlich genutzt werden?

    Die Frage lässt sich nicht konkret beantworten: Deine Seite, deine Entscheidung.

    Anders sieht es aus, wenn du dich an die HTML- und CSS-Regel halten willst. Da ist der header-Element für bestimmte Angaben vorgesehen. Nachzulesen zum Beispiel bei

    https://html.spec.whatwg.org/multipage/sect…-header-element

    Ein header-Element muss aber nicht immer "oben" auf der Seite angezeigt werden. Genau wie ein footer-Element nicht immer unten angezeigt werden muss.

    Das header-Element kann und darf auch mehrfach auf einer Seite vorkommen, im Gegensatz zum Beispiel zum body- oder main-Element.

    Zitat

    Ist ein <p> tag erforderlich?

    Nach den HTML-Regeln: Ja. Text (und auch anderer Inhalt) darf sich nur im bestimmten Elementen befinden, wie zum Beispiel p, li, dt, dd, td und so weiter. Damit ist

    Code
    <header> <p> Test </p> </header>

    korrekt und sinnvoll.

    Zitat

    alle 3 Boxen mit <section> </section> oder doch besser mit <div>

    Das kommt ausschließlich auf den Inhalt an. Allgemein läßt sich die Frage schlicht nicht beantworten. Die HTML-Regel schreiben fest, das jeweils das passenste Element zu verwenden ist. Da das div-Element das allgemeinste (ich weiß - schlechtes Deutsch) ist, darf es nach den HTML-Regeln nur verwendet werden, wenn es keine anderen für den Inhalt vorgesehenen Elemente gibt. Auf deiner Seite kannst du es halten wie du willst.

    Zitat

    Sollten alle dargestellten Elemente mit div umgesetzt werden oder können es auch die neuen HTML5 Elemente sein?

    Es sollten sogar die aktuellen HTML5-Elemente verwendet werden. Wer heutzutage noch mit irgendwelchen Browserinkompatibilitäten kommt hat die Entwicklung der letzten 6, 7 Jahre schlicht verschlafen.

    Zitat

    Brauche eine vertrauensvolle Quelle wo ich nachlesen kann welche CSS Befehle, HTML5 Befehle bei welchen Browser unterstützt werden.


    Da hat sich "Can I Use" bewährt:

    http://www.caniuse.com/

    Zitat

    Kennt jemand eine Software oder Tool wo man seine Seite am besten offline bei allen wichtigen Browsern testen kann (auch bei alten Browsern, neuen Browsern)?


    Webseiten sollten nur auf Originalgeräten und mit Originalbrowsern getestet werden. Alles andere ist nur Augenwischerei.

    Zitat

    Wenn es um die Handyoptimierung geht an welche Handys sollte man sich den richten? (Statistiken)?

    Webseiten werden nicht nach Endgeräten erstellt. Das auch nur zu versuchen hat sich als Sackgasse erwiesen. Am sinnvollsten hat sich die Anzeige schlicht nach der Fenstergröße, hauptsächlich der Fensterbreite erwiesen.

    Gruss

    MrMurphy

  • Beitragsseite mit HTML erstellen - geht das?

    Hallo

    Ja, das erfordert aber neben Kenntnissen in HTML und CSS Wissen über JavaScript, PHP und Datenbanken.

    So etwas selbst erstellen zu wollen ist in der Regel unsinnig.

    Schau dich mal nach Content Management Systeme (CMS) wie zum Beispiel Joomla um. Die sind in der Regel sogar kostenfrei.

    Oder du erstellst und verwaltest jede Seiten einzeln. Mit jeder zusätzlichen Seite wächst der Zeitaufwand aber erfahrungsgemäß extrem. Deshalb sterben solche Projekte meist wenn 15, 20 oder mehr Seiten benötigt werden, da immer mehr Links erstellt und bestehende angepasst werden müssen.

    Gruss

    MrMurphy

  • Checkox stylen

    Hallo

    Formularelemente sind mit der Idee entwickelt worden, dass ihr Aussehen / ihr Layout sich dem Betriebssystem / dem Browsers anpassen sollen. Entsprechend gibt es für die recht wenige Anpassungsmöglichkeiten und es muss viel mit Tricks gearbeitet werden, grade bei Checkboxen und Radiobuttons.

    Häufig werden die ausgeblendet und durch UTF-8-Zeichen, Grafiken oder Icon-Fonts ersetzt.

    Gruss

    MrMurphy

  • HTML-Fehler - woran liegt es

    Hallo

    Der Text steht zum großen Teil direkt in div-Containern. Das ist schlechter Stil und führt immer wieder zu Problemen.

    Text gehört nur in dafür vorgesehene Container wie p, li, dt, dd, td und ähnliche. Damit lassen sich solche Probleme vermeiden.

    Gruss

    MrMurphy

  • Wieso gibt es bei einigen HTML-Elementen keine schließenden Tags?

    Hallo

    Weil die keinen Inhalt im herkömmlichen Sinn haben, der eins zu eins angezeigt wird und schließende Tags damit überflüssig sind. Sie lösen nur Aktionen aus oder stellen Informationen für andere Software, zum Beispiel Suchmaschinen, zur Verfügung.

    Der "Inhalt" solcher Elemente befindet sich in der Regel in Attributen, die sich innerhalb des öffnenden Tags befinden, so dass sich das schließende Tag immer direkt anschließen würde. Dann kann man es auch gleich ganz weglassen.

  • Grafik Fragen, Zentrieren

    Hallo

    Zitat

    Ist es üblich, dass man bei Grafiksachen SVG-Dateien hochlädt?

    Das läßt sich so nicht beantworten. Man schaut welches Grafikformat für das Bild am geeignetsten ist und lädt die Grafik dann hoch.

    Welches Grafikformat wann am geeignetesten ist läßt sich leider auch nicht einfach sagen. Man muss halt alle kennen, dann kann man entscheiden.

    Für Fotos ist das in der Regel jpg, für Logos, technische Zeichnungen, Landkarten mit Grenzen häufig svg, für einfache, bewegte Grafiken häufig gif, für Bilder mit transparenten Teilen häufig png.

    Diese Angaben sind aber nicht absolut zu verstehen. So können auch svg transparente Teile enthalten.

    In jedem Fall sollten Grafiken so skaliert und / oder zugeschnitten werden, dass sie nur so groß sind, wie sie maximal auf der Webseite angezeigt werden.

    Falls Grafiken größer zur Verfügung gestellt werden sollen, werden sie mit einem entsprechenden Hinweis verlinkt, dass die Ladezeit etwas länger sein kann.

    Zitat

    meine Grafik auf meiner Webseite zentrieren?

    Die Grafik wird zum Block-Element (display: block;) gemacht und bekommt dann links und rechts einen Außenabstand (margin) mit dem Wert auto (margin-left: auto; margin-right: auto;)

    Gruss

    MrMurphy

  • Hilfe, absoluter Anfänger!

    Hallo

    Wenn ich die beiden titel in title ändere wird die Bezeichnung Film im Tab des Browserfensters angezeigt. Beim Firefox, Chrome, Opera und IE11.

    Wenn das bei dir nicht funktioniert hast du entweder noch immer Tipfehler oder hast zusätzlich andere Sachen geändert, von denen wir nichts wissen.

    Gruss

    MrMurphy

  • 3-Spaltiges Layout: Inhalt läuft in Footer

    Hallo

    Zitat

    da es der ausdrückliche Wunsch meiner Bekannten ist

    Solche Sprüche kenne ich zu genüge. Willst du ernsthaft erzählen, du hast deiner Bekannten für einen gewerblichen Webauftritt eine aktuelle, responsive, barrierefreie, besucherfreundliche Seite vorgestellt und die fordert so eine Problemseite?

    Du kannst viel erzählen, aber niemand kann mich zwingen dir alles zu glauben.

    Gruss

    MrMurphy

  • Box Shadow inset auf Bild?

    Hallo

    Der Schatten befindet sich immer hinter dem Element, nicht auf dem Element. Deshalb wird er durch das Bild verdeckt.

    Wenn das Bild teilweise transparent ist kann durch die transparenten Teile auch der Schatten gesehen werden. Für sinnvoll halte ich das nicht.

    Gruss

    MrMurphy

  • Tabelle horizontal zentrieren

    Hallo

    Da du keine Tabellendaten hast ist das table-Element hier sachlich falsch. Du mißbrauchst die Tabelle zum Layouten.

    Für dein Beispiel ist Flexbox für das Layout am sinnvollsten.

    Ich habe mal eine Testseite erstellt. Rahmen, Schatten, Rundungen, ... können natürlich noch hinzugefügt werden.

    Testseite

    Wobei die Bezeichnung _mobile in den Klassennamen auf noch vergrabene Probleme hindeutet. Das ist aber erst mal nur ein Bauchgefühl.

    Gruss

    MrMurphy

  • 3-Spaltiges Layout: Inhalt läuft in Footer

    Hallo

    Schwierig. Alleine die Aufzählung der Probleme ist bereits eine lange Liste. Die Erklärung, warum es sich überhaupt um Probleme handelt und die Lösung würde bereits ein kleines Buch füllen.

    Grundsatz: Die Besucher wollen Informationen, und zwar ohne Aufwand und leicht auffindbar.

    Bilder als Text sind zum Beispiel keine Informationen.

    Den "Text" auf den Farbklecksen können wahrscheinlich selbst auf Desktopmonitoren 10% der Besucher überhaupt nicht nicht lesen. Auf Tablets oder gar Smartphones werden selbst Besucher ohne Farbsehprobleme den Text nicht mehr lesen können.

    Zudem werden viele Besucher die Farbkleckse überhaupt nicht als Links erkennen. Zumal andere Farbkleckse (zum Beispiel im header-Bild) keine Links sind. Links sollten aber immer eindeutig erkennbar sein - für alle Besucher.

    Ähnlich verhält es sich mit den Kontaktinformationen, die auf einer Unterseite versteckt sind und aus einem Bild bestehen, welches sich bei schmalem Fenster zudem verkleinert.

    Weiterhin nervt es Besucher, wenn sie auf Webseiten kaum Informationen finden und dafür noch endlos klicken müssen. Für die gesamten Informationen reicht eine einzige Webseite aus, nur das Impressum kann auf eine extra Seite.

    Die Weisheiten rechts wirken nur arrogant, dadurch abschreckend und haben mit dem Webauftritt nichts zu tun - weg lassen.

    Bestimme Symbole wirken grundsätzlich negativ, zum Beispiel das §-Zeichen. Die sollten deshalb nur verwendet werden, wenn auch Paragraphen zitiert werden, aber niemals zur "Verschönung" eines Textes.

    Auf Webseiten sollte es nur einen Scrollbalken geben. Zumal wenn zusätzliche Scrollbalken von der Textlänge her überhaupt nicht erforderlich sind. Und wenn Text überhaupt nur erreichbar ist, wenn das Browserfenster hoch genug ist.

    Längerer Text gehört auch niemals in h-Elemente (h1 bis h6). Die sind nur für Überschriften gedacht, nicht aber um Text hervorheben zu können.

    Durch willkürlich gesetzte br-Elemente wird Text deutlich schwerer lesbar.

    p-Elemente haben in h-Elementen nichts verloren.

    Die Seite ist nicht für Kinder sondern für Besucher, die seriöse Informationen suchen. Für die ist das Layout insgesamt viel zu bunt und zu kindlich. Sie wirkt deshalb unseriös.

    Auf der Startseite sollten wichtige Informationen stehen die den Besuchern direkt weiterhelfen. Die fehlen aktuell völlig.

    Und, und, und, ...

    Zitat

    Denkfehler meinerseits?

    Ja. Die Besucher (die bösen Leute) können auf kleineren Bildschirmen doch nicht besser sehen. Deshalb sollten alle Elemente eine Mindestgröße behalten und besser ihre Position ändern. Dazu ist responsive Design eine Grundlage.

    Gruss

    MrMurphy