✔ Objekt proportional skalieren

Status
Nicht offen für weitere Antworten.
pixelpur

pixelpur

Mitglied
Hallo zusammen,

ich habe eine Internetseite, wo ich auf der linken Seite des Browserfensters ein Objekt (im Anhang blau markiert) habe, welches sich proportional verlängern/vergrößern soll je nachdem wie lang die Seite im Content (im Anhang orange markiert) ist.

Nun habe ich das Problem, dass das Objekt auf der linken Seite sich bei der Möglichkeit zu scrollen, nicht weiter skaliert. Es geht immer nur soweit, wie das Browserfenster "eigentlich" ist.
Vielleicht kann mir jemand von euch einen kleinen Tip geben bzw. mir erklären, wo mein gedanklicher Fehler in der CSS ist.

Zur besseren Veranschaulichung hier die CSS und der Quellcode und zusätzlich im Anhang die Bilder, wo ich anhand von Rechtecken die beiden ausschlaggebenden Objekte markiert habe.

Code: 
body{
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
}
#objekt_links{
	position:absolute;
	height:110%;
}
#objekt_links img{
	position:absolute;
	height:100%;
}
#corpus{
	width:70%;
	height:100%;
	left:17%;
	top:10%;
	position:absolute;
}
#wrapper{
	width:765px;
	min-height:590px;
	height:auto !important;
	height:590px;
	margin:0px auto;
}
#kopf{
	width:765px;
	height:60px;
	float:left;
}
#navi{
	width:765px;
	height:100px;
	float:left;
}
#content_bg{
	width:765px;
	min-height:350px;
	height:auto !important;
	height:350px;
	float:left;
	background-image:url(../bilder/content_bg.png);
	background-repeat:repeat-y;
}
#fuss{
	width:765px;
	height:30px;
	float:left;
	background-image:url(../bilder/fuss.png);
	background-repeat:no-repeat;
}


HTML: 
<body>
	<div id="objekt_links"></div>
	<div id="corpus">
		<div id="wrapper">
			<div id="kopf"></div>
			<div id="navi"></div>
			<div id="content_bg"></div>
			<div id="fuss"></div>
		</div>
	</div>
</body>
</html>


Ich danke schonmal im voraus für die Hilfe.

LG
 

Anhänge

  • beispiel1.jpg
    beispiel1.jpg
    37,2 KB · Aufrufe: 79
  • beispiel2.jpg
    beispiel2.jpg
    29,3 KB · Aufrufe: 66
Moin,

das linke DIV #objekt_links besitzt keinen Bezug zum Inhaltsumfang im benachbarten DIV #corpus, und erstreckt sich somit im Fenster nur über die festgelegte height:110%-Deklaration, die an diesem Punkt endet, wenn die Seite nun gescrollt wird.

Es bestünde aber die Möglichkeit, das darin eingebundene Grafikelement stattdessen als Hintergrundbild für den Dokumentkörper zu nutzen, damit es nach unten wiederholt wird, wenn der Seiteninhalt innerhalb von #corpus zunimmt.

Der Artikel AnyColumnLongest dürfte hier für dich auch von Interesse sein, um ein mehrspaltiges Layout zu entwerfen, in dem sich die Spaltenhöhen automatisch angleichen.

mfg Maik
 
Hallo Maik,

ersteinmal vielen Dank für deine Hilfe.

Leider komme ich mit dem von dir angegebenen Link nicht wirklich weiter. Ich habe ein paar Varianten, die dort gegeben sind, versucht. Jedoch wird es nur noch "schlimmer". Der DIV #objekt_links verlängert sich gar nicht mehr oder verschwindet komplett. Ich verstehe nicht wo mein gedanklicher Fehler liegt.

Desweiteren habe ich versucht den DIV #objekt_links um die gesamten weiteren DIVs zu setzen, damit er den Bezug zu dem #corpus hat. Dies führte ebenfalls nicht zu dem gewünschten Ergebnis.

Die Idee mit dem Verlängern hatte ich auch schon. Das Problem hierbei ist, dass in dem DIV #objekt_links ein Bild ist, welches bei Wiederholen auf der y-Achse nicht ineinander übergeht. Ich habe es jedoch versucht, aber er wiederholt das Bild nicht, obwohl alle Angaben für den DIV #objekt_links gleich wie beim body sind.

Code: 
body{
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	background-image:url(../bilder/bg.png);
	background-repeat:repeat;
}
#objekt_links{
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	background-image:url(../bilder/welle_orange.png);
	background-repeat:repeat-y;
}

HTML: 
<body>
	<div id="objekt_links">
		<div id="corpus">
			<div id="wrapper">
				<div id="kopf"></div>
				<div id="navi"></div>
				<div id="content_bg"></div>
				<div id="fuss"></div>
			</div>
		</div>
	</div>
</body>

Ich hoffe du siehst es mir nach, wenn ich mich ein wenig "blöd" anstelle. ;)

LG
 
Setz es mal so um:

Code: 
<body>
	<div id="objekt_links">
		<div id="corpus">
			<div id="wrapper" class="clearfix">
				<div id="kopf"></div>
				<div id="navi"></div>
				<div id="content_bg"></div>
				<div id="fuss"></div>
			</div>
		</div>
	</div>
</body>
CSS: 
#corpus{
        width:70%;
        /*height:100%;*/ /* auskommentiert = deaktiviert */
        margin-left:17%;
        /*top:10%;*/  /* auskommentiert = deaktiviert */
        /*position:absolute;*/  /* auskommentiert = deaktiviert */
        padding-top:10%;
}

.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 */

mfg Maik
 
Ich habe deinen Vorschlag angewendet und nun funktioniert es mit der vertikalen Wiederholung. Nun muss ich nur noch das Bild so anpassen, dass die Wiederholung des Bildes ineinander übergeht.

Ist zwar nicht die Lösung die ich mir vorgestellt und gewünscht habe, aber es funktioniert und ich verstehe es und das ist die Hauptsache. ;)

Ich danke dir und wünsche dir schonmal ein schönes Wochenende.

LG
 
Mir ist eben aufgefallen, sofern das HTML-Dokument im standardkonformen Modus übergeben wird, das Hintergrundbild von #objekt_links in den modernen Browsern zunächst nicht bis zum unteren Fensterrand reicht, wenn der Inhalt in #content_bg zu gering ist.

Solltest du also das HTML-Dokument mit einer entsprechenden Doctype-Deklaration im Darstellungsmodus "Almost Standards Mode" ausgezeichnet haben, würde das abgewandelte CSS für diese Regelmengen so lauten:

CSS: 
html,body{
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
}
body{
	    background-image:url(../bilder/bg.png);
	    background-repeat:repeat;
}
#objekt_links{
        margin:0px;
        padding:0px;
        width:100%;
        min-height:100%;
        height:auto !important;
        height:100%;
        background-image:url(../bilder/welle_orange.png);
        background-repeat:repeat-y;
}
#corpus{
        width:70%;
        height:100%;
        margin-left:17%;
}
#wrapper{
        width:765px;
        min-height:590px;
        height:auto !important;
        height:590px;
        margin:0px auto;
        padding-top:10%;
}

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück