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>
Related
I am using the jquery library to create a custom scrollbar - https://codepen.io/dragospaulpop/pen/asBcI
I created a simply example but the critical needed is to make the table fill to the rest of the page (without activating the standard browser scrollbar).
My code is:
<head>
<meta charset="UTF-8">
<title>CSS Only Fixed Table Headers</title>
<link rel='stylesheet' href='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.min.js'></script>
</head>
<body>
<div style="width:100%;height:300px;background:red"></div>
<table class="fixed_headers">
<thead>
<tr>
<th>Name</th><th>Color</th><th>Description</th>
</tr>
</thead>
<tbody id="myBody">
</tbody>
</table>
<script>
$(window).load(function(){
$("#myBody").append(" <tr> <td>Apple</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Pear</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Grape</td><td>Purple / Green</td><td>These are purple and green.</td> </tr> <tr> <td>Orange</td><td>Orange</td><td>These are orange.</td> </tr> <tr> <td>Banana</td><td>Yellow</td><td>These are yellow.</td> </tr> <tr> <td>Kiwi</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Plum</td><td>Purple</td><td>These are Purple</td> </tr> <tr> <td>Watermelon</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Tomato</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cherry</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cantelope</td><td>Orange</td><td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td><td>Green</td><td>These are green inside.</td> </tr> <tr> <td>Papaya</td><td>Green</td><td>These are green.</td></tr><tr><td>Raspberry</td><td>Red</td><td>These are red.</td></tr><tr><td>Blueberry</td><td>Blue</td><td>These are blue.</td></tr><tr><td>Mango</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Passion Fruit</td><td>Green</td><td>These are green.</td></tr>");
$("tbody").mCustomScrollbar({
theme:"light-3",
scrollButtons:{
enable:false
},
mouseWheel:{ preventDefault: true },
scrollbarPosition: 'inside',
autoExpandScrollbar:true,
theme: 'dark'
});
});
</script>
<style>
tbody {
height: 150px;
overflow: hidden;
/*replace with auto to use default scroll*/
/*overflow: auto;*/
}
.fixed_headers {
table-layout: fixed;
border-collapse: collapse;
display: block;
width: 100%;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
box-sizing: border-box;
display: inline-block;
width: 33.33%;
}
.fixed_headers tr {
display: block;
width: 100%;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
display: block;
width: 100%;
}
.fixed_headers tbody {
display: block;
width: 100%;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
</style>
</body>
I want to make the table's height: page_height-red_div_height (the size of page could be changed so it could be as percent). So the perfect solution is that red_div has always the same height but the height of the table is not const (could change by the windows size).
I tried to change the css by removing height: 150px; from the tbody and put there height: 100%; but the result was wrong - the standard browser scrollbar was activated instead of the custom scrollbar. Then I tried to change css of .fixed_headers tbody but it does not work as well.
How is it possible to solve this issue?
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>
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 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.
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