Beiträge von MrMurphy

  • Anordnung von Elementen im <footer>

    Kann es sein dass du veraltete Versionen von Chrome und Opera verwendest, die das aktuelle Flexbox nicht kennen?

    Bei mir funktioniert deine Seite, das Problem liegt an deinem Betriebssystem, deinen Treibern oder deiner Software. Das können wir dann nicht nachvollziehen.

  • Anordnung von Elementen im <footer>

    Zitat

    Ich frage euch, was mache ich hier falsch?

    Keine Ahnung. Mit Fehlerbeschreibungen wie

    Zitat

    anständig umgebrochen

    und

    Zitat

    funktioniert es nicht so ganz

    kann außer dir nämlich niemand etwas anfangen.

    Firefox, Chrome und Opera zeigen deinen Quelltext gleich an, auch wenn die Fensterbreiten geändert werden. Es ist also wahrscheinlich dass du uns zusätzlich zur unklaren Fragestellung noch entscheidendes CSS vorenthältst.

    Anständig ist im HTML und CSS auch auf Blocksatz zu verzichten. Im professionellen Bereich werden bei Blocksatz alle Abstände angepasst, auch die zwischen jedem einzelnen Buchstaben. Und zwar nach bestimmten Regeln, also nicht einfach der gleiche Abstand zwischen jeden Buchstaben. Dadurch bleibt der Text flüssig lesbar und die Abstände sehen gefällig aus.

    Bei HTML / CSS werden jedoch nur die Leerzeichen für den Blocksatz angepasst. Das sieht grauselig aus und läßt sich nur schwer lesen.

    Du willst auch viel zu viel bestimmen. Dadurch musst du deine eigenen CSS-Angaben unnötigerweise immer wieder überschreiben und anpassen. Du machst dir nur unnötig Arbeit und verschwendet deine Zeit. Lass die Browser machen was sie können, die können viel. Und du kannst deine Zeit sinnvoll nutzen.

    Für mich sollten bei einem Zeilenumbruch wie in diesem Beispiel (gilt nicht für Fließtexte) Namen nicht getrennt werden. Zudem macht ein Bindestrich vor dem Namen selbst diesen kurzen Text besser lesbar. Der Bindestrich wiederum sollte auch bei einem Zeilenumbruch (wie geschrieben für ein Beispiel wie dieses) nicht vom vorherigen Wort getrennt werden. Den Rest macht der Browser mit ein paar wenigen CSS-Angaben.

    Das funktioniert bei mir im Firefox, Chrome, Opera, IE11 + Aufwärts, und ...

    Eine für mich anständige Lösung deines Problemes sieht damit folgendermaßen aus:

    Das ganze dann statt in section in footer umzuwandeln sollte kein Problem sein.

  • Untermenüpunkte liegen übereinander

    Eine Anmerkung:

    Soll die Seite auch auf kleineren Bildschirmen wie Tablets und Smartphones funktionieren? Dann verringere einfach mal die Fensterbreite und schau die Seite dann an.

    Gleiches gilt für eine Bedienung mit Touchscreens. Ruf die Seite mal mit einem Smartphone auf. Die meisten Aufklappmenüs funktionieren dann nicht mehr, so dass die Besucher die Unterseiten überhaupt nicht erreichen können.

    Momentan erstellst du eine Seite die wahrscheinlich nur bei dir mit deinen oder ähnlichen technischen Voraussetzungen einigermaßen funktionieren wird. Das solltest du bedenken.

    Die auftretenden Probleme lassen sich später nicht mehr reparieren, sondern das muss von Beginn an funktionieren.

  • Eine HTML-Vorlage erstellen und mit anderen HTML-Seiten verknüpfen

    Mir ist nicht klar worum es überhaupt geht. In der HTML- und CSS -Welt und deren Begriffen gibt es keine Vorlagendatei, die zudem noch verknüpft werden kann.

    Hat das vielleicht mit dem Editor zu tun? Also dem Programm, mit dem ihr die HTML- und CSS-Dateien bearbeitet?

    Der Dreamweaver zum Beispiel arbeitet mit von seinen Erstellern so genannten Vorlagedateien. Im Dreamweaver können Vorlagedateien erstellt werden, die dann mit den eigentlichen HTML-Dateien durch einen Eintrag in die HTML-Dateien verknüpft werden. Das sind dann aber Dreamweaver interne Anweisungen, die mit dem HTML- und CSS-Sprachschatz überhaupt nichts zu tun haben und von den Browsers ignoriert werden.

  • Listenhintergrund mit overflow-x

    Verwende normalen Text mit Leerzeichen. So lange Worte wie bei dir gibt es in der Praxis nicht. HTML und CSS sind für die Praxis ausgelegt.

    Entweder der Container ist so breit wie das längste Wort oder du läßt den Text ganz normal umbrechen.

    Seitliches Scrollen sollte eh so weit wie irgend möglich vermieden werden.

    Zeig uns die echte Seite mit der echten Menüliste, dann können wir vielleicht Lösungen finden.

  • Verlinkungen in HTML/CSS

    Hallo

    Ohne deinen gesamten Quelltext (HTML und CSS sowie eventuelle Bilder) können wir dir leider nicht helfen.

    Wobei Phase 5 bereits seit fast 10 Jahren nicht mehr weiterentwickelt wird. Selbst das ehemals größte Forum zu Phase 5 ist inzwischen tot.

    Falls du Phase 5 nicht (mehr) verwendung musst solltest du deshalb zu einem aktuellen Editor greifen.

    Die Grundlage jeder funktionierenden Webseite ist zunächst ein korrekter HTML-Quelltext in der in der ersten Zeile genannten HTML-Version. Daran hapert es bei Anfängern häufig bereits. Das können wir wie bereits geschrieben ohne deinen Quelltext überhaupt nicht beurteilen.

    Gruss

    MrMurphy

  • right aligned Navbar mit Bild und Text

    Bei

    Code
    <!DOCTYPE html>

    sollten gleich die damit ausgewählten Regeln für HTML5 verwendet werden. Das ist noch übersichtlicher und macht bei der zukünftigen Pflege der Seite am wenigsten Stress.

    HTML-Quellcode:

    und das CSS dazu:

    Zusatzinfo:

    height-Angaben sollten nur verwendet werden wenn sie erforderlich sind. Das ist in diesem Beispiel jedoch überflüssig.

    Zumal sich die beiden einzigen height-Angaben auch noch widersprechen. Der umgebende Container hat eine Höhe von 60px, soll aber ein Bild mit einer Höhe von 64px enthalten, unter dem zusätzlich noch Text stehen soll.

    CSS-Grid ist für die Darstellung von Rastern ersonnen worden. Hier liegt aber kein Raster vor. Falls CSS-Grid trotzdem verwendet werden soll gehört es zum guten Stil im CSS auch das Raster anzugeben. In diesem Fall also 5 Spalten. Bei einer Änderung der Navigation muss dann aber auch das Raster angepasst werden. Flex ist in diesem Fall also sinnvoller. Grid ist kein "besseres" Flex, wie häufig fälschlicherweise behauptet wird. Die haben unterschiedliche Aufgaben, die sich halt nur teilweise überschneiden.

    Für die Verwendung von Grid müsste bei meinen Beispiel in .navbar einfach

    Code
    display: flex;
