Ankündigung

Einklappen
Keine Ankündigung bisher.

Relative Positionierung ohne eigene Platzbeanspruchung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Relative Positionierung ohne eigene Platzbeanspruchung

    Hi,

    ich möchte in einer Tabelle Textfelder nachträglich erzeugen und sie etwas versetzt über den Spaltenüberschriften schweben lassen. Leider beanspruchen sie immer noch selber Platz und verändern mir die gewünschte Spaltenbreite. Kann ich die Textfelder auch so erzeugen, dass sie selber keinen Platz mehr beanspruchen, so das die anderen Elemente in ihrer Positionierung nicht beeinflusst werden.


    Code:
    html>
    <head>
     <style>
     
      input {
       background-color: White;
       border:2px solid blue;
       width: 100px;
       position:relative;
       top: 14px;
       left: 14px;
      }
        
      span {
       float: left;
      }
      
      td, th {
       border: 1px dashed grey;
      }
      td {
       width: 140px;
      }
      
     </style>
    </head>
    <body>
     <table>
      <tr>
       <th style="width:28px">
        <button>+</button>
       </th>
       <th>
        <input id="textbox1" type="Text" value="Textbox 1"/> 
        <span>Column 1</span>
       </th>
       <th style="width:28px">
        <button>+</button>
       </th>
       <th>
        <input id="textbox2" type="Text" value="Textbox 2"/> 
        <span>Column 2</span>
       </th>
      </tr>
      <tr>
       <td colspan="2">1</td>
       <td colspan="2">x</td>
      </tr>
      <tr>
       <td colspan="2">2</td>
       <td colspan="2">y</td>
      </tr>
      <tr>
       <td colspan="2">3</td>
       <td colspan="2">z</td>
      </tr>
     </table>
    </body>
    </html>

  • #2
    Wäre das nicht eine absolute Positionierung?
    [URL="https://github.com/chrisandchris"]GitHub.com - ChrisAndChris[/URL] - [URL="https://github.com/chrisandchris/symfony-rowmapper"]RowMapper und QueryBuilder für MySQL-Datenbanken[/URL]

    Kommentar


    • #3
      Ja und Nein. Ich möchte, dass sich das Textfeld auf den Anfang einer Spalte bezieht. Eine absolute Position ist unabhängig von dem Anfang der Spalte. Hast aber an sich schon recht. Es ist gewissermaßen eine absolute Position relativ zum Anfang der Spalte.

      Kommentar


      • #4
        Musst halt dem Elternelement noch eine position: relative; geben. In deinem Fall am <th> Element.

        Kommentar


        • #5
          Danke. Leider löst das aber nicht das Problem. Auch dann beanspruchen sie weiter Platz und vergrößern unnötig die Breite der Spalte.

          Kommentar


          • #6
            Bei mir gehts wenn ich dich recht verstanden habe:

            PHP-Code:
            <!DOCTYPE html>
            <
            html lang="de">
            <
            head>
            <
            meta charset="utf-8">
            <
            title>Unbenanntes Dokument</title>
            <
            style type="text/css">
            <!--
            .
            textboxpositionabsolutetop14pxleft0z-index99;}
            inputborder:2px solid bluebackgroundwhite;}
            span {floatleft;}
            thpositionrelative;}
            tdthborder1px dashed grey;}
            tdwidth140px;}
            -->
            </
            style>
            </
            head>
            <
            body>
            <
            table>
                <
            tr>
                    <
            th style="width:28px">
                        <
            button>+</button>
                    </
            th>
                    <
            th>
                        <
            input class="textbox" id="textbox1" type="Text" value="Textbox 1"/> 
                        <
            span>Column 1</span>
                    </
            th>
                    <
            th style="width:28px">
                        <
            button>+</button>
                    </
            th>
                    <
            th>
                        <
            input class="textbox" id="textbox2" type="Text" value="Textbox 2"/> 
                        <
            span>Column 2</span>
                    </
            th>
                </
            tr>
                <
            tr>
                    <
            td colspan="2">1</td>
                    <
            td colspan="2">x</td>
                </
            tr>
                <
            tr>
                    <
            td colspan="2">2</td>
                    <
            td colspan="2">y</td>
                </
            tr>
                <
            tr>
                    <
            td colspan="2">3</td>
                    <
            td colspan="2">z</td>
                </
            tr>
            </
            table>
            </
            body>
            </
            html

            Tip: Mach für deine inline style Klassen daraus.

            Kommentar

            Lädt...
            X