I tried many times on sending an html with style email to gmail, but it always destroy the style it expected look like in normal HTML. Anyone could kindly help me to convert it to gmail capable that must look exactly the same it should be? Thank you.
<div style="display: flex;justify-content: center;">
<div class="container" style="font-family: 'Manrope-Regular';max-width: 600px;border-style: solid;border-color: #7E7E7E;position: relative;height: fit-content;border-width: 1px;">
<img class="top-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 842 (1).png" style="max-width: 255px;position: absolute;right: 0;">
<img class="bottom-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 841.png" style="position: absolute;left: 0;bottom: 0;max-width: 270px;">
<div class="logo" style="font-family: 'Manrope-Regular';">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/08030440/mobile-menu-logo.png" style="margin: 41px auto;display: block;">
</div>
<div class="content" style="font-family: 'Manrope-Regular';margin: 0 100px;">
<p class="header" style="font-family: 'Manrope-Regular';">Hi [first_name] [last_name],</p>
<p class="para" style="font-family: 'Manrope-Regular';">Welcome to ChatSmart! Experience the powerful ChatSmart features to let you easily reach your customers. Not only increase customers loyalty through broadcast messages, but also lower abandon cart rate by supporting eCommerce platforms. Create your sales revenue by 24 / 7 answer customers' enquiries!
</p>
<p class="para" style="font-family: 'Manrope-Regular';">
<strong>Some popular resources which would be useful for you:</strong>
</p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">How to login & connect WhatsApp? (Cantonese)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">How to start the chat with your customer? (Cantonese)</span></li>
</ul>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">
For more support, you may find below：
</p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">ChatSmart User Guide (Traditional Chinese)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Technical Support</span></li>
</ul>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">Click below button to start your journey in ChatSmart!</p>
<a class="button button-text" href="[link]" style="justify-content: center;display: flex;">
<img style="max-width: 206px;" src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/21125343/login.png"/>
</a>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">More super practical content is on the way, stay tuned!</p>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">Thanks,</p>
<br>
<p class="signature" style="font-family: 'Manrope-Regular';font-weight: bold;">
ChatSmart Team<br>
Your Best WhatsApp Marketing Platform
</p>
<br>
<div class="soscial" style="font-family: 'Manrope-Regular';">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06145810/Group-764.png" style="margin-right: 20px;">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06150156/1-Group%20766.png" style="margin-right: 20px;">
</div>
<br>
<div class="footer" style="font-family: 'Manrope-Regular';text-align: center;font-size: 8px;margin-bottom: 20px;">
©2021 ChatSmart, Inc. All rights reserved.
</div>
</div>
</div>
</div>
Updated: Included a version of style and head block.
<html>
<head>
<style>
#font-face {
font-family: 'Manrope-Regular';
src: url('https://saas-staging.chatsmart.io/font/Manrope-Regular.ttf') format("opentype");
}
p, div {
font-family: 'Manrope-Regular';
}
body{
display: flex;
justify-content: center;
}
.container {
max-width: 600px;
border-style: solid;
border-color: #7E7E7E;
position: relative;
height: fit-content;
border-width: 1px;
}
.top-bg {
max-width: 255px;
position: absolute;
right: 0;
}
.bottom-bg {
position: absolute;
left: 0;
bottom: 0;
max-width: 270px;
z-index: -1;
}
.logo img {
margin: 41px auto;
display: block;
}
.content {
margin: 0 100px;
}
a.button {
text-decoration: none;
}
.signature {
font-weight: bold;
}
.soscial img {
margin-right: 20px;
}
.footer {
text-align: center;
font-size: 8px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<img class="top-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 842 (1).png" />
<img class="bottom-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 841.png" />
<div class="logo">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/08030440/mobile-menu-logo.png" />
</div>
<div class="content">
<p class="header">Hi [first_name] [last_name],</p>
<p class="para">Welcome to ChatSmart! Experience the powerful ChatSmart features to let you easily reach your customers. Not only increase customers loyalty through broadcast messages, but also lower abandon cart rate by supporting eCommerce platforms. Create your sales revenue by 24 / 7 answer customers' enquiries!
</p>
<p class="para">
<strong>Some popular resources which would be useful for you:</strong>
</p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">How to login & connect WhatsApp? (Cantonese)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">How to start the chat with your customer? (Cantonese)</span></li>
</ul>
<br/>
<p class="para">
For more support, you may find below：
</p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">ChatSmart User Guide (Traditional Chinese)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Technical Support</span></li>
</ul>
<br/>
<p class="para">Click below button to start your journey in ChatSmart!</p>
<a class="button button-text" href="[link]" style="justify-content: center;display: flex;">
<img style="max-width: 206px;" src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/21125343/login.png"/>
</a>
<br/>
<p class="para">More super practical content is on the way, stay tuned!</p>
<br/>
<p class="para">Thanks,</p>
<br/>
<p class="signature">
ChatSmart Team<br/>
Your Best WhatsApp Marketing Platform
</p>
<br/>
<div class="soscial">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06145810/Group-764.png" />
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06150156/1-Group%20766.png" />
</div>
<br/>
<div class="footer">
©2021 ChatSmart, Inc. All rights reserved.
</div>
</div>
</div>
</body>
</html>
You need a complete redesign. You can't develop emails like websites, because there are lots of restrictions. For example, you need to write code inline, not rely on embedded CSS (within <style>...</style>); and things like divs and flexbox are temperamental - see caniemail.com.
Check out any HTML email template, or HTML email course, and then make sure you test in a variety of email clients on a variety of devices.
Related
I have a three column box in css, I need it to center on the page for the desktop and then stack the columns on top of each other in 600px or less. I have everything working except having it centered on the desktop view.
I have tried adding justify-content: relative, adding a wrapper align: center and a couple other lines of code that did not work. Any help is greatly appreciated.
Here is the code I currently have:
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 178px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<p align="center">
<font size="5" color="336699"><strong>Great American Song Contest</strong></font>
</p>
<p align="center">
<font size="3" color="a91e21"><strong>3 Easy Ways To Enter Your Songs</strong></font>
</p>
<div class="wrapper">
<div class="row">
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Form-Prepage.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-online.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Entry-Direct.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-email.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<img src="https://www.greatamericansong.com/newsite-backup/images/submit-mail.gif" alt="" width="178" height="158">
</p>
</div>
</div>
</div>
<div align="center"> <img src="//shield.sitelock.com/shield/greatamericansong.com" id="sl_shield_image" style="cursor: pointer;" alt="SiteLock" align="middle" />
<script id="sl_shield" type="text/javascript" src="//shield.sitelock.com/sitelock.js" language="javascript"></script>
</div>
<p align="center">
<p></p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
<p>
<font size="3" color="a91e21"><strong>2021 Rules & Entry:</strong></font>
</p>
<p>The Great American Song Contest is open to songwriters, lyricists & music composers worldwide.</p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
Apply a dedicated class to the parent of those columns (in my example: class="x"), use display: flex; and justify-content: center on that, and in the media query change it to flex-direction: column (t place them below each other) and align-items: center; (to center them). And forget the floats...
* {
box-sizing: border-box;
}
.column {
width: 178px;
}
.x {
display: flex;
justify-content: center;
}
#media screen and (max-width: 600px) {
.x {
flex-direction: column;
align-items: center;
}
}
<p align="center">
<font size="5" color="336699"><strong>Great American Song Contest</strong></font>
</p>
<p align="center">
<font size="3" color="a91e21"><strong>3 Easy Ways To Enter Your Songs</strong></font>
</p>
<div class="wrapper">
<div class="x">
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Form-Prepage.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-online.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Entry-Direct.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-email.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<img src="https://www.greatamericansong.com/newsite-backup/images/submit-mail.gif" alt="" width="178" height="158">
</p>
</div>
</div>
</div>
<div align="center"> <img src="//shield.sitelock.com/shield/greatamericansong.com" id="sl_shield_image" style="cursor: pointer;" alt="SiteLock" align="middle" />
<script id="sl_shield" type="text/javascript" src="//shield.sitelock.com/sitelock.js" language="javascript"></script>
</div>
<p align="center">
<p></p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
<p>
<font size="3" color="a91e21"><strong>2021 Rules & Entry:</strong></font>
</p>
<p>The Great American Song Contest is open to songwriters, lyricists & music composers worldwide.</p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
I need to make divs look like table data, I have used display: table-cell and display: table properties but i didn't get expected layout. I need each row to have same height.
please check below code
.publishers {
margin: 45px 0;
margin-right: 60px;
}
.publishers .col-xs-6:nth-child(odd) .publisher {
margin-right: -10px;
}
.publishers .col-xs-6:nth-child(even) .publisher {
margin-left: -10px;
}
.publishers .publisher {
background-color: #f1efef;
margin-bottom: 10px;
}
.publishers .publisher .media {
padding: 10px;
}
.publishers .publisher .media .media-left img {
width: 128px;
height: 128px;
}
.publishers .publisher .media .media-body h3 {
font-size: 30px;
font-weight: 400;
}
/***** my try *****/
.publishers{
display:table;
}
.publishers .publisher{
display: table-cell;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<section class="publishers">
<div class="row">
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="http://www.cengage.com
">
<img style=" height: auto;" src="Publishers/7726f4a3-b23d-4af1-879d-57da2a567bd1.jpg" alt="...">
</a>
</div>
<div class="media-body">
<a href="http://www.cengage.com
"><h3>Cengage</h3></a>
<p class="description">A company that delivers highly..
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="http://www.elsevier.com
">
<img style=" height: auto;" src="Publishers/b3723614-ea79-4b24-a9fb-ae0c1da9a3c4.png" alt="...">
</a>
</div>
<div class="media-body">
<a href="http://www.elsevier.com
"><h3>Elsevier </h3></a>
<p class="description">A world’s leading publisher of science and health information serves more than 30 million scientists, students and health and information professionals worldwide
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="http://eu.wiley.com/WileyCDA/Section/index.html
">
<img style=" height: auto;" src="Publishers/ff9e4261-36a1-4cd3-bf9c-c169ff8661eb.png" alt="...">
</a>
</div>
<div class="media-body">
<a href="http://eu.wiley.com/WileyCDA/Section/index.html
"><h3>WILEY</h3></a>
<p class="description">Wiley is a global publisher of print and electronic products, textbooks, and other educational materials, for students both undergraduate and postgraduate, specializing in scientific, technical, and medical books and journals; professional and consumer books and subscription services. Wiley has approximately 22,700 active titles and 400 journals, and publishes 2000 new titles in a variety of print and electronic formats each year
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="https://www.pearson.com/
">
<img style=" height: auto;" src="Publishers/d18fbae5-1587-4b06-a0e4-8b0b1ec4ab13.jpg" alt="...">
</a>
</div>
<div class="media-body">
<a href="https://www.pearson.com/
"><h3>Pearson</h3></a>
<p class="description">Global leader in educational publishing offers comprehensive range of educational programs, in all subjects, for every age and level of student, from preK-12 through higher education and on into professional life.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
.publishers .row {
display: flex;
}
If you don't need IE9 and below support you can use flex this by default uses align-items: stretch which makes all the children full height
If content is static then u can take height of longest div and assign to all.
If content is dynamic then:
$(document).ready(function() {
var maxHeight = -1;
$('.features').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.features').each(function() {
$(this).height(maxHeight);
});
});
You could loop through each of the .features, find the max then apply that height to all blocks of the same class.
$(document).ready(function() {
var blockHeights;
blockHeights = [];
$('.features').each(function() {
blockHeights.push($(this).height());
});
$('.features').height(Math.max.apply(Math, blockHeights));
});
If you load your content through ajax or some other method after document ready simply move this into a function and call that when ready.
Probably worth setting a height (or height:auto) on the block as a style incase java script is off or doesn't load correctly, just to ensure the content is always visible.
You were almost there. display:table works. The problem is that your bootstrap is adding float to your divs, which break the table. Add in your css float:none; and it will work. Jsfiddle for example : http://jsfiddle.net/42dy9aLm/
I have a layout that has a container div tag and some nested floating div tags. I'm using them in this manner to have two column effect (rather than do table cells). On the web page, everything renders fine. But when I print, the floating ones aren't showing up correctly. It's a sequence of 2 sets of container div/floating divs and then a full width div tag (no floating). Here's the code:
<div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;">
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Provider: </span>
Name here
</div>
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Location: </span>
Name<br/>
Street Address<br/>
City, State Zip<br/>
Phone
</div>
</div>
<div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;">
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Appointments:</span>
<br />
No appointments scheduled
</div>
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Care Team:</span>
<br />
Name Here
</div>
</div>
<div style="margin-bottom: 5px; padding: 5px; border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br />
No referrals available
</div>
As stated, everything renders correctly on the web page. Thanks to #avrahamcool I have it fixed so that the top border lines are showing up correctly. However, when I use IE9, I am getting what looks like the following:
Provider: Name here
Location: Name
Street Address
City, State Zip
Phone
Appointments:
No appointments scheduled
Care Team:
Name Here
Referrals:
No referrals available
It's working fine in Chrome. The provider/location and appointments/care team are split into two columns between the border lines when it's printed (and shows up fine on the screen)
I've completely recreated your markup, so I can work with it.
this is the result. (notice how beautiful this is?)
I've tested it in IE10, IE9, IE8, FF, Chrome.
also, printed from each one, and it works like a charm.
If you have to write your HTML & CSS combined (I don't see a reason for that.. but who am I to judge) I will try to help you apply my solution to your HTML.
So, the main Idea is to lose the float thing altogether, and use inline-block instead.
but, inline-block adds extra-spacing to the elements (caused by new-lines in the markup), causing 50% to be a little more than that, therefor making the columns not to fit in one row.
I've used one of many tricks to resolved that issue. by applying font-size:0; on the container, and reapplying font size on his children.
also, I had to verticaly-align:top; the columns.
so, to summarize, this is the end result.
New HTML markup
<div class="Container">
<div class="Column">
<span class="Header">Provider:</span>
<span>Name here</span>
</div>
<div class="Column">
<span class="Header">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div class="Container">
<div class="Column">
<span class="Header">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div class="Column">
<span class="Header">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div class="Container">
<span class="Header">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
New CSS
*
{
margin: 0;
padding: 0;
}
.Container
{
margin-bottom: 5px;
border-top: 1px solid #000000;
font-size: 0;
}
.Container *
{
font-size: medium;
}
.Container .Column
{
display: inline-block;
width: 50%;
vertical-align: top;
}
.Container .Header
{
font-weight: bold;
}
Edit:
for some reason, I've dropped your padding. so here is a fiddle with padding in the container (all the rest is the same as before)
Edit 2 inline-style
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
Inline-Style V2
so, its probably the font fix that doesn't work for you. It's hard for me to debug, because it's working fine for me. so lets try another approach.
this time, we will eliminate the spacing between columns by deleting the new line from the markup. try this new markup.
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
media="print" like this:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Doing this should make it look the same as web page
and yes depeding on the browser like isherwood said if that is what you are pointing at.
I've inline CSS like this. But the float is not working.
<div style='clear:both'>
<div style='display:block;float:right;margin:10px;width:200px'>
<img src = 'http://knowafest.co.in/images/logo.png' height='200px' width='200px'/>
</div>
</div>
I tested code in this page - http://test-knowafest.blogspot.in/2013/03/fuseout-2013-government-engineering.html
You can see the image next to post title. The image is not getting floated. I tried several combinations of paramaters in style, but it is not working. Can you anyone tell me where I went wrong.
It looks like below now
====================================
But I want it like below.
Here is the WORKING SOLUTION
The Code:
<div id="post-body-3682190942132900250" class="post-body entry-content">
<div style="clear: both; overflow: hidden; display: inline; background: none repeat scroll 0% 0% red;">
<div style="float:right;margin:10px;width:200px">
<img width="200px" height="200px" src="http://knowafest.co.in/images/logo.png">
</div>
</div>
<div style="display: table-cell;">
<!-- The New Addition is here -->
<div trbidi="on" style="text-align: left;" dir="ltr">
<div style="clear: both; text-align: center;" class="separator"></div>
<span id="fullpost"> This information is brought to you by <a target="_blank" href="http://knowafest.com/">www.knowafest.com</a> </span>
<br>
<hr>
<span id="fullpost"><span style="font-weight: bold;">Event:</span> Fuseout 2013 | Technical Fest
<br>
<br><span style="font-weight: bold;">Fuseout 2013 is Organised by:</span> Government Engineering College, Trivandrum, Kerala
<br>
<br><span style="font-weight: bold;">Fuseout 2013 dates:</span>
<br>Fest dates: 15th-17th March 2013
<br>Last Dates for Registration: Spot Registrations Open
<br>
<br><span style="font-weight: bold;"> Details:</span>
<br>Fuseout Is A Technical Fest Organised By The Electrical And Electronics Department Students Of Govt Engineering College Barton Hill ,Trivandrum As Part Of AAGNEYA'13 Aiming To Bring Together The Intellectual Minds Of Our Country In A Competition Like None Other.
<br>
<br><span style="font-weight: bold;">Fuseout 2013 Technical Events in Trivandrum :</span>
<br>Robotron
<br>Circuito Metego
<br>Scrap Maniac
<br>Wire-In
<br>
<br><span style="font-weight: bold;">Fuseout 2013 Co-ordinators Details:</span><span style="color: green;"><br>Leo K A<br>9995992755</span>
<br><span style="font-weight: bold;">How to reach Government Engineering College: </span>
<br>At Kanakakunnu Palace Grounds
<br>
<br><span style="font-weight: bold;">Fuseout 2013 Website: </span><a target="_blank" href="http://tinyurl.com/fuseout2">http://tinyurl.com/fuseout2</a>
<br><span style="font-weight: bold;">Fuseout 2013 Facebook Link: </span><a target="_blank" href="http://www.facebook.com/fuseout.aagneya"><img src="http://knowafest.co.in/images/icons/facebook.gif"></a>
<br><span style="font-weight: bold;">Fuseout 2013 Youtube Link: </span><a target="_blank" href="http://www.youtube.com/watch?v=TP4igb1dMdk"><img src="http://knowafest.co.in/images/icons/youtube.gif"></a>
<br>
<br>
<br><span style="font-weight: bold;">Fuseout 2013 Event Departments: </span>CSE, ECE, IT, EEE, Instrumentation, Mechanical, Energy, Arts</span>
</div>
</div>
<div style="clear: both;"></div>
</div>
I hope this serves your purpose.
You have problem with clear: both following you floating content:
<div style="clear: both; overflow: hidden; display: inline; background: none repeat scroll 0% 0% red;">
<div style="float:right;margin:10px;width:200px">
<img height="200px" src="http://knowafest.co.in/images/logo.png" width="200px">
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
Please remove it to get it worked as you wish (I hope).
<div style="clear: both; overflow: hidden; display: inline; background: none repeat scroll 0% 0% red;">
<div style="float:right;margin:10px;width:200px">
<img height="200px" src="http://knowafest.co.in/images/logo.png" width="200px">
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="text-align: center;">
</div>
*strong text*Maybe this is something that you want.
DEMO
You need to use the float:right style only on you image. Also check where you used the clear:both styling. That will mess with the alignment too.
<img src="http://knowafest.co.in/images/logo.png" width="95" height="84" style="float:right" /> <span id="fullpost">
I have a created a table that use simple JS and an API to pull in info about our Android App. We would like to have this code on multiple pages
<div class="api">
<div style="margin: 0 auto; max-width: 700px;">
<div style="float: left;">
<table style="background-color: #e7e7e27; border-color: #e2e2e2;">
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/<!---package name--->" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/Google_Play_Store_96.png" style="width:90px; border:0" alt="<!---Verbage--->" title="<!---Verbage--->">
</a>
</td>
</table>
</div>
<div style="float: left;">
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/<!---package name--->' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
Not the prettiest code but it does the job that I we are wanting. I would like to turn this into a plugin with a shortcode to reference it. I know that this is probably bigger then I expect and I have a good understanding of HTML and wordpress but this is the first plugin I have created.
Thanks,
Grady
A plugin to do this is fairly trivial since you are just echoing static data.
class My_App_Data {
function __construct() {
add_shortcode('app_data',array($this,'app_data_shortcode'));
}
function app_data_shortcode() { ?>
<div class="api">
<div style="margin: 0 auto; max-width: 700px;">
<div style="float: left;">
<table style="background-color: #e7e7e27; border-color: #e2e2e2;">
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/<!---package name--->" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/Google_Play_Store_96.png" style="width:90px; border:0" alt="<!---Verbage--->" title="<!---Verbage--->">
</a>
</td>
</table>
</div>
<div style="float: left;">
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/<!---package name--->' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'></a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div><?php
}
}
new My_App_data();
You can now use [app_data /] to display the markup.
You will need to construct a proper plugin header, and use a better name for the class :).
Reference
https://codex.wordpress.org/Writing_a_Plugin