I need to overlay one div over another div in HTML / CSS / Javascript.
I've found this sample http://jsbin.com/kociyefoba/edit?html,css,output that works "quite" exacly as I'd like but when I try to translate it in a situation like mine (I've to use div inside a table ... ), I've some troubles.
I've tried to produce a sample code: here you're ...
<html>
<head>
<meta charset=utf-8 />
<title>test div over another div</title>
</head>
<body>
<table border=1>
<tr>
<td>
<div id="base1" style="position:relative;width:100%;height:100%;top:0px;left:0px">
<img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
</div>
<div id="overlay1" style="z-index:1;position:relative;width:100%;height:100%;top:50px;left:50px;color:red;">
Text Overlay
</div>
</td>
</tr>
</table>
</body>
</html>
If you use
position:absolute
in the code all works fine but note that you can't see the table borders .... I've to see them!
I've tried to use all the other option values for position but they doesn't work ....
Suggestions / examples / alternatives?
This is one way of doing it.
#overlay1 {
width: 100%;
height: 100%;
position: absolute;
color: red;
font-size: 40px;
z-index: 1;
top: 25px;
left:75px;
}
#base1 {
width: 100%;
height: 100%;
position: relative;
}
td {
position: relative;
}
<table border=1>
<tr>
<td>
<div id="overlay1">
Text Overlay
</div>
<div id="base1">
<img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
</div>
</td>
</tr>
</table>
Related
I have a project where I define a variable and I pass it to html template to recreate a PDF template.
For example I have a variable "rates" with 24 elements, the problem is that in html file it shows only 20 elements.
my rates variable:
rates = <table class='service'>
<thead>
<tr>
<td>Number</td>
<td>Causale</td>
<td>Total (€)</td>
</tr>
</head>
<tbody>
<tr>
<td width='10%'>1°</td>
<td>144.93 € for .... <br></tr>
<tr>
<td width='10%'>2°</td>
<td>144.93 € for ... <br</td>
</tr>
</tbody>
</table>
(i only wrote 2 row, but imagine it has 24 rows)
Then I pass to my html file where I show it as:
<page id="page-1">
<div class="body-page">
<div class="main-container">
<div class="table-box payment-table">
<div class="table-box payment-table">
<div class="table-title">Rates</div>
{{rates}}
</div>
</div>
</page>
service: {
margin-top: 10px;
margin-bottom: 10px;
}
body-page: {
float: left;
min-height: 1032px;
}
main-container: {
position: relative;
float: left;
height: 1032px;
margin-top: -50px;
}
page{
float: left;
width: 210mm !important;
/* height: 303mm;*/
height: 296mm !important;
position: relative;
padding: 5mm;
overflow: hidden;
}
EDIT: Ok i found the hidden rows:
Is that because you set fixed height and more than 20 elements don’t fit in the element?
I want to set my table's position right of my image.
Here's my code:
<html>
<head>
<style type="text/css">
.podium { display: block; margin-left: 300; margin-top: 500; position: static; }
table { position: relative; left: 100px; }
</style>
</head>
<body>
<img src="podium.jpg" class="podium">
<table border="5px">
<tr>
<td>aaa</td>
</tr>
</table>
</body>
</html>
I've tried this, but it didn't work.
How can I make it?
Wrap image and table in a div and than You can use flex and flex-order property of Flex order.
#wrapper{ display: flex; }
#image{ order:2; width: 100px; height:100px; margin-left:15px}
#table{ order:1; }
<div id='wrapper'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNyNcwf4fDjX_2L4mUcJNmg92fOmWlDTYxcefggBG0VAr6MX32" class="podium" id='image'>
<table border="5px" id='table'>
<tr>
<td>aaa</td>
</tr>
</table>
</div>
I'm currently working on a Chrome Extension and I'm using Semantic UI to build the interface. When the user activates the extension it will show a popup which is actually an iFrame. In this iFrame I have a table and I'd like this table to take the full width of the iFrame. The iFrame width is fixed (500px). The problem is because the iFrame is 600px the table is displayed as the device is 500px (makes sense since it's a responsive framework.
But I'd like to change this behavior and force the table to display as it would be on a desktop screen.
Today this is what I get
Now I'd like to obtain the following result (fake image :)
Here is the code of my iFrame
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="js/ext/jquery-3.3.1.min.js"></script>
<script src="js/ext/semantic-2.4.2.min.js"></script>
<script src="js/popup.js"></script>
</head>
<body>
<div>
<div>
<table class="ui celled padded collapsing table">
<thead>
<tr>
<th class="single line">#</th>
<th>Event mapping</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td class="single line">
<div class="ui right action left icon input mini">
<i class="search icon"></i>
<input type="text" placeholder="Selector">
<div class="ui basic floating dropdown button mini">
<div class="text">Identify</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Page</div>
<div class="item">Track</div>
</div>
</div>
</div>
</td>
<td class="right aligned">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<div class="ui left floated">
<button id="btn-startcapture" class="positive ui button">Start capture</button>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
And the CSS style I apply to the iframe tag on the caller page
iframe.segmentizor-panel-iframe-toggle {
left: calc(100% - 500px) !important;
}
iframe.segmentizor-panel-iframe {
top: 0px;
left: calc(100% + 10px);
display: block;
z-index: 2147483647;
box-shadow: rgba(0, 0, 0, 0.25) 7px 0px 12px 13px;
position: fixed !important;
width: 500px !important;
height: 100% !important;
opacity: 1 !important;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
transition: left 0.4s ease-in-out 0s !important;
}
Sorry if the question looks quite trivial. Still in the learning curve... Thanks for your help.
Have you tried editing the max-width css? Althought you may be setting the width to be 800px, if the max is only 600 it would only get to that.
First, remove the collapsing class
https://semantic-ui.com/collections/table.html#collapsing
Collapsing
A table can be collapsing, taking up only as much space as its rows.
Also, I think you could add some additional style inside the iframe's head section.
After
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
Add some style like you would on any page...
<style>
table{
width: 100%;
}
</style>
Or you could add some classes, or other css styling for your needs.
Thanks for your guidance I managed to do it by:
Adding the following class in my iFrame style
min-width: 800px !important;
Then in my iFrame page I added a new div with the size of the iFrame and used a width of 100% for the table
<div style="max-width: 450px">
<table class="ui celled padded unstackable collapsing table" style="width:100%">
I have the following element:
<td>
<h4 style="margin-top:16px;">Your images</h4>
<div id="container">
<img src="http://thumb101.shutterstock.com/thumb_large/1207028/413816437/photo-413816437.jpg">
<img src="http://thumb9.shutterstock.com/thumb_large/1207028/238987906/photo-238987906.jpg">
<img src="http://thumb101.shutterstock.com/thumb_large/1207028/233499883/photo-233499883.jpg">
<img src="http://thumb7.shutterstock.com/thumb_large/1207028/232630345/photo-232630345.jpg">
<img src="http://thumb1.shutterstock.com/thumb_large/1207028/232630354/photo-232630354.jpg">
</div>
</td>
#container{
border: 1px solid;
box-sizing: border-box;
display: flex;
flex-flow: nowrap
}
img {
max-width: 100%;
height:auto
}
The td contains between 4 and 8 images.
However, depending on screen resolution or number of images the images can wrap and display in two rows on the screen.
What I want to achieve via CSS (if possible?) is to have the images always on one row, not wrapping. For this I would need the images to autoadjust in size.
Try css rules :
<html>
<title>Demo</title>
<head>
<style>
td {
width: auto;
background-color: red;
white-space: nowrap;
overflow-x: scroll;
}
td img {
width: 150px;
background-color: green;
display: inline-block;
margin-left: 4px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h4 style="margin-top:16px;">Your images</h4>
<div id="container">
<img src="http://thumb101.shutterstock.com/thumb_large/1207028/413816437/photo-413816437.jpg">
<img src="http://thumb9.shutterstock.com/thumb_large/1207028/238987906/photo-238987906.jpg">
<img src="http://thumb101.shutterstock.com/thumb_large/1207028/233499883/photo-233499883.jpg">
<img src="http://thumb7.shutterstock.com/thumb_large/1207028/232630345/photo-232630345.jpg">
<img src="http://thumb1.shutterstock.com/thumb_large/1207028/232630354/photo-232630354.jpg">
</div>
</td>
</tr>
</table>
</body>
</html>
you may try this code
<style>
td {
width: 100vw;
}
img {
min-width: 24%;
}
</style>
change the min-width % depending upon the images you want on 1 row.
http://jsbin.com/exUmaFU/1/edit
I love Windows 8, among many of the apps, and one of my favorites is the weather app.
Today I wanted to try making "horizontal page content" as seen on the weather app in the screenshot below.
I was trying to do this using DIV's and haven't any luck. I've tried various methods and whatever I tried using percents this didn't work. I reverted to using em with tables and I got the effect I wanted, but now my problem is getting the div's to have at least 90% width on page width.
Any help would be greatly appreciated as to how this effect can be accomplished.
Simplified Code:
<!DOCTYPE html>
<html>
<head>
<title>Win 8 Horizontal Content Experiment</title>
<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type="text/css">
body {
background: #000;
}
#contain {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: scroll;
}
#contain table {
height: 100%;
}
#contain td {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
margin: 0px;
}
/* Separate DIVS Inside Container */
#contain .box {
display: inline-block;
width: 80em;
height: 100%;
background: red;
color: #700;
}
</style>
</head>
<body>
<div id="contain">
<table>
<tr>
<td>
<div class="box">
<center><h1>Page 1</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 2</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 3</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 4</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 5</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 6</h1></center>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
(function() {
function scrollMenu(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('contain').scrollLeft -= (delta*40); // Multiplied by 40
e.preventDefault();
}
if (document.getElementById('contain').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('contain').addEventListener("mousewheel", scrollMenu, false);
// Firefox
document.getElementById('contain').addEventListener("DOMMouseScroll", scrollMenu, false);
} else {
// IE 6/7/8
document.getElementById('contain').attachEvent("onmousewheel", scrollMenu);
}
})();
</script>
</body>
</html>
Don't use tables. Use inline-block divs with width: 100% and height: 100% inside div with position: relative, white-space: nowrap (this will keep the boxes in one line) and width:100% and height:100%. Make sure you define html, body {width: 100%; height: 100%} in your styles.
I created a jsfiddle with what I think you wanted to do.
http://jsfiddle.net/taW4T/2/