HR-Linie neben dem Text

[SoWhy]

Hi,

normalerweise, wenn man eine <HR>-Linie erzeugt, kommt vor ihr, wenn dort Text ist, automatisch ein Break hin. Ich möchte gerne, dass die Linie direkt neben dem Text beginnt, quasi so:

Text -------------------------------------------------------------------------
Lorem Ipsum....
Lorem Ipsum....

Gibt es dazu eine Möglichkeit?

TIA
SoWhy

 

[Körnerbrötchen]

float ist hier dein Stichwort. Versuchs mal mit float:right.
Ich würde so etwas in der Art nehmen:

<hr style="float:right; width:80%;" /><div class="float:left;">Hallöchen</div>

 

[Efchen]

Das liegt daran, dass Block-Elemente, wie <hr> immer die volle verfügbare Breite (des Elternelements) einnehmen. Man muss ihnen eine Breite mitgeben und sie mittels float aus dem Textfluss nehmen.

Übrigens ist im Beispiel von Körnerbrötchen <p> für den Text die bessere Wahl als <div>, denn <div> ist nur zum Gruppieren und gibt hier dem Text nicht die erforderliche Beschreibung.

Gruß,
-Efchen

 

[SoWhy]

Ja, mit width und float dachte ich mir auch - aber wie kann ich das DIng dazu bringen, all den noch verfügbaren Platz einzunehmen?

 

[Efchen]

Indem Du ihm den restlichen Platz als Breite zuweist. Wird halt schwierig, wenn Du die Breite des Textes in Pixel hast, aber nicht die Breite des Elternelements, denn width:100%-200px geht nicht.

 

[SoWhy]

Indem Du ihm den restlichen Platz als Breite zuweist. Wird halt schwierig, wenn Du die Breite des Textes in Pixel hast, aber nicht die Breite des Elternelements, denn width:100%-200px geht nicht.

Auf deutsch gibt es keine Möglichkeit, einfach den restlichen Platz zuzuweisen? Weil ich hab die Breite des Elternelements nicht, weil variabel...

 

[Efchen]

Doch, wenn Du die Breite des Textes auch in % angegeben hast.

Oder aber Du floatest Deinen Text. Die Linie wird dann erst neben Deinem Textelement beginnen.

 

[SoWhy]

Wenn ich wie du oben vorschlägst beide Elemente floate ohne "width"-Angaben, dann beginnt die Linie über bzw. unter dem Text (je nachdem wo das <hr> ist)

 

[neuroleptika]

hr

Wenn ich wie du oben vorschlägst beide Elemente floate ohne "width"-Angaben, dann beginnt die Linie über bzw. unter dem Text (je nachdem wo das <hr> ist)

<hr> ist zur optischen Gestaltung ungeeignet.
Wenn ich <hr> einsetze, verstecke ich es für die Bildschirmanzeige gleich wieder mit visibility: hidden;. Für den Internetexplorer sogar mit display: none;.
Die unterschiedliche Darstellung in den jeweiligen Browsern ist zu groß.

Wenn du <hr> trotztem anzeigen möchtest kannst du es so versuchen.
html:

<div id="text_hr">
<p>Text</p>
<hr />
</div>

css:

  #text_hr {
  width: 300px;
  background-color: #880D02;
  color: #F0F0F0;
  position: relative;
  }

  #text_hr p,
  #text_hr hr {
  margin: 0;
  padding: 0;
  }

  #text_hr p {
  width: 20%;
  text-align: right;
  }

  #text_hr hr {
  display: block;
  width: 79.9%; /* rundungsfehler vermeiden */
  position: absolute;
  top: 0.5em;
  left: 20%;
  height: 1px;
  border: none;
  background-color: #F0F0F0;
  }

Sehe dir das Ergebnis besser erst in diversen Browsern an.
Für mehrzeiligen Text funktioniert top: 0.5em natürlich nicht wie gewünscht.

Ich würde das so nicht verwenden. Es gibt schönere (einheitliche) Möglichkeiten eine Linie darzustellen.

Wofür brauchst du das denn?

 

[Efchen]

<hr> ist zur optischen Gestaltung ungeeignet.

Es ist ja auch ein HTML-Tag und dient der Strukturierung :-)

Die unterschiedliche Darstellung in den jeweiligen Browsern ist zu groß.

Hmmm...ich kann mich jetzt gar nicht an unterschiedliche Darstellungen erinnern. Außerdem gilt da ja das selbe, wie für alle Elemente: Man braucht ja nur die Eigenschaften per CSS zu setzen, die man garantiert haben will. Auch eine hr hat CSS-Eigenschaften, es besteht halt nur aus einer border.

Ich würde das so nicht verwenden. Es gibt schönere (einheitliche) Möglichkeiten eine Linie darzustellen.

Um eine Linie darzustellen, ist <hr> selbstverständlich nicht geeignet, den eine Linie ist Layout/Design und somit der part von CSS. HTML dient ja nur der Strukturierung. So einfach ist das :-)

Gruß,
-Efchen

 

[neuroleptika]

Hi Effchen,

..gilt da ja das selbe, wie für alle Elemente: Man braucht ja nur die Eigenschaften per CSS zu setzen, die man garantiert haben will. Auch eine hr hat CSS-Eigenschaften, es besteht halt nur aus einer border.


Um eine Linie darzustellen, ist <hr> selbstverständlich nicht geeignet, den eine Linie ist Layout/Design und somit der part von CSS. HTML dient ja nur der Strukturierung. So einfach ist das :-)

Nur aus Border besteht sie leider nicht. In dem Beispiel habe ich <hr> sogar border: none; gegeben und sie wird trotzdem angezeigt.
Man könnte annehmen, daß eine <hr> ihre Höhe aus height, border, padding und margin erhält.
In der Praxis sieht das in diversen Browsern aber anders aus.
Auch die Farbe wird unterschiedlich interpretiert. Manche Browser wollen background-color und border-color andere auch color.

Der Internet Explorer lässt immer einen horizontalen Abstand, selbst bei height: 0; visibility: hidden; margin: 0; border: none; usw.
Einheitlich sieht es nie aus.

Deswegen würde ich <hr> in der Bildschirmausgabe nicht zeigen.
Wenn mann sie im html-Quelltext haben will, soll sie da halt stehen.

Wenn es um eine schöne Linie geht, würde ich ein background-image einsetzen.

Es gibt einige html-Elemente die sowas von hartnäckig in der Gestaltung sind, daß man sie verfluchen sollte (wenn sie nicht schon verflucht währen).

 

[Efchen]

Man sollte annehmen, daß eine <hr> ihre Höhe aus height, border, padding und margin erhält.

Naja, prinzipiell tut sie das ja auch. Ich habs mal ausprobiert. "Die ganze Browserwelt macht das so...nur ein kleiner, unbeugsamer Browser leistet der Konkurrenz erheblichen Widerstand". :mrgreen:

In der Praxis sieht das in diversen Browsern aber anders aus.
Auch die Farbe wird unterschiedlich interpretiert. Manche Browser wollen background-color und border-color andere auch color.

Nö, das kann ich jetzt nicht bestätigen. Da die hr nur aus border besteht, ist hier einzig die border-color interessant. Wenn man natürlich die Höhe vergrößert, dann gibts auch ne background-color, ist ja logisch. Und das machen IE und FF sogar gleich.
Und jetzt hab ich nochmal Opera dazu genommen, auch der macht das gleich.

Der Internet Explorer lässt immer einen horizontalen Abstand

Richtig. Aber ich empfinde hr eher als Strukturmittel und nicht als ein Element, mit dem ich pixelgenau Linien ziehen kann, dafür ist eh CSS gedacht.
Diesen Abstand macht aber nur der IE (6), FF (2) und Opera (8).

Daher sehe ich das jetzt nicht wirklich schlimm.

Wenn es um eine schöne Linie geht, würde ich ein background-image einsetzen.

Wenn es um eine schöne Linie geht, ist <hr> sowieso semantisch Unfug, weil es sich um Beiwerk (= CSS) handelt, nicht um Inhalt/Struktur (= HTML).

Gute Nacht,
-Efchen