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.
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>
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;
}
I have a table in html.
The content of this table is text and an image. I would align the text in the top-left corner and the image in the middle (vertical-align).
I tried in this way:
CSS:
table td {border-collapse: collapse;}
#tabella {border: 1px solid black; text-align: left; vertical-align: top;}
#variante {vertical-align: middle;}
HTML:
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text
<br>
<img id="variante" width="75" border="0" src="www.favetta.com/image.png">
</td>
But in this way I obtain all (text and image) aligned in the top-left corner of the cell.
Any suggestion?
Are you doing this for an email? If so inline styling is fine (although won't work in all email clients so have a default.
If email do something like...
<table>
<tr>
<td align="center">
<table width="100%">
<tr>
<td align="left">This is text</td>
</tr>
</table>
<br/><br/>
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
<br/><br/><br/><br/>
</td>
</tr>
<table>
It looks crude but some browsers and email clients will ignore 'height='. This is purely what Ive found from years of email templating.
If not email, try and avoid tables - but if you can't then try something like...
<table>
<tr>
<td class="content">
This is text
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
</td>
</tr>
<table>
css
table{
border:1px solid grey;
width:100%;
}
.content{
text-align:left;
}
.content img{
width:75px;
vertical-align:middle;
transform: translate(-50%, -50%);
margin: 100px 50% 50px 50%;
}
https://jsfiddle.net/qbss1f0t/
Here is a simple example:
table{
border:1px solid #000;
}
table tr{
height:200px;
}
table td{
width:200px;
text-align:center;
}
.textNode{
text-align:left;
padding:0;
margin:0;
vertical-align:top;
}
.imgNode img{
width:75px;
margin: auto;
}
<table>
<tr>
<td class="textNode">This is text</td>
<td class="imgNode"><img src="http://s27.postimg.org/fs9k8zewj/cow1.png"></td>
</tr>
<table>
Here is a fiddle
This should get you to where you want.
Side Note: inline styling is not a good practice.
Use this may help you
<table width="100%">
<tr>
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text</td>
<td><img id="variante" width="75" border="0" src="www.favetta.com/image.png"></td>
</tr>
<table>
I am having a main div PricingBar inside that i have 3 sub div's . while keeping PricingBar height: auto; sub div's are displaying out of the PricingBar
Here Green color border is PricingBar
Option A, Option B, Option C are sub div's
html code:
<div id="PriceBar">
<div id="OptionA">
<h2>Option A</h2>
<table class="optiontable">
<tr><td class="column1">Setup Fee: </td><td><span>$250.00</span> (includes 10 customized apparel pieces)</td></tr>
<tr><td class="column1">Monthly Fee:</td><td><span>$25.00</span></td></tr>
</table>
</div>
<div id="OptionB">
<h2>Option B</h2>
<table class="optiontable">
<tr><td class="column1">Setup Fee:</td><td><span>$99.00</span> (includes 10 customized apparel pieces)</td></tr>
<tr><td class="column1">Monthly Fee:</td><td><span>$40.00</span></td></tr>
</table>
</div>
<div id="OptionC">
<h2>Option C</h2>
<table class="optiontable">
<tr><td class="column1">Setup Fee:</td><td>Refund</td></tr>
<tr><td class="column1">Monthly Fee:</td><td>Refunded</td></tr>
</table>
</div>
</div>
css code:
#PriceBar{
width: 1004px;
position: relative;
height:auto;
padding:10px;
border: 2px solid green;
background:#930;
float: inherit;
}
#OptionA, #OptionB, #OptionC{
margin: 10px 20px;
padding: 5px;
float: left;
width: 283px;
height: auto;
background-color: #FFF;
-webkit-border-radius:15px;
-mox-border-radius:15px;
border-radius:15px;
}
#OptionA h2, #OptionB h2, #OptionC h2{
text-align: center;
font-size: 18px;
font-weight: bold;
color: #006A8E;
}
table.optiontable tr td{
padding: 10px 5px;
color: #B9B196;
}
td.column1{
width:100px;
vertical-align: top;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
color: #252525 !important;
}
table.optiontable tr td span{
font-weight: bold;
}
Since all your div elements float, the "red bar" basically "forgets" that it is the container for them. Simply add an overflow:auto; to make it remember. I also tend to add zoom:1 for IE.
because of float of sub div's
add overflow:hidden to PricingBar
#PriceBar{
width: 1004px;
position: relative;
height:auto;
padding:10px;
border: 2px solid green;
background:#930;
float: inherit;
overflow:hidden;/*!!!*/
}
Add overflow:hidden to your #PriceBar style should do the trick.
Demo
http://jsfiddle.net/8aduV/1/
You don't need the height:auto;
Just make it a table, as it would be crossbrowser:
<table id="PriceBar">
<tr>
<td id="OptionA">
<h2>Option A</h2>
<table class="optiontable">
<tr><td class="column1">Setup Fee: </td><td><span>$250.00</span> (includes 10 customized apparel pieces)</td></tr>
<tr><td class="column1">Monthly Fee:</td><td><span>$25.00</span></td></tr>
</table>
</td>
<td id="OptionB">
<h2>Option B</h2>
<table class="optiontable">
<tr><td class="column1">Setup Fee:</td><td><span>$99.00</span> (includes 10 customized apparel pieces)</td></tr>
<tr><td class="column1">Monthly Fee:</td><td><span>$40.00</span></td></tr>
</table>
</td>
<td id="OptionC">
<h2>Option C</h2>
<table class="optiontable">
<tr><td class="column1">Setup Fee:</td><td>Refund</td></tr>
<tr><td class="column1">Monthly Fee:</td><td>Refunded</td></tr>
</table>
</td>
</tr>
</table>
It's Normal, If you have an height in auto; in your two first block your block is in two lines, in the third, text it's just in one block, try whith "min-height" in every "tr"
tr{
min-height:40px;
}
Or, other solution is to create a global table, for all your code. your three colums was link, and you don't have this problem :p
For debuging, Use Firebug it's more easy for testing your html code and CSS.
I hope I help you ;-P