I have a simple HTML table with a grid of images. But now I'd like one cell to be able to contain multiple layered images as some of them are partially transparent. Making all of the images position: absolute makes the whole table combine into one square though.
This the structure I have now; In this example, the stone images should be on the sand images that are now (wrongly) above them. (And the coin image should be on the stone image)
.field {
border: none;
border-spacing: 0px;
}
.field tr, .field td {
border: none;
padding: 0px;
vertical-align: top;
}
.field img {
display: block;
width: 32px;
height: 32px;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
<table class="field">
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
<img src="https://image.ibb.co/eFMUiT/coin.png">
</td>
</tr>
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
</tr>
</table>
This question Layering images inside a table-cell is similar but isn't quite the same and didn't get any satisfactory answers for this problem.
Clarification:
If I simply set the enclosing elements of the images to position: relative and the images to position: absolute all the images end up in the top left corner of the screen. I have a grid of many cells of which each may have multiple layered images!
The previous answer, setting position: relative; on the table cells is completely correct.
The problem, for your example, is when you set position: absolute; on an element it doesn't take up space. So with no other content, your table cells all collapse to size 0, and the images appear to stack since they are all relatively positioned to the same (0, 0) origin.
You also need to give the table cells size:
width: 32px;
height: 32px;
Full example:
.field {
border: none;
border-spacing: 0px;
}
.field tr, .field td {
border: none;
padding: 0px;
vertical-align: top;
position: relative;
width: 32px;
height: 32px;
}
.field img {
position: absolute;
display: block;
width: 32px;
height: 32px;
}
<table class="field">
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
<img src="https://image.ibb.co/eFMUiT/coin.png">
</td>
</tr>
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
</tr>
</table>
using position relative in a td element can help you to set your images in a position absolute
table td {
position:relative;
}
.absolute-img {
position: absolute;
top: 73px;
left: 50px;
}
<table>
<tr>
<td>
<img src="https://picsum.photos/200/300">
</td>
<td>
<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/200/300">
</td>
<td>
<img src="https://picsum.photos/200/300" class="absolute-img">
<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/200/300">
</td>
</tr>
</table>
By telling the browser how big elements have to be things can be put in their correct locations.
Define the height on the tr element of 32 pixels.
Define the width on the td element of 32 pixels.
We now have rows of the correct height and boxes of the correct width.
Set the td element to position: relative
Set the img element to position absolute.
It will be absolutely positioned to the td element you made relative.
Set the img element to top: 0px; bottom 0px;
.field {
border: none;
border-spacing: 0px;
}
.field tr, .field td {
border: none;
padding: 0px;
vertical-align: top;
}
.field td {
position: relative;
width: 32px;
}
.field tr {
height: 32px;
}
.field img {
display: block;
position: absolute;
top: 0px;
left: 0px;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
<table class="field">
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
<img src="https://image.ibb.co/eFMUiT/coin.png">
</td>
</tr>
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
</tr>
</table>
Since you know how big the imgs are, set their respective height and width to the td, then position absolute on the imgs to take them out of the flow, position:relative on the td so the imgs be raltive to them, and don't go outside.
.field {
border: none;
border-spacing: 0px;
}
.field tr,
.field td {
border: none;
padding: 0px;
vertical-align: top;
}
.field td {
width: 32px;
height: 32px;
position: relative;
}
.field img {
position: absolute;
display: block;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
<table class="field">
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
<img src="https://image.ibb.co/eFMUiT/coin.png">
</td>
</tr>
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
</tr>
</table>
Related
I have two tables. One for header and other for the body. I created it this way so that header will remain fixed if the body overflows.
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
.scroll-example {
display: block;
margin-right: 20px;
width: 100%;
}
td {
border: 1px solid black;
min-width: 100px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td:hover i {
display: block;
float: right;
visibility: visible;
}
i {
display: none;
visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: hidden;width: 400px;">
<table id="target" class="scroll-example" style="overflow: hidden;">
<tr>
<td class="col1">HHHHHHHHHHHHH</td>
<td class="col2">HHHHHHHHHHH</td>
<td class="col3">HHHHHHHHHHH</td>
<td class="col4">HHHHHHHHHHH</td>
<td class="col5">HHHHHHHHHHH</td>
<td class="col6">HHHHHHHHHHH</td>
<td class="col7" width="20px" style="border-color: white;"></td>
</tr>
</table>
<table id="source" class="scroll-example" style="overflow: scroll;height: 50px;">
<tr>
<td class="col1"><i class="fa fa-pencil"></i>AAAAAAAAAAA</td>
<td class="col2"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
</tr>
</table>
</div>
Now I am looking for resizing the columns dynamically. So when the user resizes the top table column it should resize the corresponding bottom cell column.
I tried td{resize: horizontal;} but it is not working and I guess that is because of td{min-width:100px;max-width:100px;}.
Is there a way to achieve the column resizing in this table?
I am a beginner with CSS and jQuery. It would be of great help if you could put an example code. Thanks you.
Sample:
I have dragged 'Account Name' column and when I release it, the column width is set.
Ive searched a lot for my own table widget. You need 2 Tables in each of them a colgroup with col´s they have to match your table column count. Ive created a fiddle i hope it´s clear enough. The two col´s of the Tables needs to be synced on your jquery resize functionality.
.head{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
.body{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
<table class="head">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>#</td>
<td>From</td>
<td>Subject</td>
</tr>
</tbody>
</table>
<table class="body">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>00001</td>
<td>Mister Exmple</td>
<td>Problems with sharing</td>
</tr>
<tr>
<td>00002</td>
<td>Mister Example 02</td>
<td>Ouh is this a subject?</td>
</tr>
<tr>
<td>00003</td>
<td>Mistr Default</td>
<td>Yo whats up</td>
</tr>
</tbody>
</table>
I have written the following code in JSFiddle.
https://jsfiddle.net/msridhar/1zvhmpjq/11/
HTML file:
<body>
<div id="headerDiv">
<img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/>
<pre id="headerPre">
Test Series
Cloud Solutions
</pre>
<hr id="headerHR">
</div>
<div id="results">
</div>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
body{
position: relative;
}
#results{
width: 100%;
height: 100%;
position: absolute;
top: 150px;
left: 300px;
overflow: auto;
}
body{
position: relative;
}
#headerDiv{
position: fixed;
top: 0;
width: 100vw;
//border-bottom: 3px solid #808080;
}
#headerHR{
width: 100%;
height: 1px;
}
#headerImg{
float: left;
margin-top: 0px;
margin-left: 0px;
}
#headerPre{
float: left;
font-family: "Arial", Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 24px;
}
Javascript:
$('#results').load('https://fiddle.jshell.net/ds2vxqbg/1/show')
The code for html file loaded in Javascript is:
<table border="1">
<tr>
<th>Product no.</th>
<th>Product name</th>
<th>Product type</th>
<th>Product Description</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>3</td>
<td>Pineapple</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>4</td>
<td>Pear</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>5</td>
<td>Plum</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
</table>
<img src="" width = "800" height = "600">
<img src="" width = "800" height = "600">
<img src="" width = "800" height = "600">
<img src="" width = "800" height = "600">
I have loaded a html page in a div tag with id results. Though that div tag was enabled to overflow auto, it is not showing entire contents when scrolled. Please point out me what is the problem.
#results cuts off by body {overflow:hidden;} because div set width and height to 100% of body, but it has additional offset.
You can try to do next:
html:
<body>
<div id="headerDiv">
<img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/>
<pre id="headerPre">
Test Series
Cloud Solutions
</pre>
<hr id="headerHR">
</div>
<div id="wrapper"> <!-- add wrapper -->
<div id="results"></div>
</div>
</body>
and css:
#wrapper {
padding-top: 150px;
padding-left: 300px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#results {
width: 100%;
height: 100%;
overflow: auto;
}
I have a header bar with left-aligned items, center items and right-aligned items. In the center, I have multiple items and a search input field. When the search field gets focus, I'm making it wider by animating the width. Right now, because the items are centered, it's animating both left and right to center the content. How can I change this so it keeps the alignment and expands the width to the right?
I'm not using Bootstrap.
I'm currently using a table for the header bar content. I'm open to changing that, but if there's a way to do it with the current design, that would be preferred.
Here's a JSFiddle...click in the search field to see what's happening: https://jsfiddle.net/L60g0j64/1/
EDIT: I've updated it with the suggested solution below. My only issue is that the red container surrounding the input should expand also.
HTML/CSS/JS Snippet
$('#search').focus(function() {
$(this).val("");
$('#hidden_content').css('display','inline');
$(this).animate({width: '180px'}, 200);
});
$('#search').blur(function() {
$(this).val('Search');
$('#hidden_content').css('display','none');
$(this).animate({width: '120px'}, 200);
});
.header-navbar {
cursor: pointer;
white-space: nowrap;
background-color: #1f2127;
color: #cbcbcb;
min-width: 0;
text-overflow: ellipsis;
z-index: 299;
top: 0px;
left: 0px;
width: 100%;
height: 32px;
float: none;
position: fixed;
border-spacing: 0px;
}
td.cell-center {
text-align: center;
}
.cell-center table {
margin: 0 auto;
}
.header-table {
height: 32px;
border: none;
border-spacing: 0px;
}
td.header_rtd {
padding-right:12px;
}
td.header_ltd {
padding-left:12px;
}
.search-wrapper {
max-width: 124px;
background-color: red;
padding:4px;
}
.hidden_content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="header-navbar" id="header" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>left1</td>
<td class='header_rtd'>left2</td>
</tr>
</table>
</td>
<td width=100% class='cell-center'>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>center</td>
<td class='header_rtd'>center</td>
<td><div class="search-wrapper">
<input class="search" id="search" style="width: 120px;" type="text" size="60" value="Search"/>
<div class='hidden_content' id='hidden_content'>
hidden content
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_ltd'>right1</td>
<td class='header_ltd'>right2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
One quick solution would be to give the parent element a max-width equal to the initial width of the element. In doing so, the element will still be centered relative to the initial width because the input element's animated width will not effect the width of the parent element.
Updated Example
.search-wrapper {
max-width: 124px;
}
As a side note, you don't need jQuery/JS to animate the width, you can simply use a CSS transition along with the :focus pseudo-class.
Updated Example
.search-wrapper input.search {
transition: 1s width ease;
width: 120px;
}
.search-wrapper input.search:focus {
width: 180px;
}
Hi I have two divs within a table cell (making a Timeline) and I need them to overlap rather then come under each-other.
The position attribute of all DIVs inside the cell has to remain the same (because of a drag/drop JQUERY plugin I used)
Link to Fiddle
Link to Updated Fiddle
<tr style="border:1px; height:30px;">
<td style="border:1px solid black; position:static">
<div style="margin-left:0;width:50px;display:inline;position:relative">
<div style="background-color: green; position:absolute">
Div1
</div>
</div>
<div style="margin-left:0px;width:20px;display: inline; position:relative">
<div style="background-color: red; position:absolute">
Div2
</div>
</div>
</td>
<td>
</td>
</tr>
I need both DIVs to be start relavtive from the edge of the cell.
Thanks
As far as I can tell you just need to push the red <div> down a bit. And since you've positioned it absolutely, it's easily done with top:
<div style="background-color: red; position:absolute; top:10px;">
Check this update on your jsFiddle
They're going to be stacked like this, you should also be able to float the divs and set z-index explicitly to stack them.
http://jsfiddle.net/ianfc89/JDff9/13/
HTML
<body onload="REDIPS.drag.init()">
<script>
REDIPS.drag.dropMode = 'multiple';
</script>
<div id="drag" class="containDiv">
<table class="tableWhole">
<tbody>
<tr>
<td class="tableCell">
<div style="position:relative">
<div id="A125_Contain" class="drag progressContainer" >
<div id="A125" style="cursor: move; background-color: red; width: 500px; height: 20px; ">A125</div>
</div>
<div id="B125_Contain" class="drag progressContainer" >
<div id="B125" style="cursor: move; background-color: green; width: 100px; height: 20px; ">A125</div>
</div>
<div>
</td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
</tr>
<tbody>
</table>
</div>
Styles
.containDiv {
}
.tableWhole {
width:1000px;
table-layout:fixed;
}
.tableCell {
width:300px;
height:60px;
border:1px solid black;
}
.progressContainer
{
display:inline; border-bottom-style: none; position: relative; top: 0px; left: 0px; width: 100px; height: 20px;
}
I'm trying to set up a page that looks like the image below.
http://i.stack.imgur.com/GwRXf.png
I would like to have the main image replaced when I "hover" on one of the links listed nearby (a table or a list) disabling the "click" behavior.
I have tried to do this with css following this code:
http://jsfiddle.net/Kne3d/5/
I tried to change it in this way:
#gallery {
oveflow: auto;
text-align: center;
padding: 1em;
padding-top: 120px;
position: relative;
}
#gallery td {
display: inline;
padding: 0 1em;
}
#gallery img {
display: none;
position: absolute;
top: 10px;
left: 35%;
}
#gallery td:hover {
background: yellow;
}
#gallery td:hover ~ img {
display: block;
}
and:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="gallery">
<tr>
<td width="100%">Cat 1<img src="/images/01.png"></td>
<td width="150" rowspan="6">I WANT MY IMAGES HERE</td>
</tr>
<tr>
<td>Cat 2 <img src="/images/02.png"></td>
</tr>
<tr>
<td>Cat 3 <img src="/images/03.png"></td>
</tr>
<tr>
<td>Cat 4<img src="/images/04.png">
</td>
</tr>
</table>
I'd like my images will show up on the right column...
I also tried with Javascript:
<head>
<script language="JavaScript" type="text/JavaScript">
function showT(q){
document.getElementById('ima').setAttribute('src','0'+q+'.png')
}
</script>
</head>
<body>
<table width="100%" border="0">
<tr>
<td width="80%"><p>• Image 1</p>
<p>Image 2</p>
<p>Image 3</p>
<p>Image 4</p>
<td width="20%"><img id="ima" src="images/00.png" width="150" height="150">
</td>
</tr>
</table>
</body>
but...without success: images doesn't show up :(
Any idea on how make it works?
A really simple way:
$('#nav').find('li').hover(function(){
$('#gallery').find('li').eq($(this).index()).toggle();
});
demo