I need to place a <div> with fixed height (100px) and full width (100% of the parent <td>) within a <td> on the bottom. The <td> could be higher than the browsers viewport height as the content of the other <td>s are probably huge.
I already tried some solutions like this (link), which is actually placing the div at the bottom of the browsers viewport.
Edit:
Here's a snippet of what is NOT working (according to the link above):
td {
position: relative;
}
div {
position: absolute;
bottom: 0;
}
Is there any option to fix a <div> to the total bottom of a <td> using PHP, HTML, CSS or JavaScript (jQuery also)?
Edit 3:
Another problem occuring, when I use the solution as showed above is, that if I assign the div the property "position: absolute;" the "width: 100%;" relates to the viewport width, not the td width.
Edit 4:
The actual code of my page:
html:
<tr>
<td id="content">
</td>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
css:
#content{
height: 1000px;
}
.sidebar{
width: 10%;
min-width: 200px;
position: relative;
}
div.internal{
position: absolute;
bottom:0;
width:100%;
height: 100px;
}
jsFiddle: Source
Here's a working example
Use this to place the div at the bottom
td{
position: absolute;
}
div{
position: absolute;
bottom: 0px;
}
UPDATE
This is an example with your code working link
It work's for me in Chrome and IE. The Red section is your div. Is this the layout you want?
UPDATE 2
If you want to use a table layout you can try doing that: table layout
UPDATE 3: working only with tables
If the previous solution didn't work for you I'm guessing your code isn't modular enough. If you want to use tables, you might want to use only tables. Add another table inside the requested cell like this: table inside the cell . As much as I'm against it, I still think it's better than using JS to solve your problem. It will be easier to maintain in the future.
You need using something like:
<table>
<tr>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
</table>
CSS:
.sidebar{
width: 10%;
min-width: 200px;
height: 1000px;
background-color: green;
}
div.internal{
position: absolute;
height: 100px;
background-color: yellow;
}
Javascript:
$(document).ready(function () {
var $div = $('div.internal');
var $td = $div.closest('td');
$div.width($td.width() + 2);
$div.css('top', ($td.height() - $div.height() + 12) + 'px');
});
http://jsfiddle.net/Z58ZW/5/
try adding
div.myClass{
position: absolute;
bottom:0;
width:100%;
}
to the div.
Example with the div positioned only on td bottom.
JSFiddle
Related
I got my page working how I wanted it (based on the previous question I asked). However, when I display the timeline (default is display:none) it creates a large gap of empty space beneath it. How can I remove this empty space? I just want the timeline to replace the image when it is clicked and vice-versa.
Here is my code pen
I don't know what code to include here.
You are using position:relative and giving css top value. That is causing this issue. I have done some change in css with position and top values. That works as you require.
#timeline{
position:absolute;
background-color:beige;
/*top:-829px;*/
top:210px;
width: 755px;
height: 827px;
margin-left: 180px;
}
Hope this resolves your issue.
change the css,
#main-image-div{
position: relative;
margin: 0 auto;
width: 750px;
height: 400px;
}
#main-image-div img{
max-width: 100%;
}
#timeline{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Hope this will solve the issue.
I created a nicer toggle effect and i think that's what you wanted.
http://codepen.io/anon/pen/dvdLpY
var img = $('img');
var list = $('.list');
list.hide();
img.click(function(){
$(this).fadeToggle(function(){
list.fadeToggle();
});
});
list.click(function(){
$(this).fadeToggle(function(){
img.fadeToggle();
});
});
I have two icons (Bootstraps Glyphicon) which are places as
1 : Menu Which as left of screen
2 : Gift which is at the right of the screen.
When Clicked on Menu the toggle appears from Left to Right. This works fine.
But when the Gift is clicked it appears in some weird position as shown in the image with the name Suraj Palwe This is at left part of the image. I want this to appear from right of the screen to moving towards the left as per the width of div.
This is the image how it looks.
JSfiddle
This is the what I have written in my code
style
.slide_birthday_click{
margin-top: 2%;
padding: 5px;
background: grey;
height: auto;
display:none;
position:absolute;
z-index: 5;
float: right;
}
in html body
<div class="slide_birthday_click">
<table class="table">
<tr>
<td>Suraj Palwe</td>
</tr>
</table>
</div>
<span class="glyphicon glyphicon-gift" style="float:right;" id="today_birthdays"></span>
The Jquery Part
$("#today_birthdays").click(function(){
$(".slide_birthday_click").toggle("slide",{direction:'right'},2000);
});
I want that Block Which contains the word Suraj Palwe to right of the screen as it toggles from right to left.
I am not getting where I am doing wrong in my code. Thanks in advance!
Try with:
$("#today_birthdays").delay(200).show("slide", { direction: "right" }, 1500);
Okay This is how I solved my problem. One thing was missing in it!
Just added right:0; to the css file
.slide_birthday_click{
margin-top: 2%;
padding: 5px;
background: grey;
height: auto;
display:none;
position:absolute;
z-index: 5;
float: right;
right: 0;
}
Thanks to all!
This is the link to JS Fiddle Answer
Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.
I add a mouse event to the HTML TR when user mouse-over/out the TR to change some CSS color. But in IE9 seems to have an issue that the table's height will keep increasing each time the CSS changed.
Note: the issue only occurs when the horizontal scrollbar appears.
Here is the HTML.
<div style="width:100%;height:100%;">
<div class="grid">
<div class="grid-body">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
<tbody>
<tr>
<td style="width:3040px;" class="item">
<div>
Please mouse-over me and out
</div>
</td>
<td class="item">
<div>
Please mouse-over me and out
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here is the Javascript
$(document).ready(function (){
$('.item').mouseover(function () {
$(this).parent().addClass("item-over");
}).mouseout(function() {
$(this).parent().removeClass("item-over");
});
}
);
Here is the CSS setting
html, body {height:100%}
body {
margin: 0; padding: 0 5px;
}
div.grid {
background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; zoom: 1;
}
div.grid-body {
background: red; border: 0; overflow: auto; width: 100%; position: relative;
}
tr.item-over {
color: #6eadff;
}
You can run the full example here.
Here's another possible fix that also seems to work in my case.
Setting ANY margin (top, right, bottom, left, or any combination) to 'auto' seems to solve it.
div.grid-body {
margin: 0px auto;
}
Or:
div.grid-body {
margin-top: auto;
}
Etc.
Another possible fix suggested in the blog post IE9 Hover Bug Workaround:
div.grid-body {
min-height: 0%;
}
In case anyone came here looking for a fix for datatables jquery plugin, the proper class to add this fix to is:
.dataTables_scrollBody
{
margin-top:auto;
}
Took a bit of digging to find the proper div, so I figured I would try to save someone time.
I might have just solved it.
Try:
width: 100%;
display: inline-block;
on the containing element ("div.grid-body" in this case).
Open Developer tools and remove the table-layout:fixed rule from the table that is the child of grid-body. it should work may be.
It stops doing it and yet does the mouse hover effect by setting:
div.grid-body {
background: red; border: 0; overflow: hidden; width: 100%; position: relative;
}
instead of overflow:auto. Mabe you'd prefer to use overflow:scroll or visible. And make it trigger this as an extra property only for the IE9 case.
remove with form the first 'TD' element <td style="width:3040px;". It will help.
Do you need so huge "td" there ?
just to see
div.grid {
background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden;
zoom: 1;
width:100%;
}
what about this:
width:100% !important;
if you can change the overflow try this
div.grid-body {
background: red; border: 0; overflow: hidden; width: 100%; position: relative;
}
else
change your script to this (the problem is in the add/remove class)
$(document).ready(function (){
$('.item').mouseover(function () {
$(this).parent("tr").css("color", "#6eadff");
}).mouseout(function() {
$(this).parent("tr").css("color","#000");
});
});
why do you do it with JS and not with the css?
i.e:
.grid-body table tr:hover {background:red}
Maybe you should just "memorize" the height of the element in a variable when the mouseover event is fired, and then set it back to that value again when the mouseout event is fired.
$(document).ready(function (){
$('.item').mouseover(function () {
// store the height in a variabile (keep also in mind margins and paddings)
$(this).parent().addClass("item-over");
}).mouseout(function() {
$(this).parent().removeClass("item-over");
// now set back the original height
});
}
);
should work to just add a fixed height to the table row
so the containing table row reads:
<tr height="50px">
you can see it working here http://jsfiddle.net/f3TDb/
I'm assuming that you're not doing it wisth divs and css:hover for a specific reason?
i realize i'm months behind on this, but this stumped me yesterday and found this thread. hopefully my answer helps:
it's the overflow: auto in div.grid-body that's messing things up. you'll have to change this to scroll, possibly:
div.grid-body {
overflow-x: scroll;
}
if you don't want the vertical scrollbars.
note that you'll have to code your js to determine if you need a scrollbar so you can set overflow-x to visible (the default) if there are no overflows and scroll if there are, simulating auto.
How do I vertically and horizontally center an image when I do not know the size of it? I asked this question and someone suggested using a table. This isn't the first time I heard a table can do it but I tried without luck.
Searching SO only got me results when I do know the size of the image. How do I do this with a table?
NOTE: JavaScript/jQuery is not preferred but if there's a solution with it I'm open to it.
Pretty easy, this is the format of all my images/containers:
<div class="photo"><img /></div>
<style type="text/css">
div.photo { height: 100px; line-height: 100px;text-align:center; }
div.photo img { vertical-align:middle;}
</style>
The CSS Method
You can set an explicit height and line-height on your container to center an image:
<div id="container">
<img src="http://placekitten.com/200/200" />
</div>
<style>
#container { height: 600px; line-height: 600px; text-align: center }
#container img { vertical-align: middle }
</style>
See it in action: http://jsfiddle.net/jonathansampson/qN3nm/
The HTML/Table Method
The table method follows. It's merely utilizing the valign (vertical-align) property:
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<img src="someHeight.jpg" />
</td>
</tr>
</tbody>
</table>
A jQuery Plugin
Since you tagged this question "jQuery," I'll provide a reference to the jQuery Center Plugin that also achieves vertical/horizontal centering by using CSS positioning and dynamic reading of an elements dimensions: http://plugins.jquery.com/project/elementcenter
With a table:
<table height="400">
<tbody>
<tr>
<td valign="middle"><img /></td>
</tr>
</tbody>
</table>
The 400 is just something I picked. You will need to define a height on table so it is taller than your image.
A jquery solution would be good if you wanted to try and use divs and junk, but if you don't care you don't care. You also have to rely on JS being turned on.
HTML:
<div id="imgContainer" style="position:relative;">
<img style="position:absolute;" />
</div>
JS:
$('#imgContainer > img').each(function(){
//get img dimensions
var h = $(this).height();
var w = $(this).width();
//get div dimensions
var div_h =$('#imgContainer').height();
var div_w =$('#imgContainer').width();
//set img position
this.style.top = Math.round((div_h - h) / 2) + 'px';
this.style.left = '50%';
this.style.marginLeft = Math.round(w/2) + 'px';
});
DON'T USE TABLES. Terrible practice unless your using tabular data.
The best way to do this is with the following code.
<html>
<head>
<title></title>
<style media="screen">
.centered {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;*/
}
</style>
</head>
<body>
<img class="centered" src="" width="100" height="100" alt="Centered Image"/>
</body>
This will work as long as it is not inside any elements without static positioning. All containing elements must be static positioning which is the default anyway.
Using CSS there is no easy way to vertically align an image center. Though to align it center horizontally you can use the following
<img src="randomimage.jpg" style="margin: 0px auto;" />
I would not reccommend a table for laying out an image as it is not really good practice anymore. Tables should only be used for tabular data.
There is some bad way to do it. Just display this image as block with absolute positioning (parent element must have "position: relative"). So you can play with margin-left and margin-top with negative values ~= a half of image sizes (respectively width and height)
If you don't mind losing IE compatibility (IE7 and older don't support this at all), you can use some CSS to simulate tables, without ever using one:
<div style="display: table; height: 500px; width: 500px;">
<img src="pic.jpg" style="display: table-cell; vertical-align:middle; margin: 0 auto; text-align: center">
</div>
Just pick appropriate height/width for the containing <div>.
If you don't mind losing the img-tag, you can use background-image to center an image in a container block.
markup:
<div class="imagebox" style="background-image: url(theimage.png);"></div>
style:
.imagebox
{
width: 500px;
height: 500px;
border: solid 1px black;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Basically, you should be able to create a table in HTML, and the styling for the td tag should set the text-align attribute to center and the vertical-align attribute to middle. And, you can mess with other attributes, like borders, padding, etc...
I end up doing the below. Tested with firefox, chrome, IE8 and opera. All good.
table.NAME
{
background: green; //test color
text-align: center;
vertical-align:middle;
}
table.NAME tr td
{
width: 150px;
height: 150px;
}
html
<table class="NAME"><tr>
<td><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></td>
<td><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></td>
...