Inerhalb eines div absolut positionieren

[xxoes]

Hi,

ich möchte mehrere Zeilen und Spalten wie in einer Tabelle darstellen und Inerhalb einer Zelle ein Element positionieren aber wie?

    <div>
      <div style='float:left;width:100px;height:100px'>A1</div>
      <div style='float:left;width:100px;height:100px'>B1</div>
      <div style='float:left;width:100px;height:100px'>C1</div>
      <div style='float:clear;width:100px;height:100px'></div>
      <div style='float:left;width:100px;height:100px'>A1
        <div style='position:absolute;bottom:10px;width:50px;height:50px'>
          X
        </div>
      </div>
      <div style='float:left;width:100px;height:100px'>B1</div>
      <div style='float:left;width:100px;height:100px'>C1</div>
      <div style='float:clear'></div>
    </div>

ich möchte nicht das das X 10px vom Boden der Seite sonder 10px vom Boden des A1 divs positioniert wird.

hat einer eine Idee?

lg xxoes

 

[mikdoe]

ich möchte mehrere Zeilen und Spalten wie in einer Tabelle darstellen

Ist <table> inzwischen out? Macht man es heutzutage lieber anders als ursprünglich vorgesehen?

 

[xxoes]

Hi,

überall bei css ließt man das man keine tabellen mehr nutzen soll.
gibts da keine css lösung?

[edit]Mit tabellen gehts auch nciht selbe problem, es wird unten auf der seite dargestellt.[/edit]

lg kita

P.S. ich hab nix gegen tabellen

 

[mikdoe]

überall bei css ließt man das man keine tabellen mehr nutzen soll.
gibts da keine css lösung?

Jeder vertritt seine Sache.
Soweit ich weiß ist die gute alte <table> bislang nicht deprecated. Oder bin ich falsch informiert?

[edit]Mit tabellen gehts auch nciht selbe problem, es wird unten auf der seite dargestellt.[/edit]

Wie sieht denn von diesem Versuch der komplette Code aus?

 

[xxoes]

    <table border='1'>
      <tr style='height:100px'>
        <td style='width:100px'>
          A1
        </td>
        <td style='width:100px'>
          B1
        </td>
        <td style='width:100px'>
          C1
        </td>
      </tr>
      <tr style='height:100px'>
        <td style='width:100px'>
          A2
        </td>
        <td style='width:100px'>
          B2
          <div style='border-style:dotted;position:absolute;bottom:25px;left:25px;width:50px;height:50px'>X</div>
        </td>
        <td style='width:100px'>
          C2
        </td>
      </tr>
    </table>

 

[dkdenz]

Innerhalb eines div's positioniert man absolute, indem man dem div ein position:relative gibt ...

 

[xxoes]

Hi dkdenz,
ich hab dem div doch position:absolute gegeben.

lg xxoes

 

[dkdenz]

ich hab dem div doch position:absolute gegeben.

Meinen Beitrag noch mal lesen ...

 

[xxoes]

Was soll das denn bringen?
dann müsste ich ja die eltern-divs alle relativ positionieren.
dann könnte ich ja gleich die divs alle relativ positionieren.

 

[kkapsner]

Die absolute Positionierung bezieht sich immer im Bezug auf den .offsetParent
Dieser ist immer da erste Eltern- oder Großelternelement, das nicht position:static hat.
Wenn du also in Bezug auf deine Eltern-DIVs positionieren willst, musst du diesen entweder absolute/relative/fixed machen. Absolute und fixed sind für dein Problem wahrscheinlich nicht praktikabel => es bleibt nur noch relative über.

PS: <Table> wurde früher oft zu Layoutzwecken missbraucht. Das war nicht besonders schön/praktikbel/wartbar (es war aber in Bezug auf verschiedene Browser relativ stabil) und ist deswegen nicht mehr in Mode. Um eine ganz normale Tabelle zu machen, sollte man natürlich immer noch <table> verwenden - das ist ja der Sinn von semantischem HTML: verwende das richtige Tag für den richtigen Zweck.