✔ variabler Content - Rahmen & Schatten verlängern sich nicht

Status
Nicht offen für weitere Antworten.
M

mediaroad

Mitglied
Nachdem ich mich entschlossen habe den Content meiner Webseite variabel zu programmieren, sodass er sich der Textlänge anpasst habe ich nun folgendes Problem.
Der Textbereich verlängert sich wunderbar, durch die Angaben von height: auto !important. Aber der Wrapper, welcher einen Rahmen um den kompletten Content machen soll, zieht nicht mit. Genauso der Schatten der am Rand gesetzt wurde und den kompletten Content an der linken Seite begleiten soll. Auch die Angabe vonn height:100% hilft nichts.
Ich hoffe ihr könnt mir helfen, im Vorraus schonmal vielen Dank.
 
Hi,

neben deiner Beschreibung solltest du uns auch einen Einblick in den Quellcode (HTML + CSS) gewähren, denn im "Blindflug" lässt sich derzeit nichts dazu sagen.

mfg Maik
 
CSS Validierung:

#corpus{
width:790px;
min-height:623px;
height:623px;
height:auto !important;
background-repeat:repeat;
margin: 0px auto;
border-style:solid;
border-color:#745848;
border-width:1px;
border-bottom:3px #745848 solid;
background-repeat:repeat;
}
#wrapper{
width:790px;
min-height:623px;
height:623px;
height:auto !important;
background-repeat:repeat;

}
#rahmen_links{
width:204px;
min-height:287px;
height:287px;
height:auto !important;
float:left;
font-size:1px;
}
#mainbereich{
width:586px;
min-height:335px;
height:auto !important;
height:335px;
background-color:#FFFFFF;
float:left;
}
#rahmen_main{
width:790px;
min-height:335px;
height:335px;
height:auto !important;
float:left;
}
#rahmen_textbereich{
width:586px;
min-height:335px;
height:335px;
height:auto !important;
float:left;
overflow:hidden;
}
.zweispaltig{
font-size:11px;
width:260px;
height:auto !important;
min-height:400px;
font-family:Arial, Helvetica, sans-serif;
color:#693935;
text-decoration:none;
text-align:justify;
float:left;
padding-left:25px;
padding-bottom:15px;
}


Der Schatten welcher mitwandern soll:

#abstand_links{
float:left;
background-image:url(../images/links.jpg);
width:204px;
min-height:68px;
height:auto !important;
height:68px;
float:left;
background-repeat:repeat;
}



HTML:

<body>
<div id="corpus">
<div id="wrapper">
<div id="rahmen_head">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="790" height="240">
<param name="movie" value="flash/navi_ob.swf" />
<param name="quality" value="high" />
<embed src="flash/navi_ob.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
width="790" height="240"></embed>
</object>
</div>
<div id="rahmen_main">
<div id="rahmen_links">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="204" height="267" style="float:left;">
<param name="movie" value="flash/navi_links.swf" />
<param name="quality" value="high" />
<embed src="flash/navi_links.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type=
"application/x-shockwave-flash" width="204" height="267"></embed>
</object>
<div id="abstand_links"></div>
</div>
<div id="mainbereich">
<div id="rahmen_textbereich">
<div class="zweispaltig" style="width:280px;"><br /><br />
<img src="http://www.tutorials.de/forum/images/home.gif" width="400" height="40" border="0" alt="" /><br /><br />
<br /><br />
</div>
<div class="zweispaltig" style="padding-left:20px; width:240px;"><br /><br /><br /><br /><br /><br />
<img src="http://www.tutorials.de/forum/images/so.jpg" width="200" height="157" border="0" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

So ich hoffe ich habe nun alle benötigten Datein zusammen, um euch einen Einblick zu verschaffen.
P.S.: Die Links mit Tutorials, habe ich nicht im Quelltext, die hat er irgendwie erstellt als ich die Änderung gespeichert habe.
 
Zuletzt bearbeitet:
Um den HTML-Code hatte ich zwar auch gebeten, aber wer nicht will, der hat schon. :p

So wie ich das überblicke, wendest du zum einen die Mindesthöheneinrichtung in der Reihenfolge der CSS-Eigenschaften falsch an, und zum anderen hast du es versäumt, die Floatumgebung zum Schluß aufzuheben, und so wieder den normalen Textfluß im Dokument herzustellen.

mfg Maik
 
Ich hoffe ich habe nun alle nötigen Daten zusammen um euch einen Einblick zu verschaffen.
Wie soll ich denn weiter vorgehen mit meiner CSS ?
 
Ich hatte meine Schwierigkeiten es zu verstehen und dachte mit Hilfe des zusätzlich danach eingefügten HTML Codes kannst du mehr sagen. Ansonsten versuch ich das was ich was ich daraus verstehen konnte umzusetzen.
 
Was meinst du genau mit den drei CSS Eigenschaften. Ich habe verstanden das es sich dabei um die drei Höhenangaben handelt, allerdings versteh ich nicht, was ich damit tun soll. Wäre nett wenn du mit kurz noch einmal schreiben könntest was du damit meinst.
 
Die richtige Reihenfolge der drei Regeln zur Einrichtung einer Mindesthöhe lautet am Beispiel von #corpus:

Code: 
min-height:623px; /* Mindesthöhe in standardkonformen Browsern */
height:auto !important; /* !important-Regel für standardkonforme Browser, damit sie die nachfolgende height-Deklaration ignorieren */
height:623px; /* Mindesthöhe in IE<7 */
Wenn du dann noch meinen Webmaster-FAQ-Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an? auf das DIV#wrapper anwendest, verlängert sich auch bei zunehmenden Inhalt der Rahmen von #corpus.

Den Schatten würde ich an deiner Stelle als vertikal zu wiederholendes Hintergrundbild in einem der übergeordneten DIVs einsetzen, denn so wird ganz einfach sichergestellt, dass der Schatten ebenfalls "mitwächst", wenn in dem Element sein Inhalt zunimmt. Das inhaltsleere DIV #abstand_links wird somit im Markup nicht mehr benötigt.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück