My two custom social buttons. I put them inside a table and set them to in-line block but there's a big space in between both of them! How do I close this gap? I've set the table to a class name of "share." I want to edit through the style-sheet because I don't want to go through every single page and edit its code.
<table class="share">
<tr style="background-color: white;">
<td style="border: none;">
<span style="padding:10px; font-size:15px; text-align: center; background-color:#3B5998; font-weight:bold; font-family: Verdana; color:white; border-radius:10px;">Share on Facebook</span></span></span></p>
</td>
<td style="border: none;">
<span style="padding:10px; font-size:15px; text-align: center; background-color:#55acee; font-weight:bold; font-family: Verdana; color:white; border-radius:10px;">Tweet</span></span></span></p>
</td>
</tr>
</table>
Ok from what i see you are going to have a hard time just doing css, as you have styles within your Html tags already.
CSS: this will make them but up together. Fiddle
table {
border-spacing: 0px;
border-collapse: separate;
}
td {
padding: 0px;
}
The simple solution in your case is to change the table style to display:block; and it should get the td's closer.
try this
.share {
width: auto;
margin: 0;
margin-left: auto;
margin-right: auto;
}
Related
I'm creating a website for a school project using HTML and CSS. In the header there is a table and I need a text (which is inside a cell) to be aligned on the vertical center and on the horizontal right.
This is the HTML code
<table id="intestazione">
........
<tr>
<td class="centerV"><h1>Text</h1></td>
<td><img src="Logo.jpg"></td>
</tr>
</table>
and this is the CSS code
h1
{
font-family:Arial;
font-size:50px;
color:#009ED9;
text-align:right;
}
.centerV
{
display:table-cell;
vertical-align:middle;
}
but it doesn't work as I want, so I changed the CSS code into
h1
{
font-family:Arial;
font-size:50px;
color:#009ED9;
display:table-cell;
vertical-align:middle;
text-align:right;
}
and the text is vertically centered, but not on the right (it is on the left). I've read that I can use line-height or a padding on the top, but in my opinion it is more clean and elegant to use vertical-align (tell me if I am wrong).
I tried also other code from suggestions on the web but I don't write it otherwise the question will be too long.
you can use :
position : relative;
right : value%;
(or left:value%)
as you like ..
check this
<table id="intestazione" border="1">
<tr>
<td class="centerV"><h1>Text</h1></td>
<td><img src="http://www.sec4ever.com/home/images/misc/noavatar.gif"></td>
</tr>
h1{
font-family:Arial;
font-size:50px;
color:#009ED9;
display:table-cell;
padding:100px;
vertical-align:middle;
position:relative;
right:30%; }
Take out display:table-cell from your h1 headings and simply apply a text-align:right to your td elements.
h1 {
font-family: Arial;
font-size: 50px;
color: #009ED9;
text-align: right;
}
.centerV {
vertical-align: middle;
}
tr {
border: solid red;
}
td {
border: solid green;
width: 100%;
}
h1 {
font-family: Arial;
font-size: 50px;
color: #009ED9;
vertical-align: middle;
text-align: right;
}
h1 {
border: solid red;
}
table {
text-align: right;
}
<table id="intestazione">
........
<tr>
<td class="centerV">
<h1>Text</h1>
</td>
<td><img src="Logo.jpg"></td>
</tr>
</table>
You can use align="right" in td by default content is vertically aligned in td.
<table id="intestazione" width="100%" bgcolor="green">
<tr>
<td align="right" valign="middle" ><h1>Text</h1></td>
<td><img src="Logo.jpg"></td>
</tr>
</table>
try this
h1 {
font-family:Arial;
font-size:50px;
color:#085ED9;
display:table-cell;
vertical-align:middle;
float: right;
}
I am trying to format a personal info list in HTML.
Something like:
.myself p{
font-size: 130%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div class="myself">
<p>Name: First Last<br /><br />Age: 21<br /><br />Movie: xxxxx<br /><br /></p>
</div>
but when you run this code, it will look like
Name: First Last
Age: 21
Movie: xxxxx
which basically is centered every line. What I really want to achieve is like this:
Name: First Last
Age: 21
Movie: xxxxx
which align all the ":" colons.
My idea is to make a table, then align each column separately, but I doubt that is the best way to do make this. Hope you guys can give me some better solutions. Thank you.
Try this piece of code.
This is called a grid layout, which is currently one of the most used types of layouts ones. The main idea about it is just splitting your page into boxes and stacking them together.
.myself .property{
width:30%;
display:inline-block;
box-sizing:border-box;
text-align:right;
}
.myself .value{
text-align:left;
padding-left:10px;
width:70%;
display:inline-block;
box-sizing:border-box;
}
<div class="myself">
<div class="property">Name:</div><div class="value"> First Last</div>
<div class="property">Age:</div><div class="value"> 21</div>
<div class="property">Movie:</div><div class="value"> xxxxxx Last</div>
</div>
Another option instead of using a table is to use the <dl> element. Here's a basic example of how it would look:
dl>dt {
float: left;
width: 150px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
}
dl>dd {
margin-left: 160px;
}
<dl>
<dt>Name:</dt>
<dd>First Last</dd>
<dt>Age:</dt>
<dd>21</dd>
<dt>Movie:</dt>
<dd>xxxxx</dd>
</dl>
The benefit is less HTML code than what a table would require, and less convoluted. However, if column headers are required, then you should definitely use a <table> element.
In my opinion there is no problem using a table for simple stuff like these.
<table>
<tr>
<td class="titles"> My name :</td>
<td>John</td>
</tr>
</table>
styles
.titles { text-align : right; }
This is my solution with tables. Not pixel perfect but it should get you started...
#mytable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 200px;
}
#mytable td {
border: 1px solid #ddd;
padding: 8px;
}
#mytable .centered{
text-align:center;
}
#mytable .age{
padding-left:54px;
}
#mytable .movie{
padding-left:40px;
}
#mytable tr:nth-child(even){background-color: #f2f2f2;}
#mytable tr:hover {background-color: #ddd;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="mytable">
<tr>
<td class="centered">Name: First Last</td>
</tr>
<tr>
<td class="age">Age: 21</td>
</tr>
<tr>
<td class="movie">Movie: xxxxx</td>
</tr>
</table>
I am designing a responsive email template and i have a slight problem on Outlook Web app.
I found out that it removes classes so there is no point in using media queries so i try to hide a tr element like this :
<tr style="mso-hide:all;
display:none;
height:0;
width:0px;
max-height:0px;
overflow:hidden;
line-height:0px;
float:left;">
But it still shoes up. Any Ideas?
You can add the
<tr style="visibility: hidden"></tr>
However, this only makes it not visible... It is still there and taking up space
Use such class:
.hide {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
Blockquote
I'm not entirely sure way you need a hidden table row, but try this:
<tr style="mso-hide:all;
display:none!important;
height:0;
width:0px;
max-height:0px;
overflow:hidden;
line-height:0px;
float:left;">
This may not work as email clients remove some of the CSS, specially lines that will hide code. It will also remove any links to js or external code. So !important will probably be ignored as well.
Lastly trying to hide content is a huge red flag for spam filters, likely whatever you send with this will end up in the spambox.
We use a combination of tables to hide and show different content. Depending on the size of the image you can adjust the height and width of the td.
Styles:
td.inner { display:none; }
table.promo_1_pic_1 { float: none; width:100%; height:95px; }
table.promo_1_pic_1 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_2_pic_2 { float: none; width:100%; height:95px; }
table.promo_2_pic_2 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_3_pic_3 { float: none; width:100%; height:109px; }
table.promo_3_pic_3 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_4_pic_4 { float: none; width:100%; height:109px; }
table.promo_4_pic_4 td { background: #fff url(test.jpg) no-repeat 0px !important; }
HTML:
<td class="desktop-table" bgcolor="#ffffff" style="padding:20px; background-color:#ffffff; font-family: Arial, Helvetica, sans-serif;">
<!-- promo 1 content -->
<table class="promo_1_pic_1"><tr><td></td></tr></table>
<table class="promo_2_pic_2"><tr><td></td></tr></table>
<table class="promotion">
<tr>
<td class="inner"><img src="test.jpg" alt=""/>
</td>
<td class="inner"><img src="test.jpg" alt=""/>
</td>
</tr>
</table>
</td>
<td class="desktop-table" bgcolor="#ffffff" style="padding:0 10px 10px 10px; background-color:#cfe6f6; font-family:Arial, Helvetica, sans-serif;">
<!-- promo 1 content -->
<h3 style="margin:25px 0px 0px 22px;">You might also be interested in:</h3>
<table class="promo_3_pic_3"><tr><td></td></tr></table>
<table class="promo_4_pic_4"><tr><td></td></tr></table>
<table class="promotion">
<tr>
<td class="inner"><img src="test.jpg">
</td>
<td class="inner"><img src="test.jpg">
</td>
</tr>
</table>
</td>
I had the same problem all day yesterday, I found this question here and seems no correct answer. Then I searched in Litmus community forum. And fortunately saw a comment saying:
Also note with mso-hide:all, that if you are trying to hide content within the table cell that includes nested tables, you must apply this property to any and all nested tables within as well.
So I added mso-hide:all to all child tables, and it worked!
Wrap whatever you need to hide in a div.
div {
width: 0;
height: 0;
overflow: hidden;
}
To keep this question up to date, OWA does accept classes now, and can be targeted by adding [owa] to the start of the class list in css.
[owa] .hide,
.hide {
display: none!important;
mso-hide: all;
width: 0;
min-width: 0;
max-width: 0;
height:0;
min-height: 0;
max-height: 0;
overflow: hidden;
font-size: 0px;
line-height: 0px;
}
With this adding .hide to the element you want to hide, will hide it in all popular email clients, if you want to hide from just outlook (excl OWA), then I'd suggest using conditional code. The following table will be hidden in all email clients. Although it will appear when the email is forwarded from certain email clients.
<!--[if !mso]><!-- -->
<table class="hide">
Hide me
</table>
<!--<![endif]-->
I have some HTML code. I have added two images: one alinged to the left and one to the right. Then it has two headings and an HTML table after that.
The problem is that I have use the following code to add the images to the document.
<img src="http://Path_To_Foler/Logo1.jpg" align="left" />
<img src="http://Path_To_Foler/Logo2.jpg" align="right" />
<p class="h1"><b>Private and Confidential</b> </p>
<p class="h1"><b>REPORT FOR Mr Person A BLA BLA</b> </p>
<table class="table" >
<tr>
<td class="CellHeader">Date </td>
<td class="CellHeader">Time</td>
</tr>
<tr>
<td class="cell"><AssessmentDateFrmMSPAPARR /></td>
<td class="cell"><CurrentRcFrmMSPAPARR /></td>
</tr>
</table>
CSS
<style>
.CellHeader{
width:50%;
text-align:left;
font-family: 'calibri';
font-size: 11pt;
color:#FFFFFF;
background-color:#151515;
border:1px solid black;
border-collapse:collapse;
}
.cell{
width:50%;
text-align:left;
font-family: 'calibri';
font-size: 11pt;
border:1px solid black;
border-collapse:collapse;
}
.table{
width:100%;
border:1px solid black;
border-collapse:collapse;
}
.h1{
page-break-before: always;
text-align: center;
font-family: 'calibri';
font-size: 12pt;
}
<style>
Issue
Everything was working fine as expected. The problem started when I added the second image. Adding second image causes the table to be aligned right as well.
And when I take out the align:"right" atribute from the image element, the table is where it is supposed to be but the second image is pushed to the right which is kind of understandable.
How can I fix this?
Try replacing align="left" by style="float:left" and align="right" by style="float:right"
Then, add clear: both in .table{} in your CSS.
I'm trying to achieve table similar to this using css/html only. Is it possible ?
So the white area is the places table. This is the HTML for the table :
<table class="places">
<tr>
<td class="solid">K</td>
<td> </td>
<td> </td>
<td class="solid">P</td>
<td> </td>
</tr>
<tr>
<td class="solid">25</td>
<td class="solid">26</td>
<td> </td>
<td class="solid">47</td>
<td class="solid">48</td>
</tr>
(...)
</table>
And my css :
.places{
position:relative;
background:white;
width:160px;
margin:0 auto;
text-align:left;
padding:5px;
border-collapse: collapse;
}
.places tr {
}
.places td {
width:22px;
height:22px;
text-align:center;
}
.solid {
border: 1px solid #d2cdd1;
border-top:none;
background-color:#e7e7e7;
text-align:center;
cursor:pointer;
}
I was pretty sure, that although tables are a bit different than other html objects, padding should work here. But it looks that I was wrong. Cellspacing/cellpading have no effect. Currently I was able to get something looking like this :
You need the border-spacing property.
Table cells are not like other elements, because while div and p gets are block level elements, and span and input are inline, table cells and rows get their own table-cell and table-row display values.
Using border-spacing with border-collapse: separate will give you what you'd need. Have a look: http://jsfiddle.net/kjag3/1/
PS. I've also taken the liberty of cleaning up the HTML by separating them into two tables, so you won't need the fillers for the empty cells.
The reason you can't set any spacing between the cells is that you have border-collapse set to collapse in the styles for your table. If you use border-collapse:separate instead, you should be able to add margins to your table cells and put spacing between them.
Using border-collapse:collapse makes it so that adjacent table cells use the same border; naturally, you wouldn't be able to put space between two elements when they're attached to each other.
I wonder whether a table structure is appropriate for what you're trying to achieve?
To me, it looks like the 'K' and 'P' are headings, and the gap between the 'K' and 'P' numbers suggests that 'K' and 'P' are separate and shouldn't be part of the same table. So I suggest getting rid of the table and restructuring your HTML to use simple headings and div tags like this:
HTML:
<div class="places">
<h2>K</h2>
<div>25</div>
<div>26</div>
<div>23</div>
<div>24</div>
<div>21</div>
<div>22</div>
</div>
<div class="places">
<h2>P</h2>
<div>47</div>
<div>48</div>
<div>45</div>
<div>46</div>
<div>43</div>
<div>44</div>
</div>
CSS:
.places {
width: 55px;
float: left;
margin: 0 25px 0 0;
}
.places h2, .places div {
width: 22px;
height: 22px;
margin: 0 3px 3px 0;
border: 1px solid #d2cdd1;
border-top:none;
background-color:#e7e7e7;
text-align:center;
cursor:pointer;
font-weight: normal;
font-size: 12pt;
}
.places div {
float: left;
}