Rahmen schattieren oder verlaufen lassen

[Sanny]

Hallo, ich bin neu hier. Mein Name ist Sanny und ich bin 27 Jahre jung.

Nun zu meiner Frage. ich habe ein Urlaubs Forum und habe es schon vom Design her so weit geändert und verschönert wie es ging. Nun habe ich die Hauptseite schon chic, aber die Forenanzeige ist in einem dünnen Rahmen, der einfach nur Standart und eckig ist und mit überhaupt nicht gefällt und auch nicht zum Stil passt.


Nun wollte ich die Tabelle in Schatten legen oder abrunden oder verlaufen lassen in die Hintergrundfarbe. Auf jeden Fall etwas ändern, weil es mir so überhaupt nicht gefällt. Ich weiß nur nicht wo und wie. Habe schon auf Eurem Forum hier einen Link gefunden um Schatten um eine Tabelle zu setzen aber ich weiß nicht wo ich das einfügen muss und der Schatten ist auch zu doll (also total dick)

Muss ich das bei:

Cascading Style Sheets / HTML - Mit dieser Option können Sie ein eigenes Stylesheet festlegen, sowie eigenen HTML Code in Ihr Board einbinden. Weitere Änderungen am HTML können Sie in der Rubrik Templates >> Editieren vornehmen.
Stylesheet <STYLE type="text/css">
<!--

ändern? Also das ist bei mir in den Stylesheets drinnen:


