mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 09.08.2020 09:48 Benutzername: Passwort: Auto-Login

Thema: CSS und Rahmen mit Grafik vom 23.01.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS und Rahmen mit Grafik
Seite: 1, 2  Weiter
Autor Nachricht
Topper23
Threadersteller

Dabei seit: 23.01.2009
Ort: Aachen
Alter: -
Geschlecht: Männlich
Verfasst Fr 23.01.2009 11:32
Titel

CSS und Rahmen mit Grafik

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,
puuh, is jetzt rel schwer zu erklären, aber ich geb mir mühe! ^^

Ein Kunde von uns soll ne neue Website bekommen. Das CI sieht dafür auch tolle Kästen als Eye-Catcher vor. Diese haben einen gelben Rahmen und ein Pluszeichen oben links auf dem Rahmen. Unter dem "+" soll der gelbe Rahmen nicht mehr sichtbar sein.
Hier mal ein Quelltext der verdeutlicht was ich will:
Code:
<body style="background-color: #eee;">

<div style="position: relative; top: 50px; left: 50px; border: #ff0 3px solid; width: 300px; height: 300px; padding: 15px; display: block;">
   <div style="position: relative; top: -40px; left: -27px; background-color: #eee; font-size: 40px; font-weight: bold; color: #00f; width: 35px; heigt:20px;">+</div>
   kasten-inhalt
</div>

Das Problem ist nun folgendes: SO kann ich es aus 2 Gründen nicht umsetzten.
a) Der Hintergrund ist nicht einfach grau sondern in Wirklichkeit eine Grafik (Look wie gebürsteter Stahl), wenn ich dem "+" dieses also als BG gebe, kommt ein Kachel-/Überlagerungseffekt, den will ich vermeiden
b) nach Möglichkeit sollte die ganze Definition in einer class im CSS vertickert werden, damit mein Chef glücklich ist, weils dann in sein komisches CMS passt *zwinker*

Falls da jmd ne Lösung oder Idee hat wäre ich sehr dankbar. Des Weiteren hatte ich die Idee, ob es vllt möglich ist einen border statt soldi oder so eine Grafik zu geben. Geht das? Meine google-Suche diesbezüglich ging leer aus.

Danke schonmal für eure Hilfe Ooops
Martin
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 37
Geschlecht: Männlich
Verfasst Fr 23.01.2009 11:35
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

irgendwas {
  background:no-repeat;
}


* Keine Ahnung... *

http://www.css4you.de/backgroundproperty.html

// kannst du vielleicht dochmal mittels einer Grafik verdeutlichen was du erreichen möchtest. Ich glaube ich verstehe es doch nicht so ganz.


Zuletzt bearbeitet von Kash am Fr 23.01.2009 11:36, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 23.01.2009 11:54
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Topper23
Threadersteller

Dabei seit: 23.01.2009
Ort: Aachen
Alter: -
Geschlecht: Männlich
Verfasst Fr 23.01.2009 12:00
Titel

Antworten mit Zitat Zum Seitenanfang



Das ist in etwa wie es ausshen sollte.

Werde auch eure URLs mal nachschlagen ob ich das finde, was ich suche! Lächel Falls noch mehr Ideen kommen bin ich aber auch nicht böse! Grins
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Topper23
Threadersteller

Dabei seit: 23.01.2009
Ort: Aachen
Alter: -
Geschlecht: Männlich
Verfasst Fr 23.01.2009 12:08
Titel

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri Lächel


hmm, ist wohl css3 oder? mache ich was falsch? ich benutz atm den firefox... sehe die grafik nicht... oder hab ich n fehler im quelltext?

Code:
<div style="position: relative; top: 50px; left: 50px; border: #ef8c09 2px solid; width: 300px; height: 300px; padding: 15px; display: block; border-top-left-image: url(bild1.gif);">
   kasten-inhalt
</div>


okay, werde meinem chef wohl sagen müssen, dass der kunde entweder auf css3 warten muss oder eine div-verschachtelungs-kiste basteln... aber da wird er nit froh sein, da muss er nämlich sein cms mit ner if schleife bereichern... *zwinker* komisch, ich dacht immer das geht einfach *ha ha*


Zuletzt bearbeitet von Topper23 am Fr 23.01.2009 12:27, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
koshie

Dabei seit: 29.06.2007
Ort: Unter der Brücke
Alter: -
Geschlecht: Männlich
Verfasst Fr 23.01.2009 15:13
Titel

Antworten mit Zitat Zum Seitenanfang

css3 kannste vergessen, da das nur die aktuellsten Browser unterstützen.

Ähm aber wenn die Box immer die gleiche größe haben soll, warum tust du nicht alles in den hintergrund rein. Also das +, den rahmen und die Hintergrund-grafik?
Das wäre zumindest der leichteste Weg und wohl der einzige, bei dem du mit einer Class auskommst.

Eine andere möglickeit das mit nur einem tag zu machen seh ich nicht.
  View user's profile Private Nachricht senden
Impigra

Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 41
Geschlecht: Männlich
Verfasst Fr 23.01.2009 18:40
Titel

Antworten mit Zitat Zum Seitenanfang

Nicht sehr sauber... aber es könnte funktionieren...
mit transparenten png's und einer "art" rounded Box Lösung...

Wenn ich Zeit und Lust hab bastel ich mal sowas...

*zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 23.01.2009 19:44
Titel

Antworten mit Zitat Zum Seitenanfang

So könnte man es auch machen:
http://zweitaccount.zw.ohost.de/border/

Falls ich das überhaupt richtig verstanden habe...?

Gruß
  View user's profile Private Nachricht senden
 
Ähnliche Themen Rahmen um verlinkte Grafik
[photoshop] Normale Vektorgrafik/Grafik mit Rahmen?
Brauche einen Tipp: Div Boxen mit Rahmen und Header Grafik
CSS Rahmen
css verlinkte bilder rahmen?
Wie kann ich den Rahmen eines a href mit CSS entfernen?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.