✔ Frage zu Layern (Ausdehnung über bestimmten Seitenbereich)

Status
Nicht offen für weitere Antworten.
Bomber

Bomber

Erfahrenes Mitglied
Hi

angefügt habe ich ein Bild zu meinem Problem.

- Bild zum Problem -

Ich möchte für ein Textfeld einen Layer so einrichten, das er sich über den kompletten Bereich des Pfeils erstreckt (bei möglichst jeder Auflösung) und dabei eine Höhe von 683 Pixeln (so wie die restlichen Layer) hat.

Desweiteren möchte ich das die Layer bei Jeder Auflösung horizontal zentriert dargestellt werden.

Für beide Probleme hab ich leider keine Lösung und frage daher euch.

Danke im Vorraus!
 
Hallo!

Also zum Ersten würde ich persönlich mir das posten von Screenies mit laufendem muli sparen, aber das nur so nebenbei ;)

Zum horizontalen zentrieren solltest Du einen Container aussenrum machen, und diesen dann mit top:50% und einem negativen Margin mit der Hälfte Deines Containers (Container height:800px, dann margin-top:-400px) positionieren.

Bei dem Layer in der Mitte wäre es wichtig zu wissen, wie Du den Rest machst. Poste doch mal den entsprechenden Code.

Übrigens cooles Thema :-|

Gruss
 
Sorry für das schlecht formulierte Thema ich hatte keine Idee wie ich es besser hätte ausdrücken können.

Hier ist der Code.. ziemlich billig denke ich mal, aber ich arbeite mich gerade erst in dieses Layergedöns ein.

HTML: 
<html>
<head>
<title>Sterilisation D&uuml;sseldorf | Eine Informationsseite der UCC-D&uuml;sseldorf zur Vasektomie beim Mann</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="logo" style="position:absolute; width:252px; height:368px; z-index:1; left: -1px; top: 81px;"><img src="img/logo.jpg" width="252" height="368"></div>
<div id="menu" style="position:absolute; width:177px; height:368px; z-index:2; left: 251px; top: 81px; background-image:url(img/menu_bg.jpg)"></div>
<div id="text_balken_links" style="position:absolute; width:17px; height:368px; z-index:3; left: 428px; top: 81px;"><img src="img/text_balken_links.jpg" width="17" height="368"></div>
<div id="text_balken_rechts" style="position:absolute; width:90px; height:368px; z-index:4; right: 0px; top: 81px;"><img src="img/text_balken_rechts.jpg" width="90" height="368"></div>
</body>
</html>
 
Habs mal so probiert:

HTML: 
<div id="text" style="position:absolute; >>>>>> width:100%-536px; <<<<<< height:368px; z-index:4; left: 445px; top: 0px; background-image:url(img/text_bg.jpg)">LALLALALALA</div>

natürlich nicht (wär auch zu schön.. :rolleyes: ) aber im Endeffekt wär das ja die Lösung. Oder gehts eleganter, sprich ohne JS?
 
Zuletzt bearbeitet:
Hallo nochmal!

Nee, ich meinte das Thema der Seite ;) Das gewählte für den Thread ist schon ganz ok.

Ich hab mich mal dran versucht, aber ich gestehe es ehrlich, der Weisheit letzter Schluss ist es noch nicht. Aber es geht in cie Richtung. Da muss man nochmal ein bisschen dran feilen, aber ich denke so könnte es gehen:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sterilisation D&uuml;sseldorf | Eine Informationsseite der UCC-D&uuml;sseldorf zur Vasektomie beim Mann</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#logo {
	position:absolute; 
	width:251px; 
	height:368px;
	background-image:url(img/logo.jpg); 
	z-index:2;  
	top: 81px;
	left:0px;
}
#menu {
	position:absolute; 
	width:177px; 
	height:368px; 
	z-index:2;  
	top: 81px;
	left:251px; 
	background-image:url(img/menu_bg.jpg);
}
#text_balken_links {
	position:absolute; 
	width:17px; 
	height:368px;
	background-image:url(img/text_balken_links.jpg); 
	z-index:2;  
	left:428px;
	top: 81px;
}
#text_balken_rechts {
	position:absolute; 
	width:90px; 
	height:368px; 
	background-image:url(img/text_balken_rechts.jpg);
	z-index:2; 
	top: 81px;
	right:0px;
}
#content {
	position:relative;
	top:66px;
	height:368px;
	margin-left:435px;
	margin-right:90px;
	padding:0px;
	z-index:1;
}
div { border:1px solid #000000; }
</style>
</head>

<body>
<div id="logo"></div>
<div id="menu"></div>
<div id="text_balken_links"></div> 
<div id="text_balken_rechts"></div>
<div id="content">
	<p>Und das hier ist ein sich anpassendes div mit möglichst viel Text um auch zu sehen ob das alles sich an den umliegenden divs ausrichtet....</p>
</div>
</body>
</html>

Gruss Bud

Edit: also das jetzt mal so ein Zwischenstand, ich setze mich da morgen bei Gelegenheit nochmal dran.
 
Wow das ist sehr genial!

Ich hatte es so gemacht, funktioniert auch.. ist natürlich nicht ansatzweise so elegant.

Code: 
<div id="text" style="position:absolute; height:368px; z-index:4; left: 445px; top: 0px; padding: 4px; background-image:url(img/text_bg.jpg)">

<script language="Javascript">
<!--
	document.all.text.style.width = document.body.offsetWidth - 539 [summe der übrigen layer+ie fensterbalken];
	
//-->

mal auf deine lösung umstellen
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück