[GastForen Web allgemein HTML und CSS / Stylesheets background-image

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

background-image

publisherin
Beiträge gesamt:

3. Apr 2009, 10:16
Beitrag # 1 von 7
Bewertung:
(2184 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
background-repeat: repeat-y; repetiert nicht
Weiss jemand woran das liegt?
Möchte den Border mit einem Bildausschnitt darstellen.
Code
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style>
#wrapper { background-color:#cc9; width: 812px;
margin-left:auto; margin-right:auto; margin-top: 20px;
border-top:1px solid #000000; border-bottom:1px solid #000000;} /*---margin?????------*/

#border_links {float: left;
width: 3px; height: auto;
background-image:url(../images/border_links.jpg); background-repeat:repeat-y; }

#conclude { float: right; left: 806px; width: 6px;
background-image:url(../images/border_rechts.jpg); background-repeat: repeat-y;}

</style>
</head>

<body>

<div id="wrapper">Wrapper<br />
<br />
Wieso reppetieren sich die Ränder nicht?????????
<br />
<br />

<div id="border_links"><br/>
</div>

<div id="conclude"><br/>
</div>

</div>

</body>
</html>


Danke für eure Hilfe!
X

background-image

FSt
  
Beiträge gesamt: 1965

3. Apr 2009, 10:39
Beitrag # 2 von 7
Beitrag ID: #391975
Bewertung:
(2176 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo publisherin

Guck Dir mal das an:
http://de.selfhtml.org/...ormate/einbinden.htm

Gruss
Martin


als Antwort auf: [#391969]

background-image

publisherin
Beiträge gesamt:

3. Apr 2009, 10:52
Beitrag # 3 von 7
Beitrag ID: #391977
Bewertung:
(2172 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Martin

Habe das css extra im html für den Beispiel Code, damit man herausfinden kann warum das background-repaet nicht repetiert.

Im de.selfhtml.org habe ich auch schon gesucht.
Da steht ganz einfach mit background-repeat wird ein image automatisch repetiert bis der div zu ende ist.
woran liegt es wenn es nicht funktioniert??

Grüsse Chantal


als Antwort auf: [#391975]

background-image

SabineP
Beiträge gesamt: 7586

3. Apr 2009, 11:17
Beitrag # 4 von 7
Beitrag ID: #391979
Bewertung:
(2161 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Chantal,

Vielleicht stimmen die Pfade zu den Bildern nicht.
Ohne URL zur betreffenden Seite kann man da nur einen Hellseher fragen.


als Antwort auf: [#391977]

background-image

publisherin
Beiträge gesamt:

3. Apr 2009, 11:51
Beitrag # 5 von 7
Beitrag ID: #391985
Bewertung:
(2137 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sussane

Dachte mit dem code Ausschnitt geht es auch?

Nun habe ich herausgefunden; wenn ich für den div den height in fester pixel grösse angebe dann repetiert sich das image bis dorthin.

Ich möchte aber dass sich die Randhöhe vlexibel auf den Inhalt verhält. Habe es mit min-height versucht, damit verhält es sich aber gleich wie bei height.
Code
#border_links {float: left; 
width: 4px; min-height: 700px;
background-image:url(../images/border_links.jpg); background-repeat:repeat-y; }


Bin im Moment wirklich ratlos.

Grüsse Chantal


als Antwort auf: [#391979]

background-image

SabineP
Beiträge gesamt: 7586

3. Apr 2009, 12:28
Beitrag # 6 von 7
Beitrag ID: #391997
Bewertung:
(2108 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Chantal,

ein DIV wird immer so hoch wie sein Inhalt.

Du könntest also für alle 3 DIVs eine Höhe in Pixel angeben.

anderer Vorschlag:

Dein wrapper hat doch eine feste Breite.
Du könntest also ein zweites DIV außen herumlegen und dort ein Hintergrundbild angeben.

So brauchst Du nur zwei DIVs und ein Hintergrundbild.
Die Höhe würde sich automatisch mit dem Inhalt anpassen.

Hier mal ein Beispiel auf die Schnelle ohne Breitenangabe:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style type="text/css">
.rahmen{padding:0 6px 0 3px;background-image:url(bg_curre.gif);}
.rahmen-innen{background-color:#f00}
</style>
</head>

<body>
<div class="rahmen"><div class="rahmen-innen">Inhalt</div></div>
</body>
</html>


als Antwort auf: [#391985]
(Dieser Beitrag wurde von SabineP am 3. Apr 2009, 12:34 geändert)

background-image

publisherin
Beiträge gesamt:

3. Apr 2009, 18:51
Beitrag # 7 von 7
Beitrag ID: #392036
Bewertung:
(2067 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Liebe Sabrina

Vielen vielen Dank!!! Habe es gleich ausprobiert,
super wunderbar sieht es aus, ich sehe schon ich muss noch viel lernen.

Du warst meine Rettung, ich bin wirklich froh das es dieses Forum gibt.

Schönes Wochenende
Grüessli Chantal


als Antwort auf: [#391997]
X