justify-content: flex-end;

    durch

    Code
    display: grid;
grid-template-columns: repeat(5, auto);
justify-content: end;

    ersetzt werden. Um auch eine Lösung mit CSS-Grid zu zeigen.

  • Header Width Responsive

    Hast du einen Link zu der Seite?

    Mit den Informationen können wir wenig bis nichts anfangen. Wir kennen weder den Quelltext noch das restliche CSS noch die Websitebilder.

    Zudem geht aus deiner Frage nicht hervor was dich stört. "Die Seite ist bei kleineren Auflösungen nicht perfekt" ist keine nachvollziehbare Fehlerbeschreibung.

    Eine width-Angabe größer als eine max-width-Angabe ist unlogisch. Die width-Angaben sind somit sachlich falsch und wahrscheinlich komplett überflüssig.

    Ähnliches gilt für die float-Angabe. float wird verwendet wenn Text grafiken umfließen soll. Da kein Text vorhanden ist, ist sie überflüssig. Auswirkungen auf Hintergrundbilder hat die float-Angabe überhaupt nicht. Kann also auch weg.

    Mehr lässt sich aus deinen Angaben leider nicht raten.

  • Aufzählungen ol und ul mit Nummerierungen

    Hallo

    Das ist ein komplexes Thema, welches sich nicht als Beitrag in einem Forum abhandeln lässt.

    Bei einer Leerstelle, dem Pfeil nach rechts, aber auch dem Pluszeichen und der Tilde handelt es sich um Selektoren. Und zwar in dem Unterthema Familienselektoren oder auch Kombinatoren. Das sind zwei Bezeichnungen für die gleiche Sache.

    Code
    ul li {...

    Mit dem Leerzeichen werden alle genannten Elemente (hier li) angesprochen, die in einer beliebigen Ebene nach dem ersten Element (hier ul) folgen. Auch unabhängig davon, ob sich weitere Elemente (im folgenden Beispiel ol) dazwischen befinden. Also beide li-Elemente im folgenden Beispiel:

    Code
    <ul>
   <li>
      <ol>
         <li> ...

    Mit dem Größer-Zeichen (Pfeil nach rechts) werden nur Elemente in der direkt folgenden Ebene angesprochen, in meinem Beispiel also nur das erste li-Element.

    Code
    ul>li {...

    Gruss

    MrMurphy

  • Menü geht auf iOS nicht

    Hallo

    Schön dass du eine Lösung für dich gefunden hast.

    Deshalb nur als Info für Dritte, die diesen Beitrag lesen: Bei HTML5 wird der HTML-Quelltext deutlich schlanker gehalten und Wiederholungen vermieden. Mit aktuellem HTML könnte der Quelltext folgendermaßen aussehen:

    Wer will kann für die Navigation auch eine Liste verwenden. Ein Muss ist eine Liste jedoch nicht.

    Genau so sollten keine Inhalte versteckt werden, da damit die Benutzerfreundlichkeit verschlechtert und Barrieren geschaffen werden. Da viele Besucher bei sich JavaScript blockiert haben sollten Webseiten grundsätzlich auch ohne JavaScript funktionieren.

    Die Gestaltung erfolgt dann mittels CSS3. Also zum Beispiel auch mit Flexbox.

    CSS-Anweisungen wie float, clear, position, display: none oder z-index sind dann für die Navigation nicht mehr erforderlich.

    Gruss

    MrMurphy

  • Logo verschieben mit CSS

    Hallo

    Hört sich nach fehlendem Flexbox an. Hingegen wendest du float wahrscheinlich falsch an und solltest darauf verzichten.

    Float ist nur dafür gedacht Text Container (meist Bilder) umfließen zu lassen. Mangels Flexbox und CSS-Grid oder anderen Möglichkeiten wurde es in der Vergangenheit auch für die Anordnung von Containern mißbraucht, das ist aber schon lange nicht mehr nötig.

    Aber wie Arne Drews bereits schrieb:

    Zitat

    Wie sieht Dein HTML-Gerüst aus?

    Gruss

    MrMurphy

  • Bootstrap

    Hallo

    Ich sehe das ähnlich wie meine Vorschreiber.

    Bootstrap wird in der Regel nur zur Anordnung von HTML-Containern verwendet. Im Gegensatz zu der direkten Verwendung von Flexbox und CSS-Grid wird bei Bootstrap deutlich mehr HTML benötigt, bietet aber trotzdem gegenüber Flexbox und CSS-Grid deutlich weniger und starrere Möglichkeiten.

    Da Bootstrap schwer zu erlernen ist, werden die Möglichkeiten meist überhaupt nicht genutzt, das CSS müssen die Benutzer aber trotzdem laden. Nicht grade ideal bei mobilen Geräten.

    Gruss

    MrMurphy

  • Verwenden Sie HTML in eBay

    Hallo

    Was voevtonggen gefällt muss noch lange nicht den Ebay-Interessenten gefallen.

    Leider ist den Beispielen von eselt nicht zu entnehmen, ob die auch wirklich den Ebay-Anforderungen entsprechen. Die Schreiben zwar viel, aber leider beruhen erfahrungsgemäß solche Vorlagen auf veraltetem HTML, da sie mit aktuellem HTML5 nur sehr aufwändig zu erstellen sind. Und veraltetes HTML wird von Ebay mit einem schlechteren Ranking bestraft.

    Ohne den Quelltext und das CSS zu kennen würde ich für solche Vorlagen kein Geld ausgeben.

    Gruss

    MrMurphy

  • Warum werden Web Seiten inzwischen oftmals mit breiten Rändern auf den Seiten gestaltet?

    Hallo

    Zitat

    Da das zusammen mit Smartphones aufgekommen ist

    Das stimmt nicht, breite Ränder gibt es "schon immer", seit es Webseiten gibt.

    Ursache ist, dass viele Anwender mit den grundliegenden Unterschieden von Textverarbeitungen, Tabellenkalkulationen, Grafikprogrammen und ähnlichen klassischen Anwendungen (im folgenden TTG) auf der einen Seite und Webseiten auf der anderen Seiten überfordert waren und sind.

    Bei TTG haben die Anwender die volle Kontrolle über Größe und Aussehen, bei Webseiten nicht. Damit können sehr viele nicht umgehen und suchen deshalb ihr Heil bei Gurus. Diese Gurus haben ohne jeden sachlichen Grund bestimmte Webseitengrößen als besonders wertvoll ausgerufen. Die geistern bis heute als unsterbliche Seelen durchs Internet, zum Beispiel 768px oder 980px. Aber auch in anderer Form, zum Beispiel als 12-Spalten-Grid.

    Damit haben die überforderten Anwender eine vermeintliche Lösung für ihre Probleme, an der sie verzweifelt festhalten und die sie Anderen einhämmern, damit sie ihnen nicht fortgenommen wird. Das funktioniert wie in anderen Sachgebieten bereits seit jahrtausenden erfolgreich erprobt. Sachliche Argumente zählen nicht, sondern werden ohne Begründung mit Gewalt niedergewalzt.

    Sachlich sind die breiten Ränder unsinnig, die Anwender haben es falsch gelernt und wollen sich dieses Fehlwisse (aber ihre Wahrheit) nicht wegnehmen lassen.

    Korrekt ist, dass Zeilenlängen in Texten nicht unendlich lang werden sollten. Die Lesbarkeit hängt aber nicht von unsinnigen Breitenangaben ab, sondern von vielen anderen Vorgaben, zum Beispiel Buchstabengröße und Zeilenabstand.

    Wenn anschließend ein Rand verbleibt kann der problemlos mit anderen Informationen gefüllt werden.

    Bei Smartphones und Tablets sind Ränder für mich eine Frechheit, sie zwingen die Besucher nur zu unnötigem Scrollen, da die Texte länger werden. Und bei Desktops können die Besucher die Fensterbreite des Browsers selbst wählen und damit ihre persönliche Wohlfühl-Fensterbreite bestimmen.

    Gruss

    MrMurphy