I'm creating a messenging website that look like Facebook Messenger as follow. The problem is that when user send a message that is shorter than 13 characters then the message box wrapped around will become longer than the message due to the sender's name above it.
Image of the problem
Here is the code:
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="background-color: #e4e6eb;border-radius: 20px;padding: 7px 10px 7px 10px;margin-top: 2px;">
<div style="color: black;">'.$row['body'].'</div>
</div>
</div>
Change the inner div into a span that is display: inline-block;. And move the styles of the outer div to the span. You can leave the margin.
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="margin-top: 2px;">
<span style="display: inline-block; padding: 7px 10px 7px 10px; color: black; background-color: #e4e6eb;border-radius: 20px;"> sas</span>
</div>
Related
So I've been trying to make a chatroom, and i want admins to be able to delete messages. I have made an img tag which should be inside and in the right side of the div, but its under and to the right side of the div. How should i do that?
HTML Code (snippet was weird, so try in a regular html file)
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;" > <!-- The img that is a problem -->
<br>
</div>
</div>
I believe you are looking for something like this:
<div style="display: flex; justify-content: space-between;">
<div>
<span style="color: red"><b>CONSOLE</b></span>
<span style="color: grey;">3/11 11.28</span> <br>
<span>Chat started</span>
</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" height="40px" width="40px" style="opacity: 0.7;">
</div>
This code uses css flexbox to create such positioning. I recommend you look into the flexbox more, as it will solve 90% of your positioning issues for you, and its usage is at the same time way less problematic than usage of floats. You could find more about the topic here: https://internetingishard.com/html-and-css/flexbox/
I would also recommend not to mix your markup and styling, and use css classes to apply styling to your elements instead. It will allow you to re-use styles without lots of duplication as your page gets more complex, and also allow you to keep your markup much cleaner and more readable.
you should use something like
display: inline-block
for the elements, you want to be in the same row.
or you can use something like
display: flex /*or inline-flex */
in the parent, div to do so.
if you decide to use flex you can see a nice guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm not sure that I got it right, but I guess you need one of these to solve your problem:
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</div>
<br>
</div>
</div>
or
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<span style="float: right;">
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</span>
<div style="width:100%;"> Chat startet</div>
<br>
</div>
</div>
If it helps or not, please let me know :)
i have a problem with 2 divs that have to show right next to each other with space between them. It has to be responsive ofc and the max-width can only be 600px while the min-width has to be 280px.
It actually works as intended when i open the html in the browser, but when i send it as a mail, the two divs are right next to each other, with the space being above the second div instead of between them. Also they are fixated to the left for some reason.
How it looks in the browser (and how it should look):
How it looks after being sent per mail:
So i dont really know why it doesnt work as intended..
Also sorry for all that code, but if you test it in a browser u can see, that it works perfectly fine , which it doesnt when used as a mail template..
<div style="background: url('http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/hintergrund.png'); max-width: 700px; margin-left: auto; margin-right: auto;">
<div class="layout two-col" style="Margin: 0 auto;max-width: 600px;min-width: 280px; width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;">
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>
<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">..........</p>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
</div>
<div style="Float: left; max-width: 40px; width: 40px; margin-left: auto; margin-right: auto;" align="center">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>
<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">.........</p>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
</div>
</div>
</div>
</div>
As #N. Ivanov said :
Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the table tag rather than divs.
So for those of you who must use tables in your HTML emails
, I have some information about how they perform across the board. I ran some tests and discovered that, while I couldn’t find a perfect solution, I did manage to collect some useful tips to make your tables behave for the most part.
Table Math, Meet Box-Model Math
So it turns out that when one places table widths, td widths, td padding and CSS padding into a blender, the results are quite chaotic. Inconsistent, to the say the least. Take, for example, the following table:
<table cellspacing="0" height="450" cellpadding="0" border="1px" width="400">
<tr height="100%">
<td width="100" border="1px" height="100%"></td>
<td width="300" border="1px" height="100%"></td>
</tr>
</table>
Just as intended, the resulting width of this table is 400 pixels and the width of the columns are 100 and 300 pixels:
But when some padding is added—via either CSS or HTML—the widths of the columns are compromised:
However, when table width is kissed good bye, the results are not unlike a CSS box model. If padding is added to the original example and the table widthis removed, the code looks like this:
<table cellspacing="0" height="450" cellpadding="10" border="1">
<tr>
<td width="80" height="100%" border="1"></td>
<td width="280" height="100%" border="1"></td>
</tr>
</table>
And, as intended, the resulting widths are correct for both the table and the columns:
But note how the td widths were reduced to accommodate the new padding. This is just like the CSS box model in which 100 pixels wide + 10 pixels padding = 120 pixels total.
**
Nested Tables
**
If a table is nested inside another, the aforementioned rules apply with the exception of a couple important variances:
Yahoo Mail (new), Gmail, Outlook 2007 and Eudora apply extra width to account for borders. But only when they are nested, as the parent table behaves appropriately.
Applying widths to td tags that also have CSS or HTML padding creates confusion across the board. Nearly every client renders the widths in its own unique fashion.
Even without any borders there are variances in width by 2–4 pixels for a nested table with two columns. My tests were inconclusive as to the rhyme and reason behind this unnatural phenomenon. Just know that pixel perfect isn’t an option (unless there is some hidden secret behind this).
source->
Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the <table> tag rather than divs. Further you should only use inline CSS and not use any classes for example bootstrap ones. Hope this helps!
I'm new to html/css and I'm trying to do an adaptive header for the website. I'm using padding-right with 5% for divs, but las div always goes to a new line and the parent div don't want to expand. I want parent div expand depending on the text in child divs. Also when I'm using padding in px, all works properly, but it loses adaptive part.
What am I doing wrong?
With padding in percents
With padding in pixels
HTML and CSS
button{
height:34px;
width:100%;
font-weight:bold;
border:none;
background-color:#fc592d;
color:#ffeded;
border-radius:4px;
}
<div style="width: 100%; background-color: rgb(44, 62, 80); float: left;">
<div style="width: 47.36%; height: auto; margin: auto;">
<div style="display: inline-block; float: left; padding-bottom: 4%; padding-top: 4%;">
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon1.png" alt="farkops">
<a class="href" href="#">One thing</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon2.png" alt="pricep">
<a class="href" href="#">Second</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img class="href" src="images/icon3.png" alt="otzivi">
<a class="href" href="#">Three</a>
</div>
<div style="display:inline-block;">
<img src="images/icon4.png" alt="works">
<a class="href" href="#">Fourth thing</a>
</div>
</div>
<div style="float: left; display: inline-block; margin-top: 1.24%; margin-left: 2%;">
<div style="">
<p style="margin: 0px; padding-bottom: 8px; font-weight: bold; font-size: 3vh;"><span>7 (905)</span> 639-29-03</p>
</div>
<div style="">
<button>Call</button>
</div>
</div>
</div>
</div>
UPD1:
When I add one new div, the previous one fits just right (the parent div expands as I want), but the new one goes to new line.
So I have a div with content inside that is pulled using the ng-repeat and am trying to put a border and all around it. The content could stretch 1, 4, or even 10 items as shown in image below. Is this even possible with using ng-repeat and if so, how? My code that generates this is:
<div class="claimedTable" style="background-color: yellow;">
<div ng-repeat="item in claimsSubmit" style="background-color: yellow; border-style: solid; border-width: 1px; box-shadow: 0 0 8px rgba(0,0,0,.5); border-radius: 2px;">
<div class="col-md-12" style="padding: 0;">
<span>service date:</span>
<span style="float: right; padding-right: 15px;">{{ item.fromDate }}</span>
</div>
<div class="col-md-12" style="padding: 0;">
<span>provider:</span>
<span style="margin-left: 60%;">{{ item.provider }}</span>
</div>
<div class="col-md-12" style="padding: 0;">
<span>amount:</span>
<span style="margin-left: 60%;">{{ item.amount }}</span>
</div>
</div>
</div>
What this currently produces is (notice the thick line at top, that is my border and such):
Actually, if I revise now and my code looks like (previously the background color was just checking what was being rendered in the view):
<div class="claimedTable" style="min-height: 400px; box-shadow: 0 0 8px rgba(0,0,0,.5); border-radius: 2px;">
<div ng-repeat="item in claimsSubmit">
<div class="col-md-12" style="padding: 0; padding-top: 25px;">
<span>service date:</span>
<span style="float: right; padding-right: 15px;">{{ item.fromDate }}</span>
</div>
<div class="col-md-12" style="padding: 0;">
<span>provider:</span>
<span style="margin-left: 60%;">{{ item.provider }}</span>
</div>
<div class="col-md-12" style="padding: 0;">
<span>amount:</span>
<span style="margin-left: 60%;">{{ item.amount }}</span>
</div>
</div>
</div>
Then I get this image to start because I specified a min-height:
But as I enter data and it exceeds, I get this over run as shown:
It seems that since I only specified a "minimum", that the border would grow. Why is this not true?
how to move the defie div left and the sales order div right......
i gave float property but not working.....
i wanted one div to touch extremely left and another div to move to the right....
providing my code below.....
http://jsfiddle.net/zbyLy/3/embedded/result/
<div style="padding-left: 41px; padding-top: 10px; float:left;">
<a class="" href="#">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<p style="margin-top: 5px; margin-bottom: 0px;">47657 Lakeview Blvd, Fremont CA 94538</p>
<p>Tel: 510-657-8981 <span style="padding-left: 18px;">wwww.abcdfg.com</span></p>
</div>
<div style="border: 1px solid red; width: 300px; float:left;">
<p style="color: #14486b; font-size: 18px; font-family: arial; font-wieght: bold; ">Sales Order</p>
<p style=>Customer No. ABC01</p>
<p style=>sales Order No. 100001</p>
<p style=>Est. Ship Date 2/24/2013</p>
</div>
<div style="border: 1px solid red; width: 300px; float:right;">
demo :http://jsfiddle.net/zbyLy/