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.
Related
I want to remove the space there and make my images looks nice, but I don't know how.
There is always space between the div and table. I tried collapse but it did not work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
width: 600px;
height: 150px;
border: 1px solid black;
margin: auto;
background-image:url("images/piha1.jpg");
}
table tr td{
}
img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="div1">
<table>
<tr>
<td><img id="surfimg" src="images/piha2.jpg" alt="surf"></td>
<td><img id="picnic" src="images/piha3.jpg" alt="picnic"></td>
</tr>
</table>
</div>
</body>
</html>
Try using collapse on the table and reducing the padding from the td to zero:
table {
border-collapse: collapse;
}
td {
padding: 0;
}
Try to add border-collapse: collapse; as CSS property for table element.
table {
border-collapse: collapse;
}
Alternatively, you can experiment with following attributes
cellpadding="0" cellspacing="0" and border="0" on your table.
**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 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>
I want the pink and blue boxes to have the same height (400px), which isn't working in Opera only. The height get dragged by bottom padding, which looks like a bug to me. Could you anyone help?
Update 1 - Just checked it in IE8 and it doesn't work either, so the prob is re-scope to IE + Opera.
Update 2 - padding-bottom changed to 50px to make issue clearer. The version of Opera I'm using is 11.62.
Html (watch pink and blue boxes height):
<!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>
<tr>
<td valign="top">
<div style="display: table; width: 400px; height: 100px; background-color: wheat;">
<div style="display: table-cell; background-color: Green; padding-bottom: 50px; height: 100%;">
<div style="height: 100%; background-color: pink;">Inner</div>
</div>
</div>
</td>
<td valign="top">
<div style="display: table; width: 400px; height: 100px; background-color: blue;">
</div>
</td>
</tr>
</table>
</body>
</html>
Got it fixed by applying box-sizing: border-box.
here's the class:
.bb
{
box-sizing: border-box;
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
}
<!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;
}