please can some brilliant person help me with this page layout or tell me if it is possible?
Trying to embed some flash content which resizes with the browser but has a 400px margin on the left and a 200px margin at the bottom. Have managed to get the margin on the left but cannot get the bottom margin to stay within the browser.
My div looks like this:
<div style="height:100%;margin-left:400px;">
<div id="flashcontent"></div>
</div>
The swf is embedded with swfobject into the flashcontent div dynamically, Any help with this would be greatly appreciated.
Mike
If you can afford not to support IE6, I guess you could work with position: fixed.
It's not very elegant but from the sound of it (you don't seem to have any other layout considerations to take care of on this page), it might do.
<div style="position: fixed; left: 400px; top: 0px; right: 0px; bottom: 200px;">
<div id="flashcontent"></div>
</div>
I can't test this right now, but the flashcontent div should now be able to resize according to the outlying div.
<!-- This comment makes IE render in quirks mode.. We want IE in quirks mode -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
.flash-container {
height:100%;
background-color: #f00;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0 0 200px 400px;
}
.flash {
background-color: #fff;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="flash-container">
<div class="flash">
...Replace this Div with Flash
</div>
</div>
</body>
</html>
Pekkas answer is pretty good, I didn't consider the option of setting all edges. But I also made this table proposal, which should work in just about all browsers since the dawn of time.
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<body style="padding:0;margin:0;height:100%;">
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:400px;">1</td>
<td style="background-color:red;">2</td>
</tr>
<tr style="height:200px;">
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Related
I am using Chrome 81, latest.
I am including a <video> inside a <div> container which is set to flex-grow: 1. The idea is there is a header, and the bottom of the page fills to be the video, which will be contained the best possible. The strange problem is that when the window shrinks vertically and when the full picture size fits the window a scrollbar appears and grows until the size of the header is contained by the scrollbar. Once the header is contained in the scrollbar, the video also begins to shrink. For example:
I originally thought this was a Vuetify issue and asked this question at How to allow flex in Vuetify to exclude a header when vertically shrinking a video. Since then I have narrowed it down to pure HTML -- and in fact, to the the DOCTYPE tag. If I remove <!DOCTYPE html> the scrollbar behaves exactly as I want. If I add DOCTYPE back the bug reappears.
Here is the HTML:
<!DOCTYPE html>
<html>
<body style="margin: 0">
<div style="display: flex; flex-direction: column; height: 100vh; max-height: 100vh">
<div style="background-color: red">
<div style="height: 100px"></div>
</div>
<div style="position: relative; flex-grow: 1; margin: 0 auto; width: 100%; height: 100%">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" style="width: 100%; height: 100%; background-color: black" controls></video>
</div>
</div>
</body>
</html>
I am not really able to control the DOCTYPE tag on JSFiddle etc.
Does anybody know how I can get the behavior that I want?
In the case somebody else runs into this problem in the future, the only way I have been able to get the <video> tag to size the way I want is by using a <table> for the cells to vertically size. The video tag goes right along with it (see code below). It feels like flex-grow should work, but I can't seem to get it to work with <video>. If you can demonstrate how to get it to work, please do. Thanks!
<!DOCTYPE html>
<html>
<body style="margin: 0">
<table style="height: 100vh; min-height: 100vh; max-height: 100vh; width: 100%; border-spacing: 0">
<tr style="height: 100px; background-color: red">
<td style="padding: 0"></td>
</tr>
<tr>
<td style="padding: 0">
<div style="position: relative; height: 100%">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" style="position: absolute; width: 100%; height: 100%; background-color: black" controls></video>
</div>
</td>
</tr>
</table>
</body>
</html>
I am trying to get the table "innerTable" to fill all remaining space inside another table. The browser in question is IE8 (no compatibility mode, IE8 browser mode, Doc mode IE8 Standards). The table won't scale to the containing TD. I tried to enclose the table in DIV on various depths (TD, TR, ..), but it did not help.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #full {
height: 100%;
}
.myTable {
height: 100%;
table-layout: fixed;
width: 300px;
}
.fit {
height: 1px;
}
td {
border: 1px solid gray;
padding: 5px 10px 5px 10px;
}
</style>
</head>
<body>
<table class="myTable">
<tr class="fit"><td><h1> hello </h1></td></tr>
<tr style="height: 100%;">
<td id="problem">
<table id="innerTable" style="height: 100%; white-space: nowrap;">
<tr style="height: 100%;">
<td style="height: 100%;">
Hello World!!!
</td>
</tr>
</table>
</td>
</tr>
<tr class="fit"><td><h2> world </h2></td></tr>
</table>
</body>
</html>
If I style the td#problem to height: 100%, innerTable fits the remaining space, but the td#problem scales to something 'big', something larger then html block. I thought that 100% for TD's height should refer to containing block (TR in this case, which I tried with-and-without height:100%), but it does not seem so.
BTW. design works in other browsers, it is probably just IE8 that causes a problem
Just tested, the site works on ALL other document and browser modes in IE8, except the one I ought to use.
Try this link. i guess this is will help you.
Do these two things to fill the spaces.
table tr td{padding:0;}
<table cellpadding="0" cellspacing="0"></table>
or you an do this
table tr td{position:relative;}
<table cellpadding="0" cellspacing="0" style="position:absolute;left:0;top:0;width:100%;height:100%"></table>
HERE THE FIDDLE
Thanks in advance for any help.
What I am trying to achieve:
Firstly, if you preview that code, you will see that due to the padding of the Header, the page requires dragging a tiny bit to the right. When I remove all of the padding, this is not a problem. With the padding, it is. I have tried making all padding 5px and the right padding 0px, but this did not solve the issue.
Secondly, with the Banner, I am trying to make it center with the table row, rather than with the remaining space in the table row. Right now, because there is already an image aligned to the left of the table row, the image which I want aligned to the center of the page is aligning with ONLY the available space, so it's over to the right a bit too much.
Here is the work I have done sofar, please keep in mind, that this is only day two or working on it, so it is clearly quite messy sofar:
<!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>Blank</title>
<style type="text/css">
body{
background-repeat:no-repeat;
background-color:#045FB4;
margin-top: 0px; margin-left: 0px; margin-right: 0px;
}
A:link {color: #808080;}
A:visited {color: #808080;}
A:hover {color: #990000;}
#formwrap {
font: 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
width: 800px;
height: 600px;
border-radius:15px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
margin-right: auto;
margin-left: auto;
background-color:#08298A;
opacity:0.8;
}
#header {
font:15px Georgia, "Times New Roman", Times, serif;
color:#FFF;
width:100%;
height:30px;
margin-right: auto;
margin-left: auto;
background-color:#999;
opacity: 0.6;
text-align:left;
padding-bottom:5px;
padding-left:5px;
padding-top:5px;
padding-right:0px;
line-height: 30px;
}
img:logo.png {
position: absolute;
left: 0;
}
</style>
</head>
<body>
<table align="center" width="100%" height="100%">
<div id="header" align="center"> Welcome to Blank.
</div>
<tr>
<img src="http://placehold.it/100x100" width="100px" height="100px" style="padding:10px" alt="This image cannot be displayed." align="left"/>
<div align="center" style="width:100%"> <img src="http://placehold.it/728x90" style="padding:14px" alt="This image cannot be displayed." align="center" style="clear:both" style="float:left"/>
</div>
</tr>
<br />
<tr align="center">
<td align="center" height="100%">
<img src="http://placehold.it/160x40" padding="0px"/>
<img src="http://placehold.it/160x40" padding="0px"/>
<img src="http://placehold.it/160x40" padding="0px"/>
<img src="http://placehold.it/160x40" padding="0px"/>
<img src="http://placehold.it/160x40" padding="0px"/>
</td>
</tr>
<tr align="center">
<td align="center" height="100%">
<br>
<br>
<div id="formwrap">
<br> Text test.
</div>
</td>
</tr>
</table>
</body>
</html>
Remove the "width: 100%;" from your header to fix the scrolling issue
Add "position: absolute;" to the image you have floating on the left and your title image should center itself.
This happens because boxes are, by default, set to size as content-box. This means it takes the width, and then adds on padding, adds on border.
100% means total width of the parent element in this case. Which it then adds your padding to.
You can change the box-sizing to instead of add padding and border, to subtract it from total width:
http://jsfiddle.net/7WZph/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
For the first problem remove width: 100%; from #header. The second problem is not quite clear to me. What exactly do you want to achieve?
It is vertically centered in the row.
Maybe you mean horizontally centered in the column, centered in respect to the "Text test" box?
Please elaborate.
Edit: For the centering.
Maybe you want this?
<div style="text-align: center;">
<img src="http://placehold.it/100x100" width="100px" height="100px" style="padding:10px" alt="x" />
<img src="http://placehold.it/728x90" style="padding: 14px" alt="x" />
</div>
I'm learning CSS and finding that it's not always so intuitive (welcome to webdev, I guess). :)
In an attempt to make a simple, static progress bar, I use the HTML file below:
<html>
<head></head>
<body>
<table border='1' cellspacing='0'>
<tr>
<td>Sample Cell</td>
<td>
<!-- This is meant to be a progress bar -->
<div style="background-color: #0a0; width: 20%;">
<div style="text-align: center; width: 300px;">
Text Here!
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
and I get this:
which is good, except for the fact that the width of the second column is fixed. But if I go ahead and change width: 300px to width: 100%, the text instead goes into the green box, rather than the whole table cell.
How can I "fill" the table cell with the text, without imposing a specific length restriction?
By placing your text div inside (as a child of) your colored div, you're telling HTML that you want the text to appear inside the colored div. So a width of 100% on the inner div means whatever the width of its parent div is, which you have set to 20%.
EDIT: added code
*EDIT: updated code*
<html>
<head>
<style>
#bar{
width: 100%;
position: relative;
}
#progress{
background-color: #0a0;
width: 20%;
position: absolute;
z-index: 0;
}
#progress_text{
text-align: center;
width: 100%;
position: relative;
z-index:1;
}
.progress_cell{
}
</style>
</head>
<body>
<table border='1' cellspacing='0'>
<tr>
<td>Sample Cell</td>
<td class="progress_cell">
<div id="bar">
<!-- This is meant to be a progress bar -->
<div id="progress">
</div>
<div id="progress_text">
Text Here! Text Here! But it's really long, and it's going to overflow ...
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
here's your intro to html / css. thank me when you get my bill ;). first ... tables are for tabular data. not layout second ...
#wrapper {
position:absolute;
top:10px;
left:50%;
width:900px;
height:500px;
margin:0px auto 0px -450px;
padding:0px;
background-color:#369;
}
#box_1 {
width:100%;
height:100px;
margin:0px auto;
padding:0px;
background-color:red;
}
and here's the html ...
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="box_1">
<p>stuff</p>
</div>
</div>
</body>
</html>
hope this helps get you started
If you set width to %,it will take the width of their parent element.In your case.the div takes the width of the parent element i.e td
Here's a solution (I think?)
http://jsfiddle.net/tT2HR/
Can someone tell me how I can make a table be 100% height in Mozilla browsers?
this is the html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="177" height ="100%">
<tr>
<td height="100%"> </td>
</tr>
</table>
</body>
</html>
Maybe this can give you a hint?
<head>
<style type="text/css">
html, body{
margin:0;
padding:0;
height:100%;
border:none;
}
table {
height: 100%;
background: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</body>
Sounds like you're laying your page out in a table, which you really shouldn't be doing. It's better to mark up your page properly rather than laying everything out in tables.
As the above answer shows, you use CSS to do this.
Setting the html, body height to 100% so that the contents can use its parents height:
html, body { height: 100%; }
And then setting your tables height to 100%:
table { height: 100%; }
This should result in the desired effect.
You can't: 10.5 Content height: the 'height' property