Frage zu HTML

[Martin M. (ats3788)]

Hallo

Ich habe da zweit Inputs und einen Button nicht besonderes, formatiere 
es mit CSS und möchte das die beiden Inputs auf der linken Seite und der 
Button rechts davon ist. Wie mache ich das am besten, hier nur der HTML 
Code

<div>
<div>
<input id="station_url" placeholder="Station URL in here ...." size="100" type="text" /><br>
<input id="station_name" placeholder="and Station Name here .... " size="100" type="text" />
</div>
<button id="BuSave" class="button" onClick="InputHandler(this.id)">Store Station</button>
</div>

[Andreas H. (andario)]

Tabelle?

also zB so:
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

[Dirk K. (merciless)]

Bitte nicht mit Tabellen formatieren!
Beide Gruppen in jeweils ein Div und
diese dann positionieren. Da gibt es viele
verschiedene Möglichkeiten.

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display

merciless

[Frank M. (ukw) (Moderator)]

Martin M. schrieb:
> und möchte das die beiden Inputs auf der linken Seite und der Button
> rechts davon ist.

<div>
<div style="display:inline;">
<input id="station_url" placeholder="Station URL in here ...." size="100" type="text" /><br>
<input id="station_name" placeholder="and Station Name here .... " size="100" type="text" />
</div>
<button id="BuSave" class="button" onClick="InputHandler(this.id)">Store Station</button>
</div>

Eigentlich musst du nur das zweite <div> ändern.

[Ben B. (Firma: Funkenflug Industries) (stromkraft)]

<br> sollte ein <br/> werden

Aber wie man das letztendlich formatiert ist Geschmackssache. Da gibts 
viel zu viele Möglichkeiten, alle haben Vor- und Nachteile. Ob nun 
reines CSS oder Tabellen mit CSS... nur absolute Positionierung würde 
ich nicht machen, damit gibts oft Probleme.

[Εrnst B. (ernst)]

Ben B. schrieb:
> <br> sollte ein <br/> werden

Nö, das war nur in der Totgeburt XHTML so.
Alle anderen HTML-Varianten, incl. das aktuelle HTML5 haben <br>

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element
https://wiki.selfhtml.org/wiki/Referenz:HTML/br

<br/> funktioniert zwar auch, aber nur weil der Parser fehlertolerant 
ist und das falsche "/" ignoriert.

Und selbst wenn man XHTML verwenden will, wäre es als "<br />" besser, 
weil der HTML-Parser im Internet Explorer eben nicht ganz fehlertolerant 
genug war um das falsche "/" ohne extra-Space zu ignorieren. Echtes 
XHTML konnte der IE sowieso nie, einer der Gründe warum es nie Erfolg 
hatte.

[Martin M. (ats3788)]

Super lieben Dank
Frank M.

Danke das haut hin.
Liebe Grüße aus Font De Sa Cala, wo das basteln auch im Sommer Spaß 
macht dank Ali Express und Co, hier auf Mallorca geht ohne Paket Dienste 
gar nichts.

[Martin M. (ats3788)]

Hallo
Leider haut das nicht ganz hin wenn der Button größer ist
siehe Anhang. Der Button soll mittig von den beiden Input Feldern sein.

[Ben B. (Firma: Funkenflug Industries) (stromkraft)]

Mit Tabelle:

<table style="width:800px;">
 <tr>
  <td style="width:70%;text-align:center;"><input type="text" id="field1" size="100" /></td>
  <td rowspan="2" style="width:30%;text-align:center;vertical-align:middle;"><input type="submit" id="button" value="Button" /></td>
 </tr>
 <tr>
  <td style="text-align:center;"><input type="text" id="field2" size="100" /></td>
 </tr>
</table>

[Dirk K. (merciless)]

Und so richtig:

<div style="width:800px; display:flex; flex-direction:row;">
  <div style="width:80%; display:flex; flex-direction:column;">
    <input type="text" id="field1" size="100" />
    <input type="text" id="field2" size="100" />
  </div>
  <div style="width:20%; display:flex; justify-content:center; align-items:center;">
    <input type="submit" id="button" value="Button" />
  </div>
</div>

merciless

[Johnny B. (johnnyb)]

Dirk K. schrieb:
> Und so richtig:

Was soll den daran besser sein? Bildest einfach mit DIV's eine Tabelle 
nach. Da kann man auch gleich direkt eine normale Tabelle nehmen.

[Frank M. (ukw) (Moderator)]

Johnny B. schrieb:
> Dirk K. schrieb:
> Und so richtig:
>
> Was soll den daran besser sein? Bildest einfach mit DIV's eine Tabelle
> nach. Da kann man auch gleich direkt eine normale Tabelle nehmen.

Da streiten sich die Geister. Manche behaupten, dass Tabellen nicht so 
performant wären, andere sagen, dass DIVs fürs Responsive-Layout per CSS 
einfach besser geeignet seien.

Einfach mal nach "html Tabelle vs DIV" googlen... gibt jede Menge 
Treffer.... und genauso viele Argumente.

P.S.
Ich perönlich bevorzuge auch Tabellen, da diese für mich wesentlich 
intuitiver als die DIVs sind. Eine Tabelle schreibt man einfach hin, 
eine DIV-Struktur muss ich immer erst ausprobieren, bis sie so 
funktioniert, wie ich das möchte. Das war auch bei diesem 
Thread-Beispiel so.

Da man CSS auch auf Tabellen anwenden kann und diese damit durchaus 
"responsive" werden und ich außerdem bisher keinen 
Geschwindigkeitsunterschied beim Rendern von DIVs und TABLEs feststellen 
konnte, verwende ich lieber Tabellen. Das ist aber wohl eher 
Geschmackssache.

[Johnny B. (johnnyb)]

Frank M. schrieb:
> Responsive-Layout

Ja wenn's responsive sein müsste und der Button bei Bedarf auf die 
nächste Zeile umgebrochen werden müsse, dann sieht die Sache natürlich 
anders aus und dann würde ich auch eher keine Tabelle verwenden. Aber 
dies war ja keine Anforderung bzw. wurde sogar verlangt, dass der Button 
rechts neben den Eingabefeldern sein muss.

[Dirk K. (merciless)]

Johnny B. schrieb:
> Dirk K. schrieb:
>> Und so richtig:
>
> Was soll den daran besser sein? Bildest einfach mit DIV's eine Tabelle
> nach. Da kann man auch gleich direkt eine normale Tabelle nehmen.
https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/Layoutkonzepte#Tabellen

Ein Elektriker verlegt die Kabel in einem Haus auch nicht mehr
so wie vor 50 Jahren, die Anforderungen an Sicherheit und
Wartbarkeit haben sich geändert. So ähnlich ist es mit dem
HTML-Design: Wenn ich das Layout responsive machen will,
brauch ich nur das CSS flexibel anlegen, und die Darstellung
kann komplett verändert werden. Die HTML-Tabelle zeigt die
Daten immer in Spalten und Zeilen an.

merciless

[Martin M. (ats3788)]

Ich poste mal wie ich es gelöst habe mit <div>
ist zwar ein anderes Projekt wie am Anfang aber
aber im Grunde passt es zu der Frage.
Danke für eure Antworten.

