CSS - Schatten rechts & links
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
boxen
code
dank
erkennen
ersten blick
geliebte internet
grafik
hilfe
http
inhalt
netz
opus
passende antwort
schatten
streifen
stunden
tip
url
wald
-
Guten Tag liebe Community,
ich hab da so ein kleines Problem mit CSS. Ich möchte folgendes Ziel erreichen: http://www.alexanderduffner.de/img/cssfrage.png.
Nur fraglich wie!
Ich bekomm das nicht realisiert, weiß auch nicht wieso.
Ich erwarte von euch jetzt nicht den vollständigen Lösungsweg, auch wenn dies meinen Kopf um einiges erleichtern würde.
Aber der Ehrgeiz ist größer und der Spaß am Programmieren. Also "helft" mir wenn ihr könnt.
Vielen Dank schon im Vorraus! Ich glaube an euch.
Mit freundlichen Grüßen,
Alexander Duffner (shorten)
Beitrag zuletzt geändert: 10.5.2013 18:01:04 von shorten -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
<body style="text-align:center;"> <div style="width:90%;background:#eee;display:inline-block;box-shadow:0px 0px 3px 3px #aaa;height:100%;top:0;"> inhalt </div> </body>
nur kurz mit opera getestet, funktioniert hoffentlich ;)
Beitrag zuletzt geändert: 10.5.2013 18:39:40 von lan-im-netz -
@thwbm: Verarschen kannst du dich selber! -,- Ich hab mehrere Stunden(!!!) gegoogelt. Vielleicht hab ich auch den Wald vor lauter Bäumen übersehen aber das rechtfertigt dein Verhalten trotzdem nicht!
nur kurz mit opera getestet, funktioniert hoffentlich ;)
@lan-im-netz: Funktioniert leider nicht :-/. Getestet in Google Chrome: http://www.alexanderduffner.de/test.
Beitrag zuletzt geändert: 10.5.2013 19:13:00 von shorten -
Ups... bleibt mal ruhig
Das ist nun wirklich nichts aufregendes.
Einfach eine Mehrfachdeklaration des Box-Shadows vergeben!
Und dafür war der Link von thwbm schon gar nicht so schlecht!
Der "Zauber" hierbei ist die Spread Distance als 4. Angabe nach dem Blurradius.
Beispiel:
<div class="boxshadow-left-right"> Dein Inhalt </div>
.boxshadow-left-right { box-shadow: -4px 0 6px -4px rgba(0,0,0,.75), 4px 0 6px -4px rgba(0,0,0,.75); width: 90%; }
-
Hallo,
shorten schrieb:
@thwbm: Verarschen kannst du dich selber! -,- Ich hab mehrere Stunden(!!!) gegoogelt. Vielleicht hab ich auch den Wald vor lauter Bäumen übersehen aber das rechtfertigt dein Verhalten trotzdem nicht!
Welches Verhalten? Das Verhalten, dass ich dir eine Antwort gegeben habe? Ich möchte hauptsächlich helfen und meine Frage, welche Suchbegriffe du verwendet hast, war ernst gemeint (Ich denke, dass du das "Verarschen kannst du dich selber" darauf bezogen hast, falls ich falsch liege, korrigiere mich bitte).
shorten schrieb:
@lan-im-netz: Funktioniert leider nicht :-/. Getestet in Google Chrome: http://www.alexanderduffner.de/test.
Also bei mir zeigen der Firefox, Chrome und Opera einen Schatteneffekt an, nur der "geliebte" Internet Explorer nicht. Die Box war zwar leicht unterschiedlich, aber der Schatten war da.
PS: Ich will hier niemanden verarschen, weder mich noch dich noch sonst irgendjemanden.
MFG THWBM -
Also bei mir zeigen der Firefox, Chrome und Opera einen Schatteneffekt an, nur der "geliebte" Internet Explorer nicht. Die Box war zwar leicht unterschiedlich, aber der Schatten war da.
@thwbm: Du hast mich vielleicht nicht ganz verstanden. Ich will besagtes Ergebnis erzielen: http://www.alexanderduffner.de/img/cssfrage.png
Ich will also keine "Box", sondern einen Streifen (der den "Body" meines neuen Designs bilden soll). Rechts und links von diesem Streifen sollen dann Schatten sein. Der Streifen soll aber egal bei wieviel Inhalt immer 100% hoch sein und 90% breit. Und mit Schatten kenn ich mich auch aus. Ich brauch keine Hilfe für den Schatten sondern für die Formatierung wie ich sie im Anfangspost verlinkt habe.
Schönen Abend noch.
***EDIT***
Thema gelöst. Die Lösung:
Die CSS-Datei:
html, body { font-family: Segoe UI, Verdana, Arial; font-size: 1.0em; background-color: #eeeeee; line-height: 1.5; margin: 0; padding: 0; height: 100%; } #format { background-color: #FFFFFF; width: 90%; margin: auto; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; box-shadow: -4px 0 20px -4px rgba(0,0,0,.75), 4px 0 20px -4px rgba(0,0,0,.75); } #inhalt { padding-right: 30px; padding-left: 30px; padding-top: 0px; padding-bottom: 10px; }
Die HTML-Datei:
<div id="format"> <div id="inhalt"> Dein Inhalt </div> </div>
Vielen Dank an alle! Ihr habt mir einige Tipps gegeben die mich zum Nachdenken gebracht haben. Ich danke euch das ihr mir nicht gleich die Lösung präsentiert habt! So hatte ich die Möglichkeit es selbst herauszufinden.
Beitrag zuletzt geändert: 11.5.2013 0:20:42 von shorten -
shorten schrieb:. Ich danke euch das ihr mir nicht gleich die Lösung präsentiert habt! So hatte ich die Möglichkeit es selbst herauszufinden.
Nun stell mal das Licht derer, de dir geantwortet haben, nicht unter den Scheffel!. Was deinen Thementitel betrifft, hat dir pcw die vollständige, passende Antwort gegeben. Da mußtest Du nicht mehr viel herausfinden. Freu dich, aber gönne denen deinen umfassenden Dank, die ihn verdient haben.
-
fatfreddy schrieb:
Was deinen Thementitel betrifft, hat dir pcw die vollständige, passende Antwort gegeben.
@fatfreddy: Liest man bei euch also nur den Titel? Ich habe mir die Mühe gemacht eine Grafik zu erstellen, bei der man auf den ersten Blick erkennen kann was ich wollte. Schade wenn dann nur der Titel gelesen wird.
Da das Problem gelöst ist kann der Thread ja auch geschlossen werden.
Guten Morgen -
Ich habe mir die Mühe gemacht eine Grafik zu erstellen, bei der man auf den ersten Blick erkennen kann was ich wollte.
....
....wieviel Inhalt immer 100% hoch sein und 90% breit. Und mit Schatten kenn ich mich auch aus. Ich brauch keine Hilfe für den Schatten ....
Nun ja, außer die 90% Breite und links und rechts Schatten, geht leider nichts weiter aus deiner Grafik hervor.
Wenn es dir nur um die dauerhafte 100% Höhe gegangen wäre, dann ist der Titel CSS-Schatten rechts & links definitiv irreführend.
Deine Grafik in Verbindung mit dem Titel ---> sorry, aber mehr als Hilfe zum CSS Schatten kann ich da jetzt nicht draus nehmen.
Aber egal, schön das du es, ohne unsere Hilfe, lösen konntest ....
Wenn du das Padding in Verbindung mit box-sizing dem Div #format geben würdest, könntest du dir ein DIV sparen ... die Divitis lauert überall.
-
Alles klar, pcw. Und vielen Dank für den Tipp. Ich habe die Lösung wie sie hier steht aber noch variert und deinen Tipp bereits bevor ich ihn gelesen hatt umgesetzt. Aber die Lösung wie sie hier steht funktioniert und sollte für Hilfesuchende reichen.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
