• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schatten um DIV container box ohne CSS3

B

Bleny

Neues Mitglied
hey hey!

ich möchte einen dynamisch anpassenden Schatten (oben & rechts aussen) um einen DIV container erstellen. Da die Seite mit IE 6 bis 8 und Firefox kompatibel sein soll will ich nicht die CSS3 -moz border funktion benutzen.
habe mir schon so einige lösungsvoprschläge angesehen aber keiner von denen bringt mich dem gewünschten ergebnis näher.

vll kann mir hier jemand helfen.

falls weitere code-infos benötigt werden werde ich diesen natürlich noch anhängen.

mfg
bleny


Code: 
<body>
<div id="container">***inhalt***</div
</body>

html, * {
    padding:0;
    margin:0;
    font-family:Arial, Verdana;
}

body {
    background:url('../images/background2.gif');
    background-repeat:repeat-x;
    background-color:#9AA0A5;
    margin:0 auto;
    color:#646263;
    font-size:100%;
}

div#container {
    background-color: #FFFFFF;
    width:1100px;
    z-index:3;
    position:absolute;
    margin-left: -550px;
    top: 50px;
    left: 50%;
}
 
Bleny schrieb:
... einen dynamisch anpassenden Schatten (oben & rechts aussen) ...
Zum Vergrößern anklicken....
Klares NEIN. Schatten kommen immer nach unten, bzw. unten-rechts. Da das menschliche Gehirn immer davon ausgeht dass das Licht von oben-links kommt, dann müssten die Schatten unten-rechts sein. Also bitte die Schatten nach unten nicht nach oben. Das sieht bescheuert aus.

Bleny schrieb:
Da die Seite mit IE 6 bis 8 und Firefox kompatibel sein soll will ich nicht die CSS3 -moz border funktion benutzen.
Zum Vergrößern anklicken....
Selbst wenn du CSS3 benutzt ist die Seite immernoch für den IE6-8 kompatibiel, die Leute sehen halt nur den Schatten der Box nicht. Da dieser Schatten anscheinen aber große Bedeutung für dich hat, machst du dir die ganze Arbeit für IE-Nutzer? Ich mein CSS3 Schatten sind 3 Zeilen Code...

Bleny schrieb:
habe mir schon so einige lösungsvoprschläge angesehen aber keiner von denen bringt mich dem gewünschten ergebnis näher.
Zum Vergrößern anklicken....
Wäre das auch super wenn du grob beschreiben könntest was du schon probiert hast. Sonst raten wir hier alles Stundenlang rum und deine Kommentare sind dann nur : "Hab ich schon probiert, so will ich das nicht" Also! Situation näher beschreiben!

Aber natürlich geb ich dir einen Ratschlag. Die einfachste für die IE's wäre nämlich das :
Code: 
     border-right: 2px solid #333;
    border-bottom: 2px solid #333;
Ich habs mir angeguckt, finde es eigentlich ganz in Ordnung und ist eine schnelle Lösung für den IE. Ansonsten müsstest du Schatten-Imgs benutzen!
 
das habe ich noch vergessen:
es geht um einen Verlauf-schatten... also von schwarz/grau zu weiss. nicht einfarbig.



@ Tip-Top:
da der der container sich in der höhe von seite zu seite verändert ist ein bild mit fixer höhe ungünstig. aber du hast mich auf eine idee gebracht: einen verlauf, 40px breit, 1px hoch, und den mit repeat-y nach unten bis zum container ende laufen lassen. (das gleiche nur um 90° gedreht für unten). werde das gleich mal ausprobieren.

@Gerrit
->finde auch das das beschissen aussieht aber ist eine layout-vorgabe. mir muss es am ende nicht gefallen ;)

->mit dem css3 schatten klappt alles wunderbar. ist auch eine vorgabe das die seite in (fast) jedem browser gleich dargestellt wird. perfektionismus eben^^

->hab es bisher mit der -moz lösung und einem bild mit fixer grösse probiert. habe mich auch an mehreren div-boxen die eine border in verschiedenen graustufen haben. das hat mir aber leider das ganze layout zerschossen.

@prm:
schaue mir deinen link grad mal an.
 
Jau, wenn der Container eine fest Breite hat kannste das so machen wie in dem Link den prm gepostet hat!
Und dann einfach noch Schatten-Grafiken für oben und unten.
 
Fuer den IE hab ich nen .shadow in nem extra stylesheet hinter das DIV gelegt, schaut zwar nicht ganz so gut aus, wie die CSS3 eigenschaften, aber funktioniert ;) . Man kann ja bisschen Rumspielen, wenn man moechte.

HTML: 
.shadow {
    padding:3px;
    position:absolute;
    z-index:-1;
    top:-6px;
    background:black;
    left:-6px;
    width:100%;
    min-height:100%;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.6');
}
HTML: 
#oeffnungszeiten {
    position:absolute;
    border:1px solid black;
    background:white;
    z-index:10;
    width:380px;
    top:350px;
    left:50%;
    padding:5px;
    margin-left:-190px;
    -moz-box-shadow:0px 0px 8px black;
    box-shadow:0px 0px 8px black;
    -webkit-box-shadow:0px 0px 6px black;
    -o-box-shadow:0px 0px 8px black;
}
 
Code: 
<div 
style="
   background: url('schatten.gif') repeat-y;
   height: 882px;
   margin-left: 81.5%;
   margin-top: 3%;
   width: 40px;"
</div>

<div id="container"></div>
das bild ist nun, dank dem tipp von PRM, eine schatten-"linie" die nach unten repeated wird.

der horizontale schatten wird kein problem sein, da der container eine fixe breite hat.
aber wie kann ich jetzt ohne PX-angabe die höhe des schatten der container höhe anpassen? die variiert ja immer je nach menge des inhalts.

***edit***
mit % hab ich es schon probiert. aber da bleibt die höhe auf 0. also man sieht gar nix :sad:
das wär aber die optimalste lösung... z.b. container höhe auf 80% und schatten höhe auf 80% und schon passt es sich der schatten dynamisch an.
 
HTML: 
.shadow {
    padding:3px;
    position:absolute;
    z-index:-1;
    top:-6px;
    background:black;
    left:-6px;
    width:100%;
    min-height:100%;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.6');
}
Zum Vergrößern anklicken....

is das eine class die den container umschliesst oder in welcher art wird die class benutzt?
 
aber wie kann ich jetzt ohne PX-angabe die höhe des schatten der container höhe anpassen? die variiert ja immer je nach menge des inhalts.
Zum Vergrößern anklicken....

Wenn du die Höhenangabe komplett weglässt, dann richtet sich die Höhe automatisch nach dem Inhalt.

Falls du mehrere "Spalten" mit unterschiedlichen Höhen hast, dann helfen Faux Columns
 
Ich hab das so gemacht:

HTML: 
    <div id="oeffnungszeiten">
            <!--[if IE]> 
            <div class="shadow"></div> 
            <![endif]-->
             <!-- content hier -->
    </div>

Wenn das bei dir nicht klappt dann faellen mir auch nur noch hintergrundbilder ein
 
Anusha schrieb:
Ich hab das so gemacht:

HTML: 
    <div id="oeffnungszeiten">
            <!--[if IE]> 
            <div class="shadow"></div> 
            <![endif]-->
             <!-- content hier -->
    </div>

Wenn das bei dir nicht klappt dann faellen mir auch nur noch hintergrundbilder ein
Zum Vergrößern anklicken....

das ist auch leider nur ein einfarbiger hintergrund. funktionieren tut es aber.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben