Aligning Items with CSS

Question

So, basically what I'm trying to do is align and place my items using CSS into the right places but I'm a little confused on what to actually do.

So here is a demo of what I have currently.

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

What I'm trying to make it positioned like: http://gyazo.com/366945489995806575c8bb8a0dc6b91d.png

Sorry about the fact that its a bad sketch, but its late and I'm just trying to give you a better understanding :)

I can put some code here but you can use chrome developer tools or view source code to checkout more if you need to.

If you need any other information and code just let me know! :)

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>

The rest is done with 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

Before getting into styling - I'd suggest a function that inserts the html tags for your images dynamically, it could really clean up your html page. Something slapped together would be like this:

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">');
    }
}

For the styling and placement, I would look at creating container Div's, and using position absolute and relative. Then you can use top and left to position each div exactly where you want it in the parent container div. There are other options that can be more dynamic, including floats and display: table items, but from the looks of your project sizing and placement is going to be pretty static.

For example:

<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>

This would put the leftSide div positioned in the top left corner of the parent div (top: 0px; left: 0px;), where the rightSide div would be to the right and down of the parent div (top: 25px; left: 100px;). Then you can just keep your sizes/colors/content the same as you have, and just place them where you want them using the top/left styles.

Happy coding!