✔ flexibler Content

[mediaroad]

Hallo,
ich habe mal eine Frage.
Ich will bei einer Internetseite einen flexiblen Contentbereich erstellen, d.h. height:100%;
Das funktioniert auch,aber ich will als gestalterisches Element einen Schatten mitlaufen lassen, d.h. diesen ebenfalls eine Höhe von 100%.
Der Schatten ist als Bild hinterlegt und hat ein background-repeat:repeat-y;
Trotz das ich eine Höhe von 100% angegeben habe wird er entweder gar nicht angezeigt bzw bleibt statisch.
Jetzt wäre meine Frage, wie ich den Schatten je nach Inhalt des Contentbereichs erweitere ohne das kürzer bzw länger ist?

Hier nochmal meine DIV-Layer Anordnung

<div id="main_gesamt">
<div id="links">
<div id="abstand_links_unten"></div>
<div id="schatten_links"></div>
</div>
<div id="content">
<div id="textfeld"></div>
</div>
</div>

und die CSS

#main_gesamt{
width:980px;
height:100%;
float:left;
}
#links{
width:20px;
height:100%;
float:left;
}
#abstand_links_unten{
width:20px;
height:211px;
float:left;
background-image:url(../bilder/abstand_links_unten.png);
background-repeat:no-repeat;
}
#schatten_links{
width:20px;
min-height:300px;
height:100%;
float:left;
background-image:url(../bilder/schatten_links.png);
background-repeat:repeat-y;
}
/*---------------------------------------------inhalt-------------------------------------------*/
#content{
width:702px;
min-height:300px;
height:100%;
float:left;
background-color:#dddddd;
}
#textfeld{
width:680px;
height:100%;
min-height:300px;
float:left;
padding:10px;
background-color:#dddddd;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:justify;
line-height:15px;
color:#555555;
}

Ich hoffe Ihr könnt mir helfen!
lg

 

[Maik]

Hi,

man könnte hier die "Zwiebelschalen-Technik" anwenden.

HTML:

<div id="schatten_links" class="clearfix">
     <div id="main_gesamt">
          <div id="links">
               <div id="abstand_links_unten"></div>
          </div>
          <div id="content">
               <div id="textfeld"></div>
          </div>
     </div>
</div>

CSS:

#schatten_links{
width:20px;
min-height:300px;
height:auto !important;
height:300px;
background-image:url(../bilder/schatten_links.png);
background-repeat:repeat-y;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#main_gesamt{
width:980px;
float:left;
}

#links{
width:20px;
height:100%;
float:left;
}
#abstand_links_unten{
width:20px;
height:211px;
float:left;
background-image:url(../bilder/abstand_links_unten.png);
background-repeat:no-repeat;
}

/*---------------------------------------------inhalt-------------------------------------------*/
#content{
width:702px;
min-height:300px;
height:auto !important;
height:300px;;
float:left;
background-color:#dddddd;
}
#textfeld{
width:680px;
min-height:300px;
height:auto !important;
height:300px;
float:left;
padding:10px;
background-color:#dddddd;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:justify;
line-height:15px;
color:#555555;
}

 

[mediaroad]

AW:flexibler Content

Danke Danke.....es funktioniert!

 

[mediaroad]

Jetzt habe ich nur noch ein Problem!
Wie platziere ich den Schatten in dem HTML Code, der rechts von dem Contentbereich sein soll?

 

[Maik]

Beispielsweise so:

<div id="schatten_links" >
     <div id="schatten_rechts" class="clearfix">
          <div id="main_gesamt">
               <div id="links">
                    <div id="abstand_links_unten"></div>
               </div>
               <div id="content">
                    <div id="textfeld"></div>
               </div>
          </div>
     </div>
</div>

#schatten_rechts{
width:742px;
min-height:300px;
height:auto !important;
height:300px;
background-image:url(../bilder/schatten_rechts.png);
background-repeat:repeat-y;
background-position:722px 0;
}

 

[mediaroad]

Danke für die Hilfe!