✔ Overflow mit variabler Höhe

Status
Nicht offen für weitere Antworten.
Hi, danke.

Ich glaub ich hab mich etwas falsch ausgedrückt.
Ich mein nicht den Text in der Zelle, sondern die Tabelle selbst.

Hier dargestellt mit roten Linien. Der ganze rote Block (die Tabelle) soll weiter nach unten (bzw. eben 'middle' sein).

Edit: Okay, jetzt gehts im IE und Opera, aber FF will nicht.. x-D
 

Anhänge

  • page.jpg
    page.jpg
    50,1 KB · Aufrufe: 14
Zuletzt bearbeitet:
Okay danke, ich glaub so geht es.

Es ist komisch, nimm ich (fast) egal welche Zeile raus, im Zusammenhang damit, dann geht es im FF und IE aber nicht OPera, oder Opera aber niche IE aber FF, etc.. hab glaub ich jetzt schon mal alle Variante durch :-D Will das überschüßige rausschneiden^^.

hmm jetzt wida FF nicht, weiß jemand wie man im Firefox (3) den Cache für Localhost abstellt?
 
Grundsätzlich funktioniert es auf diese Weise:

  • Neues Markup:
Code: 
<div class="mitte">
     <div class="inhaltDiv">
          <div class="tableouterwrap">
               <div class="tableinnerwrap">
                    <table id="table1" border="0" width="600" cellpadding="0" cellspacing="0">
                           ...
                    </table>
               </div>
          </div>
     </div>
</div>
  • Neue CSS-Regeln für diesen Bereich:
Code: 
.mitte {
position:absolute;
top:0;
left:200px;
bottom:96px;
right:0;
overflow:auto;
}
.mitte .inhaltDiv {
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
.mitte .inhaltDiv .tableouterwrap {
display:table-cell;
vertical-align:middle;
}
.mitte .inhaltDiv .tableinnerwrap {
position:relative;
left:50%;
float:left;
}
.mitte .inhaltDiv table#table1 {
position:relative;
left:-50%;
}
"Grundsätzlich" deshalb, da die width:100%-Deklaration für .inhaltDIV in den Browsern nun über den rechten Fensterrand hinausgeht, also von seiner linken Position an hinzugezählt wird, und daher in .mitte der horizontale Scrollbalken erscheint.

mfg Maik
 
Danke dass du dir soviel Zeit nimmst.

Die Version klappt im IE6 nicht, zumindest das valign. :D
Merkwürdig, bei 1024x768 kommt bei meinem Notebook ein scroll balken horizontal (FF3; Ubuntu) wobei er nach rechts geht wo 'nix' ist.
Und im Windows (FF3) kommt gar kein Scrollbalken mehr obwohl der Text zu groß ist (evtl. blöder Cache noch).

Das ist echt Horror - vielleicht doch wieder auf Frames x-D (mach nur Spaß).

Edit: Ja Cache im Windows, jetzt kommt der horizontale scrollbalken nur wenn nötig, der vertikale aber nie. :) Aber nur im FF3 und im Windows. vermutlich Cache-Problem^^
 
Zuletzt bearbeitet:
Die erforderlichen Regeln für den IE6 hab ich in meinem Beispiel nicht berücksichtigt - darum darfst du dich zur Übung selber kümmern ;)

mfg Maik
 
Die Geschichte ist anscheinend noch nicht ganz vorbei. Mit dem IE6 klappt alles 'perfekt'. Nur mit Firefox 3 und Opera 9.5 leider nicht.

Dank den Web Developer kann ich wenigstens sehen 'wo er den Fehler macht'.
Im Anhang sieht man 2 Bilder, einmal mit der Maus über das linke Feld (Text) und einmal rechts (Bug?!). Intressant ist oben (alles orange umrastert) ist die Sache welche Tag verantwortlich ist.

.mitte .inhaltDiv .tableinnerwrap {
position:relative;
left:50%;
float:left;

Ich hab es jetzt mal grün gefärbt um zu verdeutlichen. Der IE ignoriert es beim scrollen(!gut so) doch Opera und FF richten sich beim scrollen auch dadran.
http://93.130.186.166/Labil/index.php?Site=Home2

-Wegen meiner recht hohen Auflösung (1680x1050) ist mir das erst jetzt aufgefallen.
 

Anhänge

  • 1.jpg
    1.jpg
    75,2 KB · Aufrufe: 19
  • 2.jpg
    2.jpg
    75,4 KB · Aufrufe: 19
Zuletzt bearbeitet:
Dieser "Fehler" taucht bei mir aber auch im Original-Beispiel http://www.pmob.co.uk/temp/vertical-align11.htm mit der Box #formwrap auf:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{height:100%}
#wrapper{
        height:100%;
        width:100%;
        display:table;
        vertical-align:middle;
}
#outer{
        display:table-cell;
        vertical-align:middle;
}
#formwrap{
        position:relative;
        left:50%;
        float:left;
        background:#00FF00;
}
#form1{
        border:1px solid #000;
        padding:20px 20px;
        position:relative;
        text-align:right;
        left:-50%;
}
p{margin:1em 0}
input{position:relative;background:#ffffcc}

</style>
<!--[if gte IE 5]>
<style type="text/css">
#wrapper{        overflow:hidden;/* stop hoz scroll bar from appearing*/}
#formwrap {top:50%}
#form1{top:-50%;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
        <div id="outer">
                <div id="formwrap">
                        <form id="form1" method="post" action="">
                                <p>
                                        <label for="t1">Name: </label>
                                        <input type="text" name="t1" id="t1" value="I'm in the middle" />
                                </p>
                                <p>
                                        <label for="t2">Password: </label>
                                        <input type="password" name="t2" id="t2" />
                                </p>
                        </form>
                </div>
        </div>
</div>
</body>
</html>
mfg Maik
 
so, neue Methode neues Glück:
http://www.pmob.co.uk/temp/vertical-align3.htm

Probleme:
Firefox & Opera; valign kein problem, scrollen auch nicht, aber 'Tabelle' ist nicht zentriert.
IE6 (obwohls im Beispiel geht) Text ist zentriert aber nicht mittig..x-D verkerhte Welt {0 probs mit scrollen }

Edit: Sorry wegen Doppelpost
Edit #2: LOL ok, mit Firefox und Opera klappts Perfekt wenn ich <center> einbaue - :) yuhu! nur noch mit IE!
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück