Subform

[phpuser]

Hallo,

ich habe ein kleines Problem mit Subforms (oder Teilmaske oder Dialog). Darunter verstehe ich Elemente, die zeitweise über der Hauptseite eingeblendet werden, um darin etwas zu tun.

Zu meiner Idee:
Sowohl die Maske, als auch die Teilmaske werden über zwei Tabellen aufgebaut, die HTML-mäßig untereinander stehen. Die Teilmsake hat absolute positionierung, damit sie quasi über der Hauptmaske erscheint. Die Masken sind auf der Seite zentriert. Also die Teilmaske soll ebenfalls genau in der Mitte des Fensters erscheinen und somit zentriert über der Hauptmaske erscheinen. Ich denke der Code unten zeigt genau, was ich meine.

Umgesetzt habe ich das mit zwei ineinander geschachtelten Tabellen und das Ganze sieht so aus:

  
<form action='...' method='post'>  
  <table id='Mainform' width='100%' height='100%'>  
    <tr>  
      <td align='center' valign='middle'>  
        <table class='form'>  
          ...  
        </table>  
      </td>  
    </tr>  
  </table>  
  <table id='Subform' style='position:absolute; top:0px; left:0px; display:none; width:100%; height:100%'>  
    <tr>  
      <td align='center' valign='middle'>  
         <table class='subform' width='600'>  
          ...    // Hier steht der Code der Teilmaske  
        </table>  
      </td>  
    </tr>  
  </table>  
</form>  

Sowohl im IE als auch im Firefox ist die Hauptmaske immer sauber zentriert. Die Teilmaske ist aber nur IE richtig zentriet. Im Firefox dagegen hängt sie links oben.

Eingeblendet wird die Teilmaske dann, in dem display auf 'inline' gesetzt wird. 'block' habe ich auch schon versucht. Ursprünglich hatteich auch width und height als table-Attribute anstatt im style-Tag, aber das hat alles nichts genützt.

Kann mir jemand sagen, warum und was ich ändern muss, damit das auch im Firefox korrekt ist? Ich steh' echt auf dem Schlauch.

Danke, phpuser

[EKKi]

Mahlzeit phpuser,

Sowohl im IE als auch im Firefox ist die Hauptmaske immer sauber zentriert. Die Teilmaske ist aber nur IE richtig zentriet. Im Firefox dagegen hängt sie links oben.

Wie immer in so einem Fall (IE macht es scheinbar "richtig", Firefox stellt es nicht wie gewünscht dar) gilt: ist Dein Code valide?

Kann mir jemand sagen, warum und was ich ändern muss, damit das auch im Firefox korrekt ist?

Tabellen in Tabellen sind ein gutes Indiz dafür, dass sowohl die inneren als auch die äußeren eliminiert und durch semantisch passendere Elemente ersetzt werden können.

Schreibe sauberen, validen und semantisch sinnvollen Code.

MfG,
EKKi

[phpuser]

Hallo EKKi,

vielen Dank für Dein Antwort. Ja, mein Code ist valide. Das ist soweit alles korrekt und tut auch. Wie oben beschrieben muss ich nur 'inline' durch 'table' ersetzen. Kleine Ursache, große Wirkung.

Gruß,

phpuser

[Felix Riesterer]

Lieber phpuser,

Sowohl die Maske, als auch die Teilmaske werden über zwei Tabellen aufgebaut

warum? Ist das sinnvoll?

Eingeblendet wird die Teilmaske dann, in dem display auf 'inline' gesetzt wird.

Eine Tabelle hat in CSS für die http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display-Eigenschaft den default-Wert "table". Diesen solltest Du benutzen, wenn Du Tabellen von display:none auf sichtbar schalten willst.

'block' habe ich auch schon versucht.

Das wäre fast schon richtig, aber eben nur fast.

Ursprünglich hatteich auch width und height als table-Attribute anstatt im style-Tag, aber das hat alles nichts genützt.

Das Aussehen steuerst Du völlig richtig rein mit CSS. Warum Du aber verschachtelte Tabellen benutzt, will mir nicht einleuchten. Meine Faustregel lautet: Wenn jemand Tabellen verschachteln muss, dann hat er oder sie ein echtes Problem mit der Struktur der Inhalte, die damit ausgezeichnet werden sollen.

Kann mir jemand sagen, warum und was ich ändern muss, damit das auch im Firefox korrekt ist? Ich steh' echt auf dem Schlauch.

Mein Rat: Poste einen Link zu einer Beispielseite, damit ich die Inhalte in Deinem Formular sehen kann. Dann kann ich Dir auch sagen, wie Du diese Inhalte sinnvoller auszeichnest (ohne verschachtelte Tabellen), und wie Du dann Dein Anzeigeproblem wirkungsvoll in den Griff bekommst.

Liebe Grüße,

Felix Riesterer.

[phpuser]

Hallo Felix Riester,

vielen Dank für Dein Antwort. Das Problem lag an dem 'inline'. Wie Du richtig gesagt hast, muss ich hier nur 'table' setzen und schon stimmt alles.

'block' habe ich auch schon versucht.

Das wäre fast schon richtig, aber eben nur fast.

Tja, knapp vorbei ist auch daneben ;-)

Ursprünglich hatteich auch width und height als table-Attribute anstatt im style-Tag, aber das hat alles nichts genützt.

Das Aussehen steuerst Du völlig richtig rein mit CSS. Warum Du aber verschachtelte Tabellen benutzt, will mir nicht einleuchten. Meine Faustregel lautet: Wenn jemand Tabellen verschachteln muss, dann hat er oder sie ein echtes Problem mit der Struktur der Inhalte, die damit ausgezeichnet werden sollen.

Verschachtelte Tabellen benutze ich nur, um die tatsächliche Tabelle auf dem Bildschirm zu zentrieren. Also eine unsichtbare (eigentlich durchsichtige) Tabelle über den gesamten Bildschirm und dann im einzigen <td> die Zentrierung der tatsächlichen Tabelle. Da es keine CSS-Eigenschaften table-align oder table-valign gibt, weiß ich nicht, wie ich das sonst machen sollte. Oder gibt es etwas vergleichbares? Wäre nett, wenn Du mir hier einen Tipp geben könntes.

Mein Rat: Poste einen Link zu einer Beispielseite, damit ich die Inhalte in Deinem Formular sehen kann. Dann kann ich Dir auch sagen, wie Du diese Inhalte sinnvoller auszeichnest (ohne verschachtelte Tabellen), und wie Du dann Dein Anzeigeproblem wirkungsvoll in den Griff bekommst.

Das geht leider nicht, da es sich um eine Intranet-Applikation handelt, die nicht im Web verfügbar ist.

Nochmals vielen Dank für Deine Hilfe.

Gruß,

phpuser

[Felix Riesterer]

Lieber phpuser,

Verschachtelte Tabellen benutze ich nur, um die tatsächliche Tabelle auf dem Bildschirm zu zentrieren. Also eine unsichtbare (eigentlich durchsichtige) Tabelle über den gesamten Bildschirm und dann im einzigen <td> die Zentrierung der tatsächlichen Tabelle. Da es keine CSS-Eigenschaften table-align oder table-valign gibt, weiß ich nicht, wie ich das sonst machen sollte. Oder gibt es etwas vergleichbares? Wäre nett, wenn Du mir hier einen Tipp geben könntes.

http://www.ich-lerne-css.de/Style/Examples/007/center.html

Liebe Grüße,

Felix Riesterer.

[phpuser]

Hallo Felix Riesterer,

danke für den Link, aber in meinem Fall scheint der nicht zu helfen. Dort steht:

CSS2 besitzt keine Eigenschaft um Elemente vertikal zu zentrieren. Eventuell wird es das in CSS3 einmal geben. Aber selbst in CSS2 können Sie Blöcke durch die geschickte Kombination von Eigenschaften vertikal zentrieren. Der Trick dabei ist das aussenliegende Blockelement als Tabellenzelle zu formatieren weil alle Inhalte einer Tabellenzelle vertikal zentriert werden können.

Also bin ich dann doch wieder bei der äußern Tabelle. Scheint also leider nichts zu nützen.

Gruß,

phpuser

[apsel]

Om nah hoo pez nyeetz, phpuser!

Also bin ich dann doch wieder bei der äußern Tabelle.

Nein, sondern display: table-cell; für das umschließende Blockelement.

Matthias

[Shadowcrow]

'ǝɯɐu$ ıɥ

CSS2 besitzt keine Eigenschaft um Elemente vertikal zu zentrieren. Eventuell wird es das in CSS3 einmal geben. Aber selbst in CSS2 können Sie Blöcke durch die geschickte Kombination von Eigenschaften vertikal zentrieren. Der Trick dabei ist das aussenliegende Blockelement als Tabellenzelle zu formatieren weil alle Inhalte einer Tabellenzelle vertikal zentriert werden können.

Also bin ich dann doch wieder bei der äußern Tabelle. Scheint also leider nichts zu nützen.

http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

Ließ alles außer: Alternativ können Sie eine Seite Tabelle notieren....  ;-)

ssnɹƃ
ʍopɐɥs

[phpuser]

Hallo Shadow,

danke für Deinen Link. Es funktioniert tatsächlich ;-)

Habs leider erst heute lesen können.

Danke,

phpuser