I am looking for the best approach to solve this situation:
Given a 4 cell grid. I'd like the top row to be of fixed height and the right column to be of fixed width. The left column's width and the bottom row's height would then resize automatically as you resize the screen.
(that's the easy part .. just set the "northeast" cell in an HTML TABLE to fixed size and set the TABLE's height and width to 100%)
Now the tricky part. I want the southeast, northwest, and northeast cells to be rotated. Since the northeast cell is a fixed size square, that's super easy to do, just rotate it. However the southeast and northwest cells are dynamic in size based on the window's height and width.
Here is a super simple example of the situation -- I will rotate only the southeast corner for this example:
<html>
<head>
<style>
#mainGrid {
width: 100%;
height: 100%;
}
#nw {
background-color:blue;
}
#ne {
height: 100px;
width: 100px;
transform:rotate(180deg);
background-color:red;
}
#sw { background-color:yellow; }
#se {
transform:rotate(-90deg);
background-color:green;
}
</style>
</head>
<body>
<table id="mainGrid">
<tr>
<td id="nw">Northwest</td>
<td id="ne">Northeast</td>
</tr>
<tr>
<td id="sw">Southwest</td>
<td id="se">Southeast</td>
</tr>
</table>
</body>
</html>
Which results in:
What would be the simplest approach to getting the TABLE (or a grid of DIV or UL) to behave nicely when the screen is resized, like it does before the rotation? In other words, the southeast cell would have the same size and location it originally did, but the contents would layout rotated.
Can this be done with pure HTML5/CSS3 and no javascript? If not, what would be the simplest javascript I could use -- without any libraries -- to pull this off?
You could just wrap the content in a div or something and rotate that rather than the td itself:
<table id="mainGrid">
<tr>
<td id="nw">Northwest</td>
<td id="ne">Northeast</td>
</tr>
<tr>
<td id="sw">Southwest</td>
<td id="se"><div class="rotated">Southeast</div></td>
</tr>
</table>
CSS:
#mainGrid {
width: 100%;
height: 100%;
}
#nw {
background-color:blue;
}
#ne {
height: 100px;
width: 100px;
transform:rotate(180deg);
background-color:red;
}
#sw { background-color:yellow; }
#se {
background-color:green;
}
.rotated {
transform:rotate(-90deg);
}
Fiddle:
https://jsfiddle.net/2hagsgs2/
Related
I have a long table(the width is very large), when I scroll that table from left to right, I want it moves inertially. The current version of mine is just when I use my finger to scroll it, it moves but when I hold up my finger it stopped. What should I do? Here is a part of my HTML code for that table inside the div.
<div class="welcomeProgram">
<p class=programTitle>Project</p>
<div class="outer">
<div class="inner">
<table>
<tr>
<td><img src="img/ast_youxue.png"/><p>Project1</p></td>
<td><img src="img/canada_youxue2.png"/><p>project2</p></td>
<td><img src="img/usa_youxue2.png"/><p>project3</p></td>
<td><img src="img/uk_youxue2.png"/><p>project4</p></td>
</tr>
</table>
</div>
</div>
</div>
And there is my css code:
table {
table-layout: fixed;
width: 100%;
*margin-left: -100px;/*ie7*/
}
td, th {
vertical-align: top;
padding:2px;
width:330px;
}
.outer {
position:relative;
margin-top: 2%;
}
.inner {
overflow-x:scroll;
overflow-y:visible;
width:97%;
margin-left:0%;
-webkit-overflow-scrolling: touch;
}
.inner img{
width: 100%;
}
.inner p{
font-size: 20px;
margin-top: 4%;
margin-left: 1%;
}
I'm not sure what your asking. "inertially" isn't a word in the dictionary. Inertia is, but it's the absence of motion AKA a body that stays at rest. See: http://www.dictionary.com/browse/inertia
It sounds like the table is already doing what it needs to do, when the user's cursor or finger releases the table... it stops.
If you want it to keep moving, you'd need to use a library like jQuery to animate it. HTML + CSS won't do that by themselves. You could start the scroll onKeyDown & then onMouseMove. It'd be similar to programming a drag & drop operation, using jQuery. Once you've setup 2 flags to track the onKeyDown & onMouseMove, where both flags are set to true, then you could use the onKeyUp event to run the animation. You could use .scrollLeft() to allow it to continue to keep moving. See: https://api.jquery.com/scrollleft/
Would you please clarify, what you're looking for the table to do?
Edit: I tried to add this to the comments, but it wouldn't fit into it.
See if this helps...
<html>
<head>
<style>
.wrap {
overflow-y: scroll;
}
table {
width: 10000px;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
<footer>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
$(function() {
// Generate Table
var table = '<table border="1"><tr>';
for (var i=0; i<1000; i++) {
table += '<td>Hi</td>';
}
table += '</tr></table>';
$('.wrap').html(table);
// Run Animation
$('.wrap').on('scroll', function(){
$(this).animate({
scrollLeft: "+=50"
}, 800);
});
});
</script>
</footer>
</html>
I have a Foundation button:
Delete
Which is inside a table row cell: ``button```
As you can see the button is not aligned vertically centered.
Here is a JSFiddle I created to show the problem.
<table class="centered columns">
<thead>
<tr>
<td>Granted</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>true</td>
<td>Delete </td>
</tr>
</tbody>
</table>
How can I center a Button Vertically in a Table in the CSS Foundation Framework?
You are just need to remove the button margin-bottom property.
jsfiddle
This will centre everything in the middle of your table. But as its CSS3 you will need to only be worried about modern browsers.
td{
position:relative;
}
.button{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
JSFIDDLE
Just add Margin Auto to button class
.button{
margin: auto;
}
and remove previous styling Because it will sift up and it will not work;Auto will also be responsive as compare to position absolute
add id="top-padding" into button and add this bit of CSS
<style>
#top-padding {
padding-top: 10px;
}
</style>
might not be perfect but you can mess around with the number of pixels until it is centered
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
I Have a Caption with Dynamic Width, and i Want it in the center of the table, but inline-block isnt working right, the inline make it in the center of the td, not of all the table, How can i make it in the center of the table? Here is a example of this html:
<table class="hours-table" style="width: 100%;" border="0"><caption>Title</caption>
<tbody>
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
<td>1_4</td>
<td>1_5</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td>2_4</td>
<td>2_5</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
<td>3_4</td>
<td>3_5</td>
</tr>
<tr>
<td>4_1</td>
<td>4_2</td>
<td>4_3</td>
<td>4_4</td>
<td>4_5</td>
</tr>
<tr>
<td>5_1</td>
<td>5_2</td>
<td>5_3</td>
<td>5_4</td>
<td>5_5</td>
</tr>
</tbody>
</table>
Thanks a lot in Advance!
If you want it to be both vertically and horizontally aligned in the center, you could use the following CSS:
table { position: relative; }
caption {
position: absolute;
top: 50%;
left: 50%;
margin: -0.5em -10px; /* Change the -10px part depending on length of title */
}
jsFiddle
If you only want it to be horizontally aligned (at the top of the table, you could use:
caption { text-align: center; }
jsFiddle
Edit: Here is a solution that will allow a background behind a centered caption but also create a white background behind just the text part of the caption:
HTML
<caption>Title</caption>
CSS
div { background: url('background_image.jpg') repeat; }
caption {
text-align: center;
background: rgba(0,0,0,0);
}
span { background: white; }
JS
$(function() {
var caption = $('caption');
caption.html('<span>' + caption.html() + '</span>');
});
jsFiddle
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>
...