Выравнивание элементов с помощью CSS

Question

Итак, в основном то, что я пытаюсь сделать, это выровнять и поместить мои элементы с помощью CSS в нужные места, но я немного смущен тем, что на самом деле делать.

Итак, вот демонстрация того, что у меня есть.

http://codeeplus.net/skel/demo.php

То, что я пытаюсь сделать это позиционируется как: http://gyazo.com/366945489995806575c8bb8a0dc6b91d.png

К сожалению о том, что его плохой эскиз, но его поздно, и я просто пытаюсь дать вам лучшее понимание :)

Я могу разместить здесь код, но вы можете использовать инструменты для создания хрома или просмотреть исходный код, чтобы проверить, если вам нужно.

Если вам нужна другая информация и код, просто дайте мне знать! :)

CSS:

#webcam2 { 
     float:left; 
    } 
    #webcam { 
     float:left; 
    } 
    #chatWindow { 
     width:320px; 
     height:75px; 
     overflow-y:scroll; 
     overflow-x:auto; 
     border:1px solid grey; 
     font-size:11px; 
     padding:5px; 
     background-color:white; 
    } 
    #volumeMeter { 
     background-image:url('ledsbg.png'); 
     width:19px; 
     height:133px; 
     padding-top:5px; 
    } 
    #volumeMeter img { 
     padding-left:4px; 
     padding-top:1px; 
     display:block; 
    } 
    .ui-slider { 
     background:none; 
     background-image:url('trackslider.png'); 
     border:0;height:107px; 
     margin-top:16px; 
    } 
    .ui-slider .ui-slider-handle { 
     width:14px; 
     height:32px; 
     margin-left:7px; 
     margin-bottom:-16px; 
     background:url(volumeslider.png) no-repeat; 
    } 
    #volumePanel { 
     -moz-border-radius: 0px 5px 5px 0px; 
     border-radius: 0px 5px 5px 0px; 
     background-color:#4B4B4B; 
     width:55px; 
     height:160px; 
     -moz-box-shadow: 0px 3px 3px #333333; 
     -webkit-box-shadow: 0px 3px 3px #333333; 
     shadow: 0px 3px 3px #333333; 
    } 
    #setupPanel { 
     width:325px; 
     height:30px; 
    } 

HTML:

<div id="parenntContainer" style="position: absolute;"> 
    <div id="leftSide" style="position: relative; top: 0px; left: 0px;"> 
     <div id="webcam2"> 
     </div> 
     <div id="setupPanel"> 
      <img src="webcamlogo.png" style="vertical-align:text-top"/> 
      <select id="cameraNames" size="1" onChange="changeCamera()" style="width:145px;font-size:10px;height:25px;"> 
      </select> 
      <img src="miclogo.png" style="vertical-align:text-top"/> 
      <select id="microphoneNames" size="1" onChange="changeMicrophone()" style="width:128px;font-size:10px;height:25px;"> 
      </select> 
     </div> 
     <div id="chatWindow"></div> 
     <input type="text" id="message" style="width:635px;"> 
    </div> 
    <div id="rightSide" style="position: relative; top: 25px; left: 100px;"> 
     <div id="webcam"> 
     </div> 
     <div id="volumePanel" style="float:left;position:relative;top:10px;"> 
      <div id="volumeMeter" style="position:absolute;top:10px;left:7px;float:left;"> 
      </div> 
      <div id="slider" style="position:absolute;top:10px;left:30px;"> 
      </div> 
     </div> 
     <br clear="both"/> 
    </div> 
</div> 

Остальное сделано с JQuery :)

JQuery:

