I want to create a vertical meter element in html. I used the following css sheet
meter {
width: 1000px;
height: 10px;
transform: rotate(90deg);
}
This worked perfectly fine, but when I incorporated the meter into a table, the cell took on 1000px of width instead of 10px. How should I adjust my html or css to make the table's cell properly fit the meter? IE: I want the table cell to take on the rotated width and height of the meter.
The html:
<table width="100px" cellspacing="" cellpadding="0" border="">
<td><meter max="120" value="55.93" title="Test"></meter></td>
</table>
When I add a width to the table's td element as follows:
<table width="100px" cellspacing="" cellpadding="0" border="">
<td width="10"><meter max="120" value="55.93" title="Test"></meter></td>
</table>
no change occurs. Input is much appreciated.
EDIT:
I solved this problem by using the -moz-orient: vertical; line in my meter style. This meant that the height and width were not switched and thus I could extend the height as long as I wanted without stretching the page/table.
<!DOCTYPE html>
<html>
<head>
<style>
.customtd
{
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
meter
{
width: 500px;
height: 10px;
transform: rotate(90deg);
}
</style>
</head>
<body>
<table width="100px" cellspacing="" cellpadding="0" border="">
<tr>
<td width="10px" class="customtd">
<meter max="120" value="55.93" title="Test"></meter>
</td>
</tr>
</table>
<table width="100px" cellspacing="" cellpadding="0" border="">
<tr>
<td>
<meter max="120" value="55.93" title="Test"></meter>
</td>
</tr>
</table>
</body>
</html>
Related
Whilst trying to create a responsive email which looks good on retina display devices, I have discovered that Outlook doesn't respect specified criteria for images and displays them as their source dimensions.
For a proof of concept (POC) I have created a banner image as 1200x400, so in emails it would be scaled to 600x200 and as 300x100 on mobile devices. Sounds good right?
Well, in Outlook it shows it as 1200px wide and there doesn't seem to be anything I can do about it. Here is the JSFiddle that results in the ghastly Outlook email:
http://jsfiddle.net/hirenshah/rdux8vkg/11/
HTML:
<body bgcolor="#C0C0C0">
<!--[if (mso)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; background-color: white; margin-left: auto; margin-right: auto;">
<tr>
<td>
<!-- Header Table Start -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="alignrightonmobile">
<img src="http://hirenshah.co.uk/poc/logo.png" width="100px" height="75px" />
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>Quote Reference ABC123456</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<img class ="banner" src="http://hirenshah.co.uk/poc/banner.png" style="width:auto; max-width:100%;height:auto"/>
</td>
</tr>
</table>
<!-- Header Table End -->
<!-- Body Table Start -->
<!-- Body Table End -->
</td>
</tr>
</table>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
CSS:
#media screen and (min-width: 601px) {
.container {
width:600px !important;
}
.headercolumnright {
text-align:right !important;
}
* {
font-family: Verdana;
color:blue !important;}
.alignrightonmobile {text-align:right !important;}
}
.headercolumnleft {
width: 300px;
display: block;
text-align:left;
float: left;
font-size:12pt;
}
.headercolumnright {
width: 300px;
display: block;
text-align:left;
float: right;
font-size:12pt;
}
div {
outline: 1px solid red;
}
* {
font-family: Verdana;
color:red;}
.alignrightonmobile {text-align:left;}
img.resize {
width:auto;
max-width:100%;
height:auto;
}
Outlook has some of the most limited CSS support out of all the popular clients: https://www.campaignmonitor.com/css/
With that in mind it's easier to build your email to work with Outlook and improve it for all other clients with CSS.
With regards to solving your specific problem, first of all the image you use in the img tag should be optimized for Outlook at 600px wide.
We can then use CSS to set a background-image on the td that contains your image so that you can load in the correct image for those devices that support it, you'll also want to use CSS to hide the image within your td tag on those devices using your media rules.
demo
html...
<div id="main">
<table>
<tr>
<td><img src="" width="200" height="100" /></td>
<td>
<img src="" width="50" height="30" />
<img src="" width="50" height="30" />
<img src="" width="50" height="30" />
</td>
<td><img src="" width="100" height="100" /></td>
</tr>
<tr>
<td style="color: blue; background-color: yellow;">some text here</td>
<td colspan=2 style="color: white; background-color: blue;">next goes here</td>
</tr>
</table>
</div>
css...
img{
background-color: red;
display: block;
border: 2px solid white;
}
What I have tried :
#main table{
width: 200px;
display: table;
table-layout: fixed;
}
demo
What I want is here:
Original size:
When I re-size the main:
Use zoom property, for example :
#main table{
width: 300px;
display: table;
table-layout: fixed;
zoom: 0.4;
}
I have checked your code.
But the way you are trying to do this, is not possible because the parent table takes the cumulative width of all the <td>'s in the row with the highest no of <td>'s.
Hence your table takes the width of the first <tr>.
To reach your goal you can follow the following steps-
Each <tr> will contain only one <td>.
That <td> will contain another table. i.e. In the <td> of the first <tr> of the given table you should write the code of a table containing the 1st row of the current given table.
In the <td> of the 2nd <tr> of the given table you have to accomodate another table with 2 <td>s of the 2nd <tr> in your current table.
check the new demo or the following HTML code-
<div id="main">
<table>
<tr>
<td>
<table width=100% style="overflow-x:hidden">
<tr>
<td>
<img src="" width="200" height="100" />
</td>
<td>
<img src="" width="50" height="30" />
<img src="" width="50" height="30" />
<img src="" width="50" height="30" />
</td>
<td>
<img src="" width="100" height="100" />
</td>
</tr>
</table>
</tr>
<tr>
<td>
<table width=100%>
<tr>
<td style="color: blue; background-color: yellow;">some text here</td>
<td style="color: white; background-color: blue;">next goes here</td>
</tr>
</table>
</tr>
</table>
No change required for the CSS code.
The output will be as follows-
As already said, play with %s, here is an example.
<div id="main">
<table>
<tr>
<td><img src="" width="100%" height="100%" /></td>
<td>
<img src="" width="100%" height="30%" />
<img src="" width="100%" height="30%" />
<img src="" width="100%" height="30%" />
</td>
<td><img src="" width="100" height="100" /></td>
</tr>
</table>
</div>
http://jsfiddle.net/pUnsA/2/
#main table{
display: table;
table-layout: fixed;
}
remove the width :200px;
the image size is bigger than the with of TD hence it goes off the screen
Dont use tables for layout, use floated divs instead.
Use Jquery to work out Browser Height and Browser Width. (you will need to include "Jquery CQDN" script references in your tags
Set height and width on your containers either a percentage of the total screen height and width or a percentage of a container div (gets more complex then, but more versatile to intricate layouts)
Important! Dont set height and width in your CSS for any elements you are resizing with jquery! this will only confuse the hell out of things
however you can use Min-Width and Min-height values, to stop any containers shrinking past any limits/constraints you want to set on them
Doing it this way will negate the need to tweak the html for different browsers.
Works for me for professional results.
The Javascript: The bit in the document.ready block, will automatically resize your whole page when the user resizes thier browser window.
Here's a working solution!.. (just copy/paste it to try)
<html>
<head>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<style>
html{float:left; padding:0px; margin:0px; background-color:red;}/* /w/h Handled by Javascript*/
body{float:left; padding:0px; margin:0px; background-color:orange; font-size:11px; font-family:Verdana; }/* /w/h Handled by Javascript*/
div.ContentContainer{float:left; margin:0px; padding:0px; background-color:yellow; } /* /w/h Handled by Javascript*/
div.SiteInfoContainer{float:left; padding:0px; margin:0px; background-color:green; color:White; }/* /w/h Handled by Javascript*/
div.SiteDetailContainer{float:left; padding:0px; margin:0px; background-color:blue; color:White; }/* /w/h Handled by Javascript*/
</style>
</head>
<body>
<div class="ContentContainer">
<div class="SiteInfoContainer">25% Wide, 100% high</div>
<div class="SiteDetailContainer">75% wide, 100% high</div>
</div>
<script type="text/javascript">
function MasterContentFullHeight() {
var TotalWinHeight = $(window).height();
var TotalWinWidth = $(window).width();
$("html").css('height', TotalWinHeight);
$("html").css('width', TotalWinWidth);
$("body").css('height', TotalWinHeight);
$("body").css('width', TotalWinWidth);
$(".ContentContainer").css('height', TotalWinHeight);
$(".ContentContainer").css('width', TotalWinWidth);
$(".SiteInfoContainer").css('width', ((TotalWinWidth/ 100) * 25));
$(".SiteInfoContainer").css('height', TotalWinHeight);
$(".SiteDetailContainer").css('width', ((TotalWinWidth / 100) * 75));
$(".SiteDetailContainer").css('height', TotalWinHeight);
}
$(document).ready(function() {
MasterContentFullHeight();
$(window).bind('resize', MasterContentFullHeight);
});
</script>
</body>
</html>
You could use a wrapping element with percent-based padding to set the aspect ratio you want and then position the images with %-based width / height inside of that wrapper. You could then decide if you wanted a percent based gutter size, or fixed gutter size. I coded it up with a fixed gutter and negative margins on the parent to negate that gutter, using box-sizing to easily split it into a grid, but you could simplify it and achieve the same result by being more precise with your left / top positions and widths to account for gutters. You could also replace the ID attributes for the images with :nth-child selectors if you know your target browsers have the capability.
I have included a JS Fiddle that shows a working example as well here: http://jsfiddle.net/xbafy/
HTML:
<div id="image_grid">
<img src="" id="i1" />
<img src="" id="i2" />
<img src="" id="i3" />
<img src="" id="i4" />
<img src="" id="i5" />
</div>
CSS:
#image_grid {
position: relative;
height: 1px; /* To prevent IE from not adding margins to 0px height elements */
padding-top: 40%; /* Whatever % you want to use to set the aspect ratio properly */
margin: -10px; /* Used to negate our border added below so that images run to edges */
}
#image_grid img {
position: absolute;
border: 10px solid #fff; /* Used to create a hard non-flexible gutter between images, use padding if youd rather, and use % if you still want it flexible based on size */
box-sizing: border-box;
}
#i1 {
top: 0;
left: 0;
width: 50%;
height: 100%;
}
#i2, #i3, #i4 {
left: 50%;
width: 20%;
height: 33.33%;
}
#i2 { top: 0; }
#i3 { top: 33.33%; }
#i4 { top: 66.66%; }
#i5 {
top: 0;
left: 70%;
width: 30%;
height: 100%;
}
You could try using media queries in CSS. It also looks like you're using tables to lay your page out. I would highly recommend you don't do this, for several reasons:
1) It's been bad practice for over a decade and will make your site seem unprofessional to anyone who looks at the code.
2) It's inflexible. The layout of your site cannot be easily altered/rearranged this way whereas if you build in divs and use CSS for your layouts it will be very easy to update in the future.
3) Whilst it may not seem it at first, using divs and CSS IS actually an easier way of doing it. You'll end up writing a lot less code this way. Remember one content block the correct way is just a single element ( but the tables way requires at LEAST 3 () and that's if you ignore the 'tbody' tag, which you shouldn't do really.
please find updated fiddle "http://jsfiddle.net/XUeAV/"
<table width="100%">
<tbody><tr>
<td width="55%" height=""><img width="" height="100" style="" src=""></td>
if you want to make it responsive as width of #main changes then you need to define width of table in %
I'm writing a simple form for sending some data to a database.
I use it in my own company so I don't need to have a perfect style.
I am using a table for the layout (this is okay in this application).
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born <input type="text" name="nato_pf" /></td>
</tr>
</table>
I would like to set the width of the input text to 100% (to the end of the line) , but, if I do that, the input text wraps to a new line.
I have found solutions only using div and they are not for me at the moment.
EDIT: Sometimes I have two input (with different sizes) on the same line, so I think I cannot add other td tags.
http://jsfiddle.net/gmmr7/1
table {
border:1px solid black;
width: 200px;
}
.left {
float: left;
}
.left2 {
overflow: hidden;
padding: 0 4px;
}
.left2>input {
width: 100%
}
<table>
<tr>
<td>
<label class="left">Born</label>
<div class="left2">
<input type="text" name="nato_pf" />
</div>
</td>
</tr>
</table>
<table width="500px" style="border: 1px solid black; verflow: hidden">
<tr>
<td style="width: 50px;">
Born
</td>
<td>
<input type="text" name="nato_pf" style="width: 99%;" />
</td>
</tr>
</table>
99% of width because with 100% the textbox goes over the table's border :)
and also give a width to the first td ;)
jsFiddle http://jsfiddle.net/2yZmB/
you can define another td element
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born </td><td><input type="text" name="nato_pf" /></td>
</tr>
</table>
css
input{
width:99%;
}
So I have this certain table. I know I'm not supposed to use table for layout, but in this case I'm forced to.
I need to style a specific TD's cell-spacing (the TD with the class .ritey). I know I have to target the TABLE to set its cell-spacing, but I don't want other TDs got affected. I only need to style this single TD.
Is there any way to do this?
Here is a quick rough sketch with MS Paint, I hope this explains what I need:
In the overall layout there will be multiple rows (multiple TR). In this question I only show one row. I need all columns (all TDs) to remain unchanged, except for .ritey. I want .ritey to have 10px margin around it (margin, not padding). I hope this explains better!
.
And here is what I got in my HTML. I tried td.ritey { border-spacing:10px; } but it does not seem to work.
<table width='100%' border='0' cellspacing='1' cellpadding='3' class='postable'>
<tr>
<td valign='middle' class='row4 uname' colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr><tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td><td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr></table>
Any help is really appreciated.
See fiddle for code and demo
fiddle: http://jsfiddle.net/kDKEw/2/
demo: http://jsfiddle.net/kDKEw/2/embedded/result/
HTML:
<table cellspacing="1" cellpadding="3" border="1" width="100%" class="postable">
<tbody><tr>
<td valign="middle" colspan="2" class="row4 uname">
<div class="name">
Guest
</div>
</td>
</tr><tr style="height: 36px;">
<td width="100%" valign="top" class="ritey" style="width: 90%; position: absolute; margin: 4px;">
<div class="postcolor">
Post content
</div>
</td><td valign="top" class="lefty" style="float: right; width: 6%;">
<div class="postdetails">
Details
</div>
</td>
</tr>
</tbody>
</table>
SS:
Updated Fiddle as per image illustration ( http://i.imgur.com/o56CD.png ): given by deathlock
Fiddle: http://jsfiddle.net/7xfxF/1/
Demo: http://jsfiddle.net/7xfxF/1/embedded/result/
SS:
In CSS, you would use padding for cellpadding and border-spacing for cellspacing. Here's the working code:
EDIT
I revised the CSS according to the image you provided. I added extra styling for the postcolor class. See the updated CSS and Fiddle. I also updated the screenshot.
If you want the borders to collapse, change border-collapse to collapse and remove the border-spacing property.
<style type="text/css">
table.postable {
border-collapse: separate !important;
border-spacing: 1px;
}
table.postable td {
border:1px solid black;
padding: 5px;
}
td.ritey {
border: 0px !important;
padding: 10px 5px 10px 5px !important;
}
td.lefty {
padding: 10px 5px 10px 5px !important;
}
div.postcolor {
margin: 3px;
padding: 10px;
border: 1px solid black;
}
</style>
<table width='100%' class='postable'>
<tr>
<td colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr>
<tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td>
<td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr>
</table>
OUTPUT:
See this jsFiddle for a demonstration.
How to make the div height to 100% so that if i change the div color the whole td color should be changed
<table style="table-layout:fixed;width:100%;" border="1" cellpadding=0 cellspacing=0>
<tr>
<td width="20%" height="70px" align="center">
<div class="step step1" style="display:block;" step="1">
Video<p align="center"> <img id="img1" src="/media/img/accept.png" /><img id="img2" src="/media/img/close.gif" /></p>
</div>
</tr>
</table>
You just need height: 100%; in your styling, like this:
<div class="step step1" style="display:block; height: 100%;" step="1">
You can test it out here. However, you're missing a </td> which will give odd behavior in certain DOCTYPEs (it is valid in some), make sure to close that table cell to be safe. One other note, unless you have it overridden somewhere, there's no need for the display: block;, that's the default display for a <div> element.
Why don't you change the td's color?
div's style:
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: none;
Why don't you set the td color then?
<td width="20%" height="70px" align="center" style="background-color:Orange;">
<td style="height: 100%"><div style="height: 100%"></div></td> to be explicit, but by default it should be the whole height and width of the td provided the td and table have a height.