zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Wie kann ich die Schaltflächen positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.05.2017, 18:17
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard Wie kann ich die Schaltflächen positionieren

neulich bin ich auf das folgende Beispiel aufmerksam geworden

https://codepen.io/dimsis/pen/MJLZKp

Meiner Meinung nach wäre es vor allem bei einem sehr langen Text besser, wenn die beiden Schaltflächen bzw. Buttons oberhalb des Textes angezeigt werden.
Aber wie macht man das?
Denn im html-Code sind die beiden Schaltflächen ja nicht hinterlegt.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.05.2017, 08:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Dafür sind sie im JS hinterlegt. Irgendwo müssen sie ja angegeben sein, sie können ja nicht aus dem nichts erscheinen
Im JS hast du einen Teil //play button und einen //pause button, da sieht man, dass die Elemente mit appendChild angehängt werden. Diese Zeile einfach so anpassen, dass die buttons dort eingefügt werden, wo du es wünscht.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.05.2017, 10:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Dafür sind sie im JS hinterlegt. Irgendwo müssen sie ja angegeben sein, sie können ja nicht aus dem nichts erscheinen
Im JS hast du einen Teil //play button und einen //pause button, da sieht man, dass die Elemente mit appendChild angehängt werden. Diese Zeile einfach so anpassen, dass die buttons dort eingefügt werden, wo du es wünscht.
Danke für deine Antwort.
Natürlich war mir klar, dass die Buttons in der JS hinterlegt sind, aber ich habe eben keine Ahnung, wie ich diese positionieren kann.
Wie muss ich denn die eine bestimmte Zeile anpassen? Wo kann ich denn dafür ein Beispiel finden?
Es funktioniert also nicht, dass man die Schaltflächen im html-Code Ergänzt und dass man diese dann per CSS positionieren kann?
Mit Zitat antworten
  #4 (permalink)  
Alt 31.05.2017, 12:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Sicher kannst du diese per CSS positionieren, sie werden ja per JS in den DOM-Baum eingefügt.
Wie du den Code ändern musst kann ich dir nicht sagen, da es davon abhängt, wo die Buttons dann seien sollen. $buttons ist die Variable, in der der die <buttons> gespeichert sind (ein <p> mit <button>play und <button>Pause)
Das wird am Ende des JS-Codes mit document.body.appendChild($buttons); an den body angehängt. Natürlich kannst du das frei an jeder anderen Stelle im Code anhängen. https://www.w3schools.com/jsref/met_...ppendchild.asp

Du kannst natürlich auch den Code der Buttons direkt im HTML einfügen und dann mit JS Eventhandler auf diese buttons setzen.
Mit Zitat antworten
  #5 (permalink)  
Alt 31.05.2017, 15:54
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Sicher kannst du diese per CSS positionieren, sie werden ja per JS in den DOM-Baum eingefügt.
Wie du den Code ändern musst kann ich dir nicht sagen, da es davon abhängt, wo die Buttons dann seien sollen. $buttons ist die Variable, in der der die <buttons> gespeichert sind (ein <p> mit <button>play und <button>Pause)
Das wird am Ende des JS-Codes mit document.body.appendChild($buttons); an den body angehängt. Natürlich kannst du das frei an jeder anderen Stelle im Code anhängen. https://www.w3schools.com/jsref/met_...ppendchild.asp

Du kannst natürlich auch den Code der Buttons direkt im HTML einfügen und dann mit JS Eventhandler auf diese buttons setzen.
Vielen Dank für deine Antwort!
Werde mich daran versuchen
Mit Zitat antworten
  #6 (permalink)  
Alt 02.06.2017, 15:32
Benutzerbild von DeltaLeo
Call me Roland!
neuer user
 
Registriert seit: 15.11.2007
Ort: (D) Niederrhein
Beiträge: 25
DeltaLeo befindet sich auf einem aufstrebenden Ast
Standard Genau mit CSS

Hier was man machen kann ...

Code:
button {
  min-width: 120px;
  color: black;
  padding: 4px 6px;
  background-color: orange;
  margin: 10px 10px 10px 0px;
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
}
button:hover {
  color: white;
  background-color: brown;
}
gruß Roland
__________________
Webworker
To see what you don't see!
https://www.facebook.com/rsWebdesign4u/
Mit Zitat antworten
  #7 (permalink)  
Alt 03.06.2017, 11:14
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von DeltaLeo Beitrag anzeigen
Hier was man machen kann ...

Code:
button {
  min-width: 120px;
  color: black;
  padding: 4px 6px;
  background-color: orange;
  margin: 10px 10px 10px 0px;
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
}
button:hover {
  color: white;
  background-color: brown;
}
gruß Roland

Vielen Dank Roland!
Mit Zitat antworten
  #8 (permalink)  
Alt 03.06.2017, 11:25
Benutzerbild von DeltaLeo
Call me Roland!
neuer user
 
Registriert seit: 15.11.2007
Ort: (D) Niederrhein
Beiträge: 25
DeltaLeo befindet sich auf einem aufstrebenden Ast
Daumen hoch

Zitat:
Zitat von Sabine1 Beitrag anzeigen
Vielen Dank Roland!

sehr gerne Sabine!
__________________
Webworker
To see what you don't see!
https://www.facebook.com/rsWebdesign4u/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
2 DIVS richtig positionieren Pari CSS 0 13.06.2009 21:22
Relatives Positionieren von Elementen zu beliebigen anderen Elementen im Dokument dimension CSS 1 25.07.2008 14:49
Bild absolut positionieren (bottom) ZuMe CSS 2 03.07.2008 09:14
mit Link hinterlegte Grafik in Tabellenzelle absolut positionieren... jhartlep CSS 0 01.11.2007 14:46
list-style-image vertikal positionieren? derdiedas CSS 2 05.03.2007 15:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:09 Uhr.