Schräge Slider
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anschauen
boxen
brauch
chrom
code
dank
feststelle
genauere angaben
methode
positionieren
problem
tip
total scheisse
url
-
Hallo, ich will folgendes genau so:
<html> <head> <style> .slider_box{ height: 200px; position: relative; left: 100px; top: 100px; } #h_slider{ -webkit-appearance: slider-vertical; height: 200px; width: 20px; position: relative; } #v0_slider{ -webkit-appearance: slider-horizontal; width: 200px; position: relative; left: 20px; } #angle_slider{ -webkit-transform:rotate(45deg); width: 283px; position: relative; top: -110px; left: -230px; } </style> </head> <body> <div class="slider_box"> <input type="range" id="h_slider" /><br /> <input type="range" id="v0_slider" /> <input type="range" id="angle_slider" /> </div> </body> </html>
Nur weiss ich nicht, ob das wirklich eine gute Methode ist. Und wenn ich die ganze Box verschiebe, schiebt sich alles wie gewollt mit, also eigentlich perfekt, aber die Seite wird grösser. Also habt ihr Verbesserungsvorschläge?
EDIT: Ich brauch noch Textboxen dazu, und habs abgeändert, aber bin was das angeht bei CSS völlig ratlos, wie ich das positionieren soll.
<html> <head> <style> .slider_box{ position: relative; } #h_slider{ -webkit-appearance: slider-vertical; height: 200px; width: 20px; position: relative; } #h_text{ width: 30px; position: relative; top: -100px; } #v0_slider{ -webkit-appearance: slider-horizontal; width: 200px; position: relative; top: 20px; } #v0_text{ width: 30px; position: relative; top: 20px; left: 150px; } #angle_slider{ -webkit-transform:rotate(45deg); width: 283px; position: relative; top: -120px; left: -15px; } #angle_text{ width: 30px; position: relative; top: -122px; left: -140px; } </style> </head> <body> <div class="slider_box"> <input type="text" id="h_text" /> <input id="h_slider" type="range" min="0" max="15" value="5" onchange="recalculate(); h = parseFloat(this.value);" /> <input id="v0_slider" type="range" min="0" max="40" value="20" onchange="recalculate(); v0 = parseFloat(this.value);" /> <br><input type="text" id="v0_text" /> <input id="angle_slider" type="range" min="1" max="90" value="45" onchange="recalculate(); angle = parseFloat(Angle(this.value));" /> <input type="text" id="angle_text" /> </div> </body> </html>
Beitrag zuletzt geändert: 13.5.2013 18:55:51 von c143 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
c143 schrieb:
..... aber die Seite wird grösser....
wenn du damit meinst, das der horizontale Scrollbalken sichtbar wird, dann solltes du der slider-box eine width geben.
Ansonsten musst du da nochmal genauere Angaben machen
-
pcw schrieb:
c143 schrieb:
..... aber die Seite wird grösser....
wenn du damit meinst, das der horizontale Scrollbalken sichtbar wird, dann solltes du der slider-box eine width geben.
Ansonsten musst du da nochmal genauere Angaben machen
Was ist da nicht sichtbar? O.o
EDIT: Überlesen, sry, danke für den Tipp. :)
Ich seh garalles genau so wie ichs will, das ist nicht das problem. (Funktioniert nur unter Chrom nebenbei, HTML5 Slider). Es geht rein um die Ausführung, weil ichs einfach irgendwie Positioniert hab, weil ich nicht wusste, wie ich das anstellen soll. Also eig nur Die CSS Positionierung mal anschauen, feststellen, dass sie total scheisse ist, und vll besseres vorschlagen.
Beitrag zuletzt geändert: 13.5.2013 20:29:54 von c143 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage