Tachikoma: Schattenprobleme, de Zweite

Hallo!

Mein Problem mit dem Schatten konnte ich noch immer nicht lösen.
Kann mir bitte Jemand von euch helfen?

Aus irgendeinem Grund sind die Schatten immer abgeschnitten oder
laufen einfach nicht ganz von oben bis ganz runter:

SCHATTENPROBLEME

Ich bin dankbar für jeden Tipp!!

P.S:
Ich hab schon probiert mehrere Div's ineinander zu verschachteln...
und bei height: auto hört der Schatten dann schon vor Seitenende auf. :-(

  1. P.S:
    Ich hab schon probiert mehrere Div's ineinander zu verschachteln...
    und bei height: auto hört der Schatten dann schon vor Seitenende auf. :-(

    Ich möchte nichts falsches sagen, aber Rahmen und Schatteneffekte kommen zusätzlich zur Größe eines Div's hinzu. d.h. bei high:auto (indemfall 100%) würden die Rahmen und Schatteneffekte ober und unterhalb bei 102% angezeigt werden - aber da wir afaik nur 100% sehen können :>

    Versuch mal den Heigh nen festen Wert zuzuweisen, sodass du nochn margin-bottom von 20px hast, dann siehst du auch ob der Schatten da ist oder nicht.

    Allerdings muss ich sagen, dass mir der Verlauf des Schattens so ganz gut gefällt...verleiht der Seite eine gewisse Lebendigkeit

    Lg

    1. Da war das Absenden mal wieder vor dem Nachdenken -.-

      Desweiteren würde ich --> <img src="Bilder/ET-feld_07.jpg"/> als Bg des div's ins Stylesheet schreiben, dann musst du das nicht für jede Seite immer wieder implementieren...es sei den du wechselst mit den Hintergrundbildern.

      Ansonsten würd ich das Impressum noch "in" die Homepage einfügen, sprich links neben die "Blaubeere" - sieht etwas inharmonisch aus

      Aber das sind nur meine pers. Eindrücke :>

      Lg

    2. Hallo und Danke Quov!

      Das hab ich jetzt aber net ganz gecheckt...
      Ich hab jetzt dem Div ne feste Höhe gegeben und nen Margin-bottom mit 20px.
      Das hat mein Problem net gelöst oder hab ich was falsch verstanden?

      Ja...der Schatten soll genau dazu beitragen das es lebendig aussieht.
      Hätt ich gewusst was das für ein Problem ist... :-(

      1. Hallo und Danke Quov!

        Das hab ich jetzt aber net ganz gecheckt...
        Ich hab jetzt dem Div ne feste Höhe gegeben und nen Margin-bottom mit 20px.
        Das hat mein Problem net gelöst oder hab ich was falsch verstanden?

        Ja...der Schatten soll genau dazu beitragen das es lebendig aussieht.
        Hätt ich gewusst was das für ein Problem ist... :-(

        Also - du weist dem div ne höhe von 500px aus Testzwecken zu...natürlich müssen die anderen divs dann mit nem overflow ausgestattet werden.
        Anschließend noch dem äußersten div nen Border + Schatteneffekten und es müsste alles sichtbar sein.

        Der Margin-bottom war eigentlich nur als Umschreibung für einen Abstand von Browserende bis Div Ende gedacht :>

        1. Hai noch mal!

          So ... noch mal zum Mitschreiben?
          Das Div das ich 500 groß machen soll beinhaltet den Schatten... oder den Text?
          Wäre ja dann auch das äusserste?! Oder?

          1. Hai noch mal!

            So ... noch mal zum Mitschreiben?
            Das Div das ich 500 groß machen soll beinhaltet den Schatten... oder den Text?
            Wäre ja dann auch das äusserste?! Oder?

            Jo, wäre in deinem Fall der div Main - allerdings müsstest du alle div's die Tochterelemente sind mit einem overflow(hidden,scroll) austatten, so dass deren Höhe nicht über die des main div's gehen.

            die 500px waren auch nur ein fiktiver Wert - sollte halt mit der Auflösung deines Browser konform sein.

            Einfacher wärs, wenn du mir den CSS Code zugäng machen würdest, dann würd ich das mal eben bei mir im Dreamweaver behandeln :D

            LG

            1. Hi Quov!

              Das würde bedeuten das ich für jeden Browser im Speziellen den Wert anpassen müsste oder?

              @charset "UTF-8";  
              /* CSS Document */  
                
              body {  
              	background-color: #fff;  
              	font-size: 10px;  
              	line-height: 13px;  
              	margin: 0;  
              	padding: 0;  
              	border: 0;  
              	text-align: left;  
              }  
                
              html,body {  
              	height: 100%;  
              }  
                
              /* startseite */  
                
              .logo_start {  
              	display: block;  
              	float: left;  
              	height: 175px;  
              	width: 100%;  
              	background-repeat: no-repeat;  
              	background-position: center;  
              }  
                
              * html .logo_start {  
              	padding-left: 50px;  
              }  
                
              #startbild {  
              	text-decoration: none;  
              	display: block;  
              	height: 175px;  
              	width: 100%;  
              }  
                
              *html #startbild {  
              	cursor: hand;  
              }  
                
              #bild_start {  
              	display: block;  
              	float: left;  
              	height: 650px;  
              	width: 100%;  
              	overflow: hidden;  
              	padding-left: 25px;  
              }  
                
              * html #bild_start {  
              	padding-left: 50px;  
              }  
                
              #einlass {  
              	position: absolute;  
              	top: 180px;  
              	height: auto;  
              	left: 50%;  
              	width: 500px;  
              	margin-left: -250px;  
              	z-index: 4;  
              	text-align: center;  
              }  
                
              /* Hauptseite */  
                
              #main {  
              	position: absolute;  
              	height: 800px;  
              	left: 50%;  
              	margin-left: -275px;  
              	padding-bottom: 100px;  
              	width: 550px;  
              	background-image: url(../Bilder/Bilder/shadow_02.gif);  
              	background-repeat: no-repeat;  
              	background-position: top;  
              	clear: both;  
              }  
                
              * html #main {  
              	margin-left: -300px;  
              	height: 100%;  
              	top: 0;  
              	bottom: 0;  
              }  
                
              #logo {  
              	display: block;  
              	float: left;  
              	height: 125px;  
              	width: 100%;  
              	background-repeat: no-repeat;  
              	background-position: center;  
              }  
                
              * html #logo {  
              	padding-left: 50px;  
              }  
                
                
              #bild {  
              	display: block;  
              	float: left;  
              	height: 150px;  
              	width: 100%;  
              	overflow: hidden;  
              	padding-left: 25px;  
              }  
                
              * html #bild {  
              	padding-left: 50px;  
              }  
                
              #menue {  
              	display: block;  
              	float: left;  
              	height: 45px;  
              	width: 500px;  
              	text-align: center;  
              	padding-left: 25px;  
              	padding-top: 1px;  
              }  
                
              * html #menue {  
              	padding-left: 50px;  
              }  
                
              #textbox {  
              	display: block;  
              	float: left;  
              	height: auto;  
              	width: 300px;  
              	padding-left: 50px;  
              	overflow: hidden;  
              	text-align: left;  
              }  
                
              * html #textbox {  
              	padding-left: 75px;  
              }  
                
              #schattenrechts {  
              	position: absolute;  
              	z-index: 1;  
              	left: 50%;  
              	margin-left: 250px;  
              	width: 25px;  
              	height: 100%;  
              }  
                
              #schattenlinks {  
              	position: absolute;  
              	z-index: 1;  
              	left: 50%;  
              	margin-left: -275px;  
              	width: 25px;  
              	height: 100%;  
              }  
                
              #emptainer {  
              	display: block;  
              	float: left;  
              	height: 50px;  
              	width: 500px;  
              	text-align: left;  
              }  
                
              #clearer {  
              	width: 100px;  
              	height: 100px;  
              	clear: both;  
              	border: 1px;  
              	background-color: #F00;  
              }  
                
              #blaubeere {  
              	position: absolute;  
              	bottom: 0px;  
              	left: 50%;  
              	margin-left: 115px;  
              	width: 130px;  
              	height: 100px;  
              	background-image: url(../Bilder/blaubeere.jpg);  
              	background-repeat: no-repeat;  
              	background-position: top;  
              }  
                
              #fixpic {  
              	display:block;  
              	width: 130px;  
              	height: 100px;  
              	position:fixed;  
              	bottom:0;  
              	left: 50%;  
              	margin-left: 115px;  
              }  
              	  
              * html #fixpic {  
              	position:absolute;  
              }  
                
              #impressum {  
              	position: absolute;  
              	bottom: 10px;  
              	height: 12px;  
              	left: 50%;  
              	width: 100px;  
              	margin-left: 260px;  
              	z-index: 2;  
              }  
                
                
              /* text */  
                
              h1 {  
              	margin: 0px;  
              	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
              	font-size: 16px;  
              	text-transform: uppercase;  
              	letter-spacing: 1px;  
              	color: #999;  
              }  
                
              h1 a {  
              	color: #999;  
              }  
                
              h1 a:hover {  
              	color: #40A52B;  
              }  
                
              h2 {  
              	margin: 0px;  
              	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
              	font-size: 14px;  
              	text-transform: uppercase;  
              	letter-spacing: 1px;  
              	color: #0A71B3;  
              }  
                
              h3 {  
              	margin: 0px;  
              	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
              	font-size: 8px;  
              	text-transform: uppercase;  
              	letter-spacing: 1px;  
              	color: #40A52B;  
              }  
                
              h3 a {  
              	color: #40A52B;  
              }  
                
              h3 a:hover {  
              	color: #999;  
              }  
                
              p {  
              	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
              	font-size: 10px;  
              	color: #000;  
              }  
                
              a {  
              	text-decoration: none;  
              }  
                
              .active {  
              	color: #40A52B;  
              }  
                
              .white {  
              	color: #FFF;  
              }
              
              1. Mein Fehler - ich hätte nicht gedacht, dass du den div dermaßen mit Shadows ausstattest...^^

                Also nur um dein Problem nochmal zu wiederholen.
                Du siehst die Schatten die im Prinzip nichts weiter als die Hintergrundgrafik ist _nur_ links und rechts, jedoch nicht am bottom?
                Obwohl dies so sein sollte? :>

                Ansonsten würde ich dein Problem nämlich nicht verstehen - sowohl Opera, IE und FF zeigen mir die Schatten der Grafik left und right richtig an, auch bei mir im Dreamweaver stimmt alles..^^

                LG

                1. Genau!
                  Links und rechts stimmts...
                  aber unten ist nichts zu sehen!

                  Hast Du ne Idee? Denn mir wachsen schon graue Haare!

                  :-(