Eine Startpage oder auch ein Speeddialersatz

  • Firefox-Version
    96.0.2 (64-Bit)
    Betriebssystem
    Windows 10 Version 21H2 (Build 19044.1466)

    Habe mich schon länger damit befasst und habe mir schwergetan, eine HTML-Seite zu "bauen"!

    Nun habe ich es irgendwie hinbekommen.

    Eine Startpage! Ein kleiner Ersatz für "Speeddeal".

    Ja, ich weiß, hat jetzt nicht unbedingt direkt was mit dem Firefox zu tun,

    aber,

    es kommt auch viel CSS-Code vor,

    und,

    ohne dieses Board und meine "Gehversuche" den Firefox mittels CSS anzupassen,

    würde diese HTML-Leiche immer noch hier bei mir auf der Festplatte dahin siechen.


    Es gibt 25 Kacheln, habe jetzt nur die ersten 10 hier veröffentlicht.

    Wenn da mal jemand drüberschauen kann und mir sagen kann, ob es da etwas gibt,

    das auch leichter oder einfacher umzusetzen geht.

    Oder schöner!

    Gerade das mit den preview-Bildchen und dem Rahmen td habe ich mir irgendwie einfacher vorgestellt.

    Und auch die Icons th:nth-child(1) > img:nth-child(1) sitzen nicht so wirklich an Ihrem Platz.

    Ich habe mir vorgestellt, dass die etwas Rechts eingerückt sind, mit ein wenig Platz dahinter dann der Text (Titel) kommt,

    und wenn der zu lang ist, dann einfach per " ... " abgeschnitten wird.

    Aber das bekomme ich einfach nicht hin.

    Nun ja, aber so im Großen und Ganzen bin ich doch schon damit zufrieden

    und kann jetzt "Speeddeal" von der Platte fegen.

    Gruß

    Mira

    Wenn erlaubt, würde ich dieses "Projekt" hier gerne mit Eurer Hilfe weiter führen.

    Mit <3lichem Gruß

    Mira

  • Gerade das mit den preview-Bildchen und dem Rahmen td habe ich mir irgendwie einfacher vorgestellt.

    Und auch die Icons th:nth-child(1) > img:nth-child(1) sitzen nicht so wirklich an Ihrem Platz.

    Naja, ohne die Bildchen und Icons können wir aber nicht wirklich genau überprüfen, was da noch zu machen ist.

    Es grüßt,

    Ralf

  • Moin, ja ist mir dann auch noch eingefallen,

    aber es war schon so spät.

    Hier liefere ich die Grafiken nach.

    Der (mein) Hintergrund.

    (Es kann im Prinzip jeder Wallpaper genommen werden)

    Nun die Favicons.

           

           

    Und nun die Previews

          

     

    Gruß

    Mira


    Ein guter Anfang, dich! reinzuarbeiten und dann andere, wenn fertig, teilhaben zu lassen.

    Ist das jetzt ernst gemeint und ein Lob,

    oder eher nicht? Ich bin mir da gerade nicht so sicher. :/

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    2 Mal editiert, zuletzt von Mira_Belle (27. Januar 2022 um 12:10) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

  • Weder noch. Mach doch erst mal was fertig, wo man eine Struktur sieht, mit Css. Und dann kann man weitersehen. Dann kannst das Ergebnis auf deine Fahne schreiben. Aber vorab schon nach Unterstützung fragen..., das hat was von 'ich möchte, macht ihr mal'

    Das html kann ich erst zuhaus ansehen, aber bei den nth kann man even und odd nutzen, statt einer konkreten Auflistung. Nimm dein Projekt, um dein Wissen zu erweitern, nicht alles nachfragen. Das MDN ist dafür ideal geeignet, ein Pdf für Css hat milupo mal verlinkt.

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen!

  • Wenn da mal jemand drüberschauen kann und mir sagen kann, ob es da etwas gibt,

    das auch leichter oder einfacher umzusetzen geht.

    Oder schöner!

    Das ist dann wohl der Teil, zu dem ich beitragen kann. ;)

    1) Mittels <!doctype html> hast du festgelegt, dass dein Dokument ein HTML5-Dokument ist. Du bedienst dich dann aber an Elementen, die es in HTML5 überhaupt nicht gibt. Sowohl <center> als auch <font> müssen ersetzt werden. Die Elemente stammen aus einer Zeit, in der es noch kein CSS gab. Damals musste solch grundlegende Gestaltung über HTML erfolgen. Heute ist HTML primär für die Semantik verantwortlich, Ausrichtung und Farben werden ausschließlich über CSS definiert. Du kannst das <center> beispielsweise durch ein <div> mit entsprechender Klasse ersetzen, das <font> als Inline-Element durch ein <span> mit entsprechender Klasse. Das hat auch den Vorteil, dass du für eine Design-Änderung wie eine andere Farbe nur noch eine Stelle statt zig Stellen bearbeiten musst.

    2) <img>-Elemente müssen immer ein alt-Attribut besitzen, selbst wenn dessen Inhalt leer ist.

    3) Das width-Attribut eines Bildes darf keine Prozentzahl als Wert besitzen, nur eine Zahl ohne Einheit - angenommen werden Pixel. Für Prozentangaben musst du CSS verwenden.

    4) Unabhängig von einer möglichen Breiten-Definition in CSS solltest du tatsächlich auch width und height-Attribute (beide!) mit Pixelangaben verwenden (also nur Zahl, keine Einheit), selbst wenn sich über CSS eine andere tatsächliche Größe ergibt. Aber durch die Attribute ergibt sich das korrekte Seitenverhältnis bereits, bevor die Bilder geladen sind, und der Browser kann den Platz frühzeitig reservieren und so einen sogenannten Cumulative Layout Shift (CLS) verhindern.

    5) Konstrukte der Art th:nth-child(1), th:nth-child(3), th:nth-child(5), th:nth-child(7), th:nth-child(9) und th:nth-child(2), th:nth-child(4), th:nth-child(6), th:nth-child(8) kannst du durch th:nth-child(odd) respektive th:nth-child(even) ersetzen.

    6) In Firefox kein Problem mehr, da Firefox dies seit noch gar nicht so langer Zeit implizt annimmt, aber wo target="_blank" verwendet wird, sollte aus Sicherheitsgründen immer auch rel="noopener" stehen.

    7) Kein Fehler, aber 0-Werte in CSS haben üblicherweise keine Einheit, also 0 statt 0px.

    Ansonsten nur inhaltlicher Natur: chip.de würde ich da rauslöschen. Man kann über so manche Seite streiten (WinFuture und Born sind jetzt auch nicht zwingend für eine neutrale Berichterstattung bekannt), aber es gibt in der deutschsprachigen IT-Medienlandschaft kaum etwas Mieseres als chip.de. Dort wird in einer solchen Menge Müll geschrieben, dass es schon nicht mehr lustig ist. Mir fällt noch giga.de ein, was sich Clickbait-technisch auf einem sehr ähnlichen Level bewegt.

  • Danke Sören!

    Wie ich schon schrieb, lag das HTML schon lange auf der Platte!

    Das "Grundgerüst" hatte ich dann vor einigen Tage neu erstellt

    und habe dann "die alte Tabelle" eingefügt.

    Hat ja auch irgendwie geklappt!

    Weil aber so einiges nicht wirklich so angezeigt wurde, wie ich es gerne gehabt hätte

    und ich auch nun Eurer Hilfe etwas Erfahrung in CSS gemacht haben,

    wollte ich per CSS "eingreifen".

    Wie ich nun sehe, war dieser Gedanke schon mal nicht schlecht,

    aber ich muss mich jetzt erst einmal noch näher und wieder mit HTML beschäftigen.

    Gruß

    Mira

    ... Dann kannst das Ergebnis auf deine Fahne schreiben. Aber vorab schon nach Unterstützung fragen ...

    ... nicht alles nachfragen.

    Ich will mir hier gar nichts "auf die eigene Fahne schreiben"!

    Ich übe! Frage nach. Und jeder der es möchte, kann daraus machen was er/sie will.

    Sörens Antwort hat mir sicherlich mehr gebracht, als Deine.

    Denn er zähle "Ungereimtheiten" auf und machte mir auf NETTE Art klar,

    dass ich da noch ein paar Hausaufgaben machen muss. ;)


    Das MDN ist dafür ideal geeignet, ein Pdf für Css hat milupo mal verlinkt.

    milupo

    Kannst Du das pdf hier auch noch einmal verlinken, bitte.

    Kann es nicht finden.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (27. Januar 2022 um 14:14) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

  • Kannst Du das pdf hier auch noch einmal verlinken, bitte.

    Ich nehme mal an, dass .DeJaVu den Link zum CSS-Kochbuch meint. Der wurde im folgenden Beitrag erwähnt:

    milupo
    31. Dezember 2021 um 18:45

    Hier der Direktlink:

    CSS-Kochbuch

    Aber wie im anderen Beitrag erwähnt, ist dieses CSS-Kochbuch schon ein paar Jahre alt.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Dann lass dir mal grundlegend helfen:

    Erste Zusammenfassung

    even/odd

    Wenn du schon eine Tabelle anfängst mit table,tbody, th, tr, td, dann wäre es ratsam, auch das CSS so aufzubauen, du suchst dir sonst nen Kipparsch.

    font:nth-child(2)

    Was ist das denn? Warum nur jenes?

    dito

    img:first-child

    Warum? Alle oder keines, dann aber das übergeordnete Element.

    nth-child(1) = first-child

    Zu den th, da fehlt immer ein /th im thead.

    <th>: The Table Header element - HTML: HyperText Markup Language | MDN
    The <th> HTML element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
    developer.mozilla.org

    Wenn du immer <img src="head.png" width="10" height="30">

    dann sollte man das besser in ein css schreiben. Grunddesignfehler. Das war vor 20 Jahren mal so.

    <th class="th"></th>

    .th{content: url("head.png"); width: 10px; height: 30px}

    head.png fehlt in der sammlung oben, rights.png auch

    p:nth-child(1)

    Es gibt nur ein p insgesamt im html, da reicht dann auch p.

    Ansonsten wäre <p class"header"> -> p.header besser. Sonsten müsstes du bei einem p davor die nummer im html ändern, so nur dass css.


    Und wenn man dann mal weg kommt von der Tabelle, und auf CSS-Schachteln umbaut

    #content width = x-mal so breit wie sectioncontent/sectionhead, damit 5 Einheiten pro Zeile reinpassen. Letztere sind auch anzupassen.

    html Anfang

    Code
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Startseite</title>
        <link rel="stylesheet" type="text/css" href="test.css">    
      </head>

    Das css konsequent ausserhalb, bläht es nur auf. Bilder in Unterordner

    Favicons\favicon-16x16.png

    Previews\preview_01.png

    Wobei man da schon aussagekräftigere Namen vergeben sollte, da blickst du später sonst selbst nicht mehr durch.

    Du baust einmal ein html-Gerüst, und füllst und formatierst es per CSS. Das obige hat jetzt keinen Anspruch auf Fehlerfreiheit - weil ich mich nicht damit beschäftigen will, es ist dein Projekt!

    Wenn du konkret Hilfe zu CSS brauchst, dann schau in das PDF oder hier rein:

    Webtechnologien für Entwickler | MDN
    Das offene Web bietet unglaubliche Möglichkeiten für Entwickler, die Webseiten oder Onlineanwendungen erstellen möchten. Um diese Technologien voll ausschöpfen…
    developer.mozilla.org

    Ich bzw wir könnnen dich nur auf den Weg bringen, die Arbeit ist deines.

    Und sieh zu, dass wenigstens das html und das css (schreib-)fehlerfrei sind.

    jaja yippie yippie yeah

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne deine Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklärst du dich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    ;)

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen!

  • Mit jedem Punkt würde ich nicht mitgehen.

    nth-child(1) = first-child

    Das ist zwar richtig, muss aber nicht zwingend sein. Es kommt aus meiner Sicht drauf an: Wenn man nur das erste Element ansprechen möchte, würde ich in der Regel wohl auch :first-child schreiben. Aber wenn auch :nth-child(2) usw. verwendet wird, würde ich für das erste Element genauso :nth-child(1) verwenden, weil das für mich dann übersichtlicher ist.

    Zu den th, da fehlt immer ein /th im thead.

    Wo das?

    Wenn du immer <img src="head.png" width="10" height="30">

    dann sollte man das besser in ein css schreiben. Grunddesignfehler. Das war vor 20 Jahren mal so.

    Das ist nicht richtig. Ein <img>-Element sollte nach Möglichkeit immer ein width- sowie ein height-Attribut besitzen, völlig unabhängig davon, ob man die Größen (auch) via CSS definiert. Wieso das so ist, habe ich unter Punkt 4) in meinem vorherigen Beitrag erklärt. Das ist nicht nur kein Fehler, bei der Websiteüberprüfung mittels Google PageSpeed Insights wird das Fehlen dieser Attribute stets bemängelt.

    Und wenn man dann mal weg kommt von der Tabelle, und auf CSS-Schachteln umbaut

    Das ist auch ein "Es kommt drauf an"-Fall: Die Frage ist, was genau man denn möchte. Tabellen für Layout zu missbrauchen, ist aus heutiger Sicht tatsächlich ein No-Go. Aber wenn das, was man darstellen möchte, auch wirklich eine Tabelle sein soll, ist das nach wie vor das Element der Wahl. Das ist das, was ich in meinem vorherigen Beitrag meinte: HTML dreht sich heute primär um Semantik, sprich die Bedeutung der Elemente. In dem Fall lässt sich wohl streiten, wie man das einordnet. Man kann sicherlich in beide Richtungen argumentieren. Einerseits hat das schon was von einer Tabelle, aber andererseits ist es vielleicht doch mehr ein gestalterisches Raster als wirklich eine tabellarische Auflistung.

    Aber wenn man schon von der Tabelle weg geht, können hier sicherlich CSS Flexbox oder Grid ihre Stärken ausspielen. Das ist dann natürlich etwas fortgeschritteneres CSS. Aber da kann man sich ja von der Standard-Startseite von Firefox inspirieren lassen. Die Pocket-Artikel sind ein CSS Grid.

  • Danke für die Ergänzung :thumbup:

    Bei grid und flex fehlt mir die Erfahrung, ich weiss nur, dass es das gibt

    Das ist nicht richtig.

    Das meinte ich nicht, aber ok. Ich meinte, das Bild mit CSS einfügen. Und weil ich dabei bin, wegen </th>

    Code
              <th>    <img src="head.png" width="10" height="30">                
                    <th>    <img src="Favicons\favicons_02.png"> <font color=#FFFFFF> Winfuture</font></th>

    Es wird zweimal geöffnet, aber nur einmal geschlossen, zieht sich durch beide <thead>. (laut MDN sollte es geschlossen werden)

    Wegen (1) und (2) bei nth, da fehlt mir der Bezug - warum das erste Bild, nicht die anderen? Warum Font - wobei, ist das nicht falsch so?

    CSS
    font:nth-child(2) {
                padding-right: 15px !important;
                padding-left: 10px !important;
                padding-bottom: 2px!important;
        }    

    font und padding? Ich mein, Stylish hat es nicht angemeckert, ergibt für mich dennoch keinen Sinn.

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen!

  • Das meinte ich nicht, aber ok. Ich meinte, das Bild mit CSS einfügen.

    Ich denke, ich verstehe jetzt, was du meinst. Weil es vermutlich nur um eine dekorative Grafik geht, die sich ständig wiederholt, würdest du diese via CSS einbauen. Einverstanden. Wobei ich nicht ausschließen würde, dass das auch ein Stück weit der Verwendung einer Tabelle geschuldet ist, was einen von den Möglichkeiten her stark einschränkt. Aber ich hab's nicht getestet.

    Und weil ich dabei bin, wegen </th>

    Gefunden, Danke. An vielen Stellen ist das schließende </th> auch vorhanden. Und nachdem sich in dem Code so viel wiederholt, hat mein Gehirn wohl eine gewisse Transfer-Arbeit verrichtet und das an den fehlenden Stellen gedanklich ergänzt. Ich hab's jedenfalls vorher tatsächlich nicht gesehen, dass es teilweise fehlt. :D

    Wegen (1) und (2) bei nth, da fehlt mir der Bezug - warum das erste Bild, nicht die anderen?

    Das war meinerseits allgemein gesprochen und nur auf "nth-child(1) = first-child" bezogen. Ich würde :first-child und :nth-child(2) nicht gemeinsam verwenden, weil :nth-child(1) für mich besser erkennbar ist, wenn verschiedene Positionen angesprochen werden. So wie beispielsweise bei den th:nth-childs, falls man da nicht auf odd und even umstellt, sondern bei der Nummerierung bleibt. Beim <img> ist das im Beispiel so oder so nicht notwendig.

    font und padding? Ich mein, Stylish hat es nicht angemeckert, ergibt für mich dennoch keinen Sinn.

    <font> ist grundsätzlich falsch in HTML5. Aber wenn, ist padding durchaus möglich, weil <font> im Prinzip auch nur ein Inline-Element wie <span> ist und via CSS die gleichen Eigenschaften annehmen kann. Die Besonderheit von <font> sind eben die Schrift-spezifischen Attribute, die ein <span> nicht kennt, da <font> wie gesagt aus einer Zeit stammt, in der es CSS noch nicht gab, und heute zu Gunsten von CSS nicht mehr verwendet werden soll.

  • Danke.

    Eure Antworten waren schon recht niederschmetternd! :D

    Und ich dachte mir so, Euch zeige ich's. :saint:

    Ich habe noch einmal von ganz vorne angefangen

    und das ist der Stand der Dinge.

    Sieht das besser aus?

    Also ich finde ja, der "Tabellen"-Code ist/war schon übersichtlicher.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • Habe etwas aussortiert und aufgeräumt.

    Den CSS-Code noch etwas angepasst und ...

    hänge.

    und der dazu gehörige HTML-Code

    (Auszug)

    Warum ist die Seite nicht mittig?

    Wenn ich

    CSS
        .top-sites-list {
            text-align: center;
        }

    entferne, habe ich dennoch links Abstand.

    Wo wird der denn definiert?


    Als nächstes versuche ich die kleinen Logos vor die "Überschriften zu bekommen.
    Aber so, dass ich sie unabhängig vom Text verschieben kann
    und umgekehrt.
    Denn die "Logos" stehen bei "meiner" anderen Lösung immer höher als der Text.

    Gruß
    Mira

    Nachtrag.

    Drei Möglichkeiten.

    Alles Falsch!

    ???

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    2 Mal editiert, zuletzt von Mira_Belle (28. Januar 2022 um 12:00)

  • 1) Der Doctype (erste Zeile) ist fehlerhaft.

    2) <img>-Elemente müssen immer noch zwingend ein alt-Attribut besitzen.

    3) In dem Code sind ein paar Dinge immer wieder drin, bei denen mir nicht klar ist, wieso du diese brauchst:

    • dir="auto"
    • aria-hidden="true"
    • tabindex="0"
    • draggable="true"
    • data-fallback

    Warum ist die Seite nicht mittig?

    Bei mir ist die Seite mittig. Oder meinst du das auf die Höhe bezogen?

    habe ich dennoch links Abstand.

    Wo wird der denn definiert?

    body hat standardmäßig ein margin, ul hat standardmäßig ein padding, beim li hast du selbst padding definiert.

  • Danke Sören.

    zu 1.

    Verstehe ich nicht. Beim "ersten" Code hast Du da nichts beanstandet. (Also den "Tabellencode meine ich)

    Und auch hier wird es so erklärt.

    => https://developer.mozilla.org/de/docs/Learn/…web/HTML_basics

    zu 2.

    Ich habe es jetzt so gemacht: z.B. <img src="preview_03.png" alt="computerbase" width="50" height="50">

    Und ich glaube, ich habe es verstanden.

    Kann das Image nicht geladen werden, wird es durch den Text ersetzt. Richtig?

    Dazu hätte ich dann aber noch Fragen, aber erst später.

    zu 3.

    Ich habe Deine Anregung zum Anlass genommen und

    mir die Firefoxstartseite zum Beispiel genommen.

    Das waren dann alles Codefragmente, von denen ich nicht wusste, ob sie vonnöten sind.

    Ich habe sie jetzt rausgenommen, Danke.

    Beim Putzen wäre dies mir vielleicht auch aufgefallen, dass die gar nicht gebraucht werden.

    zu letzterem

    Wenn ich das beim li das padding ausklammere, überschneiden sich die "Boxen"

    Deshalb das "padding", denn mit padding-left: 25px rücken sie auseinander.

    Gibt es eine andere Möglichkeit zum Ziel?

    Aber diese "Boxen" stehen auch nicht mittig im Broserfenster.

    Liegt wohl dann daran, dass body standardmäßig ein margin und auch ul standardmäßig ein padding hat.

    Wie kann das ausgehebelt werden?

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • Verstehe ich nicht. Beim "ersten" Code hast Du da nichts beanstandet. (Also den "Tabellencode meine ich)

    Der korrekte Doctype ist:

    <!doctype html>

    Bei dir steht:

    <!d<!doctype html>

    Kann das Image nicht geladen werden, wird es durch den Text ersetzt. Richtig?

    Das ist richtig, aber nicht nur. Menschen, die nicht sehen können und technische Hilfsmittel nutzen, sind darauf angewiesen, weil denen der Text dann vorgelesen wird. Das betrifft dich zwar nicht, aber der HTML-Standard sieht vor, dass es immer ein alt-Attribut geben muss. Der Inhalt kann aber auch leer sein, also alt="", was zum Beispiel üblich ist, wenn das Bild nur dekorative Zwecke erfüllt und nicht wirklich etwas von Relevanz darstellt.

    zu letzterem

    Wenn ich das beim li das padding ausklammere, überschneiden sich die "Boxen"

    Ich empfehle die Nutzung der Entwicklerwerkzeuge, weil du damit gut sehen kannst, welches Element welchen Platz einnimmt. Ich kann dazu erst später mehr im Detail sagen, da ich gerade den Computer gewechselt habe.