✔ Border mit Bild

[saila]

Hi,

ich probier gerade in einen Border ein Bild mit einzubinden. Also statt Farbe eben das Bild. Aber es will nicht so recht. Ist dies überhaupt möglich?

 

[Chronix]

Bin zwar kein CSS Profi aber ich glaube nicht, dass das geht...
Denke man kann es aber relativ einfach nachstellen! mach eine äußere Box, die als hintergrund besagtes bild enthält.
In diese Box legst du den eigentlichen inhalt und lässt mit margin oder so einen abstand zur äußeren Box der genau der bildbreite/höhe entspricht.

Wenn du nun in der Inneren Box einen anderen Hintergrund einstellst sollte es doch wie ein Rahmen wirken.

Hoffe ich konnte helfen *g*

 

[saila]

Hi,

diese Idee hatte ich schon. Aber diese Lösung gefällt mir eben nicht. Naja, mal abwarten....

 

[Dr Dau]

Hallo!

Soweit ich weiss, geht sowas nicht.
Mir fällt auch nur die Variante mit einem Hintergundbild ein.

So lange das Element eine statische Grösse hat, ist es auch ganz einfach.
Du bastelst Dir Deinen Rahmen als Bild in der gewünschten Grösse.
Alles was nicht als Rahmen dargestellt werden soll (also der mittlere Bereich) machst Du transparent.
Dieses Bild nimmst Du nun als Hintergrundbild für Dein Element und gibst dem Element einen passenden Randabstand (padding), damit z.b. der Text nicht über Deinem "Rahmen" liegt.

Wenn das Element jedoch eine variable Höhe/Breite hat, wird es schwierig..... müsste aber (zumindest theoretisch) auch machbar sein.
Du setzt in Dein Hauptelement oben und unten jeweils ein weiteres Element (mit einem Hintergrundbild als Deinen Rahmen) mit fester Höhe, die Breite müsste sich dem Hauptelement anpassen.
Gleiches machst Du links und rechts, nur halt mit fester Breite und die Höhe müsste sich dem Hauptelement anpassen.
Zwischen diese 4 Elemente setzt Du nun noch ein Element, wo z.b. Dein Text reinkommt (Höhe und Breite müsste sich dem Hauptelement, abzüglich der Stärke Deines Pseudo-Rahmens, anpassen).

Die Variante mit der variablen Höhe/Breite werde ich (aus wohl verständlichen Gründen ) aber erst garnicht versuchen umzusetzen.

Gruss Dr Dau

 

[Maik]

Um dein Vorhaben realisieren zu können, wirst du auf einen Workaround zurückgreifen müssen, da in der border-Eigenschaft (noch) keine Grafik als Wert angegeben werden kann. Die border-image-Eigenschaft ist leider erst für CSS3 vorgesehen.

 

[saila]

Also die Lösung nach langem probieren:

#boxa {
	width: 210px;
	float: left;
	background: #666161;
	}

#boxb {
	width: 656px;
	background: #373636 url(img/tre.jpg) repeat-y;
	padding-left: 22px;
	float: left;
	}

Mit dieser Lösung ist es nicht nötig, ein zweites Element einzubinden. Das Hintergrundbild hat eine Breite von 10 Pixel und verläuft somit nur vertical und das nur einmal.

Das Hintergrundbild hat die Aufgabe den Bereich zwischen Boxa und Boxb zu trennen. Sozusagen eine Art Trennstrich - nur eben als Bild (individueller als ein Border). Die Hintergrundfarbe des Bildes sollte dem Body-Hintergrund entsprechen.

1. Box für Navigaton gedacht.
2. Box für Content.

Ist einsetzbar unter FF, IE > 4, NN, Safari und Opera.

 

[Gumbo]

[…] da in der border-Eigenschaft (noch) keine Grafik als Wert angegeben werden kann. Die border-image-Eigenschaft ist leider erst für CSS3 vorgesehen.

Ein Blick in die Zukunft: das CSS3 Backgrounds and Borders Module.

Bei derzeitiger Unterstützung wirst du jedoch wie bereits erwäht auf eine andere Hilfkonstruktion zurückgreifen. Ich würde dabei aus Bequemlichkeit eine JavaScript-Lösung bevorzugen. Siehe dazu etwa „Transparent custom corners and borders“ sowie „Flexible box with custom corners and borders“ von Roger Johansson.

 

[Dr Dau]

.....Sozusagen eine Art Trennstrich - nur eben als Bild (individueller als ein Border). Die Hintergrundfarbe des Bildes sollte dem Body-Hintergrund entsprechen.....

*örgs* Ich bin von einem (rundum) Rahmen ausgegangen.
Als Trennlinie ist es natürlich einfacher.

Warum muss das Bild überhaupt eine Hintergrundfarbe haben?
Eine Transparenz hätte den Vorteil, dass Du jederzeit (warum auch immer) die Hintergrundfarbe des Body ändern könntest, ohne die Grafik austauschen zu müssen.
Aber selbst die Transparenz kannst Du Dir sparen.
Da die Grafik in Deinem Fall ja nur als Linie dient, bräuchtest Du nur mittels background-position festlegen ob sie am linken (left) oder rechten (right) Rand positioniert werden soll.
Somit ist also auch eine variable Breite der Box möglich.

 

[saila]

Hi Dr. Dau,

je nach Grafik die das eigentl. Bild darstellt, muss ein Hintergrund dazu. Insbesondere wenn z.B. ein Schatten eingebunden wird. Geht ausschl. nur über gif-Bildformate.

Natürlich kann man den Hintergrund auch transparent gestalten. Ist jedem selbst überlassen Allerdings - es geht nicht um einfache Linien, welche ohnehin über die Möglichkeit von Borderelementen umgesetzt werden kann. Pfeile nach oben oder unten, auch Dollarzeichen können eine Trennlinie darstellen oder auch Häckchen oder was weis ich alles.

In meinem Beispiel (Lösung) ist die Boxenbreite ohnehin wurscht. Diese kann entweder variabel sein oder eine feste Breite haben. Der Border wird auf jeden fall immer links angezeigt - sofern ein Bild hinterlegt ist. Somit ist background-position nur dann wichtig, wenn z.B. das Background-Bild auf der rechten Seite oder in der Mitte oder sonst wo (ausgenommen links) zu positionieren wäre.

 

[Dr Dau]

Mensch, ich kenne doch Deine Grafik nicht.
Auch ein Dollarzeichen könnte auf einem transparentem Hintergrund sein..... muss ja nicht zwangsweise einen Schatten haben.
Ein Schatten hat für üblich ja eine weiche Kante..... verhällt sich also genauso wie ein Verlauf..... in dem Fall muss ich Dir natürlich recht geben, dass der Grafikhintergrund die gleiche Farbe haben muss wie z.b. der Body-Hintergrund.

Mit der background-position wollte ich nur sagen, dass man die "Linie" auch rechts positionieren kann ohne dass die Grafik die Breite der Box haben muss.
Ich Deinem Fall brauch natürlich nichts angegeben werden, da die Startposition per default links oben in der Ecke ist.