Geld für Ihre Startseite!

Benutzer-2472 · 06.07.2011, 17:07:47

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?

theHacker · 06.07.2011, 17:26:34

Mal paar Ideen:

Das <fieldset> mit CSS umstylen? Kp, ob das klappt

Code:


1:
2:
3:
4:
5:
6:
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.

Benutzer-2472 · 06.07.2011, 17:34:57

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.

dori · 06.07.2011, 21:00:26

Code:


1:
2:
3:
4:
5:
6:
fieldset {
    border: solid 1px black;
    border-left: 0;
    border-right: 0;
}
legend {margin-left: 50%;}

HTML-Code:


1:
2:
3:
4:
5:
 <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.

Benutzer-2472 · 06.07.2011, 23:06:51

Zitat:

Zitat von F.Dori

[...]
Wieso willst du das imitieren? Dafür ist das Fieldset ja da.

Es funktioniert auch, aber fieldset ist eine Eigenschaft zur Gruppierung von FORM-Elementen und ich habe da keine Form. Sieht ja keiner *hust*

dori · 06.07.2011, 23:12:01

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-Code:


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://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>

06.07.2011, 17:07:47	#1 (permalink)
Benutzer-2472 abgemeldet Reg: 01.05.2006 Beiträge: 32.944	fieldset imitieren / unterbrochenes hr 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? Geändert von Benutzer-2472 (01.04.2012 um 11:02:22 Uhr)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[CSS] Fieldset Legend formatieren	NagathoR	Programmierung	2	13.03.2008 11:12:58

06.07.2011, 17:34:57	#3 (permalink)
Benutzer-2472 abgemeldet Reg: 01.05.2006 Beiträge: 32.944	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.

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)