I’m making a page which is meant to show 4 objects at the same time. These objects will be streaming live video, and are assigned dynamically upon clicking items in the main menu. What I need is help for automatically resizing everything on the page to stretch to fit as much as possible without scrolling.
The black box is the page. The title box at the top is always the same height and the box on the left is always the same width. The green boxes however need to automatically resize to fit as much as possible and all 4 be the same size. There shall be no scroll bars anywhere, except in the main menu.
On top of that, when the content boxes resize, the objects also need to resize. I’ve seen issues in IE where an object at “100%” width doesn’t work right.
How do I structure this page to do so? I’m still fairly new to HTML and don’t know how to set it up to resize. Here’s the code that I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>View Cameras</title>
<script type="text/javascript" language="javascript">
function pageload() {
//dynamically load main menu
}
function camload(addr) {
var i = document.getElementById("selPosition").selectedIndex + 1;
var h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="100%" height="100%" id="vlc" events="True">';
h += '<param name="Src" value="'+addr+'" />';
h += '<param name="ShowDisplay" value="True" />';
h += '<param name="AutoLoop" value="False" />';
h += '<param name="AutoPlay" value="True" />';
h += '<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="100%" height="100%"';
h += ' target="' + addr + '" ></embed></OBJECT>';
document.getElementById('divContent' + i).innerHTML = h;
}
</script>
<style type="text/css">
body
{
position: relative;
float: left;
width: 100%;
height: 100%;
}
h1
{
margin: 0px;
border: 0px;
padding: 0px;
}
div.title
{
position: relative;
float: left;
width: 100%;
height: 40px;
overflow: hidden;
}
div.main
{
position: relative;
float: left;
width: 100%; height: 100%;
}
div.contentmain
{
position: relative;
float: left;
width: 1000px;
height: 100%;
}
div.contentbox
{
position: relative;
float: left;
width: 50%;
height: 100%;
}
</style>
</head>
<body onload="pageload()">
<div id="divTitle" class="title">
<h1>View Cameras</h1>
</div>
<div id="divMain" class="main">
<div style="width: 250px; height: 600px; position: relative; float: left;">
<div>
<select id="selPosition" name="selPosition">
<option>Top Left</option>
<option>Top Right</option>
<option>Bottom Left</option>
<option>Bottom Right</option>
</select>
</div>
<div>
<ul>
<li><a href="javascript:" onclick="camload('rtsp://192.168.1.1')">Item l 1</a></li>
<li><a href="javascript:" onclick="camload('rtsp://192.168.1.2')">Item 2</a></li>
</ul>
</div>
</div>
<div class="contentmain">
<div style="position: relative; float: left; width: 100%; height: 50%;">
<div class="contentbox" id="divContent1">
<br />
</div>
<div class="contentbox" id="divContent2">
<br />
</div>
</div>
<div style="position: relative; float: left; width: 100%; height: 50%;">
<div class="contentbox" id="divContent3">
<br />
</div>
<div class="contentbox" id="divContent4">
<br />
</div>
</div>
</div>
</div>
</body>
</html>
UPDATE
After trying Ana’s answer of using display: table; I got it to show better, but it’s still now filling in all the space. The page also depends on the main div being 800 px in height, and I need this to be 100% – which I can’t figure out how to do because of the title div, and same problem with the width due to the main menu. So how do I A) make sure the page stretches properly with no scroll bars, and B) how to fill in each box with their content?
[PS – there will be an image not found in this new code, and it’s now 3×3 instead of 2×2]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>View Cameras</title>
<script type="text/javascript" language="javascript">
var selIndex = 0;
function selBox(index) {
document.getElementById('b' + selIndex).style.backgroundColor = "White";
selIndex = index;
document.getElementById('b' + selIndex).style.backgroundColor = "Blue";
}
function pageload() {
selBox(0);
camload('');
selBox(1);
camload('');
selBox(2);
camload('');
selBox(3);
camload('');
selBox(4);
camload('');
selBox(5);
camload('');
selBox(6);
camload('');
selBox(7);
camload('');
selBox(8);
camload('');
selBox(0);
}
function camload(addr) {
var h = '';
if (addr == '') {
h = '<div style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">';
h += ' <img src="Cam.jpg" alt="No Camera Selected"';
h += '</div>';
} else {
h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" id="player'+selIndex+'" events="True">';
h += '<param name="Src" value="' + addr + '" />';
h += '<param name="ShowDisplay" value="True" />';
h += '<param name="AutoLoop" value="False" />';
h += '<param name="AutoPlay" value="True" />';
h += '<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no"';
h += ' target="' + addr + '" ></embed></OBJECT>';
}
document.getElementById('divContent' + selIndex).innerHTML = h;
}
</script>
<style type="text/css">
body
{
position: absolute;
padding: 10px;
width: 100%;
height: 100%;
}
h1
{
margin: 0px;
border: 0px;
padding: 0px;
}
h3
{
margin: 0px;
border: 0px;
padding: 0px;
font-size: 14px;
font-weight: bold;
}
div.title
{
height: 40px;
overflow: hidden;
}
div.main
{
position: relative;
height: 800px;
}
div.contentmain
{
height: 100%;
overflow: hidden;
position: relative;
}
div.side
{
width: 250px;
height: 100%;
float: left;
background: lightgrey;
}
.matrix
{
display: table;
width: 100%;
height: 100%;
}
.row
{
display: table-row;
width: 100%;
height: 33%;
}
div.contentbox
{
display: table-cell;
width: 33%;
height: 33%;
}
table.selecttable
{
width: 200px;
height: 100%;
}
td.selecttable
{
text-align: center;
cursor: pointer;
}
</style>
</head>
<body onload="pageload()">
<div id="divTitle" class="title">
<h1>View Cameras</h1>
</div>
<div id="divMain" class="main">
<div class="side">
<h3>1) Click box to select view:</h3>
<div style="position: relative; float: left; width: 100%;">
<table class="selecttable" border="1px">
<tr>
<td class="selecttable" id="b0" onclick="selBox(0);">0<br /></td>
<td class="selecttable" id="b1" onclick="selBox(1);">1<br /></td>
<td class="selecttable" id="b2" onclick="selBox(2);">2<br /></td>
</tr>
<tr>
<td class="selecttable" id="b3" onclick="selBox(3);">3<br /></td>
<td class="selecttable" id="b4" onclick="selBox(4);">4<br /></td>
<td class="selecttable" id="b5" onclick="selBox(5);">5<br /></td>
</tr>
<tr>
<td class="selecttable" id="b6" onclick="selBox(6);">6<br /></td>
<td class="selecttable" id="b7" onclick="selBox(7);">7<br /></td>
<td class="selecttable" id="b8" onclick="selBox(8);">8<br /></td>
</tr>
</table>
</div>
<h3>2) Select cam to show in selected box:</h3>
<div style="position: relative; float: left; width: 100%;">
<ul>
<li><a href="javascript:" onclick="camload('')">[ NONE ]</a></li>
<li><a href="javascript:" onclick="camload('rtsp://192.168.1.2')">Item 1</a></li>
<li><a href="javascript:" onclick="camload('rtsp://192.168.1.2')">Item 2</a></li>
</ul>
</div>
</div>
<div class="contentmain">
<div class="matrix">
<div class="row">
<div class="contentbox" id="divContent0"></div>
<div class="contentbox" id="divContent1"></div>
<div class="contentbox" id="divContent2"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent3"></div>
<div class="contentbox" id="divContent4"></div>
<div class="contentbox" id="divContent5"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent6"></div>
<div class="contentbox" id="divContent7"></div>
<div class="contentbox" id="divContent8"></div>
</div>
</div>
</div>
</div>
</body>
</html>
This is how it is looking now, and I drew lines where it needs to move…
Use
position: absolute;on the green boxes and put them directly into contentmain. And then position them like this:Also, don’t use
float:left;on objects that havewidth: 100%;. Even better, don’t even setwidth:100%;on block elements – block elements naturally expand to fill their parent horizontally. Don’t setposition: relativeon everything. Leave them with the default (position: static) and only setposition: relativewhen you need it. Like on the parent of some elements that you want to have absolutely positioned – you might want to read this http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/Or another version: using
display: table;– demo http://dabblet.com/gist/2815688