**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.
Related
My html and css is like this :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Data</title>
<style type="text/css">
body {
font-family: 'Arial';
font-size: 9px;
margin-bottom: 100px;
}
div.global{
width: 100%;
font-size: 12px;
}
div.left {
float: left;
width: 50%;
text-align: center;
}
div.right {
margin-left: 80%;
}
div.center {
margin-left: 35%;
width: 485px;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="global">
<div class="left">
<div style="width: 80mm; margin-left: -15px !important;">
data.... <br>
test....
</div>
<hr style="max-width: 80mm; margin-left:0; height:1px; border:none; color:#333;background-color:#333;">
</div>
<div class="right">
<div style="width: 80mm; margin-right: 0 !important">
<table>
<tr style="padding-right:35px">
<td>Lamp</td>
<td align="right">test 1</td>
</tr>
<tr>
<td>No</td>
<td align="right">test 2</td>
</tr>
<tr>
<td>Date</td>
<td align="right">test 3</td>
</tr>
</table>
</div>
<hr style="max-width: 80mm; margin-left:0 height:1px; border:none; color:#333;background-color:#333;">
</div>
</div>
<div class="center">
data 1 2 3<br>
data 4 5 6
</div>
</body>
</html>
..........................................................
I want display table(table in class=right) on the far right
I try
...............
<div style="width: 80mm; margin-right: 0 !important">
..............
But id does not work
Is there anyone who can help me?
Update
Demos is like this :
https://jsfiddle.net/skfd7215/1/
I appreciate this is an older post and I haven't tested this against the code that you have provided (so I can't guarantee it will work for your given scenario at this stage) but I was researching a solution for forcing relative elements to the right hand side via margin-right as well and found this little beauty:
.element {
margin-left: auto;
margin-right: 0;
}
Example codepen here https://codepen.io/jamie-endeavour/pen/GdrZao
Either way I hope you got sorted. It would be cool if you could share your solution since none of the above answers have been accepted!
That's not what margin-right does. margin-right just gives margin to the right hand side of the element. Try inspecting the element in chrome/firefox dev tools to see where the margin is being added.
Assuming your global class spans the width of the page, you can give global:
position: relative;
and right:
position: absolute;
right: 0;
https://www.w3schools.com/css/css_positioning.asp for more about positioning.
You can you flex to send the content right
<div style="width: 80mm; display:flex; justify-content: flex-end">
jsFiddle
I am new to HTML and still learning. I currently have a button and a search bar beside each other and not centered. I am having a problem centering both of them. I have tried several ways but it did not work. What i want is for them to be centered and still beside each other
<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
.mine>button,.mine>table{
display: inline-block;float:left;
}
</style>
</head>
<body>
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" style="text-align:center;">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
<br>
</body>
</html>
button and search bar are inline elements so just put them in a div and give the div text-align: center
<div id="mydiv">
<input type="submit" value="Update"/>
<input type="text"/>
</div>
#mydiv{
text-align: center;
}
https://jsfiddle.net/bdellinger/97xybngh/
Are this the only data on the table ? If Yes. why not put a static width for the div that wraps the table and give a CSS of margin: auto;
See my fiddle
CSS:
.mine{
width: 208px;
height: auto;
overflow: hidden;
margin: auto;
}
Hope it helps.
I have a pretty standard two-column layout, but one element in the content-column needs to deliver its content in a horizontally-scrolling area whose (visible) width fills the remainder of the page, i.e. fills the width of its containing column. I can get (almost) the effect I need by setting a fixed width on the scrolling area, but I need its width to be dynamic. Can this be done with just HTML and CSS, or do I need to manually set and update its width with JS?
Here is a fiddle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout</title>
<style type="text/css">
div.top-menu { background-color: blue; height: 100px; color: #fff }
td.side-content { background-color: green; width: 150px; }
div.scrollable-area { width: 400px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}
div.scrollable-area > div.content-block { display: inline-block; padding: 5px; border: 1px solid #000; }
</style>
</head>
<body>
<div class="top-menu">(Top menu)</div>
<div>
<table>
<tbody>
<tr>
<td class="side-content">(Side content)</td>
<td>
<h1>Title</h1>
<div class="scrollable-area">
<div class="content-block">BLAH BLAH</div>
<div class="content-block">BLAH BLAH</div>
(ETC)
<div class="content-block">BLAH BLAH</div>
<div class="content-block">BLAH BLAH</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Add these styles to your table:
table {
width: 100%;
table-layout: fixed;
}
You can then remove the width style from div.scrollable-area.
Fiddle
What I have is a table that I would like to be placed in the center of the page with two banner ads on both sides of the table, the left and right ads coming as close to the edges of the page as possible with maybe a 5px margin. I already have that in place, but I would like the table to get as close to the ads as well. What is happening is that dependent on the screen resolution, the table is either too big, thus moving the ad to the next line, or if on an 11-inch screen the table is way too small.
I have taken a screenshot of my issue and can be found here:
.
The issue is, that if you look at the ad on the right, it is far away from the table, but that changes due to screen resolution. if it was a small monitor it would either be perfect, or would be too small and push the ad to the next line.
HTML:
<div class="left-ad">[adsense stuff]</div>
<table class="tl">
<tr>
<th width="100%" colspan="3">Filename</th>
<th>Size
<img src="./images/icons/size.gif" alt="Sort" />
</th>
<th>Downloaded
<img src="./images/icons/down.png">
</th>
<th>Date Added
<img src="./images/icons/added.png">
</th>
</tr>
<div class="right-ad">[adsense stuff]</div>
CSS:
.left-ad {
float: left;
width: 160px;
min-height: 100px;
padding-left: 10px;
}
.right-ad {
float: right;
width: 160px;
min-height: 100px;
padding-right: 10px;
}
table.tl {
display: inline;
float: left;
min-height: 100px;
padding: 0 10px;
width: 71%;
}
I have also updated my fiddle.
Here is a code, you need,(copy - paste it and see result in browser.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.left-ad {
float: left;
width: 94px;
min-height: 500px;
padding-left: 10px;
border:1px solid black;
}
.right-ad {
float: right;
width: 160px;
min-height: 500px;
padding-right: 10px;
border:1px solid black;
}
table.tl {
display: inline;
float: left;
min-height: 100px;
padding: 0 10px;
width: 71%;
}
</style>
</HEAD>
<BODY>
<div class="left-ad">[adsense stuff]</div>
<table class="tl" border = "1">
<tr>
<th width="100%" colspan="3">Filename</th>
<th>Size
<img src="./images/icons/size.gif" alt="Sort" />
</th>
<th>Downloaded
<img src="./images/icons/down.png">
</th>
<th>Date Added
<img src="./images/icons/added.png">
</th>
</tr>
<div class="right-ad">[adsense stuff]</div>
</BODY>
</HTML>
One way to approach it would be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.wrap {position: relative;}
.left-ad, .right-ad {width: 160px; height: 200px; background: gray; position: absolute; top: 0;}
.left-ad {left: 10px;}
.right-ad {right: 10px;}
table {margin-left: 180px; margin-right: 180px; background: blue;}
</style>
</head>
<body>
<div class="wrap">
<div class="left-ad">[adsense stuff]</div>
<table class="tl">
<tr>
<th width="100%" colspan="3">Filename</th>
<th>Size
<img src="./images/icons/size.gif" alt="Sort" />
</th>
<th>Downloaded
<img src="./images/icons/down.png">
</th>
<th>Date Added
<img src="./images/icons/added.png">
</th>
</tr>
</table>
<div class="right-ad">[adsense stuff]</div>
</div>
</body>
</html>
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.