I need a page with a header and an iframe that show from other site.
here is what I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header2 {border-bottom:1px solid #000;height:90px;}
.content2 {height:100%}
</style>
</head>
<body>
<table>
<tr>
<td class="header2">
asdasdasdasd
</td>
</tr>
<tr>
<td class="content2">
<iframe src="http://www.w3schools.com" scrolling="auto" frameborder="1" />
</td>
</tr>
</table>
</body>
</html>
problem is that this code do not show footer complete (90 pixels is out of page because of header part).
Tables are hurting my eyes. position: absolute is seriously underrated for this. Try this layout instead:
<!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>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#header
{
position:absolute; left: 0; top: 0; right: 0; height: 90px; background: red;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 90px; background: blue; height: expression(document.body.clientHeight-90);
}
</style>
</head>
<body>
<div id="header">
Test content
</div>
<div id="content">
<iframe width="100%" height="100%" src="startdoc.html" />
</div>
</body>
</html>
Bonus points for rendering correctly all the way to IE6 and on every browser I've ever tested with minimal hacks :)
Make your header absolute positioned, so it overlays over the iframe, like so:
<table>
<tr style="position:absolute;top:5px">
<td class="header2">
asdasdasdasd
</td>
</tr>
<tr>
<td class="content2">
<iframe src="http://www.yahoo.com" scrolling="auto" frameborder="1" />
</td>
</tr>
</table>
Related
**Please help me remove the white space between my images when rendering the below on a browser - FireFox in my case**
<body>
<form id="form1" runat="server">
<div>
<table style="border:0px;margin:0px;float:left; width:864px">
<tr>
<td style="width:809px">
<table style="margin:0px; border:0px; clear: both; border-collapse: collapse; width:848px; height:120px">
<tr><td style="margin:0px; border:0px; background:url(images/qualhisttop.jpg); width:560px; height:124px; background-repeat:no-repeat;"></td></tr>
</table>
</td>
</tr>
</table>
<table style="border:0px;margin:0px; clear:both; width:864px">
<tr style="margin:0px;">
<!----------------------------------------------------------------------------------------------------->
<!-- B E G I N N A V I G A T I O N -->
<!----------------------------------------------------------------------------------------------------->
<td style="border:0px; margin:0px; vertical-align:top; float:left; width:130px; height:532px">
<img src="images/tp_collagebasedrill.jpg" style="width:130px; height:78px; border:0px;margin:0px;" alt=""/>
<img src="images/meta_swooshbottom.gif" width="109" height="140" alt="" />
</td>
</tr>
</table>
</div>
</form>
</body>
OK so i have provided an example that may help you.`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my images</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
#image-1{
float: left;
}
#image-1 img{
width: 600px;
}
#image-2{
float: left;
}
#image-2 img{
width: 600px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="image-1"><img src="lostsouls.jpg" alt=""></div>
<div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>
so if you wanted to stack them then they would be block level elements which are what divs are. Here is how to do that based on the previous example.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my stacked images</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
#image-1{
border: thin solid #003333;
height: 200px;
}
#image-1 img{
width: 600px;
height: 200px;
}
#image-2{
height: 200px;
}
#image-2 img{
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="image-1"><img src="lostsouls.jpg" alt=""></div>
<div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>
just make sure that you set the height of the image-1 and image 2 divs to the same size as the image
i provided another code example that should work for you in a previous post. Try that and see if it works. also the reason for the space in between the images is that you must set the height of the image to be the same height as the container or div that the image is inside. So if the image is 400px high then you must set the height of the div to 400px as well. I hope this helps.
I have an image in a table element and there always seems to be a margin below the image.
The minimal example below shows the problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
table {
width: 100%;
border-spacing: 0;
}
table td {
padding: 0;
border: 1px dotted;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="http://cdn.inquisitr.com/wp-content/2012/10/colonel-meow-facebook-e1349873175523.jpeg">
</td>
</tr>
</table>
</body>
</html>
Add CSS style vertical-align: bottom; to your image, will do the trick. Unless you do not need the images to be display: inline-block; then use the answer from the previous user!
You need to change your images to display as blocks. Add this to your css style...
img { display:block;}
I've the following html:
<!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></title>
</head>
<body>
<table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
<tr>
<td>
<div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;">R</div>
</td>
</tr>
</table>
</body>
</html>
I want the green boxes with R & L to be on the same line w/o using JS, how do I do that?
Just add "float:left;" to the style attribute on the box L
and add "float:right;" to the style attribute on the box R
then add valign="top" at the td tag. The parent tag of the boxes if you want it align to the top.
see code below
<!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></title>
</head>
<body>
<table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
<tr>
<td valign="top">
<div style="float:left;margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;float:right;">R</div>
</td>
</tr>
</table>
</body>
</html>
Add css style "float:left;". It will solve this.
You can use css display: inline-block. Note that this doesn't work in older browser versions.
Alternatively you can use float: left.
<div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px; float:left;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px; float:left;">R</div>
You can either add css float: left to DIV L only;
Or you can add css float: left to DIV L and float: right to DIV R.
Ultimately, it depends on what you are trying to achieve here.
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>
<!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>
<style type="text/css">
html, body, form, table, tbody, tr {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border-style: none;
}
tr#MainTitle
{
height: 70px;
}
div#test {
height: 100%;
background-color: blue;
}
/* If I remove the 100% here then the scrollbars are removed and the cell still fills the window but the div no longer fills the cell. */
td.MainMenu {
background-color: red;
height: 100%;
}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main">
<tbody>
<tr id="MainTitle">
<td>Title</td>
</tr>
<tr id="MainMenuRow">
<td valign="top" class='MainMenu' id='MainMenu'><div id="test">Test</div></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
(edit) I've tried to simplify the issue. I have a table. I want the top title row to be fixed in size and the next content row to fill the remaining screen.
As I have it set up if the content cell is height:100% Then the page is larger than the window (by the size of the title row) yet if I switch this to auto the cell is the right size for the window but the contained div does not fill the cell.
Whats going on?
tr does not accept height attribute. You need to set that on td or th element. This code should do the work.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body, form, table {height: 100%;width: 100%;margin: 0px;padding: 0px;border:0;}
tr th {height:70px;}
tr td {background-color: blue;position:relative;vertical-align:top;}
.text {position:relative;height:100%;width:100%;background:yellow;}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main" cellpadding="0" cellspacing="0">
<tr>
<th>Title</th>
</tr>
<tr>
<td><div class="text">Test</div></td>
</tr>
</table>
</form>
</body>
</html>
The problem is being caused by the default margins on the BODY element in your code. You are specifying that the BODY should take up 100% of the available space, but by default, the BODY tag will add a margin to this, causing your elements to take up slightly more than 100% of the available screen space.
You can fix this by adding the following to your BODY style:
html, body, form {
height: 100%;
margin: 0px;
}