Problem mit zentriertem DIV in IE: Marco

SELF-Forum

Marco

Problem mit zentriertem DIV in IE
– Informationen zu den Bewertungsregeln

Hallo zusammen,

Obwohl ich FAQ's und Tutorials studiert habe verstehe ich einfach nicht warum ich den DIV "inhalt" (und dessen Tabelle) innerhalb des containers "cont" nicht vertikal und horizontal zentrieren kann. Die Lösung muss ausschliesslich im IE funktionieren. Kann mir jemand weiterhelfen?

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>Title</title>  
  <style>  
  
  
body {  
 margin: 0px;  
}  
  
#wrap {  
 position:absolute;  
 top:6px;  
 left:6px;  
 width:248px;  
 height:178px;  
 overflow: hidden;  
 border: 1px solid blue;  
}  
  
#cont {  
 float:left;  
 width:248px;  
 height:158px;  
 overflow: hidden;  
 border: 1px solid green;  
}  
  
#bar {  
 float:left;  
 width:100%;  
 height:20px;  
 line-height:16px;  
 vertical-align: middle;  
 overflow: hidden;  
 padding-left:3px;  
 cursor:hand;  
 border: 1px solid yellow;  
}  
  
  
#inhalt {  
{  
 height: 158px;  
 width: 248px;  
 top: 50%;  
 left: 50%;  
 margin-left: -124px;  
 margin-top: -79px;  
  
 border: 1px solid red;  
}  
</style>  
  
 </head>  
 <body>  
  <form name="form">  
  <div id="wrap">  
   <div id="cont">  
  
   <!-- Begin Content -->  
  
      <!-- Begin Panel -->  
      <div id="inhalt">  
       <table>  
        <tr>  
         <td>Test</td><td></td>  
        </tr>  
       </table>  
      </div>  
      <!-- End Panel -->  
  
   <!-- End Content -->  
  
   </div>  
   <div id="bar"></div>  
  </div>  
  </form>  
 </body>  
</html>

Viele Grüsse Marco

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Marco

    tinu
    – Informationen zu den Bewertungsregeln

    Hallo zusammen,

    Hi Marco!

    Du hast Deine "inhalt"-div nicht relativ positioniert. Versuchs mal so (die Höhe und Breite von #inhalt hab ich absichtlich kleiner gemacht, damit überhaupt siehst, dass es nun eingemittet ist.

    #inhalt {
    {
     position: relative;
     height: 100px;
     width: 200px;
     top: 50%;
     left: 50%;
     margin-left: -100px;
     margin-top: -50px;

    border: 1px solid red;
    }

    Doch nun ist erst die "inhalt"-div vertikal und horizontal eingemittet. Nun müsstest halt noch die Tabelle einmitten. Weiss ja nicht ob die Inhalte der tabellenzellen auch horizontal und vertikal zentriert haben möchtest, aber wenn ja machst das am einfachsten so:

    table {
     height:100%;
     width: 100%;
     vertical-align: middle;
     text-align: center;
    }

    ps: damit nicht alle tabellen so formatiert sind kannst Deiner Tabelle natürlich auch ne id geben ;)

    Ich hoffe das hilft Dir weiter.

    greetz
    tinu

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Marco

      tinu
      – Informationen zu den Bewertungsregeln

      Ach... hab noch was vergessen!

      Wenn nicht möchtest, dass die Tabelle gleichgross ist wie #inhalt, dann kannst ja sonst noch  >> padding: 5px 5px; << ins CSS der #inhalt-div einfügen.

      Die anderen Elemente hab ich übrigens nicht angeschaut, da auch nicht gesagt hast wozu die sind ;).

      Gruss
      tinu

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Marco

        Marco
        – Informationen zu den Bewertungsregeln

        Danke für deine Hilfe. Problem ist, dass ich für diese Lösung wissen muss wie gross mein Element ist. Gibt es eine andere Möglichkeit?

        Viele Grüsse
        Marco

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Marco

          tinu
          – Informationen zu den Bewertungsregeln

          Danke für deine Hilfe. Problem ist, dass ich für diese Lösung wissen muss wie gross mein Element ist. Gibt es eine andere Möglichkeit?

          Viele Grüsse
          Marco

          Hi

          Schau mal hier:
          http://www.webdesign-in.de/mts/vertikal-und-horizontal-zentrieren-ohne-tabelle/

          Sollte Dir eigentlich weiterhelfen.
          Gruss
          tinu

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln