horizontale linie mit grafik?

[kristina]

hallo!!

ist es möglich mit css eine grafik statt einer hr anzeigen zu lassen, wie zB auch bei aufzählungen(list-style-image:url('images/ul.gif');)??

ich hoffe dass mir jemand helfen kann!

bis dann, kristina

[Götz]

Hallo kristina!

ist es möglich mit css eine grafik statt einer hr anzeigen zu lassen, wie zB auch bei aufzählungen(list-style-image:url('images/ul.gif');)??

Naja, ersetz die hr doch einfach durch nen div.
Dem kannst Du ja dann per CSS ein background-image oder was auch immer geben.

Da ich hr's normalerweise auch nicht als sonderlich "logische Auszeichnung" ansehen würde kann man die imho ohne Probleme durch nen div ersetzen, ohne seinen "schönen" Code kaputtzumachen ;)

Es könnte allerdings sein, daß Textbrowser hr irgendwie darstellen - einen div würden si natürlich nicht so darstellen können.

Ansonsten kannst Du der hr ja die "Farbe" transparent geben und ihr ein background-image geben, ich weiß aber nicht ob das funktioniert, bzw. fände dies auch nicht sonderlich sinnvoll - da würd ich lieber nen div nehmen.

MfG
Götz

[kristina]

Naja, ersetz die hr doch einfach durch nen div.
Dem kannst Du ja dann per CSS ein background-image oder was auch immer geben.

div :S davon hab ich net besonders ahnung

meinst dann einfach <div name=bla></div> und dann dem div im stylesheet nen hintergrund zuordnen?

[Götz]

Hallo kristina!

meinst dann einfach <div name=bla></div> und dann dem div im stylesheet nen hintergrund zuordnen?

So ähnlich, ja ;)

Zwar statt Deinem Code oben besser <div id="hrdings"></div> aber ansonsten so wie Du schon sagtest.

Einfach in der CSS-Datei:
#hrdings
  {
    /*
     Alle Deine Angaben
     also width, height
     background-color/image
     usw.
    */
  }

MfG
Götz

[nag]

Hallo,

<div name=bla></div>

verwende statt name -> class -> <div class="bla"></div>

und dann dem div im stylesheet nen hintergrund zuordnen?

Höhe und Breite sind auch erforderlich!

bsp.:

div.bla {
height:5px;
width:300px;
background-image:url(bild.jpg);
}

mfg NAG

[molily]

<div name=bla></div>

verwende statt name -> class -> <div class="bla"></div>

und dann dem div im stylesheet nen hintergrund zuordnen?

Höhe und Breite sind auch erforderlich!

bsp.:

div.bla {
height:5px;
width:300px;
background-image:url(bild.jpg);
}

Dann würde ich eher vorschlagen, den Abschnitt eines Dokuments mit dem div zu umspannen, vor allem wenn mehrere hr-Elemente vorkamen.

<div class"abschnitt">
<h2>Bla</h2>
<p>Bla</p>
...
</div>
<div class="abschnitt">
usw.

Dann das Hintergrundbild mit Wiederholung in der Horizontalen (background-repeat:repeat-x;), wenn es ein Muster ist, ansonsten keine Wiederholung (no-repeat) und oben zentriert ausgerichtet (background-position:top center;). Damit der Inhalt des divs nicht über dem Hintergrundbild liegt, bekommt es einen entsprechenden Wert für padding-top.

[MudGuard]

Hi,

Ansonsten kannst Du der hr ja die "Farbe" transparent geben

color darf im Gegensatz zu background-color nicht den Wert transparent annehmen.

'background-color'  <color> | transparent | inherit
'color'  <color> | inherit

(siehe http://www.w3.org/TR/REC-CSS2/propidx.html

cu,
Andreas

[Götz]

Hallo MudGuard!

color darf im Gegensatz zu background-color nicht den Wert transparent annehmen.
(siehe http://www.w3.org/TR/REC-CSS2/propidx.html

Vielen Dank für diese Ergänzung, nicht daß ich hier Müll poste ;)

Ich hatte nicht nachgeschaut und dachte, daß man "transparent" auf alle Farb-Eigenschaften anwenden dürfe.

MfG
Götz

[Orlando]

Hi Andreas,

color darf im Gegensatz zu background-color nicht den Wert transparent annehmen.

deshalb wird das derzeit von den Browsern auch nicht umgesetzt, wobei freilich Gegenteiliges zu erwarten ist:

http://www.w3.org/TR/css3-color/#transparent
 http://www.w3.org/TR/css3-color/#rgba-color
 http://www.w3.org/TR/css3-color/#hsla-color

Ich würde daher an dieser Stelle nicht so streng mit Götz umgehen ;-)

Grüße,
 Roland