$(document).ready(function() { 
     $("#webcam2").scriptcam({ 
      showMicrophoneErrors:false, 
      onError:onError, 
      cornerRadius:20, 
      cornerColor:'e3e5e2', 
      onWebcamReady:onWebcamReady, 
      onPictureAsBase64:base64_tofield_and_image 
     }); 
     $("#webcam").scriptcam({ 
      chatWindow:'chatWindow', 
      onError:onError, 
      zoom:.5, 
      rotate:-5, 
      zoomChat:1.8, 
      canvasHeight:430, 
      cornerRadius:0, 
      canvasWidth:576, 
      posX:30, 
      posY:280, 
      promptWillShow:promptWillShow, 
      showMicrophoneErrors:false, 
      onWebcamReady:onWebcamReady, 
      connected:chatStarted, 
      setVolume:setVolume, 
      timeLeft:timeLeft, 

      loginName:'username256684', 

      chatRoom:'demochatroom' 
     }); 
     function base64_tofield() { 
      $('#formfield').val($.scriptcam.getFrameAsBase64()); 
     }; 
     function base64_toimage() { 
      $('#image').attr("src","data:image/png;base64,"+$.scriptcam.getFrameAsBase64()); 
     }; 
     function base64_tofield_and_image(b64) { 
      $('#formfield').val(b64); 
      $('#image').attr("src","data:image/png;base64,"+b64); 
     };   
     setVolume(0); 
     $("#slider").slider({ animate: true, min: 0, max: 100 , value:50, orientation: 'vertical', disabled:true}); 
     $("#slider").bind("slidechange", function(event, ui) { 
      $.scriptcam.changeVolume($("#slider").slider("option", "value")); 
     }); 
     $("#message").keypress(function(event) { 
      if (event.which == 13) { 
       event.preventDefault(); 
       $.scriptcam.sendMessage($('#message').val()); 
       $('#message').val(''); 
      } 
     }); 
    }); 
    function closeCamera() { 
     $("#slider").slider("option","disabled", true); 
     $.scriptcam.closeCamera(); 
    } 
    function onError(errorId,errorMsg) { 
     alert(errorMsg); 
    } 
    function chatStarted() { 
     $("#slider").slider("option", "disabled", false); 
    } 
    function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) { 
     $("#slider").slider("option", "value", volume); 
     $.each(cameraNames, function(index, text) { 
      $('#cameraNames').append($('<option></option>').val(index).html(text)) 
     }); 
     $('#cameraNames').val(camera); 
     $.each(microphoneNames, function(index, text) { 
      $('#microphoneNames').append($('<option></option>').val(index).html(text)) 
     }); 
     $('#microphoneNames').val(microphone); 
    } 
    function promptWillShow() { 
     alert('A security dialog will be shown. Please click on ALLOW and wait for a second chat partner to arrive.'); 
    } 
    function setVolume(value) { 
     value=parseInt(32 * value/100) + 1; 
     for (var i=1; i < value; i++) { 
      $('#LedBar' + i).css('visibility','visible'); 
     } 
     for (i=value; i < 33; i++) { 
      $('#LedBar' + i).css('visibility','hidden'); 
     } 
    } 
    function timeLeft(value) { 
     $('#timeLeft').html(value); 
    } 
    function changeCamera() { 
     $.scriptcam.changeCamera($('#cameraNames').val()); 
    } 
    function changeMicrophone() { 
     $.scriptcam.changeMicrophone($('#microphoneNames').val()); 
    } 
}); 

Answer 1

Прежде чем попасть в стиль - Я бы предложил функцию i nserts html-теги для ваших изображений динамически, это может действительно очистить вашу страницу html. Что-то хлопнул вместе было бы так:

function insertLedBar() { 
    for (var x = 32; x > 20; x--) { 
     $("#volumeMeter").append('<img id="LedBar" + x + " src=ledred.png">'); 
    } 
    for (var x=20; x > 0; x--) { 
     $("#volumeMeter").append('<img id="LedBar" + x + " src=ledgreen.png">'); 
    } 
} 

Для укладки и размещения, я бы смотреть на создание контейнера Div, и используя позицию абсолютного и относительного. Затем вы можете использовать верхнюю и левую позиции, чтобы расположить каждый div точно там, где вы хотите, в родительском контейнере div. Существуют и другие варианты, которые могут быть более динамичными, в том числе float и display: элементы таблицы, но с точки зрения размера и размещения вашего проекта будет довольно статичным.

Например:

<div id="parenntContainer" style="position: relative;"> 
    <div id="leftSide" style="position: absolute; top: 0px; left: 0px;"></div> 
    <div id="rightSide" style="position: absolute; top: 25px; left: 100px;"></div> 
</div> 

Это поставило бы LeftSide Div расположен в левом верхнем углу родительского DIV (вверху: 0px; слева: 0px;), где RightSide DIV будет справа и вниз родительского div (верх: 25px; слева: 100px;). Затем вы можете просто сохранить свои размеры/цвета/контент так же, как и у вас, и просто поместить их там, где вы хотите, используя стили top/left.

Счастливое кодирование!