.row2_quote {background:#FFDF6B;border: 1px dotted #6699ff;padding:6px;}
.row1_quote {background:#FFDF6B;border: 1px dotted #6699ff;padding:6px;}

-->
</STYLE>

oder ganz woanders?
Und das ist bei den Templates "Seitenkopf mit CSS:

Grafik" />


<meta name="content-language" content="de" />
<meta name="copyright" content="Schlesser Claude" />
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="revisit-after" content="64 days" />
<style type="text/css">
<!--
body {background:{hintergrundfarbe};background-image:url("{hintergrundurl}");
color:{textfarbe};scrollbar-3dlight-color:{sb1};scrollbar-arrow-color:{sb2};
scrollbar-base-color:{sb3};scrollbar-darkshadow-color:{sb4};scrollbar-face-color:{sb5};
scrollbar-highlight-color:{sb6};scrollbar-shadow-color:{sb7};scrollbar-track-color:{sb8};
font-family:{schriftart};}
a:link {color:{linkfarbe};text-decoration:{linkdeco};}
a:visited {color:{vlinkfarbe};text-decoration:{linkdeco};}
a:active {color:{alinkfarbe};text-decoration:{linkdeco};}
a:hover {color:{olinkfarbe};text-decoration:{linkdeco};}
a.admincolor,a.admincolor:link,a.admincolor:active,a.admincolor:visited {color:{admin.linkfarbe};font-weight: bold;}
a.admincolor:hover {color:{admin.olinkfarbe};font-weight:bold;text-decoration: {linkdeco};}
a.modcolor, a.modcolor:link, a.modcolor:active, a.modcolor:visited {color:{mod.linkfarbe};font-weight: bold;}
a.modcolor:hover {color:{mod.olinkfarbe};font-weight: bold; text-decoration: {linkdeco};}
table.poll {width:50%;}
table.bordered{background:{randfarbe};}
table {width:{twidth};}
td.bgc1 {background:{kol1hf};}
td.bgc2 {background:{kol2hf};}
td.bgc3 {background:{kol3hf};}
td.bgc4 {background:{kol4hf};}
td.bgc5 {background:{kol5hf};}
td.bgc6 {background:{kol6hf};}
td.alt1 {background:{stalt1};}
td.alt2 {background:{stalt2};}
td.row1 {background:{stalt1};color:{fcalt1};}
td.row2 {background:{stalt2};color:{fcalt2};}
tr.desc {background:{kopfhfarbe};color:{kopfschriftfarbe}; vertical-align:top;}
td.head {background:{kategoryfarbe};}
td.bg {background:{hintergrundfarbe};}
.menu {background-color:{kategoryfarbe};color:{textfarbe};}
.formcreate {border:#3a4456 1px solid;font-family:{schriftart};font-size: 8pt;}
.but {background:{kategoryfarbe};border:{randfarbe} 1px solid;font-family:{schriftart};font-size: 8pt;}
.logincreate {border-bottom:#3a4456 thin solid;border-left:#3a4456 thin solid;
border-right:#3a4456 thin solid; border-top: #3a4456 thin solid; font-family: {schriftart};
font-size:8pt;width:50pt}
.button {font-family:{schriftart};font-size:8pt;}
.menubox {border-top:1px {navrandol} solid;border-left:1px {navrandol} solid;border-right:1px {navrandur} solid;
border-bottom:1px {navrandur} solid;font-family: {schriftart};font-size: 8pt; font-weight: normal;
text-align:center;background:{navhfarbe};width:10%; }
{usercss}
//-->
</style>
</head>

Vielen Dank im Vorraus. LG Sanny

 

[Gelöschtes Mitglied 2703]

schatten . nunja einfach rechts und unten einen rand machen?
verlaufen etc ist nur mit sehr grossem aufwand moeglich - sowas wuerde ich dir nicht zutrauen nach deinen informationen.

 

[Sanny]

nagut, dann hat sich meine Frage erledigt wenn mir das nicht zuzutrauen ist.

Trotzdem Danke.

LG Sanny

 

[Gelöschtes Mitglied 2703]

das sollte nichts persoehnliches sein, aber um so etwas zu schaffen machen solltest du die fragen dort oben spielend beantworten koennen

 

[Sanny]

Ne, hab mich ja auch nicht angegriffen gefühlt. Hab nur eingesehen, wenn es zu schwer für mich ist, dann lass ich es lieber. ;-)

 

[John]

Da fällt mir doch ein: Man soll niemals kapitulieren.
Also... So schwierig ist das mit dem Schatten nicht. Du fügst rechts und unterhalb von der Tabelle eine weitere Tabellenzelle ein. Dabei musst du darauf achten, dass sie die richtige Spanbreite bzw. -höhe hat. Man muss also noch mit den Attributen rowspan bei der rechten Zelle und colspan bei der unteren Zelle arbeiten. Diese Zellen machst du so breit bzw. so hoch wie der Schatten sein soll und fügst ein Bild als Zellenhintergrund ein. Das Bild musst du vorher erstellen. Da eignet es sich, einen Farbverlauf zu zeichnen.
Zu beachten ist noch, wenn du mit rowspan und colspan arbeitest, dass du die richtige Zahl eingibst. Bei rowspan streckt sich die Zelle über y Reihen und bei colspan streckt sie sich über x Spalten.

 

[Sanny]

Hey, Dankeschön für die genaue Beschreibung. Ich versuch mal mein Glück und werde dann berichten...

Dankeschön

 

[Prophet]

eine extra tabellenzelle? meinst du nicht das das ein wenig umständlich ist?

einfach mit border-right und border-bottom den rahemn breiter und dunkler machen und dann kommt es effekt

 

[John]

Prophet, Sanny möchte aber, dass der Rahmen mit dem Hintergrund verläuft. Dann kann man es, denke ich, nur so machen. Naja, man könnte es auch mit PHP dynamisch realisieren, aber das geht etwas zu weit in die Tiefe.

 

[Gelöschtes Mitglied 2703]

mit php dynamisch? ein design effekt?
das wuerde nicht in die tiefe gehen das waere doch totaler mist?
oder gibt es da irgendwelche vorteile die ich nicht sehe?

 

[Prophet]

wäre ziemlich umständlich weil du erst alle tabellen raussuchen musst und sie dann ersetzen lassen musst

 

[Frank]

also ich hab davon nich sone ahnung, aber mein HTML editor zeigt bei tabellen auch table-highcolor="" und table-darkcolor="" an, geht damit nich was?

 

[John]

Es könnte sein, dass es mit table-highcolor und table-darkcolor funktioniert. Ich kenne deinen HTML-Editor nicht. Musst du einfach mal ausprobieren.

Zur PHP-Variante: Es ist nicht umständlich. Man muss trotzdem die beiden Tabellenzellen erstellen, aber man spart sich das Bild. Man schreibt dazu ein PHP-Script, das man in die beiden Tabellenzellen einfügt. Dieser Code erzeugt dann dynamisch das Bild.

 

[Prophet]

jede tabelle ersetzten zu lassen ist kompliziert.
du musst dir zuerst einen parser bauen der die tabellen raussucht und ihre größebestimmt. dieser parser muss dann die zellen einfügen und die tabelle zurückgeben.
und du willst die bilder dynamisch erstellen lassen? jedes mal beim durchlauf des parsers? das ist ein riesiger zeitaufwand dann nimm lieber statische bilder.

dann nimm lieber die unschönen attribute table-darkcolor und table-highcolor wenn überall funktioniert.

ansonsten noch mein vorschlag:
einfach ein versetztes schwarzes div unterzuschieben:
http://www.css4you.de/trickkiste/tr00024.html

 

[John]

Da wird nichts ersetzt, sondern nur eingefügt. Es ist richtig, dass es ein bisschen mehr Zeit kostet, ein Bild mit Hilfe von PHP dynamisch generieren zu lassen, aber das ist eigentlich nicht zu merken.

Das CSS-Beispiel von www.css4you.de ist nicht schlecht, aber das möchte Sanny so nicht. Der Schatten soll mit dem Hintergrund verlaufen, also ein Farbverlauf.

 

[Steltie]

Wozu zum Teufel soll das Bild dynamisch erstellt werden? Das Bild bleibt doch sowieso immer gleich. Dann öffnet man halt Photoshop oder was auch immer man hat (oder auch Paint ;ugl ) und macht sich mal eben so nen Farbverlauf. Das spart so EINIGES an Ressourcen, Aufwand und Vorraussetzungen (nicht jeder Webserver hat die Erweiterung fürs dynamische Erstellen von Bildern).

Naja, so nen Farbverlauf da rein zu bekommen ist wohl etwas zu viel Arbeit, und so besonders siehts dann auch wieder nicht aus ;)

 

[John]

Ein Bild dynamisch zu erstellen ist nur eine weitere Möglichkeit. Natürlich spart es Ressourcen, wenn man direkt ein Bild verwendet. Aber es gibt auch Leute, die kein entsprechendes Bildbearbeitungsprogramm haben. Wenn sie dazu noch ein wenig programmieren können, dann geht es prima.

 

[Gelöschtes Mitglied 2703]

ja einmal dynamisch erstellen und ab dann abspeichern und nur noch statisch benutzen.
alles andere ist mal wieder unsinnig :mrgreen:
(und ob ich nun die GBlib oder Gimp fuer bildbearbeitung benutze hat ja nix mit der aufgabenstellung zu tun)