Div automatisch anpassen

G

Gregott

Grünschnabel
Guten Tag erstmal,

so gleich zu meinem Problem oder besser gesagt, zu etwas das ich Momentan nicht lösen kann.

Ich habe ein Layout in Fireworks erstellt, dieses Geslyced und zwar in folgende Bereiche: Header, Navibereich, Content, "Erweiterer" und Spiegelung, der "Erweiterer" ist eine ein Pixel hohe grafik um meinen Content zu erweitern, sprich, schreibe ich in den Content und überschreitet das von mir eingegebene die Größe dieses Content Divs, möchte ich das sich der "Erweiterer" Y repeatet. Ich habe soetwas schonmal gesehen, bekomme es leider nur nicht hin. Ich stelle euch mal mein CSS, HTML und einen Screeshot der Seite rein. Vielleicht könnt ihr mir dann helfen!

Vielen Dank schonmal
Gregor
CSS: 
body {
background-color: #000000;
margin:0px;
padding:0px;
background-image: url(bilder/back1.gif);
background-repeat: repeat-x;
background-attachment: fixed;
background-position:center;
}
.p {
margin:0px;
padding:0px;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
text-align: inherit;
color: inherit;
line-height: inherit;
vertical-align: top;
}
p {
padding-top:0px;
margin-top:0px;
overflow:visible;
}
img {
border:0px;
}
}
/*div {
margin:0px;
padding-top:20px;
font-family:arial; font-size:14px;*/
}
.AbsWrap {
width: 100%;
position: relative;
}
.rowWrap {
width: 100%;
}
.clearfloat {
clear:both;
height:0px;

}
a:link, a:visited{
COLOR:inherit;
text-decoration:inherit;
}
/* Eigener Code ab hier */
#alles {
top: 36px;
margin:auto;
position:relative;
width:960px;
}
#img2 {
border:0px;
float:right;
padding-left:20px;
}
#img3 {
border:0px;
margin:auto;
float:none;
padding-top:10px;

}
#t1 {
margin:0px;
padding-top:20px;
font-family:arial;
font-size:14px;
}
#t1w {
margin:0px;
padding-top:20px;
font-family:arial;
font-size:14px;
color:#FFF;
}
#header {
position:relative;
width:960px;
height:289px;
background-image: url(bilder/headerindex.jpg);
}
#headerflash {
position:relative;
width:925px;
height:275px;
padding-left:17px;
padding-top: 15px;
overflow:hidden;
}
#navbereich {
position:relative;
width:960px;
height:102px;
background-image: url(bilder/navbereichindex.jpg);
}
#navtabelle {
position: relative;
padding-left: 16px;
padding-top: 7px;
}
#navtabelleunten {
position:relative;
padding-left: 16px;
padding-top: 0px;
height: 30px;
overflow: visible;
}
#leftside {
position:relative;
left:36px;
/*top:411px;*/
width:639px;
height:544px;
background-image: url(bilder/leftsideindex.jpg);
float:left;
}
/*#contentleftside{
position:relative;
left:36px;
top:411px;
width:960px;
height:544px;
background-image: url(bilder/leftsideindex.jpg);
overflow:visible;
} */
#content {
position:relative;
width:960px;
height:193px;
background-image: url(bilder/content.png);
}
#erweiterer {
position:relative;
width:960px;
background-image:url(bilder/erweiterer1px.png);
background-repeat:repeat-y;
overflow: visible;
}

#spiegelung {
position:relative;
width:960px;
height:166px;
background-image: url(bilder/spiegelung.png);
}
#h1 {
margin:0px;
padding:0px;
font-size: 24px;
font-family: arial;
text-decoration:underline;
text-align: left;
color: #000;

}
#h2 {
margin:0px;
padding-top:20px;
font-size: 20px;
font-family: arial;
text-align: left;
color: #000;

}
#h1w {
margin:0px;
padding:0px;
font-size: 24px;
font-family: arial;
text-decoration:underline;
text-align: left;
color: #fff;

}
#h2w {
margin:0px;
padding-top:20px;
font-size: 20px;
font-family: arial;
text-align: left;
color: #fff;


}
#lefttext {
position: relative;
padding-top:40px;
padding-left:45px;
width:565px;
}
#contenttext {
position:relative;
padding-top:40px;
padding-left:45px;
width:870px;
}
#rightside {
position: absolute;
left:675px;
/*top:411px;*/
width:321px;
height:544px;
margin-bottom:0px;
background-image: url(bilder/rightsideindex.jpg);

}
#righttext {
position: relative;
padding-top:40px;
padding-left:20px;
width:275px;
height:544px;
}
#leftandright {
position:relative;
top:36px;
}

HTML: 
<div id="alles">
<div id="header">
<div id="headerflash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="926" height="279" id="FlashID" title="Animierter Header">
<param name="movie" value="flash/finalhead.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie d ieses Tag. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash/finalhead.swf" width="926" height="280">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
<div>
<h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<div id="navbereich">
</div>
<div id="content">
<div id="contenttext">
<div id="h1">
Startseite
</div>
<div id="h2">
Tief im Wald und unter der Erde
</div>
<div id=t1>
<p>Es lebt tief im Wald. Es verfolgt dich. Und e</p>
</div>
</div>
</div>
<div id="erweiterer"></div>
<div id="spiegelung"></div>
</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
 

Anhänge

  • ssscc.jpg
    ssscc.jpg
    62,6 KB · Aufrufe: 20
Zuletzt bearbeitet von einem Moderator:
Hi,

wonach du suchst, findest du in dem Artikel AnyColumnLongest.

Außerdem sind die absoluten Höhenangaben für dein Vorhaben hinderlich.

Und nutze bitte zukünftig den Syntax-Highlighter zur Code-Präsentation, er erleichtert das Lesen eines Beitrags ungemein - vielen Dank! :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück