zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Schlagschatten mit Hindernissen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.01.2010, 21:53
Benutzerbild von LordShadow
:: lord of the web ::
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 19.12.2007
Ort: Freiburg
Beiträge: 192
LordShadow wird schon bald berühmt werden
Standard Schlagschatten mit Hindernissen

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
__________________
„Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen.“
(Johann Wolfgang von Goethe)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.01.2010, 00:06
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

ÄÄÄhhhrlichhh,

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

Testcase online?
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.01.2010, 10:43
Benutzerbild von LordShadow
:: lord of the web ::
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 19.12.2007
Ort: Freiburg
Beiträge: 192
LordShadow wird schon bald berühmt werden
Standard

Zitat:
Zitat von andir Beitrag anzeigen
ÄÄÄ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
Angehängte Grafiken
Dateityp: png dropshadow.png (54,3 KB, 7x aufgerufen)
__________________
„Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen.“
(Johann Wolfgang von Goethe)
Mit Zitat antworten
  #4 (permalink)  
Alt 07.01.2010, 11:19
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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. :/
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 07.01.2010, 11:53
Benutzerbild von LordShadow
:: lord of the web ::
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 19.12.2007
Ort: Freiburg
Beiträge: 192
LordShadow wird schon bald berühmt werden
Standard

Zitat:
Zitat von Crizzo Beitrag anzeigen
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
__________________
„Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen.“
(Johann Wolfgang von Goethe)
Mit Zitat antworten
  #6 (permalink)  
Alt 07.01.2010, 12:40
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #7 (permalink)  
Alt 07.01.2010, 13:03
Benutzerbild von LordShadow
:: lord of the web ::
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 19.12.2007
Ort: Freiburg
Beiträge: 192
LordShadow wird schon bald berühmt werden
Standard

Zitat:
Zitat von Crizzo Beitrag anzeigen
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
__________________
„Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen.“
(Johann Wolfgang von Goethe)
Mit Zitat antworten
  #8 (permalink)  
Alt 07.01.2010, 13:07
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #9 (permalink)  
Alt 07.01.2010, 13:15
Benutzerbild von LordShadow
:: lord of the web ::
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 19.12.2007
Ort: Freiburg
Beiträge: 192
LordShadow wird schon bald berühmt werden
Standard

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
__________________
„Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen.“
(Johann Wolfgang von Goethe)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.01.2010, 23:05
Benutzerbild von LordShadow
:: lord of the web ::
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 19.12.2007
Ort: Freiburg
Beiträge: 192
LordShadow wird schon bald berühmt werden
Standard

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>
Angehängte Grafiken
Dateityp: png screenshot.png (28,5 KB, 1x aufgerufen)
__________________
„Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen.“
(Johann Wolfgang von Goethe)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:28 Uhr.