Autor |
Nachricht |
Topper23
Threadersteller
Dabei seit: 23.01.2009
Ort: Aachen
Alter: -
Geschlecht:
|
Verfasst Fr 23.01.2009 11:32
Titel CSS und Rahmen mit Grafik |
|
|
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
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
Martin
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 23.01.2009 11:35
Titel
|
|
|
Code: |
irgendwas {
background:no-repeat;
}
|
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
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Topper23
Threadersteller
Dabei seit: 23.01.2009
Ort: Aachen
Alter: -
Geschlecht:
|
Verfasst Fr 23.01.2009 12:00
Titel
|
|
|
Das ist in etwa wie es ausshen sollte.
Werde auch eure URLs mal nachschlagen ob ich das finde, was ich suche! Falls noch mehr Ideen kommen bin ich aber auch nicht böse!
|
|
|
|
|
Topper23
Threadersteller
Dabei seit: 23.01.2009
Ort: Aachen
Alter: -
Geschlecht:
|
Verfasst Fr 23.01.2009 12:08
Titel
|
|
|
m hat geschrieben: | http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri |
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... komisch, ich dacht immer das geht einfach
Zuletzt bearbeitet von Topper23 am Fr 23.01.2009 12:27, insgesamt 1-mal bearbeitet
|
|
|
|
|
koshie
Dabei seit: 29.06.2007
Ort: Unter der Brücke
Alter: -
Geschlecht:
|
Verfasst Fr 23.01.2009 15:13
Titel
|
|
|
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.
|
|
|
|
|
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Fr 23.01.2009 18:40
Titel
|
|
|
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...
|
|
|
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
|
|
|
Ähnliche Themen |
Rahmen um verlinkte Grafik
[photoshop] Normale Vektorgrafik/Grafik mit Rahmen?
Brauche einen Tipp: Div Boxen mit Rahmen und Header Grafik
Flash- Bei Grafik-Mouseover soll Grafik vergrößert werden.
Rahmen in PS CS2?
CSS Rahmen
|
|