Schlagschatten mit Hindernissen

LordShadow · #1 (**permalink**) 06.01.2010, 20:53

Hallo Zusammen,

ich brauche mal wider eure Hilfe.

Ich versuche mich gerade an einem Schlagschatten, welcher rund um meine Webseite gelegt werden soll.
(Jup, es gibt dazu bereits dutzende Tutorials ... allerdings konnte mir keines bei meinem Problem helfen)

Die Seite besitzt eine dynamische Größe (90% o.Ä.) und eine Bild als Hintergrund ...
Folglich ist der Schlagschatten transparent, um sich an den Hintergrund anzupassen. Leider funktionieren damit die Überladungstechniken nicht wirklich.
Feste Grafiken scheiden auch aus ...

Aktuell habe ich für jede Position eine Grafik erstellt ...

Code:

_|__________|_
 |          | 
 |          | 
 |          | 
 |          | 
 |          | 
_|__________|_
 |          |

... allerdings scheitere ich pei der positionierung.
(verständlicherweise ohne Tabellenlyout

Hat jemand eine Idee wie ich es am geschicktesten bewerkstelligen kann ?
Oder einen anderen Ansatz ?

.. vielleicht seh ich auch einfach den Wald vor lauter Bäumen nicht mehr ^^

Viele Grüße
Matthias

andir · #2 (**permalink**) 06.01.2010, 23:06

ÄÄÄhhhrlichhh,

sollen wir raten?
Was geht denn genau nicht?
Wie ist dein Lösungsansatz?

Testcase online?

LordShadow · #3 (**permalink**) 07.01.2010, 09:43

Zitat:

Zitat von andir

ÄÄÄhhhrlichhh,

sollen wir raten?
Was geht denn genau nicht?
Wie ist dein Lösungsansatz?

Testcase online?

Hallo, ...

nein, raten soll hier keiner, ...

mein aktueller ansatz war:

HTML-Code:

<div id="wrapper_top">
   <div id="wrapper_bottom">
      <div id="wrapper_left">
         <div id="wrapper_right">

            <div id="page">[...]</div>

         </div>
      </div>
   </div>
</div>

bzw.

HTML-Code:

<div style="padding-left: 4px; background-image: url(left.png); background-position: left top; background-repeat: repeat-y;">
   <div style="padding-right: 4px; background-image: url(right.png); background-position: right top; background-repeat: repeat-y;">
      <div style="padding-top: 4px; background-image: url(top.png); background-position: 0px 0px; background-repeat: repeat-x;">
         <div style="padding-bottom: 4px; background-image: url(bottom.png); background-position: left bottom; background-repeat: repeat-x;">

<div id="page" style="width: 100%; min-width: 100%; margin: 0;">

(allerdings gibt es hierbei probleme beim laden der ecken. ich hatte eigentlich vor diese zu überladen, mit einer Grafik direkt für die Ecke, allerdings funktioniert das nicht weil die Grafiken halb Transparent sind, ...)
Folglich brauch ich einen anderen ansatz um den Schatten um die Seite zu bekommen ...

Gruß
Matthias

Crizzo · #4 (**permalink**) 07.01.2010, 10:19

So können wir deinen Code doch gar nicht testen.
Denn:
1. wir haben die Grafiken nicht.
2. wir haben nicht den kompletten Code

Ergo, lad es hoch. Dann kann man dir auch wirklich helfen. :/

LordShadow · #5 (**permalink**) 07.01.2010, 10:53

Zitat:

Zitat von Crizzo

So können wir deinen Code doch gar nicht testen.
Denn:
1. wir haben die Grafiken nicht.
2. wir haben nicht den kompletten Code

Ergo, lad es hoch. Dann kann man dir auch wirklich helfen. :/

... ich weis zwar nicht was du testen willst ...
aber bitte:
demo1
demo2

Gruß
Matthias

Crizzo · #6 (**permalink**) 07.01.2010, 11:40

Das kann so gar nicht funktionieren. Denn mit diesen Schattengrafiken wird sie nie eine Ecke bilden. Da musst du schon noch eine Grafik erstellen, die eine Ecke enthält und sich dann da rein setzt.

Oder soll das wirklich so raus laufen wie oben in deiner Skizze?

LordShadow · #7 (**permalink**) 07.01.2010, 12:03

Zitat:

Zitat von Crizzo

Das kann so gar nicht funktionieren. Denn mit diesen Schattengrafiken wird sie nie eine Ecke bilden. Da musst du schon noch eine Grafik erstellen, die eine Ecke enthält und sich dann da rein setzt.

Oder soll das wirklich so raus laufen wie oben in deiner Skizze?

Da hast du recht - so wird das nicht funktionieren -
Das habe ich aber bereits in meinem ersten Beitrag geschrieben ...
In demo2 sieht du es mit einer Grafik für die Ecken (rechts unten).
Das Problem (wie bereits oben beschrieben) ist das der Schatten transparent ist, folglich wird durch die Ecken immer das durchschimmer was darunter liegt ..

Deswegen suche ich hier ja auch nach einer anderen/m Idee/Ansatz ...
Oder einer andeen Möglichkeit die Seiten (rechts links open unten) mit dem Schatten zu versehen, so dass die Ecken frei bleiben (denn dann kann ich sie mit den Grafiken für die Ecken versehen) ...

Gruß
Matthias

Crizzo · #8 (**permalink**) 07.01.2010, 12:07

Nimm mal 4 Div.

Gib ihnen die Ränder für links, rechts, oben und unten. Diese Div packst du in ein weiteres Divs, in diesem platzierst du per "position:absolute" kleine Elemente mit den Eckgrafiken in den Ecken.
Jetzt musst du den Rand-Divs nur noch so die Abstände und "float" geben, dass sie nicht über die Ecken laufen. Wichtig bei "rechts" und "links" der Seiten Inhalt muss da rein, sonst hast du zu niedrige Ränder.

Verstanden, wie ich das meine?

Ich weiß, nicht gerade die semantische Lösung, aber mehr fällt mir aktuell nicht ein. Die Divs kannst du dann durch andere, nützlichere Element ersetzen und so deine Div-Suppe wieder etwas entschlacken.

LordShadow · #9 (**permalink**) 07.01.2010, 12:15

jup ...
auch wenn ich noch bezweifle das es funktioniert ...
aber ich werds heute abend mal ausprobieren, ich meld mich dann nochmal ...

gruß und danke
matthias

LordShadow · #10 (**permalink**) 07.01.2010, 22:05

ok .. ich nehm alles zurück .. es funktioniert tatsächlich ..
auch wenn der code stark nach vergewaltigung aussieht :/

demo3

ich bin jederzeit auch für neue und andere Vorschläge oder Verbesserungen offen ...

Gruß
Matthias

(und noch der code für die nachwelt)

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	</head>
	<body id="silver">

<div style="width: 80%; margin: 5ex auto; padding: 0; position: relative;">

<div style="background: url(topleft.png);  height: 4px; width: 4px; position: absolute; top: 0; left: 0;"></div>
<div style="background: url(topright.png); height: 4px; width: 4px; position: absolute; top: 0; right: 0;"></div>

<div style="padding:0; margin: 0px 4px; height: 4px; background-image: url(top.png); background-position: top; background-repeat: repeat-x;" ></div>

<div style="padding-left: 4px; background-image: url(left.png); background-position: left top; background-repeat: repeat-y;">
<div style="padding-right: 4px; background-image: url(right.png); background-position: right top; background-repeat: repeat-y;">

		<div id="page" style="margin: 0; padding: 0; border: 1px #fff solid;">

			<div id="body">	 	

 				<div id="content" >

					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

				</div>

			</div>
		
		</div> 

</div>
</div>

<div style="background: url(bottomleft.png); height: 4px; width: 4px; position: absolute; bottom: 0; left: 0;"></div>
<div style="background: url(bottomright.png); height: 4px; width: 4px; position: absolute; bottom: 0; right: 0;"></div>
<div style="margin: 0 4px; padding-bottom: 4px; background-image: url(bottom.png); background-position: left bottom; background-repeat: repeat-x;"></div>

</div> 

	</body>
</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Schlagschatten (mittels CSS?) über dem Menü	schelm	CSS	2	24.01.2011 16:55
illustrator schlagschatten	probot	Grafik, Design, Typografie	1	09.02.2010 15:55
Schlagschatten Contentbereich	Julycious	CSS	11	19.08.2009 15:13
Markupeinsparung - Box mit runden Ecken und Schlagschatten	znay	(X)HTML	3	02.11.2007 18:06
GFX: Schlagschatten bei Hintergrundtextur -> Wie lösen?	akb	CSS	1	17.02.2006 08:53