Ciao gente,
sono un nuovo utente, mi sto esercitando con html rifacendo esercizi e giochini che facevo al tempo con VB6.
Sto cercando di spaziare orizzontalmente 3 <div> allo stesso modo in cui ho spaziato orizzontalmente 3 <input> ma non mi riesce, in quanto i margini degli input non si sovrappongono tra loro, mentre i margini dei div invece si.
Vi allego il codice completo: è codice che si basa su jQuery UI, ma ritengo che il mi problema sia solo CSS.
Io voglio allineare perfettamente i div "sliders" agli inputs ma non mi riesce.codice HTML:<!doctype html><html lang="us"> <head> <meta charset="utf-8"> <title>Colors</title> <link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.css"> <script src="jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script> <script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script> </head> <body> <div id="container"> <div id="sliders"> <div id="red_slider"></div> <div id="green_slider"></div> <div id="blue_slider"></div> </div> <div id="inputs"> <input id="red_input"></input> <input id="green_input"></input> <input id="blue_input"></input> </div> <div id="panel"></div> </div> <style> #container { } #sliders { height:200px; float:left; width:40%; margin:0 30px 0 20px; } #sliders div { margin:38px 0 10px 0; } #sliders div .ui-slider-handle { background-color:black; border-radius:50%; width:24px; height: 24px; } #sliders div.ui-slider-horizontal { height:17px; } #inputs { height:200px; float:left; width:5%; } #inputs input { width:40px; margin:33px 0 10px 0; padding:0 1px 0 1px; position: relative; } #panel { float:left; border:1px solid; width:35%; height:200px; background-color:black; } </style> <script> $(function() { var red=0; var green=0; var blue=0; $("#red_input").val(0) $("#green_input").val(0) $("#blue_input").val(0) $("#red_slider").slider({ min: 0, max: 255, slide: function( event, ui ) { change_red_color(ui.value); $("#red_input").val(ui.value) } }); $("#green_slider").slider({ min: 0, max: 255, slide: function( event, ui ) { change_green_color(ui.value); $("#green_input").val(ui.value) } }); $("#blue_slider").slider({ min: 0, max: 255, slide: function( event, ui ) { change_blue_color(ui.value); $("#blue_input").val(ui.value) } }); $("#red_input").on('input',function(){ change_red_color(this.value); $("#red_slider").slider( "value", this.value ); }); $("#green_input").on('input',function(){ change_green_color(this.value); $("#green_slider").slider( "value", this.value ); }); $("#blue_input").on('input',function(){ change_blue_color(this.value); $("#blue_slider").slider( "value", this.value ); }); function change_red_color(value) { red = value; $("#panel").css('background-color','rgb('+red+','+green+','+blue+')'); $("#red_slider .ui-slider-handle").css('background-color','rgb('+red+',0,0)'); } function change_green_color(value) { green = value; $("#panel").css('background-color','rgb('+red+','+green+','+blue+')'); $("#green_slider .ui-slider-handle").css('background-color','rgb(0,'+green+',0)'); } function change_blue_color(value) { blue = value; $("#panel").css('background-color','rgb('+red+','+green+','+blue+')'); $("#blue_slider .ui-slider-handle").css('background-color','rgb(0,0,'+blue+')'); } }); </script> </body></html>
Riuscite a spiegarmi cosa sbaglio?
Grazie!
Rispondi quotando
