Möchte einen Hintergrund mit Rahmen (gelöst)

Gidian · Beitrag von **Gidian** » 26.01.2008 01:16

Hallo zusammen,

ich habe eine denke ich recht simple Frage, aber ich kriege es alleine einfach nicht hin.
Ich möchte gerne meinem Forum einen dunklen Rahmen geben. Also dachte ich mir: Ich mache den Hintergrund dunkel und lege ein 2x2 Pix. großes Hintergrundbild drauf mit repeat-x, repeat-y und gebe dem ganze die gleichen Margin-Werte wie den anderen Elementen des Forums, um am Rand dann die Hintergrundfarbe zu sehen. Leider klappt das nicht wie man sieht: KLICK

Code: Alles auswählen

body {
	background-color: #2c2a2a;
	margin: 15px 25px 0 25px;
	background-image: url('images/Forum_background.gif');
	background-repeat: repeat-y repeat-x; 
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
}

Was mache ich falsch? Habt Ihr eine Idee?

Danke

Gidian

Beitrag von **JFooty** » 26.01.2008 10:41

Den Rahmen könntest du z. B. über einen div-Container realisieren, in den du alle anderen bereits vorhandenen divs reinpackst. Dann definierst du für den body die dunkle Hintergrundfarbe und dem neuen div spendierst du das helle Hintergrundbild. Die Breite des Rahmens kannst du dann über die margin-Werte festlegen. So würde ich das Problem angehen.
//edit: Für den neuen div könntest du mal probehalber folgendes definieren:

Code: Alles auswählen

.divneu {background-image:url(styles/subsilver2/theme/images/Forum_background.gif);
left:3%;
position:relative;
margin-top:35px;
width:94%;}

Mit den Zahlenwerten kannst du ja ein wenig herumexperimentieren, aber ich glaube so hattest du dir das in etwa vorgestellt.

Gidian · Beitrag von **Gidian** » 29.01.2008 13:05

Hi JFooty,

danke für Deine Antwort und sorry, dass ich mich erst jetzt wieder melde.
Dein Vorschlag klingt nachvollziehbar, aber leider weiß ich nicht so recht, wo ich ansetzen soll (ich würde mich bestenfalls als Laien bezeichnen).

...einen div-Container realisieren, in den du alle anderen bereits vorhandenen divs reinpackst

Wie und wo muss ich das machen? In der overall_header oder wo mache ich das? Muss ich einfach unter:

Code: Alles auswählen

 </head>
<body class="{S_CONTENT_DIRECTION}">

folgendes einsetzen:

Code: Alles auswählen

 <div id="Rahmen">

und dann ganz am Ende "</div>"?

Danke für Deine Hilfe

Gidian
und

Beitrag von **JFooty** » 29.01.2008 14:11

Genau so.
Suche also

Code: Alles auswählen

</head> 
<body class="{S_CONTENT_DIRECTION}">

und ersetze mit

Code: Alles auswählen

</head> 
<body class="{S_CONTENT_DIRECTION}">
<div id="Rahmen">

Suche

Code: Alles auswählen

</body>

und ersetze mit

Code: Alles auswählen

</div>
</body>

Füge in die css-Datei

Code: Alles auswählen

#Rahmen
{background-image:url(styles/subsilver2/theme/images/Forum_background.gif); 
left:3%; 
position:relative; 
margin-top:35px; 
width:94%;}

Vergiss bitte nicht, das helle Hintergrundbild für den body aus der css rauszunehmen. Sonst wird der entstehende dunkle Rahmen nicht sichtbar.

Vogt · Beitrag von **Vogt** » 29.01.2008 22:36

Hallo zusammen,

kann man das Anliegen nicht auch realisieren, indem man die css-Datei wie folgt editiert:

Code: Alles auswählen

body {
background-color:#2C2A2A;
background-image:url(styles/subsilver2/theme/images/Forum_background.gif);
border:2px solid #28241E;
color:#323D4F;
font-family:"Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
font-size:62.5%;
margin:10px;
}

Ich habe hier den Abstand mit margin:10px; festgelegt und den Rahmen mit border:2px solid #28241E; definiert.

LG
Vogt

Gidian · Beitrag von **Gidian** » 30.01.2008 14:34

Das Problem dabei ist, wenn ich das richtig sehe: Mein Hintergrundbild ist nur 2x2 Pixel groß und wird mit repeat x, repeat y; auf den gesamten Screen gelegt. Das müsstest Du also mind. noch einfügen. Ich weiß allerdings nicht, ob dann um jedes duplizierte Hintergrundbild ein eigener Rahmen gelegt wird. Würde ich jetzt mal vermuten. Oder es passiert gar nichts. Aber der Befehl "Border" weiß doch nicht, wo in diesem Fall der Rahmen beginnen und wo er aufhören soll, oder? Es aber natürlich auch sein, dass ich hier einem fatalen Irrtum unterliege.

Gruß

Gidian

Beitrag von **JFooty** » 30.01.2008 16:03

@Vogt: Du hast Recht. Mit border geht es sogar noch einfacher.

Aber dann würde sogar schon das hier ausreichen:

Code: Alles auswählen

body { 
background-image:url(styles/subsilver2/theme/images/Forum_background.gif); 
border:2px solid #28241E; 
color:#323D4F; 
font-family:"Lucida Grande",Verdana,Helvetica,Arial,sans-serif; 
font-size:62.5%;}

Also ohne margin (ist hier nicht notwendig, da ja der Rahmen für den Abstand sorgt) und background-color (für den Hintergrund ist ja das Hintergrundbild definiert). Mit 2px ist der Rahmen für meinen Geschmack auch etwas zu schmal.
@Gidian: Deine Sorge ist unbegründet. Der Befehl "border" bezieht sich nur auf den body deiner Seite. Der Rahmen wird auch nicht weitervererbt an die innerhalb des body liegenden Elemente.

Gidian · Beitrag von **Gidian** » 01.02.2008 13:40

Vielen Dank, Euch beiden. Ich habe es nun mit der Border-Variante ausprobiert und das klappt wunderbar. Es gibt nur ein einziges Problem: Jetzt, wo ich es ausprobiert habe, gefällt mir der Rahmen nicht.

Trotzdem vielen Dank und es wird bestimmt dem einen oder anderen helfen. Ich habe übrigens nicht genau den gleichen Code übernommen. Ich habe die den Rand aufgeteilt in left, right, top und bottom, um die Werte flexibel eingeben und meinem Seitenaufbau anpassen zu können. So sah´s am Ende in der stylesheet.css aus:

Code: Alles auswählen

body {
	background-image:url(styles/subsilver2/theme/images/Forum_background.gif);
	background-repeat: repeat-y repeat-x; 
	border-left: 25px solid #2c2a2a;
	border-right: 25px solid #2c2a2a;
	border-top: 15px solid #2c2a2a;
	border-bottom: 15px solid #2c2a2a;
	color:#323D4F;
	font-family:"Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
	font-size:62.5%;
}

Also, noch mal vielen Dank für Eure Hilfe. Nun bin ich wenigstens wieder ein Stück schlauer.

Gidian

tonidoc · Beitrag von **tonidoc** » 02.02.2008 02:04

Hallo Leute

Also ich habe seit 11.12.07 ne eigene Hompage, nennt sich http://www.pixelnude.ch
möchte eigentlich damit keine Werbung veranstalten, nun habe ich Euer Forum so ein bisschen durchgelesen, und ich stiess auf den Thread Hintergrundbilder. Startbild alles soweit hingekriegt, nun möchte ich in mein Forum ein bisschen Farbe bringen, habe etliche Beiträge durch gesehen, nur frage ich mich zum Schluss, wo zum Kukuck muss man den deisen Müll reinschreiben. Ich krieg es einfach nicht gebacken, arbeite mit NvU, womit man ja Dateien verändern kann. Bin in die Sparte Forum, da ich ja dort den Hintergrund ändern will, kann mir von Euch hellen User jemand helfen.
Habe das Beispiel genommen:
body {
background-images:url
etc. , von einem Mitglied der dies hier reinstellte.
Also die Frage ist, wie lautet die Datei, wo ich dies reinschreiben muss, damit ich im Forum eine Veränderung sehe, wohl verstanden, eine Veränderung habe ich schon gesehen, aber dahin gehend, dass ich mein Forum gar nicht mehr öffnen konnte.
Für professionelle Hilfe bin ich dankbar.Also wen ich ja im Forum den Hintergrund ändern möchte, muss ich ja mit dem Nvu die Forum-Datei öffnen, um an besagte Eingabe Stelle zu gelangen, nur dort hat es ja diverse Unterdateien, Frage welche?
MfG tonidoc