I wrote this HTML/JavaScript code but I can't center the table in the page. I've tried both with align=center and with margin in style. But nothing seems to work. Even putting the table into a div.
Edit: Better description: I'm trying to take four picture from IP cameras (small pictures) and make them appear into a fullscreen browser centered and maximized on the page.
This is the code:
<body style="margin:0; background-color:black;">
<table style="height:100%; background-color:black; position:fixed;">
<tr>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera1"/>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera2"/>
</tr>
<tr>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera3"/>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera4"/>
</tr>
</table>
</body>
<script language="JavaScript">
//<!--
function reloadImage()
{
var now = new Date();
var Camera = new Array()
var Camera1 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=0&animation=0&name=aa&password=11&time=1346851800&pic_size=2'
var Camera2 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=1&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851972719.719'
var Camera3 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=2&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851974247.247'
var Camera4 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=3&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851975678.678'
if (document.images)
{
var image1 = new Image;
var image2 = new Image;
var image3 = new Image;
var image4 = new Image;
image1.onload = function () { document.images.Camera1.src = image1.src; }
image2.onload = function () { document.images.Camera2.src = image2.src; }
image3.onload = function () { document.images.Camera3.src = image3.src; }
image4.onload = function () { document.images.Camera4.src = image4.src; }
image1.src = Camera1 + '?' + now.getTime();
image2.src = Camera2 + '?' + now.getTime();
image3.src = Camera3 + '?' + now.getTime();
image4.src = Camera4 + '?' + now.getTime();
}
setTimeout('reloadImage()',1000);
}
setTimeout('reloadImage()',1000);
//-->
</script>
You should learn to write HTML first. Markup for Table goes -
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>You img tag</td>
<td>You img tag</td>
</tr>
<tr>
<td>You img tag</td>
<td>You img tag</td>
</tr> <!-- And so on -->
</table>
You completely missed TD in your code
Here is the answer to your question
Edit:
When you are adding img tag in TD use width and height attributes, it will solve the resizing issue -
<img src="img/imageName.jpg" width="400" height="400" alt="" title="" />
And hey, I used the learning thing because you posted the question here so I assumed you are already working on HTML. Never mind! Why don't you try with HTML Fundamentals
This will help you understand HTML very well! :)
There is no td specified. Add td after the tr and give align="center" to the table tag".
And remove the position:fixed if it is really not necessary
Check the demo here http://jsfiddle.net/2QnE9/2/
You need to give it a fixed width and set margin-left and margin-right to auto and remove the fixed position from your table
EXAMPLE
width:500px;
margin-left:auto;
margin-right:auto;
Try this
<table align="center" style="height:100%;background-color:black; position:relative;">
<tr><td>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera1"/>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera2"/>
</td></tr>
<tr><td>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera3"/>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera4"/>
</td></tr>
</table>
See Demo
Here is the CSS:
#mytable
{
position:fixed;
left:50%;
top:50%;
//set margin-left and margin-top to get it to center.
}
Related
I want to set the width and height of td tag , which have and tag inside. So , what I want to do is , no matter whatever the image size is , but it should be taken according to the width/height of td tag.
Example:
If image size is 200 * 100 and td tag's width and height is 100*50. then it should take 100 * 50 , according to the width and height of td tag.
<tr>
<td valign="top" align="center" id="animate" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; font-size:12px;font-weight:bold;line-height: 0px;letter-spacing:1px;text-align:center;text-transform:uppercase;" width="100" height="100"><img src="http://www.hubilo.com/eventApp/ws/images/event/logo/thumb/2712_1455295221.png" width="70" height="70" ></td>
</tr>
I can't use position property for the same.
try this.
display:block;
width:100%;
height:auto;
Give <img> width: 100% and height:auto
Enter a number in the box and it will set the <td> to that dimension, the <img> will conform.
SNIPPET
$('#in1').on('input', function() {
var dim = $(this).val();
$('#animate').height(dim).width(dim);
});
img { width: 100%; height:auto}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td valign="top" align="center" id="animate" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; font-size:12px;font-weight:bold;line-height: 0px;letter-spacing:1px;text-align:center;text-transform:uppercase;" width="50" height="50">
<img src='http://www.hubilo.com/eventApp/ws/images/event/logo/thumb/2712_1455295221.png'>
</td>
</tr>
</table>
<input id='in1'>
I'm having some trouble with using an iframe. So basically I was trying to create a slideshow, with one of the slides being an embedded video, so I did this by using an iframe. Well, the slideshow functions properly, and the video is resized properly, but when the image slides come up, they aren't being enlarged to the size of the iframe like the video is, and they seem to have a padding of 2 or 3px around the top/left sides. I've attached the HTML and CSS code, and took some pictures to illustrate what I'm trying to say and if anyone see's the problem, I'd really appreciate some help. Thanks so much!
CSS CODE
#imageDiv {
border: 5px solid black;
width:500px;
}
#slideshowImg {
width:500px;
height:300px;
margin:0px;
border-spacing:20px;
}
#mediaMenu table {
font-size:14px;
border:0;
margin-top:5px;
border-spacing:0;
}
table {
margin:0;
padding:0;
border-spacing:0
}
#mediaMenu td {
margin:0px;
padding:0px;
width:120px;
height:20px;
color:#CBE8E8;
}
.subMenu img {
width:100%;
height:100px;
}
.subTitle {
font-family:chalkboard, sans-serif;
background-color:#000;
font-size:12px;
}
.subTitle a {
color:#CBE8E8;
text-decoration:none;
}
HTML CODE
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> ******* </title>
<link rel="stylesheet" type="text/css" href="" />
<script language="javascript" type="text/javascript">
slideshowImages = new Array(5);
slideshowImages[0] = new Image();
slideshowImages[0].src = 'images/tebowFinal.jpg';
slideshowImages[1] = new Image();
slideshowImages[1].src = 'images/nash.jpg';
slideshowImages[2] = new Image();
slideshowImages[2].src = 'images/kobe.jpg';
slideshowImages[3] = new Image();
slideshowImages[3].src = 'http://www.youtube.com/embed/9UlmwcEIWUw';
slideshowImages[4] = new Image();
slideshowImages[4].src = 'images/tbrown.jpg';
index=0;
function slideShow(source)
{
document.getElementById('slideshowImg').src = slideshowImages[source].src;
clearInterval(newPic);
index=source;
imageChange();
if (source=="3")
{
onclick=clearInterval(newPic);
}
}
function slideshowForward()
{
// increase the value of index by one or reset the value to 0 if all the slides have been cycled
index++;
if(index >= 5)
{
index=0;
}
// set the image name to the slide show image
document.getElementById('slideshowImg').src = slideshowImages[index].src;
}
function imageChange() {
newPic=setInterval(function(){slideshowForward() },5000);
}
</script>
<link href="slideshow.css" rel="stylesheet" type="text/css" />
</head>
<body onload="imageChange()">
<div id="imageDiv">
<table id="mediaMenu">
<tr>
<td id="imageRow" colspan="5" >
<a href="#" onclick="clearInterval(newPic)">
<iframe id="slideshowImg" src="images/tebowFinalFinal.jpg" frameborder="0" scrolling="no" ></iframe>
</a>
</td>
</tr>
<tr>
<td class="subMenu">
<a href="#" onclick="slideShow(0)">
<table>
<tr> <td class="subTitle"> Tebow Talks </td></tr>
<tr><td><img src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(1)">
<table>
<tr> <td class="subTitle">Nash attack </td></tr>
<tr><td><img src="images/nash.jpg" alt="Steve Nash"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(2)">
<table>
<tr> <td class="subTitle">Kobe Who? </td></tr>
<tr><td><img src="images/kobe.jpg" alt="Kobe Bryant"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(3)">
<table>
<tr> <td class="subTitle">Not So Giant </td></tr>
<tr><td><img src="images/giants.jpg" alt="San Francisco Giants"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(4)">
<table>
<tr> <td class="subTitle">Expensive mistake </td></tr>
<tr><td><img src="images/tbrown.jpg" alt="Terrell Brown"></img></td></tr>
</table>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn't work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I'm note sure.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td>Home</td>
<td>About</td>
<td>Workouts</td>
<td>Trainers</td>
<td>Contact</td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
This is my stylesheet
* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
Invalid mark-up without DOCTYPE declaration. Check your code by copy/paste in w3c validator check the errors.
Every table row has to have the same number of columns. If you don't, you need a colspan attribute to make up for it.
Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it's best to fix them. Try changing:
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
To
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<tr id = "header">
<td colspan="7">
<img src =images/header_logo2.png />
</td>
</tr>
And also add the same colspan on the last row:
<tr class = "content" width="100%">
<td colspan=7><img width="100%" src="images/content.png" /></td>
</tr>
More generally, using tables for layout like this is not good practice nowadays. If you search google for "css layouts vs tables" you can find out a lot more about it.
Use a validator. Your HTML is invalid and at least one of your errors causes significant differences in how different browsers error recover from it.
Some will move the <div> that is a child element of the <table> so it is outside the table (because it isn't allowed there).
You don't have any tabular data in there, so get rid of all the table markup and use something more appropriate (e.g. a list for your list of links and so on).
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
I need is to show the content of a web page in the middle of the screen, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the middle of screen.
I'm guessing you want to center the box both vertically and horizontally, regardless of browser window size. Since you have a fixed width and height for the box, this should work:
Markup:
<div></div>
CSS:
div {
height: 200px;
width: 400px;
background: black;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
The div should remain in the center of the screen even if you resize the browser. Just replace the margin-top and margin-left with half of the height and width of your table.
Edit: Credit goes to CSS-Tricks, where I got the original idea.
Solution for the code you posted:
.center{
position:absolute;
width:780px;
height:650px;
left:50%;
top:50%;
margin-left:-390px;
margin-top:-325px;
}
<table class="center" width="780" border="0" align="center" cellspacing="2" bordercolor="#000000" bgcolor="#FFCC66">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
<td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
<td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
</tr>
</table>
</td>
</tr>
</table>
--
How this works?
Example: http://jsfiddle.net/953Yj/
<div class="center">
Lorem ipsum
</div>
.center{
position:absolute;
height: X px;
width: Y px;
left:50%;
top:50%;
margin-top:- X/2 px;
margin-left:- Y/2 px;
}
X would your your height.
Y would be your width.
To position the div vertically and horizontally, divide X and Y by 2.
If you want to center the content horizontally and vertically, but don't know in prior how high your page will be, you have to you use JavaScript.
HTML:
<body>
<div id="content">...</div>
</body>
CSS:
#content {
max-width: 1000px;
margin: auto;
left: 1%;
right: 1%;
position: absolute;
}
JavaScript (using jQuery):
$(function() {
$(window).on('resize', function resize() {
$(window).off('resize', resize);
setTimeout(function () {
var content = $('#content');
var top = (window.innerHeight - content.height()) / 2;
content.css('top', Math.max(0, top) + 'px');
$(window).on('resize', resize);
}, 50);
}).resize();
});
Demo: http://jsfiddle.net/nBzcb/
HTML
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div id="main_body">
some text
</div>
</body>
</html>
CSS
body
{
width: 100%;
Height: 100%;
}
#main_body
{
background: #ff3333;
width: 200px;
position: absolute;
}
JS ( jQuery )
$(function(){
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var main = $("#main_body");
$("#main_body").css({ top: ((windowHeight / 2) - (main.height() / 2)) + "px",
left:((windowWidth / 2) - (main.width() / 2)) + "px" });
});
See example here
Here is the jsfiddle of the below code. http://jsfiddle.net/ux4DD/. What I want is the name Harry Pham to be in one line, so I make the width very small and do white-space:nowrap. It work on Firefox, but not IE. Help please
<table cellpadding="0" cellspacing="0" style="width: 450px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:20px;border-top:1px solid gray;white-space: nowrap;"><span class="linkColor">Harry Pham</span>
</td>
<td style="height:15px;background:url('images/line.png') no-repeat;width:28px;" width="35px"></td>
<td style="border-bottom:1px solid gray;" width="auto"></td>
</tr>
</table>
</td>
</tr>
</table>
For IE 6 and 7 you need to wrap your text with a <span> tag and give it a white-space property. Since you already have a <span> tag wrapped around your text and you have a class for it, just add the white-space property to your <span> class .linkColor.
.linkColor{
white-space:nowrap;
}
Check working example at http://jsfiddle.net/ux4DD/1/
Hope this will be helpful:
var buttons = document.getElementsByTagName('button');
for(var j=0; j < buttons.length; j++) {
var button = buttons[j];
var textNode = button;
while(textNode.children[0]) {
textNode = textNode.children[0];
}
var text, words, numSplits;
var spacing = 0;
while(button.scrollWidth !== 0 && button.clientWidth !== 0 &&
button.scrollWidth > button.clientWidth) {
if(!spacing) {
text = textNode.innerHTML;
words = text.split(' ');
numSplits = Math.ceil(button.scrollWidth / button.clientWidth);
spacing = Math.round((words.length)/numSplits);
}
for(var i = spacing; i < words.length; i+=spacing+1) {
words.splice(i , 0, '<br />');
}
textNode.innerHTML = words.join(' ');
spacing--;
words = text.split(' ');
}
}
Ref: Word wrapping for button with specified width in ie7?