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>
Related
Looking to allocate most of the row space to line up with the container to the right column of a row. I've used
Column1
Column2
This seems to resolve the issue on some online HTML editors, but for some reason, it has no effect on the internal editor I'm using which is mainly focused on MarkDown / HTML / In-Line CSS
Is there a way that this can be done preferably using in-Line CSS?
<div class="main-container" style="display: flex;">
<div class="image-container">
<img
src="https://lh3.googleusercontent.com/coMv1dl31PCfEs6essJoEUwVryaqKHKQvENdZ_WYpN-PXa8Qfitkg3grQxIVN22W5A"
hspace="50" width="150" height="150">
</div>
<div class="content-container" style="width: 600px;">
<h3>Subject Title</h3>
<h4>Subject Description</h4>
<table>
<tr>
<td>
<p>
<center><span style="font-weight:bold">Sample Service</span></center>
</p>
</td>
<td>Sample Service Details Will be listed here!!!!!!!!!!!</td>
</tr>
<tr>
<td>
<p>
<center><span style="font-weight:bold">Contact Us</span></center>
</p>
</td>
<td style="padding-left: 20px;">
<ul style="padding-left: 15px; margin: 0;">
<li style="padding-bottom: 10px;">
Email Sample
</li>
<li><a>Skype: Sample Contact</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
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);
}
I would like my image to come right after my <p> tag in the same line. I tried to wrap them inside a <div> block with display:inline-block set but to no avail.
<div style="float:left; display:inline-block; ">
<span style="float:left;width: 50%;">
<p style="float:left; display:block;" class="sentiment">Sentiment</p>
</span>
<span style="float:right;width: 50%;">
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png" style="width:20px;height:20px;">
</span>
</div>
http://jsfiddle.net/BMv5u/59/
Try adding inline-block to each of the sub elements:
<div>
<p style="display:inline-block;" class="sentiment">Sentiment</p>
<img style="width:20px;height:20px;display:inline-block" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png">
</div>
You can use align property on the img. check the fiddle here
<p >
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png" ALIGN="right" alt="">
Sentiment
</p>
I've read some Q&A about centering some text inside a div but for some reason the examples I try are not working for me. I'm using some jquery-ui and jquery-mobile css libraries but I don't think that is my problem. The "blue button" seems to align vertically in the middle just fine. But why don't the two text columns?
Here is the jsfiddle link: http://jsfiddle.net/Thread7/tstwwt9p/
<br/><br/>
<div class="ui-grid-b" style="display: table;width: 100%;border-style: solid;">
<div class="ui-block-a" style="text-align:center;">
<button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
</div>
<div class="ui-block-b " style="text-align:center;display: table-cell;">Middle Column Text</div>
<div class="ui-block-c" style="text-align:center;">Sample Link Text</div>
</div>
You don't need to use display: table and table-cells to achieve vertical centering, although it is one way.
I find it simpler to set the height and line-height to the same value when dealing with small single line text, like this:
<div class="ui-grid-b" style="width: 100%;border-style: solid;">
<div class="ui-block-a" style="text-align:center;height:60px;line-height:60px;">
<button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
</div>
<div class="ui-block-b " style="text-align:center;height:60px;line-height:60px;">Middle Column Text</div>
<div class="ui-block-c" style="text-align:center;height:60px;line-height:60px;">Sample Link Text</div>
</div>
Try this:
<br/><br/>
<div class="ui-grid-b" style="display: table;width: 100%;border-style: solid;">
<div class="" style="text-align:center;">
<button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
</div>
<div class="" style="text-align:center;display: table-cell; vertical-align: middle;">Middle Column Text</div>
<div class="" style="display: table-cell;text-align: center;vertical-align: middle;">
Sample Link Text
</div>
</div>
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.