Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 19.06.2015, 16:45
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

die Linien links und rechts des Textes sind reine Layoutelemente. Deshalb gehören sie nicht in den body-Bereich sondern werden per CSS erzeugt.

Außerdem sollten sie keine feste Breite haben sondern sich flexibel anpassen.

Eine Lösung könnte zum Beispiel folgendermaßen aussehen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Text in Linie</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      h1 {
        text-align: center;
        width: 90%; 
        margin-left: auto;
        margin-right: auto;
        display: table;
        border-collapse: collapse;
        white-space: nowrap;
      }
      h1::before, h1::after {
        content: "";
        display: table-cell;
        width: 50%;
        background-image: linear-gradient(to right, black 50%, transparent 50%);
        background-position: 0 50%;
        background-repeat: repeat-x;
        background-size: 0.5rem 0.1rem;
      }
      h1::before {
        border-right: 1.5rem solid transparent;
      }
      h1::after {
        border-left: 1.5rem solid transparent;
      }
      p {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
      }
   </style>
</head>
<body>
   <article>
      <h1>Impressum</h1>
      <p>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!</p>
      <h1>Kurz</h1>
      <p>Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.</p>
      <h1>Was auch immer lang</h1>
      <p>Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag. Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war. Die Schritte wurden lauter und lauter, er sah eine dunkle Gestalt um die Ecke biegen. Fieberhaft irrten seine Augen durch die nächtliche Dunkelheit und suchten einen Ausweg. War jetzt wirklich alles vorbei?</p>
   </article>
</body>
</html>
Einfach den gesamten Quelltext in eine Datei kopieren und mit der Endung html abspeichern.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links