I am trying to make signature in html for my Outlook mail.
The problem is that everything looks great in browser but in outlook is too wide.
This should look like in the browser.
Source code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="sig" style="min-width: 680px; min-height: 82px; line-height: 18px; padding: 24px 0 0 30px; font-family: Helvetica, Verdana, Arial, Sans-Serif; font-size: 12px; color: #999999;">
<img src="logo.jpg" alt="logo" style="float: left; border: none;" />
</a>
<div style="margin-left: 40px; padding-left: 20px;">
<span style="display: block; font-size:13px; color: #404040; margin-bottom: 3px;">Name Surnamek </span>
<span style="display: block; font-size:10px; color: #404040; margin-bottom: 3px;">TT Test </span>
</div>
<div style="padding-left: 0px;">
</br>
<strong><a title="TEST" style="color: #404040; text-decoration: none;">Company Name</a></strong>
<br /> tel.  +00 (0) 00 – 000 00 00 </br>fax. +00 (0) 00 – 000 00 00</br>
</br>
Lorem ipsum dolor sit amet</br>
Lorem ipsum dolor sit amet, </br>
Lorem ipsum dolor sit amet</br>
Lorem ipsum dolor sit amet</br>
Lorem ipsum dolor sit amet</br>
Lorem ipsum dolor sit amet</br>
</br>
</div>
<hr style="width: 680px; float: left;"></hr>
</br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>
</br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br>
</br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br>
</div>
</div>
<div style="clear:both"> </div>
</body>
</html>
Related
I feel like there's a simple way to do this, but I just can't think of/find a solution...
I have a <table> that that should scroll-x if it overflows (which it's expected to) The <td> elements are set to max-width: 300px. I want the text in the <td> to wrap ONLY AFTER the <td> has hit the max-width. Right now text is wrapping as soon as the <table> doesn't fit its parent <div>.
How can I make the <td> expand to its max width before the text wraps?
Here's a fiddle: https://jsfiddle.net/ds99unpz/2/
EDIT: to clarify...
If the td doesn't have to be 300px wide to fit the text on one line, I don't want it to be 300px. If the text is too long to fit in a 300px td, THEN I want the td to be 300px wide and the text to wrap.
I updated your JSFiddle. It coerces the tables and cells to act like block's and inline-block's, respectively. Then using a little white-space: nowrap; magic and forcing the table to overflow, we get the desired result. However, the cells aren't all the same height.
.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table{
height: 150px;
}
td {
max-width: 200px;
white-space:nowrap;
overflow-x: scroll;
}
<table class="table table-striped">
<tr>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
EDIT:,
Added style="white-space: nowrap" to <td>
HTML:
<table class="table table-striped">
<tr>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
CSS:
.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table{
height: 150px;
}
td {
max-width: 200px;
white-space:nowrap;
overflow-x: scroll;
}
Fiddle
Or all css
<table class="table table-striped">
<tr>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
CSS:
.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table{
height: 150px;
}
td {
max-width: 200px;
white-space:nowrap;
overflow-x: scroll;
}
Fiddle
I made a table, using bootstrap. I want to add text limitations. below is the html. The table and its limitations is working fine in chrome and firefox but now working in IE8+.
<table class="table table-striped table-condensed table-bordered dashboard-table">
<thead style="background-color: #F8DAC2; border-bottom: 3px solid #CA6A15; font-size: 12px">
<tr>
<th>Entity</th>
<th>Board Meeting/Other committees of the board</th>
<th>Date</th>
<th>Exceptional Items</th>
<th>Issues</th>
<th>Remarks</th>
<th>Respective Company's CEO/CFO's comment thereto</th>
<th>Approve/Reject Remarks</th>
</tr>
</thead>
<tbody class="text-justify" style="font-size: 12px; font-weight: bold; color: #000;">
<tr>
<th scope="row"> ABNL</th>
<td>Mark</td>
<td>2 Jul 2015</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><i class="fa fa-fw fa-check-circle-o" style="font-size: 20px; color: #007401"></i> Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
</tr>
<tr>
<th scope="row"> ABFNL</th>
<td>Mark</td>
<td>2 Jul 2015</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
</tr>
<tr>
<th scope="row"> ABFNL</th>
<td>Mark</td>
<td>2 Jul 2015</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
</tr>
</tbody>
</table>
and the css class for the same I have made. the original bootstraps I haven't changed.
.dashboard-table tbody tr td{
max-width: 200px ;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
IE does not work like that I found the answer or its a work around I don't know but you need to add a div tag inside like below
<tr>
<td scope="row"> ABNL </td>
<td>Mark</td>
<td style="width:70px">2 Jul 2015</td>
<td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
<td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
<td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
<td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
<td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i><div style="width: 85%; float: right">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</div></td>
</tr>
<tr>
I am trying to achieve a layout similar to the attached image. It looks fine and as how I want it when displayed in a browser, but when I test on a mobile/tablet device the spacing of the p tags ends up not correctly displayed- I assume this is due to me using hard coded widths in my span tags and the p tags taking up more than one line.
Is it possible to achieve the attached image layout in a responsive manner? If so how do I go about doing this?
I have tried using % and EM in place of px with similar results.
The HTML that I have written so far is:
<h2>Lorem Ipsum </h2>
<p>
<span style="display:inline-block; width: 50px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
</p>
<p>
<span style="display:inline-block; width: 100px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
</p>
</br>
<h4>
<span style="display:inline-block; width: 200px;"></span>
or
</h4>
</br>
<p>
<span style="display:inline-block; width: 50px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat
</p>
<p>
<span style="display:inline-block; width: 100px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
</p>
</br>
<h2>
<span style="display:inline-block; width: 550px;"></span>
Lorem Ipsum
</h2>
<p>
<span style="display:inline-block; width: 600px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
</p>
<p>
<span style="display:inline-block; width: 663px;"></span>
Lorem Ipsum
</p>
<p>
<span style="display:inline-block; width: 650px;"></span>
Lorem ipsum dolor sit amet
</p>
First of all, you better walk this way to achieve something similar to what you want:
.indent-1 {
margin-left: 2.5%;
}
.indent-2 {
margin-left: 5%;
}
.indent-3 {
margin-left: 7.5%;
}
.indent-4 {
margin-left: 10%;
}
.indent-5 {
margin-left: 12.5%;
}
.indent-6 {
margin-left: 15%;
}
.indent-7 {
margin-left: 17.5%;
}
.indent-8 {
margin-left: 20%;
}
.indent-9 {
margin-left: 22.5%;
}
<h2>Lorem Ipsum </h2>
<p class="indent-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<p class="indent-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h4 class="indent-3">or</h4>
<p class="indent-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat</p>
<p class="indent-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h2 class="indent-6">Lorem Ipsum</h2>
<p class="indent-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</p>
<p class="indent-8">Lorem Ipsum</p>
<p class="indent-9">Lorem ipsum dolor sit amet</p>
CodePen using LESS: http://codepen.io/anon/pen/MweYma
JSFiddle using CSS: https://jsfiddle.net/c80p3pyx/1/
If you need to make sure your paragraphs do not wrap, just add
p { white-space: nowrap; }
to your CSS. This way your paragraphs will always stay in one line, but lines that do not fit the screen width will cause the browser to show (or make available at least) a horizontal scrollbar, which in almost all cases you will want to avoid. The only other option on "too-long" paragraphs is to either shorten the text, or to use a smaller font.
I want to position my image button to the bottom-right in a table cell but when I insert more/less text I don't want the button to change position. How do I do that?
I don't really know how to do it but I'll post my current html code.
<table>
<tr>
<td>
<div>
<%--<umbraco:Item field="nyhet-1-text" runat="server" />--%>
<p><img src=""/></p>
<p><strong>News</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="../media/testImage.png" alt="test"/>
</div>
</td>
</tr>
/Kristian
You can use float:right; on the the .readMoreButton which will mean the button will always be stuck to the right had side of its parent container. It will be pushed down the page when the content grows.
.readMoreButton{
float:right;
}
<table>
<tr>
<td>
<div>
<p><img src=""/></p>
<p><strong>News</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="../media/testImage.png" alt="test"/>
</div>
</td>
</tr>
</table>
I have a structure which cannot be changed due to some reasons.Here is the structure:
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width: 200px; height: 200px; background: #f1f1f1">container</div>
I want to get this particular layout using CSS only, ie. no positions, negative margins etc. The HTML elements will remain in same flow - h1, p and div. Is it possible to do this?
This should work for you. The main thing is to put float: left on the left hand div.
<style type="text/css">
#wrapper {
width: 90%;
}
#container {
float: left;
width: 200px;
height: 150px;
background-color: #666;
margin: 0 10px 10px 0;
}
H1 {
font: bold 2em arial;
}
P {
background-color: #ccc;
}
</style>
<div id="wrapper">
<div id="container">#container</div>
<h1>Heading</h1>
<p>
Some text.
</p>
</div>
Example fiddle
Of course you can do that in CSS only! :)
I know this is an old question, but its a fun challenge. The trick is to create a pseudo element before the h1 that floats left to create the space for the container div.
I'm sure there are many other ways to do this...
div {
position:absolute;
top:0;
}
h1::before {
content:'';
float:left;
width:200px;
height:200px;
margin-left:20px;
}
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width:200px; height:200px; background:#f1f1f1">container</div>