Div soll unten sein (komplizierte Version)

Peter · 8 August 2007

Hallo Leute,

folgendes Problem:

ich möchte ein Div am Ende eines Inhalt-Bereiches haben, solange dessen Inhalt einen Overflow in der Höhe erzeugt (Scrollbar rechts am Browser !!) Das heisst, das div soll erst sichtbar werden, nachdem der Inhalt nach gaaanz unten gescrollt wurde....

Liegt kein overflow mehr vor, soll das Div jedoch am Ende des Browserfensters kleben bleiben.

Dieser Effekt sollte skalierbar bleiben, sodaß je nach Fenstergröße ein fließender Übergang der beiden effekte entsteht.

Was ich bisher gezaubert habe :Ante Portas

Die unteren beiden Divs sind zZ meine Sorgenkinder, Sie kleben zwar schön unten, aber aber unabhängig vom Inhalt des Mittelteils.... aber ich weiss nicht, wie ich die da unten hinkriege, ohne "position:absolute" reinzuhauen....

Wer kann mir helfen

hier der Code

HTML:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
       <title>Frame- ANTE PORTAS</title>
<style type="text/css">
 
/* fuer alle Browser, die min-width verstehen */
.width {width:100%; min-width:800px; margin:0 auto;;z-index:0}
.width2 {position:absolute;bottom:0px;width:100%; min-width:800px; margin:0 auto;;z-index:10}
/* Workaround fuer IE6 Browser */
* html .minwidth {border-left:800px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-800px; position:relative; float:left; z-index:2;}
 
.content {width:100%;border:1px solid blue;text-align:center; }
 
p {margin-bottom:0; padding-bottom:1em;}
</style>
</head>
 
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" rightmargin="0">
<div class="width">
<div class="minwidth">
<div class="container">
<div class="content">
Hier entsteht die Internetpräsenz von ANTE PORTAS
<br>
Quersäule Mit Menü
</div>
</div>
</div>
</div>
 
 
 
<div class="width">
<div class="minwidth">
<div class="container">
<div class="content">
<div style="text-align:center;border:1px solid blue;width:100px;position:absolute;left:0px">
<div>
  Säule links
</div>
<div>
oben
</div>
<div>
  Säule links
</div>
</div>
 
 
<div style="position:relative;min-width:800px;;width:100%;text-align:center;border:0px solid blue;">
<div style="text-align:center;border:1px solid blue;width:100px;position:absolute;right:0px">
<div> 
 Säule rechts
</div>
<div> 
oben
</div>
<div> 
 Säule rechts
</div>
</div>
</div>
 
<div style="position:relative;min-width:800px;;width:100%;text-align:center;border:0px solid blue;">
  <div  style="position:relative;text-align:center;border:1px solid blue;margin-left:110px;margin-right:110px">
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 <br>
  Inhalt Mitte
 </div>
</div>
 
</div>
</div>
</div>
</div>
 
<div class="width2">
<div class="minwidth">
<div class="container">
<div class="content">
<div style="text-align:center;border:1px solid blue;width:100px;position:absolute;bottom:0px;left:0px">
<div>
  Säule links
</div>
<div>
unten
</div>
<div>
  Säule links
</div>
</div>
 
<div style="position:relative;min-width:800px;;width:100%;text-align:center;border:0px solid blue;">
<div style="text-align:center;border:1px solid blue;width:100px;position:absolute;bottom:0px;right:0px">
<div> 
 Säule rechts
</div>
<div> 
unten
</div>
<div> 
 Säule rechts
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
?>
</body>
</html>

PS:die Div Verschachtelungen müssen leider sein, da ich damit auf dem Internet explorer ein Min-width simulieren kann !!!

Peter · 9 August 2007

Hab den Code ein wenig umgestrickt:

Code:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
       <title>Frame- ANTE PORTAS</title>
<style type="text/css">
  body {
    margin:0;
    padding:0;
  }
/* fuer alle Browser, die min-width verstehen */
.width {width:100%; min-width:800px; margin:0 auto;z-index:0}
.width2 {position:relative;bottom:0px;width:100%; min-width:800px; margin:0 auto;z-index:10}
/* Workaround fuer IE6 Browser */
* html .minwidth {border-left:800px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-800px; position:relative; float:left; z-index:2;}
 
