fieldset imitieren / unterbrochenes hr

B

Benutzer-2472

abgemeldet
1 Mai 2006
32.694
1.621
Mir fehlt gerade das passende Stichwort, daher versuche ich es jetzt mal per Forenbeitrag.

Ich möchte die folgende Konstruktion sauber und valide erreichen:

--------- Titel ------------

Quasi wie beim HTML Element fieldset, nur zentriert und eben nur die obere Linie.

Gibt es da eine vernünftige Möglichkeit?
 
Zuletzt bearbeitet:
Mal paar Ideen:

  • Das <fieldset> mit CSS umstylen? Kp, ob das klappt :think:
    Code: 
    fieldset {
  border-bottom: none;
  border-left: none;
  border-right: none;
  text-align: center;
}
  • <h1> mit Hintergrundgrafik
  • <h1> mit einem Border (z.B. border-top) und dann den Text mit margin, padding oder wahrscheinlich wirksamer: "position: relative" + "top" einsetzen
Probier mal aus, ob was n Erfolg bringt. Hab die Aufgabe so noch nicht gesehen.
 
Ich hab oben noch mal ein Beispiel eingefügt, damit deutlich wird was ich meine @ PNs.

@tH

fieldset umbauen wäre imo nicht sauber, da ich dann ja ein form-element zur gestaltung verhunzen würden.

Grafik wäre natürlich eine Möglichkeit, aber im Prinzip muss es doch möglich sein das auch mit reinem CSS zu gestalten. Ich versuche es mal mit den border-Möglichkeiten.
 
Code: 
fieldset {
    border: solid 1px black;
    border-left: 0;
    border-right: 0;
}
legend {margin-left: 50%;}

HTML: 
 <fieldset>
        <legend>Leseprobe</legend>

        <p>Leseprobe (297 KB, PDF)</p>
</fieldset>

Das wäre auch eine Möglichkeit. Was meinst du denn mit "verhunzen". Das sieht doch genau so aus wie du es haben möchtest?!

Wieso willst du das imitieren? Dafür ist das Fieldset ja da.
 
Zuletzt bearbeitet:
Wenn mich nicht alles täuscht, muss das Fieldset nicht innerhalb eines Form-Tags sein, um valide zu sein.

Schande über mein Haupt, wenn dem nicht so ist.

Wenn ich das so (komplett) durch den Validator jage, spuckt der mir passed und das ohne Warnung aus.


Solltest du trotzdem das Fieldset nicht dafür benutzen wollen, hast du hier einen kleinen Anstoß.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
    <style type="text/css">
        * { margin: 0; padding: 0;}

        #fieldset {
            position:relative;  /* bezugspunkt */
            top: 1em;
            border:1px solid black;
            border-right: 0;
            border-left: 0;
        }
        #legend {
            position:absolute;
            width: 65px;
            padding:0 5px;
            left:50%;
            margin-left: -32.5px;  /* haelfte der Breite */
            top:-10px;
            background:#fff;

        }
        p {padding: 1em;}
    </style>
</head>

<body>
    <div id="fieldset">
        <div id="legend">
            Leseprobe
        </div>

        <p>Leseprobe (297 KB, PDF)</p>
    </div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben