div + table

[Ehdoranil]

hi
mal wieder ein problem, bei dem ich nicht weiter komm:
gegeben sei ein div-segment (formatiert über css seperat)
darin liegt nur eine tabelle:

#divseg{
  background:$farbe;
  width:500px;
  height:400px;
}

#tabelle{
  width:90%;
  height:90%;
}

.....

<div id="divseg">
  <table id="tabelle">
    (...)
  </table>
</div>

--> Was muss ich tun, damit die Tabelle Horizontal und Vertikal zentiriert/mittig im div liegt?

danke für eure Hilfe!

[nag]

Hallo,

--> Was muss ich tun, damit die Tabelle Horizontal und Vertikal zentiriert/mittig im div liegt?

Warum hast du der Tabelle prozentuale Werte für Höhe und Breite zugewiesen, wo doch das äußere <div> eine feste Größe hat?

Im Prinzip würde ich es wie folgt machen.
Das äußere <div> wird relative positioniert.
Die innere Tabelle wird absolute positioniert und bekommt für die obere linke Ecke die entsprechende Koordinate gesetzt.
(da die Tabelle 90% breit und hoch würde sich folgende Koordinate ergeben: top:5%; left:5%;)

mfg NAG

[Ehdoranil]

hi
super idee!
also in wirklichkeit hat das div auch variable größen
hab nur hier ohne speziellen grund fix-größen verwendet

aber klar...über ne relativ positionierung kein problem mehr:)
danke!

[Ehdoranil]

ok, zufrüh gefreut:(
ie machts ohne probs, firefox scheint die top% an irgendetwas nur nicht am div zu bemessen:/

[nag]

ich habe es eben unter Firefox1.0, Opera 7.54 und IE6 erfolgreich getestet.
zeig mal den relevanten Quellcode (HTML, CSS)

mfg NAG

[Ehdoranil]

ist php + css:

php code:
file1.php:

echo "<div id="main">\n";

include "file2.php";

echo "</div>\n";

file2.php:

echo "  <table class="tab">\n";
  (...)
  echo "  </table>\n";

css dazu:

#main{
    top:15%;
    left:5px;
    height:75%;
    width:80%;
    overflow:auto;
  }

.tab{
    font-family:'Tahoma','Arial';
    margin:10px;
    position:relative;
    top:10%;
    bottom:10%;
    height:80%;
    left:15%;
    right:15%;
    width:70%;
  }

tja... das wars:|

[nag]

Hallo nochmal

#main{
    top:15%;
    left:5px;
    height:75%;
    width:80%;
    overflow:auto;
  }

wozu "top" und "left" ?
von "overflow:auto" halte ich auch nichts, weil man in einigen Browser(versionen) in solchen Containern nicht mit dem Mausrad scrollen kann.
sagte ich nicht, das #main (sprich das DIV) relativ positioniert werden soll
(position:relative)?

.tab{
    font-family:'Tahoma','Arial';
    margin:10px;
    position:relative;
    top:10%;
    bottom:10%;
    height:80%;
    left:15%;
    right:15%;
    width:70%;
  }

"font-family" ist sicherlich keine relevanter Quellcode ;)
warum "margin"?
warum "position:relative"?
nach meinem Vorschlag sollte es doch absolut positioniert werden (position:absolute;).
warum "top", "bottom", "left" und "right".
es reicht doch die obere linke Ecke (Koordinate) festzulegen (left:10%; top:15%;).

bin auf deine nächste Version gespannt ;)

Gruß NAG

[Ehdoranil]

sorry - falsch gelesen .... jup: absolute tuts!
danke:)
das main fungiert hier wie nen iframe, ist mit php aber durch nen div einfacher, da ich eh mit jeder aktion alle segmente refreshen muss. daher auch des overfolw:auto & position:absolute!
margin,font etc...sorry, war irrelevant.

danke nochmal:)