I took our signature desing and turned it to a HTML code with my amateurish skills.
But when i put it to outlook, it looks broken.
Can someone show me how to do it or directly fix my code?
<div style="float:left;" id="renlogo">
<img src="http://i.imgur.com/bs6yRbO.png">
</div>
<div style="float:left;" id="colorline">
<div class="green" style="background-color: #67b32e;width: 4px; height: 52px;">
</div>
<div class="pink" style="background-color: #e61e47;width: 4px; height: 52px;">
</div>
<div class="blue" style="background-color: #51bec7;width: 4px; height: 52px;">
</div>
<div class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;">
</div>
</div>
<div id="card" style="float:left;margin-top:20px;margin-left:12px;">
<div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
Burçak ÇELİK
</div>
<div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
Co-Founder & Managing Partner
</div>
<br/>
<div>
<div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
</div>
<div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">E-mail:</span> burcak.celik#renunion.com
</div>
<div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Website:</span> http://renunion.com
</div>
<div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
</div>
</div>
Fiddle: https://jsfiddle.net/m46zx0oc/
<table>
<tr>
<td>
<div id="renlogo">
<img src="http://i.imgur.com/bs6yRbO.png" width="159" height="208">
</div>
</td>
<td>
<table style="border: none;
border-collapse: collapse;
padding: 0;
margin: 0;">
<tr>
<td class="green" style="background-color: #67b32e;width: 4px; height: 52px;"></td>
</tr>
<tr>
<td class="pink" style="background-color: #e61e47;width: 4px; height: 52px;"></td>
</tr>
<tr>
<td class="blue" style="background-color: #51bec7;width: 4px; height: 52px;"></td>
</tr>
<tr>
<td class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;"></td>
</tr>
</table>
</td>
<td>
<div id="card" style="margin-top:20px;margin-left:12px;">
<div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
Burçak ÇELİK
</div>
<div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
Co-Founder & Managing Partner
</div>
<br/>
<div>
<div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
</div>
<div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">E-mail:</span> burcak.celik#renunion.com
</div>
<div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Website:</span> http://renunion.com
</div>
<div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
</div>
</div>
</div>
</td>
</tr>
</table>
Instead of using float:left, use table instead. Outlook does not really handle float pretty well. Note that I added an extra <td></td> to create extra margin, feel free to add more for extra spacing.
Edit: Fixed the vertical colorline in Outlook. Also used a table for this to make it.
Related
I made an invoice which is composed of a table inside a div.
The div has a background image.
On regular screen view, the background for the invoice is working well.
See screen view:
See screen view
However on print preview, the div background is hidden by the table.
See print view
How can I make the print preview like what I see on the screen? I don't want the table to hide the div background image.
HTML:
<div class="invoices">
<div ng-repeat="table in invoicesTables">
<div class="header row"><br>
<div style="margin-bottom: 20px;" class="col-xs-12">
<img src="src/print_statement.PNG" alt="">
</div>
<div class="col-xs-4">
<h5>Customer: <strong style="font-size: 12pt">{{client.Name}}</strong></h5>
</div>
<div class="col-xs-4">
<h5 class="invoiceNumber">Invoice No.: <strong style="font-size: 13pt; color:red">{{table.invoiceNumber}}</strong></h5>
</div>
<div class="col-xs-3">
<h5>
<span>Date: </span><strong style="font-size: 12pt;">{{today | date: fullDate}}</strong>
<!-- <span style="float:left">From: </span><strong style="font-size: 12pt; float:right;">{{table.startDate | date: fullDate}}</strong>
</br></br>
<span style="float:left">Till: </span><strong style="font-size: 12pt; float:right;">{{table.endDate | date: fullDate}}</strong> -->
</h5>
</div>
</div>
<div class="invoicebg">
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Delivery No.</th>
<th colspan="2">Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in table.tableInvoices | orderBy : '-Date' | reverse ">
<td>{{i.Date | date: fullDate}}</td>
<td>{{i.Id}}</td>
<td colspan="2">{{i.Name}}</td>
<td>{{i.Amount | number : 2}}$</td>
</tr>
</tbody>
</table>
<div ng-style="emptySpaces[$index]"></div>
<div style="font-weight:bold" class="tfoot row">
<div class="col-xs-3" style="border-top:2px solid black;">
أو ما بعادله بالليرة اللبنانية
</div>
<div class="col-xs-7" style="border-top:2px solid black; background-color:lightgray;">
{{table.totalInLetters}} Dollars <span style="float:right;">فقط</span>
</div>
<div class="col-xs-2" style="border:2px solid black;">
{{table.total | number: 2}}$
</div>
</div>
</div>
</div>
CSS:
.invoicebg{
-webkit-print-color-adjust: exact;
background: url('../src/invoicewatermark.png');
background-repeat: no-repeat;
background-size:contain;
background-position:center ;
}
Thank you
Try this, put in your css background:none !important to your table, if doesn't work also try put that property to tr and td too and tell us how did it go
Try adding this in CSS file:
.table {
background-color:rgba(0, 0, 0, 0);
}
Is it possible to use flexbox to do something like in this example? Basically Id like to flip elements which are in a column to be in a row when viewed in mobile. How would you do this?
<p> Desktop:</p>
<table style="height: 52px;" width="331">
<tbody>
<tr>
<td style="width: 103.533px;">image-icon1</td>
<td style="width: 103.533px;">image-icon2</td>
<td style="width: 103.533px;">image-icon3</td>
</tr>
<tr>
<td style="width: 103.533px;">Text1</td>
<td style="width: 103.533px;">Text2</td>
<td style="width: 103.533px;">Text3</td>
</tr>
</tbody>
</table>
<p> Mobile:</p>
<table style="height: 71px;" width="189">
<tbody>
<tr>
<td style="width: 87.1px;">image-icon1</td>
<td style="width: 87.1px;">Text1</td>
</tr>
<tr>
<td style="width: 87.1px;">image-icon2</td>
<td style="width: 87.1px;">Text2</td>
</tr>
<tr>
<td style="width: 87.1px;">image-icon3</td>
<td style="width: 87.1px;">Text3</td>
</tr>
</tbody>
</table>
Yes, its possible
Check below example.
I am using CSS media query #media(max-width:768px) to check whether the width of screen is less than 768px(can be any value less than this).
Depending on that, I am setting the direction of flex children to column, so that the children can stack on top of each other.
Along with that, on mobile screen, I am also setting, the display of inner containers(.sec class) to flex,
<div class="sec">
<div class="img">Image</div>
<div class="text">
Text
</div>
</div>
So that, its children will align itself in row.
.container {
display: flex;
flex-direction: row;/* default value*/
}
.text,.img{
padding:10px;
}
.sec {
flex: 1;
background-color: wheat;
padding: 5px;
border: 1px solid black;
text-align: center;
}
#media(max-width:768px) { /* can be anything less than this*/
.container {
flex-direction: column;
}
.sec {
display: flex;
flex-direction: row;/* default value*/
}
}
<div class="container">
<div class="sec">
<div class="img">Image</div>
<div class="text">
Text
</div>
</div>
<div class="sec">
<div class="img">Image</div>
<div class="text">
Text
</div>
</div> <div class="sec">
<div class="img">Image</div>
<div class="text">
Text
</div>
</div> <div class="sec">
<div class="img">Image</div>
<div class="text">
Text
</div>
</div> <div class="sec">
<div class="img">Image</div>
<div class="text">
Text
</div>
</div> <div class="sec">
<div class="img">Image</div>
<div class="text">
Text
</div>
</div> <div class="sec">
<div class="img">Image</div>
<div class="text">
Text
</div>
</div>
</div>
I am trying to transfer a table into a set of floating divs and I can't seem to get it. How can I make .div1 and .div2 behave like .td1 and .td2?
UPDATED (also replaced prior icon with image to show more clearly the issue.
Fiddle showing how it SHOULD work
table (before)
<table>
<img src="http://placehold.it/60x60">
</td>
<td class="td2" style="padding-left: 8px">
<h4>
<strong>
Title
</strong>
</h4>
<span>
Here is come placeholder Text
</span>
</td>
Fiddle showing how it doesn't work with divs
divs (after? Not working)
<div class="div_wrapper" style="display:inline-block">
<div class="div1" style="width: 62px; vertical-align: top; padding-top:5px">
<img src="http://placehold.it/60x60">
</div>
<div class="div2" style="padding-left: 8px">
<h4>
<strong>
Title
</strong>
</h4>
<span>
Here is come placeholder Text
</span>
</div>
In that case you can use float.
http://jsfiddle.net/n69aro2x/1/
Here is the code :-
<div class="div_wrapper" style="display:inline-block">
<div class="div1" style="width: 62px; vertical-align: top; padding-top:5px; float:left">
<img src="http://placehold.it/60x60">
</div>
<div class="div2" style="padding-left: 8px; float:left;">
<h4>
<strong>
Title
</strong>
</h4>
<span>
Here is come placeholder Text
</span>
</div>
</div>
</div>
You can use margin to align text :-
<div class="form-group" style="display:inline-block">
<div class="div1" style="width: 33px; vertical-align: top; padding-top:5px">
<i class="fa fa-cog" style="font-size: 36px"></i>
</div>
<div class="div2" style="padding-left: 8px">
<h4>
<strong style="margin-left:30px;">
Title
</strong>
</h4>
<br/>
<span style="margin-left:30px;">
Here is come placeholder Text
</span>
</div>
</div>
</div>
hi the below is given the using table and using div's both demo code
here is the demo code using table
Dmo code using table
<table>
<tr>
<td class="td1" width= "33" style="vertical-align: top; padding-top:5px">
<i class="fa fa-cog " style="font-size: 36px"></i>
</td>
<td class="td2" style="padding-left: 8px">
<h4>
<strong>
Title
</strong>
</h4>
<br/>
<span>
Here is come placeholder Text
</span>
</td>
</tr>
</table>
here is the demo code made using div's
Demo code made using div's
<div class="form-group" style="display:inline-block">
<div class="div1" style="width: 33px; vertical-align: top; padding-top:13px">
<i class="fa fa-cog" style="font-size: 36px"></i>
</div>
<div class="table_wrapper_div">
<div class="div2" style="padding-left: 53px;">
<h4><strong>Title</strong></h4><br/>
<span>Here is come placeholder Text</span>
</div>
</div>
I have created a jsfiddle here:
http://jsfiddle.net/sawaira/owkvq9bo/8/
<table>
<tr>
<td class="navbar-text">RunAs:</td>
<td>
<input type="text" id="RunAs" class="form-control" value="" onchange="onchangeRunAs()" onkeypress="searchKeyPress(event)" />
</td>
<td>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text">
</li>
<li>
Sign out
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="float:left; background-color:#222222; height:100%; width:70px; position:fixed;">
<br />
<center><img src="../../Content/images/.png" title="abc" /></center><br /><br />
<center><img src="../../Content/images/time.png" title="adfa-Balance" /></center><r />
/>
/>
</div>
</div>
<div class="container body-content" id="content" style="margin-left:70px;width:1700px">
<table cellpadding="0">
<tr valign="bottom">
<td><img src="../../Content/images/cal48.png"></td>
<td><h2><span class="label label-primary">My Personal Dashboard</span></h2></td>
</tr>
</table>
<body>
<div >
<!-- This is the HTML element that will be used to render the KeyLines component -->
<div id="page" class="pagestyle">
</div>
<div style="position:relative;height:700px; width:1500px;">
<div id="loading" style="position:absolute;height:700px; width:1200px;">
<marquee id="loading-image" behavior="alternate" scrollamount="30">Initializing</marquee>
</div>
<div id="kl" style="position:relative;height:700px; width:1200px;float:left;border: 2px solid #0094ff;overflow:hidden" class="listControl" >
<div style="clear:both;"></div>
</div>
Essentially, on scrolling the blue borders overlap with the nav bar. I do not want this to happen, but not sure what is the cause.
I cannot change the height/width to be auto, as it has to meet some requirements.Otherwise the page does not display the contents properly.
All help will be greatly appreciated.
I have html script as below
<header>
<div id="header">
<table class="headertable">
<tr>
<td>
<table class="headertable">
<tr>
<td colspan="2">
<div id="site-title" class="site-title">
<img src="~/Images/site-title.gif" alt="site-title", title="site-title" id="img-site-title" style="display:block" />
</div>
</td>
</tr>
<tr>
<td>
<div id="fullbannerad" class="fullbannerad">
<img src="~/Images/fullbanner.gif" alt="fullbannerad", title="fullbannerad" id="img-fullbannerad" />
</div>
</td>
<td>
<div id="halfbannerad" class="halfbannerad">
<img src="~/Images/halfbanner.gif" alt="halfbannerad", title="halfbannerad" id="img-halfbannerad" />
</div>
</td>
</tr>
</table>
</td>
<td>
<div class="site-logo">
<img src="~/Images/site-logo.gif" alt="site-logo", title="site-logo" id="img-site-logo" />
</div>
</td>
</tr>
</table>
</div>
</header>
below is the css
table.headertable {
border-spacing: 0;
border-collapse:collapse;}
.headertable td {
padding:0;}
There is a space added between td & table(nested table) elements to the page in the code below (this I checked in chrome debugger)
<td>
<table class="headertable">
How can I resolve this issue? Please suggest.
Extra whitepsace in your document should be ignored by the browser. If you having problems with your page layout, it won't be due to extra spaces in that position.
I resolved this issue by making use of nested divs with float property. HTML5 does not encourage nested tables for layout design. Ref to this link for more details. Thanks Jennifer, you made my day.
Below is my code changes
<div id="header" class="clearfix">
<div id="sitetitle" style="float:left">
<a href="/Publication/Config/title">
<img src="/images/site-title.gif" alt="site-title" , title="site-title" id="img-site-title" />
</a>
</div>
<div id="logo" style="float:right">
<a href="/Publication/Config/logo">
<img src="/images/site-logo.gif" alt="site-logo" , title="site-logo" id="img-site-logo" />
</a>
</div>
<div id="bannerad" style="float:left">
<a href="/Publication/Config/fullbanner">
<img src="/images/fullbanner.gif" alt="fullbannerad" , title="fullbannerad" id="img-fullbannerad" />
</a>
</div>
<div id="halfbannerad" style="float:right">
<a href="/Publication/Config/halfbanner">
<img src="/images/halfbanner.gif" alt="halfbannerad" , title="halfbannerad" id="img-halfbannerad" />
</a>
</div>
</div>