Buttons ausrichten

[Diddi]

Hallo,
Wie kann ich erreichen, dass im nachfolgenden Beispiel die beiden buttons nebeneinander stehen?
Danke Diddi

  
<div>  
<form action="...." -->.de/cgi-bin/gb.pl"  method="post">  
   <p style="height:27px;">  
   <button type="submit"> <img src="..."> </button>  
</form>  
<form action="...." -->.de/cgi-bin/gb.pl"  method="post">  
   <p style="height:27px;">  
   <button type="submit"> <img src="..."> </button>  
</form>  
</div>  

[ChrisB]

Hi,

Wie kann ich erreichen, dass im nachfolgenden Beispiel die beiden buttons nebeneinander stehen?

Einfach: Sorge dafür, dass die Formulare nebeneinander stehen.

MfG ChrisB

[Diddi]

Hi,

Einfach: Sorge dafür, dass die Formulare nebeneinander stehen.

Wenn ich das gewusst hätte, wären wohl auch die Buttons nebeneinander und ich hätte die Frage nicht gestellt.
Nachdem ich noch nicht gut bin in Html habe ich es versucht mit text-align, mit margin-left/right aber ich habe es nicht geschafft, weil die Angaben vermutlich nicht überall möglich sind/wirksam werden.

[Diddi]

... und es in einer Tabelle zu realisieren, was für mich am einfachsten wäre, ist wohl nicht gern gesehen.

[Sarah]

Naja, weis ja nicht genau was du machen willst, aber da beide buttons die gleiche Action habe kannst du's so lösen:

<div>  
<form action="...." method="post">  
   <p style="height:27px;">  
   <button type="submit"> <img src="..."> </button>  
   <button type="submit"> <img src="..."> </button>  
</form>  
</div>

Mfg
Sarah

[Diddi]

Hallo,

Naja, weis ja nicht genau was du machen willst, aber da beide buttons die gleiche Action habe kannst du's so lösen:

Die Buttons sollen verschiedene Aktionen auslösen.
Gruß
Didi

[ChrisB]

Hi,

Einfach: Sorge dafür, dass die Formulare nebeneinander stehen.
Wenn ich das gewusst hätte, wären wohl auch die Buttons nebeneinander und ich hätte die Frage nicht gestellt.

Ich kann nicht wissen, dass du deine Frage nicht so formulierst, dass sie dein eigentliches Problem beschreibt.

Nachdem ich noch nicht gut bin in Html habe ich es versucht mit text-align, mit margin-left/right aber ich habe es nicht geschafft, weil die Angaben vermutlich nicht überall möglich sind/wirksam werden.

Dir ist klar, dass FORM ein block level Element ist, und per Default auch entsprechend dargestellt wird? (Wenn nicht, mache es dir klar.)

Und darauf hast du u.a. über die CSS-Eigenschaft display Einfluss.
Also, informieren!

MfG ChrisB

[Diddi]

Hi,

Dir ist klar, dass FORM ein block level Element ist, und per Default auch entsprechend dargestellt wird? (Wenn nicht, mache es dir klar.)

Dies ist mir noch nicht klar.

Und darauf hast du u.a. über die CSS-Eigenschaft display Einfluss.

Dies weiß ich auch noch nicht.

Also, informieren!

Um mich      gezielt     zu informieren, muss ich das was Du geschrieben hast bereits wissen.
Wenn ich das nicht weiß, muss ich möglicherweise erst das komplette HTML und CSS studieren um weiter zu kommen.

[ChrisB]

Hi,

Um mich      gezielt     zu informieren, muss ich das was Du geschrieben hast bereits wissen.
Wenn ich das nicht weiß, muss ich möglicherweise erst das komplette HTML und CSS studieren um weiter zu kommen.

Natürlich musst du dich mit den Grundlagen von HTML und CSS beschäftigen, wenn du sie einsetzen willst.

MfG ChrisB

[Diddi]

Natürlich musst du dich mit den Grundlagen von HTML und CSS beschäftigen, wenn du sie einsetzen willst.

Danke für die großartige Hilfe!
Ich hätte dem Niveau des Fragenden angepasst eine etwas konkretere Hilfe gewünscht, so dass ich step by step etwas realisieren kann ("learning by doing" und nicht "learn all, then do").

[suit]

Danke für die großartige Hilfe!

Über die Grundlagen von CSS und HTML gibt es seitenweise Dokumentationen und Tutorials - es würde den Rahmen des Forums sprengen daraus zu zitieren - zudem wäre es höchst absurd.

Ich hätte dem Niveau des Fragenden angepasst eine etwas konkretere Hilfe gewünscht, so dass ich step by step etwas realisieren kann ("learning by doing" und nicht "learn all, then do").

Das erste was du in dieser "Branche" lernen musst ist es, wie du selbst an Informationen kommst - es ist keine Schande einen Fachbegriff, einen Funktionsnamen oder ähnliches nicht zu kennen - es ist aber eine Schande, dass man einen unbekannten Begriff nicht _sofort_ in einer Suchmaschine nachschlägt:

https://forum.selfhtml.org/?t=203416&m=1375304

Wenn du in einer Dokumentation etwas nicht verstehst, nicht nachvollziehen kannst oder etwas nicht funktioniert, kannst du eine Frage stellen - vorher macht das aber keinen Sinn.

[ChrisB]

Hi,

Ich hätte dem Niveau des Fragenden angepasst eine etwas konkretere Hilfe gewünscht, so dass ich step by step etwas realisieren kann

Du hast den Hinweis bekommen, dass Form ein block level Element ist.
Erster Step: Informieren, was das bedeutet - sowohl im Hinblick auf die HTML-Struktur, als auch auf die Default-Darstellung.

Dann hast du den Hinweis auf die display-Eigenschaft in CSS bekommen.
Nächster Step: Informieren, was die bewirken kann; überlegen, wie sie beim konkreten Problem von nutzen sein kann.

("learning by doing" und nicht "learn all, then do").

Das läuft allzu oft auf “you do, while I pretend to learn” hinaus.

MfG ChrisB

[Der Martin]

Hallo,

"learning by doing" und nicht "learn all, then do"

ich bevorzuge für mich eher "learn some, then do and learn some more".
Und das wünsche ich mir dann auch bei anderen.

So long,
 Martin

[suit]

Und darauf hast du u.a. über die CSS-Eigenschaft display Einfluss.

Um mich      gezielt     zu informieren, muss ich das was Du geschrieben hast bereits wissen.

Nein, du kannst die gegebenen Stichworte in der Suchmaschine deiner Wahl oder auch in der SELFHTML-Suche verwenden.

Die simple Suche nach "CSS-Eigenschaft display" führt mich in der von mir verwendeten Suchmaschine direkt auf folgende Seiten:

1. http://de.selfhtml.org/css/eigenschaften/positionierung.htm
2. http://www.css4you.de/display.html

Auf beiden Seiten wird ausreichend beschrieben, was es nun mit der display-Eigenschaft auf sich hat - besonders was in diesem Kontext "block" oder "inline" bedeutet.

[Diddi]

... Korrektur ...

<div>
<form action="...." -->.de/cgi-bin/gb.pl"  method="post">
   <p style="height:27px;">
   <button type="submit"> <img src="..."> </button>

</p>

</form>
<form action="...." -->.de/cgi-bin/gb.pl"  method="post">
   <p style="height:27px;">
   <button type="submit"> <img src="..."> </button>

</p>

</form>
</div>

> 

[Diddi]

Hallo,
mit Eurer Hilfe habe ich die buttons nebeneinander positionieren können.
Was mir noch nicht gelingt, ist die Ausrichtung des rechten Buttons am rechten Rand des div.
Vielleicht noch ein kleiner Tipp für das korrekte Attribut?
Hier das Testbeispiel:

  
<html>  
<head>  
<title>Buttons</title>  
<style type="text/css">  
<!--  
div {width:300px; border: 1px dashed black; }  
form {margin:0; border: 1px dotted red; }  
button {padding:0;  border: 1px dashed green; }  
form.gl, form.gr {display:inline-block;}  
form.gr button {margin-right:0; padding-right:0;}  
-->  
</style>  
</head>  
<body>  
  
<div>  
<form class="gl" action="http://example.com/t1.pl"  method="post">  
   <button type="submit">  
     <img src="http://example.com/t1.jpg">  
   </button>  
   <input type="hidden" name="a1">  
</form>  
<form class="gr" action="http://example.com/t2.pl"  method="post">  
   <button type="submit">  
     <img src="http://example.com/t2.jpg">  
   </button>  
   <input type="hidden" name="a2">  
</form>  
</div>  
</body>  
</html>  

Auch mit "right:0" bzw. "postion:absolute; right:0;" hat es nicht funktioniert.

[ChrisB]

Hi,

mit Eurer Hilfe habe ich die buttons nebeneinander positionieren können.
Was mir noch nicht gelingt, ist die Ausrichtung des rechten Buttons am rechten Rand des div.
Vielleicht noch ein kleiner Tipp für das korrekte Attribut?

Bspw. beide Formulare halb so breit machen, wie das Div, und dann den Formularinhalt mit text-align ausrichten.

Floating wäre eine weitere Möglichkeit (die aber auch ihre Fallstricke hat, so dass man sich zunächst in die Grundlagen einlesen sollte).