<!DOCTYPE html>
<html lang="en">

    <style>

    #ColorRgbA { 
       background-color: #F2F3F4;
       top: 10px;
       position: relative;


    }
    #ColorRgb {
      background-color: #F2F3F4;
      top: 10px;
        position: relative;

    }
    
    #LabelHUE {
        width: 150px; 
    display: inline-block;
    top: 10px;
        position: relative;


}
    
    #LabelRGB {
    width: 150px; 
    display: inline-block;
    top: 10px;
        position: relative;

      
  }
  
  #container {
  width: 400px;
  background-color:#a1ff21;
}
    .leftdiv 
         {
    padding: 20px;
    margin: 15px 0px 15px 15px;
    border-radius: 10px;
    float: left;
    height: 130px;
    border: solid gray;
    vertical-align: middle;
  }
  .rightdiv 
         {
    padding: 20px;
    margin: 15px 15px 15px 0px;
    border-radius: 10px;
    float: left;
    background-color: #a1ff21;
    height: 130px;
    width: 300px;
    border: solid gray;


    
    
  }
         
    #SetColor
         {
    border-radius: 10px;
    border: solid black;
    background-color: #8AB8E6;
    height: 115px;
    width: 250px;
    top: 10px;
        position: relative;
  }
         


    </style>

  <head>
    <meta charset="utf-8">
    <title></title>
     <script src="iro.js" charset="utf-8"></script>
    
  </head>
  <body>
    <div id="demoWheel"></div>
  <div id="container"  class="leftdiv">
<p>  <label id="LabelHUE">Color Value RGBa:</label>
<input id="ColorRgbA" placeholder="#Color Value (RGBa)"  type="text" /></p>
<p>  <label id="LabelRGB">Color Value RGB hex:</label>
<input id="ColorRgb" placeholder="#Color Value (RGB hex)"  type="text" /></p>
  </div>
        <div class="rightdiv"> 
     <button id="SetColor" type="button" onclick="SendColor()">Click Me!</button>
      </div>
  
  <script src="demo.js" charset="utf-8"></script>
  </body>
  </html>

[Unbekannt U. (Gast)]

Andreas H. schrieb:
> Tabelle?

Ben B. schrieb:
> Mit Tabelle:

Frank M. schrieb:
> Ich perönlich bevorzuge auch Tabellen

Johnny B. schrieb:
> normale Tabelle nehmen


HTML-Tabellen für's Layout? Im Jahr 2020? Wirklich?

Eine richtige Lösung wurde oben schon gepostet, Flexbox. Das ist 
Standard seit fast 10 Jahren. Alternativ wäre noch Grid, das ist neuer.

Wer heute für ein Layout noch mit HTML-Tabellen anfängt, sollte sich mal 
eine aktuelle Lektüre zum Web-Layout gönnen. Gibt's auch gedruckt auf 
Papier, für die Tippgeber hier die so um die 50 Jahre alt sein müssen, 
bei diesen Vorschlägen.

[Unbekannt U. (Gast)]

Achso, mein Vorschlag:

    <div style="display: flex;">
      <div style="display: flex; flex-direction: column; flex-grow: 1;">
        <input id="station_url" placeholder="Station URL in here ...." type="text" />
        <input id="station_name" placeholder="and Station Name here .... " type="text" />
      </div>
      <button id="BuSave" class="button" onClick="InputHandler(this.id)">
        Store Station
      </button>
    </div>

(Aus beiden Text-Inputs das unsägliche size-Attribut entfernt.)

[Ben B. (Firma: Funkenflug Industries) (stromkraft)]

Möchte vielleicht noch jemand einen JavaScript-Vorschlag einreichen?

[Bernd H. (geeky)]

Unbekannt U. schrieb:
> Eine richtige Lösung wurde oben schon gepostet, Flexbox. Das ist
> Standard seit fast 10 Jahren. Alternativ wäre noch Grid, das ist neuer.

Man kann nur hoffen, dass der olle IE langsam mal wirklich beerdigt 
wird.
(Gefühlt wird in der Industrie noch eher langsam auf Edge oder Firefox 
ESR migriert)
Der IE hat bei flexbox/grid natürlich ohne Ende Bugs, die einen in den 
Wahnsinn treiben können ;D

[Εrnst B. (ernst)]

Martin M. schrieb:
> <input id="ColorRgb" placeholder="#Color Value (RGB hex)"

Auf allen Browsern außer dem Internet Explorer geht's auch schöner:

https://wiki.selfhtml.org/wiki/HTML/Formulare/input/Farbw%C3%A4hler

und der IE macht aus dem type="color" stillschweigend ein type="text", 
funktioniert also auch, wenn auch dann unschön.