Sponsored Links |
|
|||
ÄÄÄ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 |
Sponsored Links |
|
||||
Zitat:
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> 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;"> Folglich brauch ich einen anderen ansatz um den Schatten um die Seite zu bekommen ... Gruß Matthias
__________________
„Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen.“
(Johann Wolfgang von Goethe) |
|
||||
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 |
|
||||
Zitat:
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) |
|
||||
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 |
|
||||
Zitat:
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) |
|
||||
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 |
|
||||
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) |
Sponsored Links |
|
||||
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>
__________________
„Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen.“
(Johann Wolfgang von Goethe) |
Sponsored Links |
|
|
Ä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 |