Der Fräger: Frage zum Wiki-Artikel „border“

problematische Seite

Moin, ich würde gerne einen Rahmen um ein einzelnes Wort; noch genauer gesagt um eine Überschrift machen. Das Problem ist, dass der Rahmen nicht nur das Worst selbst umschließt sondern auch noch den ganzen Platz von der linken zur rechten Seite. So dass meien Ergebnisse immer so aussehen. dass ich einen ziemlich langen schmalen Rahmen habe, in dem dann in der Mitte nur ein einzelnes Wort steht und rechts und links daneben elendig viel Platz frei ist bis die Seitenränder des Rahmens kommen.

  1. problematische Seite

    Hallo,

    schau dir mal <span> an. Da kannst du einen Rahmen drum legen. Beim verlinktem Beispiel zb. so:

    
    span:first-child {
    	color: darkgreen;border:1px solid red;
    } 
    

    Gruss
    Henry

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
  2. problematische Seite

    hallo

    Moin, ich würde gerne einen Rahmen um ein einzelnes Wort; noch genauer gesagt um eine Überschrift machen. Das Problem ist, dass der Rahmen nicht nur das Worst selbst umschließt sondern auch noch den ganzen Platz von der linken zur rechten Seite. So dass meien Ergebnisse immer so aussehen. dass ich einen ziemlich langen schmalen Rahmen habe, in dem dann in der Mitte nur ein einzelnes Wort steht und rechts und links daneben elendig viel Platz frei ist bis die Seitenränder des Rahmens kommen.

    Wenn du den Platzbedarf des Textes in Kontrolle hast (bedingt webfonts), kannst du eine feste Breite in em geben und margin-left, margin-right auf auto stellen.

    --
    Neu im Forum! Signaturen kann man ausblenden!
    1. problematische Seite

      Hallo beatovich,

      Wenn du den Platzbedarf des Textes in Kontrolle hast (bedingt webfonts), kannst du eine feste Breite in em geben und margin-left, margin-right auf auto stellen.

      oder display: table; verwenden.

      Bis demnächst
      Matthias

      --
      Rosen sind rot.
    2. problematische Seite

      @@beatovich

      Wenn du den Platzbedarf des Textes in Kontrolle hast (bedingt webfonts)

      Ich glaube nicht, dass man den Platzbedarf des Textes mit Webfonts unter Kontrolle hat.

      Und noch weniger hat man unter Kontrolle, ob Webfonts geladen werden.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. problematische Seite

    @@Der Fräger

    ich würde gerne einen Rahmen um ein einzelnes Wort; noch genauer gesagt um eine Überschrift machen. Das Problem ist, dass der Rahmen nicht nur das Worst selbst umschließt sondern auch noch den ganzen Platz von der linken zur rechten Seite.

    Linke und rechte Seite? Die Überschrift ist zentriert? Im Web nicht unbedingt die beste Idee.

    So dass meien Ergebnisse immer so aussehen. dass ich einen ziemlich langen schmalen Rahmen habe, in dem dann in der Mitte nur ein einzelnes Wort steht und rechts und links daneben elendig viel Platz frei ist bis die Seitenränder des Rahmens kommen.

    h1h6 sind Blockelmente, die sich per Grundeinstellung über die gesamte zur Verfügung stehende Breite ausdehnen. Das kann man ihnen aber abgewöhnen, indem man sie maximal so breit werden lässt wie es ihr Inhalt erfordert: max-width: max-content (Firefox und iOS-Safari mit Präfix; Edge und IE noch gar nicht [Can I use])

    Sieht dann so aus.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. problematische Seite

      @@Gunnar Bittersmann

      max-width: max-content (Firefox und iOS-Safari mit Präfix; Edge und IE noch gar nicht [Can I use])

      Wobei die Benennung „Can I use“ hier irreführend ist. Natürlich kann man das benutzen, auch wenn es im Edge/IE keine Wirkung zeigt. Dann geht in diesen Browsern die Box halt über die gesamte Breite – na und? Müssen Webseiten in allen Browsern exakt gleich aussehen?

      Die Seite sieht im Edge/IE gut aus. In Firefox, Safari, Chrome sieht sie noch besser aus – progressive enhancement.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann