Andreas Nagel: Textfeld immer an die verfügbare Größe anpassen

Hallo zusammen

ich glaub ich sitz hier vor einer ganz verzwickten Situation die nicht so einfach zu beschreiben ist:

1. Ein Textfeld soll wenn möglich neben den Menübuttons sitzen können, aber minimal die Größe von 180px besitzen.

2., Sind die 180px nicht möglich soll das Textfeld unter das Menü springen und die gesamte verfügbare Breite einnehmen, minus dem Button der vor dem Textfeld stehen soll.

3. Da es sich hierbei um Menüs und das Textfeld über einem iframe handelt, soll auch ggf die Größe des iframes und dann auch die Größe des Textfeldes bei Größenänderung des Browserfensters angepasst werden.

Und das alles sitzt in einer Tabelle. Und zwar die Menübuttons und das Textfeld in einer Zelle/Zeile, sowie auch das iframe in einer Zelle/Zeile und das Ganze wird auch an den Inhalt des iframes angepasst. Aber wie gesagt kann es schon vorkommen das bei Größenänderung des Browserfensters mal die Tabelle und dann auch sorum auch die Größe des iframes angepasst werden muss.

Würde mich über Hilfe sehr freuen und wollte mich dafür nur bedanken können, da ich jetzt schon Stunden davor sitze. Also bitte ich Euch um Hilfe.

Also vielen Dank für jede Mühe und damit auch zum Gruß Andreas

  1. Om nah hoo pez nyeetz, Andreas Nagel!

    ich glaub ich sitz hier vor einer ganz verzwickten Situation die nicht so einfach zu beschreiben ist:

    Deshalb wäre es am besten, wenn du ein online-Beispiel bereitstellen könntest. Vor allem im Hinblick auf frames und tabellen.

    Wahrscheinlich wirst du dann auch Lösungsvorschläge erhalten, die einen Verzicht darauf empfehlen.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Span und Spange.

    1. Jo Hallo Matthias

      bei mir gibt es aber leider keine Online-Seite. Aber ok dann zeige ich hier mal die betreffenden Zeilen:

        
      .Marker { background-image: url("Pictures/Button.jpg"); background-repeat: repeat-x; background-color:#ccc; width:40px; height:40px; margin:0; font-weight:bold; font-size:16pt; border-top:0; float:left}  
      
      
      <tr id="TRFunction" style="display:none;">  
      <td id="TDFunction" style="border:5px solid #00ee00; border-bottom:0px; background: url('Pictures/VerlaufAuswahl.jpg') repeat-x #eee; background-position:top; padding:0; " onselectstart="return false">  
      <div id="FrameMenue" style="background-color:#000; display:none; height:40px; float:left">  
      <button type='button' id='Marker' value="&gt;" class='Marker' onclick="FrameMarkierungen()" title="Aller Eintrage markieren" onfocus='this.blur()'>></button>  
      <button type="button" id="Eigenschaften" onclick="LinkEigenschaften()" title="Eigenschaften markierter Links" style="background: url('Pictures/ButtonMenue.jpg'); height:40px; width:70px; border-top:0; float:left" onfocus="this.blur()">  
      <img src="Pictures\project-open.ico" width="32" height="32" align="middle" alt="Denker">  
      </button>  
      <button type="button" id="LinksSenden" onclick="Email()" title="Markierte Links per Email senden" style="background: url('Pictures/ButtonMenue.jpg'); height:40px; width:70px; border-top:0; float:left" onfocus="this.blur()">  
      <img src="Pictures\Email.gif" width="23" height="24" align="middle" alt="Denker">  
      </button>  
      <button type="button" id="AddLinks" onclick="" title="Markierte Links hinzufügen" style="display:none; background: url('Pictures/ButtonMenue.jpg'); height:40px; width:70px; border-top:0; float:left" onfocus="this.blur()">  
      <img src="Pictures\Sunny.ico" width="32" height="32" align="middle" alt="Denker">  
      </button>  
      <button type="button" id="DelLinks" onclick="" title="Markierte Links löschen" style="display:none; background: url('Pictures/ButtonMenue.jpg'); height:40px; width:70px; border-top:0; float:left" onfocus="this.blur()">  
      <img src="Pictures\Delete.png" width="32" height="32" align="middle" alt="Denker">  
      </button>  
      <button type="button" id="SubLinks" onclick="HideAllSubLinks()" title="Alle Sublinks ausblenden" style="display:none; background: url('Pictures/ButtonMenue.jpg'); height:40px; width:70px; border-top:0; float:left" onfocus="this.blur()">  
      <img src="Pictures\SubUp.png" width="30" height="30" align="middle" alt="Denker">  
      </button>  
      <button type="button" id="SuchenCtl" onclick="SuchfeldAnzeigen()" title="Suchfeld ein-/ausblenden (F2)" style="background: url('Pictures/ButtonMenue.jpg'); height:40px; width:70px; border-top:0; float:left" onfocus="this.blur()">  
      <img src="Pictures\suchen2.ico" width="32" height="32" align="middle" alt="Denker">  
      </button>  
      </div>  
      <div id="Suchbereich" style="margin:0; width:100%; visibility:visible; background-color:#000; clear:none; white-space:nowrap; ">  
      <button id="SuchfeldSelect" type='Button' value="&gt;" class='Marker' onclick="document.getElementById('Suchfeld').select()" title="Text markieren" onfocus='this.blur()'>></button>  
      <input type="text" Id="Suchfeld" onFocus="SuchfeldFocus(); " tabindex="1" style="margin-top:5px; border:2px solid #000; height:24px; min-width:100%; display:block; color:#000; font-size:16px; font-family:Arial; line-height:24px; clear:none; float:right " onBlur="SuchfeldBlur()" autocomplete="off" value="Suchtext" />  
      </div>  
      </td><td></td>  
      </tr>  
      <tr>  
      <td id="DatenFrameBereich" style="">  
      <iframe id='DatenFrame' width="100%"  name='DatenFrame' onload="$(document.getElementById('dunkel')).fadeTo(300,0.0, function () {CloseDialog(); document.getElementById('dunkel').style.backgroundColor = '#000'; document.getElementById('DatenFrame').onload=null});" frameborder="0"></iframe>  
      </td>  
      <td id="SideMenue" name="SideMenue" style="background:transparent; vertical-align:top; padding:0; border:0" rowspan="3">  
      <div style="position:absolute; z-index:1; margin-top:3px; opacity:0.15; filter:alpha(opacity=15); background-color:#000; height:150px; width:53px"></div>  
      <div id="SideMenue" name="SideMenue" style="position:relative; height:150px; width:50px; z-index:8 ">  
      	<input id="ScrollTop" type="Button" onclick="frames['DatenFrame'].ScrollIntoTop()" onfocus="this.blur()" style="width:50px; height:50px; background: url('Pictures/top.png') no-repeat #eee; background-position:center" title="zum Seitenanfang scrollen"><br>  
      	<input id="ScrollBottom" type="Button" onclick="frames['DatenFrame'].ScrollIntoBottom()" style="width:50px; height:50px; background: url('Pictures/bottom.png') no-repeat #eee; background-position:center" onfocus="this.blur()" title="zum Seitenende scrollen"><br>  
      	<input id="SortCtl" type="Button" oncontextmenu = "SortMenueBereichPositionieren(); PageMenuesShow('SortMenueBereich'); return false" onclick="SortDB(((top.SortIndex >= 3) * -4) + Number(top.SortIndex) + 1)" onfocus="this.blur()" style="background: url('Pictures/10.png') no-repeat #eee; background-position:center; height:50px; width:50px" value="">  
      </div>  
      </td>  
      </tr>  
      <tr><td></td></tr>  
      
      

      was ja schon fast die ganze Tabelle zeigt. Fehlen will hier nur die Zeile mit der Kennung, zur Beschriftung und Erkennung des gezeigten Inhaltes.

      Also würde ich mich freuen wenn es auch sow reichen würde etwas damit anfangen zu können. Und Hilfe-ratschläge kann ich kaum erwarten. Also schon jetzt vielen Dank für jede Bemühungen und ich wurde mich über Erfolge sehr freuen.

      Also schonmal Danke und mit Grüße Andreas Nagel

      1. Jetzt aber allöchen zusammen

        schade dass sich keiner mehr meldet. Ist ja schon klar das ich mich entschuldigen muss so ein Code-Chaos zu zeigen, worauf man auch mal stelleung nehmen müsste. Aber ich komme einfach nicht zum gewünschten Ziel un dachte ich schaue hier das eine oder ander Mal wieder rein bevor ich mich wieder melde.

        Aber ich würde mich wirklich sehr freuen wenn mir jemand etwas hilfreiches an Code hätte, bevor ich hier dran noch weitere 20 Stunden sitze.

        Also würde ich mich jetzt schon mal freuen und klar auch schon vielen Dank dafür und der Gruß

        Andreas Nagel

        1. Mahlzeit,

          schade dass sich keiner mehr meldet.

          Weil du es immer noch nicht online gestellt hast. Mit ein wenig Recherche wärst du auf JSFiddle oder ähnliche Services gestossen und das macht dein Drängelposting nach 30(!) Minuten umso unverschämter

          --
          42
          1. Hallo,

            Drängelposting nach 30(!) Minuten

            halt, halt, sachte mit den jungen Pferden!
            Zu den 30 Minuten kommen noch ganze vier Tage. Von Drängelposting kann also keine Rede sein.

            Ansonsten stimme ich dir zu - wobei, wenn ich ganz ehrlich bin, meine Hilfsbereitschaft angesichts einer solchen Codewüste, gewürzt mit Tabellenlayout, Frames, Unmengen von Inline-Styles und Dutzenden von vermutlich unnötigen Elementen, Klassen und IDs nahe Null wäre.

            Mein vielleicht brutaler, aber ehrlicher Rat wäre in diesem Fall:
            Einreißen, wegschmeißen und sauber neu aufbauen.

            So long,
             Martin

            --
            Die letzten Worte des Hardware-Bastlers:
            Das Netzkabel lass ich wegen der Erdung lieber dran.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Jo Hallo

              ich dachte ich schreibs dann doch einfach mal hier rein. Aber früher wäre wohl besser gewesen, aber ob das überhaupt noch angenommen wird ist ja klar auch fraglich.

              Denn die Seite bietet eine schöne stylische Benutzeroberfläche mit mehreren Grafiken die ich bei nicht immer jedem Aufruf eines Datenbestands wieder erstellen wil. Denn auch dafür wird die Seite schon zu Anfang erstellt.

              Und dann passen die Daten in ein iframe und sind so toll zu scrollen. Und außenrum sitzt dann die Tabelle, in dieser Zeile 1 die Titelleiste, Zeile 2 die Menüleiste und in Zeiloe 3 sitzt das iframe und in der Spalte daneben dazu Controlbutton s.

              Und dann bietet sich das mit der Tabelle auch an wegen den Rändern die mal da und mal weg sein sollen und dann soll das Ganze auch total zentriert sitzten.

              Also soll das Ganze scheitern an der Tabelle? Ich wäre auf jeden Fall total glücklich mit dieser entwicklungsvariante, da meiner Meinung nach einiges rauszuholen ist und so auch einwandfrei funktioniert. Ich bräuchte Hilfe bei der Anordnung des Textfelde, das gerne über die Zellen herausragt oder gar ganz daneben steht.

              Also hab ich mich nochmals gemeldet und möchte mich jetzt schon bedanken.

              Gruß Andreas

              1. Om nah hoo pez nyeetz, Andreas Nagel!

                Es ist halt so, dass Tabellenlayout und Frames überholt sind. Ebenso sind inline-style-Angaben praktisch immer verzichtbar. Wenn du Hilfe möchtest, solltest es du deinen potentiellen Helfern so einfach wie möglich machen: Stelle eine Beispielseite online. Das geht zum Beispiel bei bplaced.net sehr einfach und zudem kosten- und werbefrei.

                Dann kann man nämlich mit Entwicklertools schauen, welche Eigenschaften wo und wie zum Tragen kommen.

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen grau und grausam.

          2. Hallo M.,

            Weil du es immer noch nicht online gestellt hast. Mit ein wenig Recherche wärst du auf JSFiddle oder ähnliche Services gestossen ...

            finde ich auch..

            ... und das macht dein Drängelposting nach 30(!) Minuten umso unverschämter

            na ja, nach 4(!) Tagen und 30 Minuten von "Drängelposting" zu reden, finde ich schon etwas übertrieben.

            Gruß, Jürgen

            1. Mahlzeit,

              na ja, nach 4(!) Tagen und 30 Minuten von "Drängelposting" zu reden, finde ich schon etwas übertrieben.

              Sorry, das war mein Fehler. Diese Aussage nehme ich komplett zurück.
              Danke, dass ihrm ich drauf aufmerksam gemacht habt :) In diesem Fall ist der OP völlig unschuldig.

              --
              42