Divs mit fester Breite zentrieren
Daniela Koller
- dhtml
0 Ole0 Alexander Kiel0 Thomas J.S.0 Joachim
Hallo,
Ich habe ein Problem mit Divs, und zwar benötige ich einen Bereich mit fester Breite in der Mitte des
Fensters mit dynamisch austauschbarem Inhalt aus verschiedenen Dateien, er muss zentriert sein
bei jeder Auflösung.
Das funktioniert auch ganz gut, aber sobald ich beim div-tag versuche die Breite festzulegen, kann
ich ihn nicht mehr als Layer ansprechen aus Javascript und Netscape, wenn ich auch noch die Center
Angabe hinzufüge, geht das Ansprechen zwar wieder, aber dafür ist er weder zentriert, noch hat er eine
feste Breite.
Mit IE habe ich es noch nicht getestet (Keiner verfügbar momentan).
Danke im Voraus
Daniela
------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Normale Seite ohne Titel</title>
<script type="text/JavaScript">
<!--
function linken(ziel) {
var nav = navigator.appName + "";
if (nav.substr(0,1) == "N") {
window.document.info.src = ziel;
}
else {
document.all.info.innerhtml.src = ziel;
}
}
//-->
</script>
</head>
<body bgcolor="#004080" text="#0080C0" link="#000080">
<div id="info" style="position:absolute;top:75px;width=450px;" align="center">
<p>
Wird geladen.
</p>
</div>
<a href="#" onClick="linken('test2.html');">
Test2
</a>
</body>
</html>
hi daniela,
was mir auf anhieb einfallen würde (ohne test), wäre einfach das ganze in einen weitern div-tag zu legen:
<div align=center>
dein code
</div>
vieleicht funzt das ja *hoff*
ich achua mir das aber nochmal an und wenn mir keiner zuvor kommt, schreib ich auch noch was dazu :-).
alles liebe
ole
(8-)>
<div align=center>
dein code
</div>
Habs probiert, er übersieht es leider immernoch
Trotzdem Danke
Hi Daniela,
mit diesem Code hast du erst mal dein 450 Pixel breites <div>, welches immer in der Mitte des Browserfensters ist. Die Seite funktioniert mit beiden Browsern und ist von mir mit IE5 und NN4.7 auf NT4 getestet wurden. Das <div> richtet sich bei einem resize auch wieder automatisch in der Mitte aus. Der NN stellt nur an Stellen an dehnen Inhalt im <div> ist Hintergrundfarbe dar.
Die Sache mit dem hereinladen einer *.html in das <div> funktioniert aber nur im NN. Im IE muss man da den Umweg über ein <iframe> gehen. Lies dazu bitte im Archiv oder der Auslese, weil das schon mal diskutiert wurde. Ich habe jetzt leider keine Zeit mehr...
Viel Spass noch
ALEX
---------------------------------------------------------------------
<html>
<head>
<title>Normale Seite ohne Titel</title>
<script type="text/JavaScript">
<!--
function linken(ziel)
{
var nav = navigator.appName + "";
if (nav.substr(0,1) == "N")
{
window.document.info.src = ziel;
}
else
{
document.all.info.innerhtml.src = ziel;
}
}
function repaint()
{
var nav = navigator.appName + "";
if (nav.substr(0,1) == "N")
{
document.info.left = (window.innerWidth - 450) / 2;
}
else
{
document.all.info.style.pixelLeft = (document.body.offsetWidth - 450) / 2;
window.status = document.body.offsetWidth;
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#0080C0" link="#000080" onResize="repaint();">
<div id="info" style="position:absolute;left:300px;top:75px;
width:450px;min-width:450px;max-width:450px;
background-color:#00FF00;
clip:rect(0px 450px 100px 0px);">
<p>
Wird geladen.dfjkgbdfkysjgbksyjbfkböfykdjgvbklsdagfblkasbfbfkösajbfkjsbfkjsbfskdjbfvsjkbfvksbcksbvksafbvsklakbflskadbflaskbfashdbvfsavhdfslahdvfslabfaslbdflhsavflashvfavfjalvd
</p>
</div>
<script language="JavaScript">
<!--
repaint();
//-->
</script>
<a href="#" onClick="linken('test2.html');">
Test2
</a>
</body>
</html>
Vielen Dank,
funktioniert beinahe perfekt. (Lässt sich nicht in eine Tabelle packen, aber mit absoluter Positionierung ist
das auch gar nicht notwendig).
Hallo Daniela!
Ich habe ein Problem mit Divs, und zwar benötige ich einen Bereich mit fester Breite in der Mitte des
Fensters mit dynamisch austauschbarem Inhalt aus verschiedenen Dateien, er muss zentriert sein
bei jeder Auflösung.
»»Netscape
<html>
<head>
<title>Normale Seite ohne Titel</title>
<style type="text/css">
<!--
#infoa{
position:absolute;
top:75px;
align:center;
border:none;
width:470px;
height:200px;
}
#infob {
position:relative;
}
-->
</style>
<script type="text/JavaScript">
<!--
function linken(ziel) {
var nav = navigator.appName + "";
if (nav.substr(0,1) == "N") {
document.layers.infoa.document.layers.infob.src = ziel;
}
}
//-->
</script>
</head>
<body bgcolor="#004080" text="#0080C0" link="#000080">
<div id="infoa">
<table width="470" cellpadding="0" cellspacing="0" border="0">
<tr><td>
<div id="infob">
wird geladen
</div>
</td></tr>
</table>
</div>
<a href="#" onClick="linken('test2.html');">
Test2
</a>
</body>
</html>
=========
Hi Thomas,
leider funktioniert deine Lösung nicht, das Problem ist, das Netsi den Layer (ILayer) zwar ausblankt,
aber dann nichts mehr darin erscheint.
Gruss und Danke
Daniela
Hallo Daniela!
leider funktioniert deine Lösung nicht,
also ich habe es mit NS 4.6 getestet und es funktionierte,
sonst hätte ich es nicht gepostet.
Tut mir leid, daß es bei dir nicht geht.
Grüße
Thomas
Hallo Thomas
also ich habe es mit NS 4.6 getestet und es funktionierte,
sonst hätte ich es nicht gepostet.
Das Problem tritt bei mir erst auf wenn ich versuche dem Layer ein anders Dokument zuzuweisen.
Ich glaube das Problem ist auch bereits im Forum aufgetaucht, jedoch hat niemand auf diese
Frage geantwortet. Das Problem tritt mindestens unter 4.61 Englisch und 4.7 Deutsch auf.
Beim Wechseln der Source wird zwar der neue Hintergrund angezeigt, jedoch nicht der Inhalt.
Liegt wohl das ich den ILAYER in eine Tabelle gepackt habe, aber ich sehe keine andere Möglichkeit
das eine andere Spalte genau gleich hoch wird.
Trotzdem vielen Dank für deine Hilfe
Daniela
hi,
also, ich finde am zuverlaessigsten geht sowas, indem Du die Fensterbreite abfragst, und dann den DIV-Layer mit text entsprechend positionierst.
Moeglicherweise hilft es auch, zwei DIVs ineinander zu verschachteln.
Zum Fenstergroesse abfragen hab ich da ein kleines Testscript: http://www.kamera-grafik-design.de/fenster.htm
Vielleicht hilft es Dir weiter.
Gruesse Joachim