border-top mit Grafik versehen

[Anton]

Hallo,

wie im Codefragment unten zu sehen ist, erhält der Footer einen oberen schmalen Rand mit Hilfe von border-top. Ich würde nun gerne anstatt des einfarbigen Randes lieber eine Grafik für diesen Rand benutzen. Hierzu habe ich mir eine Grafik besorgt die kachelbar ist. Könnt ihr mir sagen, was ich tun muss, damit diese Grafik als Hintergund des oberen Randes genommen wird?

#footer
{
    color:#666;
    background: #f9f9f9;
    padding: 10px 20px;
    border-top: 5px #efefef solid;
}

[suit]

padding und background (ohne widerholung) werden dir helfen

http://suit.rebell.at/index.php?id=14
user: suit
pass: rebell

der linke rahmen bei den code-bereichen ist so gelöst

haken: du kannst nur einen derartigen rahmen pro element einbauen - wenn du den auf allen seiten willst, kannst du eine beliebige "runde ecken" technik dafür missbrauchen

[Anton]

Du schreibst:

der linke rahmen bei den code-bereichen ist so gelöst

Ich hab versucht zu verstehen was du meinst. Leider blick ich nicht so ganz durch. Kannst du mir vielleicht ein paar mehr Infos geben?

[suit]

der linke rahmen bei den code-bereichen ist so gelöst

Ich hab versucht zu verstehen was du meinst. Leider blick ich nicht so ganz durch. Kannst du mir vielleicht ein paar mehr Infos geben?

guck ins css der verlinkten seite - der selektor pre { } drüfte dich interessieren

[Anton]

Denn Selektor pre kann ich leider nirgends finden.

Ich habe über die Suchfunktion gesucht... nichts. Kannst du mir vielleicht den relevanten Code hier in Forum posten? Ich hab anscheinend ein Brett vorm Kopf...

[suit]

Denn Selektor pre kann ich leider nirgends finden.

ich find ihn sofort
http://suit.rebell.at/fileadmin/template/css/screen.css

naja, vielleicht liegts daran, dass ich das ding selbst geschrieben hab ;)

Ich habe über die Suchfunktion gesucht... nichts. Kannst du mir vielleicht den relevanten Code hier in Forum posten? Ich hab anscheinend ein Brett vorm Kopf...

  
pre {  
  white-space: pre;  
  margin: 0 0 1em 0;  
  max-height: 350px;  
  overflow: auto;  
  padding-left: 3px;  
  background: #F0F8F0 url(../img/pre.png) repeat-y left;  
  font-size: 107.75%;  
  font-size: 1em;  
  line-height: 125%;  
}

[Hopsel]

Hi suit!

pre {
  white-space: pre;
  margin: 0 0 1em 0;
  max-height: 350px;
  overflow: auto;
  padding-left: 3px;
  background: #F0F8F0 url(../img/pre.png) repeat-y left;
  font-size: 107.75%;
  font-size: 1em;
  line-height: 125%;
}

  
Woohoo! Ein [Déjà-vu](https://forum.selfhtml.org/?t=179854&m=1187421)  
  
Machmal denkst du echt, du redest mit ´ner Wand...  
  
MfG H☼p~I talk to my wand! ;-)~sel

-- 
"It's amazing I won. I was running against peace, prosperity, and incumbency."  
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001  
  
[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)

[suit]

Machmal denkst du echt, du redest mit ´ner Wand...

bei wänden besteht die hoffnung, dass sie eine reaktion zeigen :D

[Anton]

Sorry Leute... auch auf die Gefahr hin das ihr mich für doof haltet muß ich nochmal nachfragen. Ich schau mir jetzt schon fast ne Stunde den Quellcode an, begreife aber leider immernoch nicht was suit mir in seiner Webseite klar machen will.

Ich weiss garnicht wie ich anfangen soll, um zu verstehen wie ich das mit der Grafik innerhalb eines Elementes lösen kann.

Ich sag einfach mal was ich bisher verstanden habe:

Anscheinend ist der linke graue Rand innerhalb des content Containers so gelöst wie ich es benötige. Wenn ich das richtig verstanden habe, dann ist dieser Rand irgendwie der Innenabstand innerhalb des Contents realisiert. Trotz allem ist beim linken Rand aber doch keine Grafik hinterlegt und genau das suche ich ja.

Kurzum ich weiss nicht so wirklich was ihr mir sagen wollt.

[suit]

Anscheinend ist der linke graue Rand innerhalb des content Containers so gelöst wie ich es benötige. Wenn ich das richtig verstanden habe, dann ist dieser Rand irgendwie der Innenabstand innerhalb des Contents realisiert. Trotz allem ist beim linken Rand aber doch keine Grafik hinterlegt und genau das suche ich ja.

ich hab von dem bereich gesprochen, wo die codebeispiele sind - die hellgrünen dinger mit dem schräg-gestreiften dunkgelgrünen rand :)

das dafür nötige css (+ überflüssiges zeug) hab ich dir sogar 1:1 rauskopiert - wie der selektor zeigt, ist das zeug für das pre-element gedacht, funktioniert aber praktisch überall anders auch so

[Hopsel]

Hi Anton!

Kurzum ich weiss nicht so wirklich was ihr mir sagen wollt.

Folgende Beispielseite zeigt eine Überschrift und einen Textabsatz.
Der Absatz besitzt einen oberen "Rahmen", der 5 Pixel hoch ist.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  <title>Test</title>  
  <style type="text/css">  
    #meine_id {  
      color:#666;  
      background: #f9f9f9 url(border-top.gif) repeat-x left top;  
      padding: 15px 20px 10px 20px;  
    }  
  </style>  
</head>  
<body>  
<h1>Testseite</h1>  
<p id="meine_id">Ich bin ein lustiger Text!</p>  
</body>  
</html>

MfG H☼psel

[dieselross]

MfG H☼p~I talk to my wand! ;-)~sel

Hmm. Wenn Du mit deinem Zauberstab sprichst, was passiert dann? ;-)

Gruß
dieselross

[Hopsel]

Hi dieselross!

Hmm. Wenn Du mit deinem Zauberstab sprichst, was passiert dann? ;-)

Aus unerfindlichen Gründen keine Reaktion!

MfG H☼psel

[Hopsel]

Hi Anton!

Könnt ihr mir sagen, was ich tun muss, damit diese Grafik als Hintergund des oberen Randes genommen wird?

Das geht nicht. Aber du könntest die Grafik als Hintergrundbild einbinden. Sie sollte 5px hoch sein.

#footer  
{  
    color:#666;  
    background: #f9f9f9 url(GRAFIK) repeat-x left top;  
    padding: 15px 20px 10px 20px;  
}

MfG H☼psel

[LX]

Lediglich ganz neue Versionen von Webkit unterstützen diese Eigenschaft, die erst mit CSS3 kommen soll, allerdings mit einem Prefix: "-webkit-border-image".

Ansonsten nutze, wie bereits vorgeschlagen, padding und background, solange Du nur den oberen Rahmen benötigst.

Gruß, LX