Schatten / Farbverlauf am Rand eines div-Containers

[hawkeye78]

Hallo,

ich bastele im Moment an einer privaten Homepage und nachdem die Seite bezüglich der Funktionalität so langsam gestalt annimmt, habe ich mich dazu entschlossen das Design der Site noch etwas zu verfeinern. Im moment hat die Seite folgendes Aussehen[1]. Ich habe mich nun nach einem Hinweis von einem guten Freund dazu entschlossen um den Div-Container (der den Content und Navi-Bereich enthält) einen Schatten / Farbverlauf zu legen, so das der Eindruck erweckt wird das sich dieser Bereich vom HIntergrundbereich leicht abhebt.

Da der obere bzw. untere Rand, sowie der Hintergrund des Div-Containers aus einer Grafik-besteht müßte ich diese nur anpassen. Leider bin ich aber alles andere als ein brillianter Webdesigner. Da ich auch leider noch keine passende Anleitung im Netz gefunden habe, bin ich nun etwas ratlos, auch wenn ich bereits etwas mit Schlagschatten bei gimp herumprobiert habe.

Ich habe nun die Hoffnung das vielleicht jemand diesen Beitrag liest der etwas mehr Ahnung von diesem Thema hat als ich, ich wäre über einen entsprechenden Hinweis auf jeden Fall sehr dankbar.

Viele Grüsse

Dan

[1] ImageShack - Hosting :: homepagetm8.png

[geloescht_JesterDay]

Eigentlich musst du nur die Hintergrundgrafik und die Grafik für den unteren Rand anpassen. Der hintergrund (ich denke mal dass der 2 farbige Spalten hat und repeat-Y hat) muss etwas breiter werden und dieser Bereich wird hellgrau (Farbe des Schattens), und der untere Rand wird ein bisschen höher und breiter, und das wird auch hellgrau.

Das einzige Problem was mir dazu jetzt dann noch einfällt ist der Begin des Schattens (also den der HG-Grafik), das wird so wohl etwas... naja... komisch aussehen.

Alternativ dazu machst du noch ein div außenrum, welches den Schatten für rechts als hintergrund hat (bg-position right).

[M!K3]

Hi, du möchtest, wenn ich das also richtig verstanden habe, deine im Browser zentrierte Homepage mit einem schlagschatten abheben.

Also in etwa wie hier 100nx-club.de - Startseite

Wenn das so ist, dann kommt ein wenig mehr auf dich zu. Würden jetzt alle Browser mit transparenten png Grafiken zurecht kommen wäre es sehr einfach.

Aber das tun sie ja nicht also hier ein Lösungsweg.

Wenn noch fragen sind, dann immer her damit.

Gruß Mike

div-layout.zip

[geloescht_JesterDay]

Wenn ich mir deine Seite ansehe, dann hast du ja auch "nur" einen Schatten, der rumrum verläuft. Das einzige Problem daran ist dann wohl der weiche Übergang zum Hintergrund. Da er bei seiner Seite aber eh nur 2 Farben für den HG hat, sollte das auch mit einem GIF gehen. Vielleicht sind die Farben bzw der Verlauf dann nicht so 100%, aber es wäre ok. außerdem kann er das ja über eine Browserweiche im CSS regeln, so dass "gescheite" Browser ein png sehen.

Da der Schattten da rundum verläuft müsste er dazu lediglich seine bisherigen Grafiken erweitern, was erstmal nicht so ein Problem sein sollte, denke ich.

Generell muss er das ja lediglich tun, denn seine Grafiken sind ja schon soweit angeordnet. Das einzige Problem in dem Fall wenn der Schatten nur an 2 Seiten zu sehen sein soll wäre, dass die Seite nicht mehr 100% zentriert wäre. Bzw das wäre sie schon, aber eigentlich sollte der Schatten ja dann nicht dazuzählen, was er in dem Fall aber tut. Bei ein paar Pixeln kann man das aber denke ich verschmerzen.

[M!K3]

Das einzige Problem in dem Fall wenn der Schatten nur an 2 Seiten zu sehen sein soll wäre, dass die Seite nicht mehr 100% zentriert wäre. Bzw das wäre sie schon, aber eigentlich sollte der Schatten ja dann nicht dazuzählen, was er in dem Fall aber tut. Bei ein paar Pixeln kann man das aber denke ich verschmerzen.

Da stimm ich dir zu. Zu schade das es nicht so einfach ist wie hier,

width: 800px;

margin: 0 auto-20px 0 auto;

währe ne super lösung Leider gehts ja so nicht....

Ich denk auch immer etwas in die Zukunft, in der er vielleicht ein Muster oder was ähnliches im Hintergrund haben möchte. Und dann wirds halt mit dem Gif schwierig und man sperrt die armen InternetExplorer < 7 User aus.

Browserweichen sind auch immer so punkte, die ich eigentlich nicht mag, aber oftmals unumgänglich sind.

Aber ich denke das er hier mit unseren zwei möglichkeiten bestimmt ein Ergebnis erzielt, mit dem sein Auftraggeber zufrieden ist

Gruß Mike

[hawkeye78]

Hallo,

erst einmal vielen Dank für die vielen Antworten. Ich muß zu meiner schande gestehen ich hab den Thread fast vergessen und heute darauf hin, einen sehr guten Bekannten gefragt der Webdesign beruflich macht.

Dieser hat mir erklärt wie man einen finde ich sehr brauchbaren Schatten[1] mit gimp hinbekommt (zumindestens wie ich finde sehr brauchbar ) Darum werde ich jetzt wohl oben und unten ein Rechteck erstellen das genau so breit ist wie der div-Container und sowhl ein Teil des Rechteckes als auch den Schatten enthält. so das ich gar nicht genötigt bin auf halbdurchsichtige Effekte zurück zugreifen sondern nur Grafiken anzeigen muß.

Trotzdem noch einmal vielen Dank für eure hilfe.

Viele

Grüsse

Dan

PS

und der Auftraggeber ist auch sehr zufrieden

[1]

ImageShack - Hosting :: schatten2vn9.png

[geloescht_JesterDay]

währe ne super lösung Leider gehts ja so nicht....

In CSS 3 gibt es den Befehl calc. Damit geht es dann (ob man da auch auto als Parameter nehmen kann weiß ich nicht, aber Prozentangaben auf jeden Fall).