.content {width:100%;border:1px solid blue;text-align:center; }
 
p {margin-bottom:0; padding-bottom:1em;}
</style>
</head>
 
<body >
 
 
 
<div class="width" >
<div class="minwidth">
<div class="container">
<div class="content">
Hier entsteht die Internetpräsenz von ANTE PORTAS
<br>
Quersäule Mit Menü
</div>
</div>
</div>
</div>
 
 
 
<div class="width">
<div class="minwidth">
<div class="container">
<div class="content">
<div style="text-align:center;border:1px solid blue;width:100px;position:absolute;left:0px">
<div>
  Säule links
</div>
<div>
oben
</div>
<div>
  Säule links
</div>
</div>
 
 
<div style="position:relative;min-width:800px;;width:100%;text-align:center;border:0px solid blue;">
<div style="text-align:center;border:1px solid blue;width:100px;position:absolute;right:0px">
<div> 
 Säule rechts
</div>
<div> 
oben
</div>
<div> 
 Säule rechts
</div>
</div>
</div>
 
[COLOR=red]<div style="position:relative;min-width:800px;width:100%;bottom:0px;text-align:center;border:0px solid red;">[/COLOR]
[COLOR=red]<div  style="position:relative;text-align:center;border:1px solid blue;margin-left:110px;margin-right:110px">[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
[COLOR=red]Inhalt Mitte<br>Inhalt Mitte<br>[/COLOR]
 
[COLOR=red]</div>[/COLOR]
[COLOR=red]</div>[/COLOR]
 
</div>
</div>
</div>
</div>
 
<div class="width2">
<div class="minwidth">
<div class="container">
<div class="content">
<div style="text-align:center;border:1px solid blue;width:100px;position:absolute;bottom:0px;left:0px">
<div>
  Säule links
</div>
<div>
unten
</div>
<div>
  Säule links
</div>
</div>
 
<div style="position:relative;min-width:800px;;width:100%;text-align:center;border:0px solid blue;">
<div style="text-align:center;border:1px solid blue;width:100px;position:absolute;bottom:0px;right:0px">
<div> 
 Säule rechts
</div>
<div> 
unten
</div>
<div> 
 Säule rechts
</div>
</div>
</div>
</div>
</div>
</div>
</div>
 
 
<?php
?>
</body>
</html>

jetzt mach die seite annähernd das, was sie soll....

guckst Du -> Ante Portas

das heisst die "Säulen" kleben immer am ende des Inhaltsblocks....

Bitte bitte: Wie schaffe ich es jetzt noch, diesem verfluchtem ding klar zu machen, das der container des inhaltes IMMER minimum die höhe des Browserfenster hat.....
wenn wir das hinbekommen, ist es perfekt..... (Die betroffene stelle ist ROT makiert....)

gruenspan · 9 August 2007

Code:

body, html {
 height:100%;
}

div#deincontainer {
 height:100%;
}

sollte helfen

Peter · 9 August 2007

Nada....Nix....

Er tuts nicht.... weder im IE noch im FF

Prozente will einfach nicht funktionieren.....

Mit direkter Pixelangabe kann ich den inhalt-Container aber nach unten ausdehnen... !!!!!!

ich krieg nen Anfall GRRRGGRR;ugl

gruenspan · 9 August 2007

folgender code funktioniert bei mir super, um einen container auf 100% höhe zu bringen:

Code:

...
</head>
<style>
*{
margin:0;
padding:0;
}
html, body{
height:100%;
}
DIV#inhalt{
border:1px solid black;
margin-left:10px;
margin-right:10px;
height:100%;
}
</style>
<body>
<div id="inhalt">Test</div>
</body>
</html>

Peter · 9 August 2007

Halbe Miete.....

Danke....hat mich auf eine idee gebracht....
hab ein Container um den "oberen Bereich gemacht, den auf height:100% gesetzt. nun funktionierts....

aber nur im IE....
FF ist der Container immernoch egal...

ps: an meinen Verschachtelungen hab ich wohl nix vergessen -> Page ist Valid

gruenspan · 9 August 2007

Bei funktioniert das in beiden Browsern. Nimm mal meinen Code als Fundament.

Peter · 9 August 2007

Solo funktioniert dein Code, auch im FF...nur bei meinen verschachtelten <div>'s scheint sich Firefox schwerzutuen....

wenn ich ZB an gleicher Stelle, wo ich jetzt height:100% habe, zb 1000px angebe, setzt auch FF die beiden unteren Säulen weiter runter.... halt nur nicht bei Prozentangabe und üppig platz im Browserfenster.

gruenspan · 9 August 2007

Dann stimmt etwas mit deinen verschachtelten DIV's nicht. Was sagt der Validator? Floats gecleart?

Peter · 27 August 2007

Sorry das ich mich so spät melde, aber ich hatte in der firma immer sehr viel zu tuen....
jetzt hab ich urlaub und hab natürlich wieder an der HP gebastelt.
( Auch die eigentlichen Grafikinhalte brauchten ihre Zeit zum Design ;-) )

Ich hab am Coding mächtig rumgebastelt, aber bin immer noch nicht mit dem Firefox/Netscape problem weiter....

Firefox mag irgentwie keine Positionierung am Fuß der Seite, wenn ich nicht position:absolute benutzte. Mein Problem ist aber, dass die "footer-Säulen" beim content stehen bleiben sollen, bei position:absolute wandern sie jedoch einfach weiter....
Höhenangaben in % sind auch ein problem, da sich die Headergrafik je nach Breite der Seite skaliert, und somit keine fixe %-Angabe der Grafikhöhe angeben lässt.

:-(

Dark D. · 27 August 2007

Ich glaube, das Problem hatte ich auch (verschachtelte DIV´s):
Wenn du in einem DIV ein DIV hast und gibst im inneren DIV an '50%', dann nimmt er nicht die Seitenhöhe als Maßstab, sondern die Höhe des äußeren DIV´s.

Hoffe, ich hab nich völlig daneben gehauen,
Markus

Peter · 27 August 2007

Dark D. schrieb:
Ich glaube, das Problem hatte ich auch (verschachtelte DIV´s):
Wenn du in einem DIV ein DIV hast und gibst im inneren DIV an '50%', dann nimmt er nicht die Seitenhöhe als Maßstab, sondern die Höhe des äußeren DIV´s.

Markus

Das stimmt, aber ich habs ja am DIV direkt unter <body> angewand :-(

ich fummel grade an einer Tabellenlösung.....

gruenspan · 27 August 2007

Es geht Dir doch bestimmt darum, ein Bild (Säule) am unteren Rand zu positionieren, oder?

Wenn ja, dann mach doch sowas wie:

Code:

background-position: bottom right;

Peter · 2 September 2007

gruenspan schrieb:
Es geht Dir doch bestimmt darum, ein Bild (Säule) am unteren Rand zu positionieren, oder?

Wenn ja, dann mach doch sowas wie:

Code:

background-position: bottom right;

Problemkern an der sache: Die Säulen werden Skaliert und somit kleiner...(abgesehen von der Höhe des Stammes, der bleibt natürlich gleich hoch, aber halt dünner ;-) )Backgrounds kann man aber nicht skalieren :-(
daher keine Backgroundgrafik möglich.

ich hab jetzt was für mich akzeptabeles Stadium erreicht....aber nun quälen mich andere sorgen.....
Der IE hat Probleme beim positionieren von Ankern..
Diese HP raubt mir noch den letzten Nerv....grummel

Div soll unten sein (komplizierte Version)

Peter

Neues Mitglied

Peter

Neues Mitglied

gruenspan

Neues Mitglied

Peter

Neues Mitglied

gruenspan

Neues Mitglied

Peter

Neues Mitglied

gruenspan

Neues Mitglied

Peter

Neues Mitglied

gruenspan

Neues Mitglied

Peter

Neues Mitglied

Dark D.

Neues Mitglied

Peter

Neues Mitglied

gruenspan

Neues Mitglied

Peter

Neues Mitglied

Neueste Beiträge