Ist der Code so richtig ?

[kunert0345]

Hallo,
Ich habe versucht einen Text zwischen 2 Linien zu stellen
( --- Text --- ).
Das habe ich auch hinbekommen, aber das 3 malige "float:right" kommt mir syntaktisch komisch vor.

Deswegen meine Frage ist dieser Code richtig ?:
<hr style="float:right; width:30%;"><div style="float:right; width:40%; text-align: center;">Test</div><hr style="float:right; width:30%;">

[Steel]

Hi!

Da Du 3 Blockelemente nutzt machen auch die 3 Floats Sinn.

Is das nur ne Spielerei zum Testen?

[kunert0345]

Is das nur ne Spielerei zum Testen?

Nein, es gehört zu dem Website Layout an dem ich gerade arbeite.

[Steel]

Nein, es gehört zu dem Website Layout an dem ich gerade arbeite.

Klingt ersttmal komisch, Dein Konstrukt. Aber Du wirst es ja wissen. Kannst es ja mal verlinken, damits hier schön verrissen werden kann. ;)

[kunert0345]

Kannst es ja mal verlinken

Wenn ich wieder uploade ist es hier zu finden: ChaosWerk

[Thomas Luethi]

Hallo Kunert,

Ich habe versucht einen Text zwischen 2 Linien zu stellen
( --- Text --- ).

Diese Linien sind für mich schmückendes Beiwerk.
Darum würde ich in HTML die HR-Elemente weglassen
und die Linie als Hintergrundbild mit CSS einfügen.
Falls es sich beim Text um eine Überschrift handelt,
sollte man ihn als H1, H2 u.s.w. auszeichnen.

HTML:
<h2 class="bsp2"><div>Test 2</div></h2>

CSS:

h2.bsp2 { background:url("linie-horizontal.gif") 0% 50% repeat-x; }  
h2.bsp2 div { width:39%; margin-left:auto; margin-right:auto; padding:0 0.2em; color:#000000; background-color:#ffffff; }

Die erste Regel setzt für das H2-Element als ganzes das Hintergrundbild.
Die zweite Regel setzt für die innere DIV-Box die Breite, die Zentrierung (mit den Margins), etwas Abstand rechts und links (Padding) sowie wieder einen einfarbigen (hier weissen) Hintergrund, damit hinter dem Text selbst kein Hintergrundbild ist.
Die Breite der Box könnte man übrigens auch in px oder em festlegen.

Wenn die Box mit dem Text immer nur so breit sein soll, wie nötig, wäre auch folgendes möglich:

HTML:
<h2 class="bsp3"><span>Test 3</span></h2>

CSS:

h2.bsp3 { text-align:center; background:url("linie-horizontal.gif") 0% 50% repeat-x; }  
h2.bsp3 span { padding:0 0.2em; color:#000000; background-color:#ffffff; }

Siehe Online-Beispiel

Freundliche Grüsse, Thomas

[MudGuard]

Hi,

HTML:
<h2 class="bsp2"><div>Test 2</div></h2>

invalid, da h2 keine block-Elemente enthalten darf.

cu,
Andreas

[Gunnar Bittersmann]

@@Thomas Luethi:

nuqneH

Wenn die Box mit dem Text immer nur so breit sein soll, wie nötig, wäre auch folgendes möglich:

HTML:
<h2 class="bsp3"><span>Test 3</span></h2>

Unschön daran: Das zusätzliche 'span'-Element im Markup.

Schöner wäre, es ginge ohne, also für <h2>Test</h2>.

Und es geht (fähige Browser vorausgesetzt):

h2  
{  
  display: table-row;  
  text-align: center;  
}  
  
h2::before, h2::after  
{  
  background: white url(linie-horizontal.gif) repeat;  
  content: "\A0";  
  display: table-cell;  
  width: 50%;  
}

Abstand zwischen Text und Linie wäre auch möglich: Die Linie hinreichend breit machen (auf die Dateigröße wirkt sich das so gut wie gar nicht aus) und den Abstand rechts und links von der Linie in die Grafik mit einbauen.

h2::before { background-position: right }  
/* h2::after { background-position: left } muss nicht angegeben werden, da default */

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Und es geht (fähige Browser vorausgesetzt):

Nachtrag: Auch IE 8 ist fähig; allerdings versteht er bei Pseudoelementen nicht die CSS-3-gemäße Schreibweise mit '::', wohl aber 'h2:before, h2:after'.

Qapla'

[Thomas Luethi]

Hallo zusammen,

Danke für die Korrektur, dass H2 kein DIV enthalten darf.
(Wie konnte ich das vergessen?! ;-)

Stattdessen könnte man halt SPAN mit display:block nehmen,
falls die innere Box gewisse Eigenschaften braucht, die nur
ein Block-Level-Element haben kann.

Es ist mir klar, dass dieses innere, zusätzliche HTML-Element
eigentlich unschön ist, und ich danke Gunnar für den kreativen
Ansatz ohne zusätzliches HTML-Element, dafür mit CSS-"Tabelle",
bei der links und rechts vom Text mit :before und :after
eine "Zelle" eingefügt wird. Da diese (wegen der Angabe 50%)
maximal breit werden, wird der Text zusammengestaucht, und es
kommt zu (unerwünschten) Zeilenumbrüchen, siehe Beispiel 4
im aktualisierten Online-Beispiel
Das kann man mit einem zusätzlichen white-space:nowrap vermeiden,
siehe Beispiel 5.

h2

{ display: table-row; text-align: center; }

h2::before, h2::after
{
  background: white url(linie-horizontal.gif) repeat;
  content: "\A0"; display: table-cell; width: 50%;
}

  

> Abstand zwischen Text und Linie wäre auch möglich: Die Linie hinreichend breit machen (auf die Dateigröße wirkt sich das so gut wie gar nicht aus) und den Abstand rechts und links von der Linie in die Grafik mit einbauen.  
> `h2::before { background-position: right } `{:.language-css}  
  
Auch das ist natürlich eine sehr elegante Idee!  
  
Ich habe alles in meinem [Online-Beispiel](http://www.tiptom.ch/tests/fremdes/linie-text-linie.html) umgesetzt.  
Neu habe ich auch noch Screenshots angefügt.  
  
Ergänzen möchte ich noch, dass meine "Lösungen" mit  
den meisten Browsern "funktionieren", u.a. mit Firefox 3.0,  
MS IE 6.0, 7.0 und 8.0, Opera 10.0 und Safari 4.0.  
  
Der Ansatz von Gunnar (CSS-"Tabelle") funktioniert nur  
in MS IE 8.0, Firefox 3.5, Opera 10.0.  
Aber nicht in Firefox 3.0, MS IE <= 7.0, Safari 4.0.  
  
Auch der Ansatz von kunert (HR - Text - HR mit float:right)  
funktioniert übrigens in MS IE <= 7.0 nicht wie gewünscht.  
  
mfg Thomas

[Thomas Luethi]

Sorry, das lange Quellcode-Zitat war überflüssig, da ich
nicht mehr im Detail darauf Bezug nehme.
mfg TL

[suit]

Wenn die Box mit dem Text immer nur so breit sein soll, wie nötig, wäre auch folgendes möglich:

Oder ganz simpel mittels :outside und einer Hintergrundgrafik. Sofern der Hintergrund einfarbig ist:

h2 {
  margin: 0 auto;
  padding: 0 2em;
  background: white;
}

h2:outside {
  content: '\00A0';
  display: block;
  background: white url(linie.png);
}

[suit]

Oder ganz simpel mittels :outside und einer Hintergrundgrafik.

Anmerkung: gängige Browser unterstüzten das aber nicht :)