| Autor |
Nachricht |
jcf
Threadersteller
Dabei seit: 20.04.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 20.04.2007 18:57
Titel CSS PNG-Rahmen/-Schatten an allen Seiten |
  |
|
Hallo liebe Kollegen,
ich habe die Ratschläge befolgt (denken & suchen) und versuche es nun mit dem letzten: posten!
Ich finde einfach keine vernünftige Lösung. Ich möchte mit CSS und ggf. Javaskript DIV-Layer mit einem Schlagschatten an allen Seiten versehen. Wichtig ist, dass diese Layer zumindest vertikal dynamische Größen haben.
Hat jemand eine Idee, wie ich das möglichst simpel umsetzen kann? Ich habe mal an sowas wie unten gedacht. Elegant finde ich diese Lösung aber nicht, zumal der Schatten oben Links und Recht keinen glatten Übergang haben wird.
| Code: |
<style>
div#layer {
background-image:url(schattenrechtslinksunten.png);
background-repeat:no-repeat;
background-position:bottom;
margin: 0px 5px 0px 5px;
padding-top: 0px;
width: 380 px;
}
</style>
<img src="schattenoben.png" />
<div id="layer">Text</div>
|
(Der Code erhebt keinen Anspruch auf Richtigkeit. Habe ich gerade nur mal so runtergeschrieben, um das Prinzip zu erläutern.)
HAT JEMAND EINE IDEE?
Danke für Eure Hilfe!
Zuletzt bearbeitet von jcf am Sa 21.04.2007 11:50, insgesamt 3-mal bearbeitet
|
|
| |
  |
 |
tacker
Dabei seit: 22.03.2002
Ort: Trondheim, Norwegen
Alter: 43
Geschlecht: 
|
|
| |
 |
|
|
Anzeige
|
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
|
| |
|
|
jcf
Threadersteller
Dabei seit: 20.04.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 21.04.2007 11:50
Titel
|
|
|
vielen dank für die links! Warum finde ich sowas nicht? Ätzend.
Ich glaube eine Kombination aus den letzten beiden Links fänd' ich super. Mal schauen, ob ich mir das basteln kann. 
VG jcf
|
|
| |
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Sa 21.04.2007 12:25
Titel
|
|
|
| jcf hat geschrieben: | | vielen dank für die links! Warum finde ich sowas nicht? Ätzend. |
Meist hilft's, solche Sachen englischsprachig auf google.com anstatt .de zu suchen, da die meisten Lösungen eben englischsprachig sind.
|
|
| |
|
|
jcf
Threadersteller
Dabei seit: 20.04.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 21.04.2007 22:37
Titel
|
|
|
So. Mit Hilfer der Links, habe ich mir jetzt erfolgreich etwas gebastelt, das mir erlaubt die layer vertikal beliebig groß zu gestalten. Allerdings möchte ich die zwei lästigen Divs (schattenoben, schatten) noch durch unsichtbares javascript ersetzen. So sieht es auf der Seite aus:
| Code: |
<div id="schattenoben"></div>
<div id="schatten"><div id="element"><img src="bilder/imagefoto1.jpg" /></div></div>
|
So hätte ich es gerne:
| Code: |
<div id="element"><img src="bilder/imagefoto1.jpg" /></div>
|
Das ist mein erster Javascript-Ansatz, der aber irgendwie überhaupt nicht funktioniert. Außerdem, wie kriege ich es hin, dass er mir das div mit der ID "element" umschließt?
| Code: |
<script language="text/javascript">
var schattenobendiv = document.createElement("div");
schattenobendiv.id = "schattenoben";
var schattendiv = document.createElement("div");
schattendiv.id = "schatten";
var elementdiv = document.getElementById("element");
document.body.insertBefore(schattenobendiv, elementdiv);
document.body.insertBefore(schattenoben, elementdiv);
</script>
|
|
|
| |
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst So 22.04.2007 00:37
Titel
|
|
|
Dein Skript hat nur ein paar Schusselfehler, ansonsten ist's ok. Das letzte insertBefore verweist auf einen nicht existenten Knoten (schattenoben anstatt schattendiv).
Die leicht getunte Version, die das gewünschte DIV umschließt:
| Code: | var schattenobendiv = document.createElement("div");
schattenobendiv.id = "schattenoben";
var schattendiv = document.createElement("div");
schattendiv.id = "schatten";
var elementdiv = document.getElementById("element");
var elementdivCopy = elementdiv.cloneNode(true);
var parentElement = elementdiv.parentNode;
schattendiv.appendChild(elementdivCopy);
document.body.insertBefore(schattenobendiv, elementdiv);
document.body.insertBefore(schattendiv, elementdiv);
parentElement.removeChild(elementdiv); |
Keine Garantie für Cross-browser-Kompatibilität und ähnliches. 
|
|
| |
|
|
jcf
Threadersteller
Dabei seit: 20.04.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 22.04.2007 14:31
Titel
|
|
|
Herzlichen Dank für die ganze Mühe! Aber irgendwie schein ich wirklich da noch nicht durchzublicken. Unten mein Quelltext. Was mache ich bloß falsch? (Mit "onload" und einer function habe ich es auch schon probiert!
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script language="javascript">
var schattenobendiv = document.createElement("div");
schattenobendiv.id = "schattenoben";
var schattendiv = document.createElement("div");
schattendiv.id = "schatten";
var elementdiv = document.getElementById("element");
var elementdivCopy = elementdiv.cloneNode(true);
var parentElement = elementdiv.parentNode;
schattendiv.appendChild(elementdivCopy);
document.body.insertBefore(schattenobendiv, elementdiv);
document.body.insertBefore(schattendiv, elementdiv);
parentElement.removeChild(elementdiv);
</script>
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="inhalt">
<ul id="hauptnavigation">
<li><a href="#">Home</a></li>
<li><a href="#" class="aktuell">IT-Consulting</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Data Services</a></li>
<li><a href="#">pe-info</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<ul id="unternavigation">
<li><a href="#">VPN Services</a></li>
<li><a href="#">Voice over IP</a></li>
<li><a href="#" class="aktuell">Risk Management</a></li>
</ul>
<h1>Seitentitel</h1>
<div id="links">
<div id="element"><img src="bilder/imagefoto1.jpg" /></div>
<div id="element"><h1>Überschrift</h1><div id="elementtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <a href="#">laoreet dolore magna</a> aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div></div>
</div>
<div id="rechts">
<div id="sidelement">
<h1>Rechte Seite</h1>
Text.
</div>
<div id="sidelement">
<h1>Rechte Seite</h1>
Text.
</div>
<div id="sidelement">
<h1>Rechte Seite</h1>
Text.
</div>
</div>
<br clear="all"/>
</div>
</body>
</html>
|
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Seite mit allen verlinkten Seiten drucken
[Wordpress] Gleicher Inhalt auf allen Seiten
jQuery Cycle Gallerie auf allen Seiten
variabler Content - Rahmen & Schatten verlängern sich nicht
PSD Pfae auf allen Ebenen?
Pixelgenaues SVG unscharf in allen Websites
|
|
Willkommen auf dem Portal für Mediengestalter