MfG ChrisB

[Diddi]

Hallo,

Bspw. beide Formulare halb so breit machen, wie das Div, und dann den Formularinhalt mit text-align ausrichten.

Auf text-align wäre ich vermutlich nie durch Überlegungen gekommen, denn ich richte ja einen Button aus und keinen Text.
Dies insbesondere weil in dem von Euch zitierten "Positionierung und Anzeige von Elementen" das text-align nicht vorkommt.

Ich habe jetzt text-align angegeben.
Damit ich keine feste Größe angeben muss (die Breite des div könnte sich ja einmal ändern), habe ich als Breite angegeben 50%. Das hat nicht funktioniert - auch nicht, nachdem ich die Rahmen entfernt habe.
Dann bin ich schrittweise herunter, bei 49.4% hat es noch nicht funktioniert aber bei der Breite von 49,3% ist es so, wie ich es mir wünschte.
Weiß man, warum man nicht 50% angeben kann - und warum max. 49.3% damit es funktioniert?
Diddi

[Didi]

Die präsentierte Lösung mit 49.3% funktioniert leider beim IE nicht, auch nicht bei noch kleineren Angaben.

[suit]

Die präsentierte Lösung mit 49.3% funktioniert leider beim IE nicht, auch nicht bei noch kleineren Angaben.

Auch Opera hat Probleme mit unrunden %-Angaben - hier solltest du auf "ganze" runden.

[ChrisB]

Hi,

Die präsentierte Lösung mit 49.3% funktioniert leider beim IE nicht, auch nicht bei noch kleineren Angaben.

Dann mache nur für das eine Formular eine Breitenangabe, und lasse das andere sich den restlichen Platz daneben „nehmen“. (D.h. kein display:inline-block, dafür eins von beiden floaten lassen.)

MfG ChrisB

[ChrisB]

P.S.:

<form class="gl" action="http://example.com/t1.pl"  method="post">

<button type="submit">
     <img src="http://example.com/t1.jpg">
   </button>
   <input type="hidden" name="a1">
</form>
<form class="gr" action="http://example.com/t2.pl"  method="post">
   <button type="submit">
     <img src="http://example.com/t2.jpg">
   </button>
   <input type="hidden" name="a2">
</form>

  
Wenn tatsächlich beide Formulare das gleiche Ziel haben, ist es aber wirklich überflüssig, zwei Formulare dafür zu benutzen.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Diddi]

Wenn tatsächlich beide Formulare das gleiche Ziel haben, ist es aber wirklich überflüssig, zwei Formulare dafür zu benutzen.

Wie kommst Du darauf? Es ist im Beispiel einmal t1.pl im andern t2.pl.

[suit]

Wenn tatsächlich beide Formulare das gleiche Ziel haben, ist es aber wirklich überflüssig, zwei Formulare dafür zu benutzen.

Wie kommst Du darauf? Es ist im Beispiel einmal t1.pl im andern t2.pl.

Es liegt aber nahe dass du hier zwei ähnliche Aktionen mit zwei Scripten abhandelst obwohl es wahrscheinlich eines auch täte welches einfach den Namen des Submitbuttons auswertet.

[Diddi]

Hallo,

Es liegt aber nahe dass du hier zwei ähnliche Aktionen mit zwei Scripten abhandelst obwohl es wahrscheinlich eines auch täte welches einfach den Namen des Submitbuttons auswertet.

Jetzt verstehe ich die Frage!
Da ich das Problem mit der Ausrichtung der Buttons einfach darstellen wollte, habe ich Wesentliches weggelassen. So werden bei den beiden Aufrufen weitere versteckte Informationen mitgegeben
    <input type="hidden" name="a"         value="a1">
     ......
Damit muss ich doch zwei Formulare erstellen, oder nicht?
Diddi

[suit]

Da ich das Problem mit der Ausrichtung der Buttons einfach darstellen wollte, habe ich Wesentliches weggelassen. So werden bei den beiden Aufrufen weitere versteckte Informationen mitgegeben
    <input type="hidden" name="a"         value="a1">
     ......
Damit muss ich doch zwei Formulare erstellen, oder nicht?
Diddi

Das kommt darauf an wo die Informationen herkommen - wenn dieselben informationen auch am Server ermittelt werden können - z.B. aufgrund einer Abfrage auf eine Datenbank - benötigt man sie nicht.

Ohne genauer Kenntnis über dein System oder die Art der Daten lässt sich das aber schwer sagen.

[Diddi]

Hallo,
jetzt habe ich gerade in Selfhtml ein Beispiel gefunden, wo dies mit einer table gemacht wird.
Damit geht es ja ganz einfach, und es funktioniert.
Diddi