I have got some HTML code from investing.com below:
<iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by Investing.com</span></td></tr></table>
The output is look like the picture below:
enter image description here
And I would like to add css to make the background like below:
Rounded rectangle, 30 opacity with light green, maybe 10 px for margins
enter image description here
Can anybody help me. I am new for html and css. Thank you very much.
Lawrence
just add wrapping div and css class .frame {} with colored border
.frame {
display: inline-block;
border: 30px solid ;
border-color: rgba(200,255,200,0.6);
border-radius: 30px;
margin: 10px;
}
<div class="frame"><iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by Investing.com</span></td></tr></table></div>
<style>
.frame {
display: inline-block;
border: 30px solid ;
border-color: rgba(200,255,200,0.6);
border-radius: 30px;
margin: 10px;
}
</style>
<div class="frame"><iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by Investing.com</span></td></tr></table></div>
I suggest you to put the iframe to a div. In this example .iframe-container. So the HTML will look like this:
<div class="iframe-container">
<iframe frameborder="0" height="340" width="210" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe>
</div>
<br />
<table width="197">
<tr>
<td>
<span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by Investing.com
</span>
</td>
</tr>
</table>
Please note that I changed the with and height of the iframe since the form it was containing, was not matched with the initial attributes. You can reset it if you'd like.
Then write some CSS as below:
.iframe-container {
display: inline-block;
margin: 30px;
padding: 30px;
background: rgba(0, 255, 0, .3);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
iframe {
margin: 0;
padding: 0;
background: white;
}
See the result at jsFiddle.
Sorry! I know that is my problem that I tried many times to combine those HTML and css together, but doesn't work.
My purpose is only want to have "a batch of code" to paste into the website.
Thank you for your concern.
Related
I'm trying to apply responsive design in sendGrid. When I preview it in the website preview it is working, but when I send the test email and view it on mobile, I see that the #media screen has not been applied. Does anyone know what could be happening?
{{#if rewardData.deals.[0].coupon}}
<style>
#media screen and (max-width:300px) {
.teste {
width: 100% !important;
}
.firstDiv {
display: inline-block !important;
}
}
</style>
<div class="firstDiv" style="display: flex;
align-items: center;
border: 1px solid #D9D9D9;
border-radius: 8.49px;
padding: 16px;
margin: 35px 35px 25px 28px;">
<div class="teste" style="text-align:left; display: inline-block; margin-right: 16px">
<img class="max-width" style="border-radius: 8px" data-proportionally-constrained="true" data-responsive="false" src="{{rewardData.deals.[0].wideBanner}}" alt="Banner da recompensa">
</div>
<div class="teste" style="display: inline-block;">
<div style="display: flex; align-items: center; margin-bottom: 14px">
<img style="border-radius: 8px; margin-right: 8px" width="32" src="{{rewardData.deals.[0].icon}}" alt="Logo da recompensa">
<p style="display: inline-block; vertical-align: super">{{rewardData.deals.[0].title}}</p><br>
</div>
<b style="font-size: 12px; text-align: left; color: #2B332E">{{rewardData.deals.[0].shortDescription}}</b><br><br>
<b style="font-size: 12px; text-align: left;">Resgatar recompensa</b>
</div>
</div>
<div style="font-family: inherit; text-align: inherit; color: #000000; font-family: helvetica, monospace; font-size: 14px; margin-bottom: 50px; margin-top: 25px; margin-bottom: 25px; padding: 0px 40px">
<img class="max-width" border="0" style="color: #000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; vertical-align: bottom;" width="16" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/92d7128873c0e80b/6ee5ec4b-aaad-46cb-9c96-d5d61fb7231d/72x72.png">
<strong style="padding-left: 5px">Como usar minha recompensa?</strong><br><br>
<div style="line-height: 18px">
{{rewardData.deals.[0].description}}
<b>Seu voucher tem validade de até 30 dias para ser usado.</b>
</div>
</div>
{{/if}}
Many email clients do not support #media statements.
The website preview is a useful tool to preview your work, however it cannot show how an email will render across different mail clients.
Is there a way you can achieve your responsivenice without a media query?
Many mobiles are more than 300px wide, so try increasing the max-width from 300 to about 450.
Otherwise, take note of which email client you sent to and whether it supports media queries: https://www.caniemail.com/features/css-at-media/
There's quite a lot of code you use that is not supported. Email has an added layer or two to web design, in that email clients only accept a subset of HTML & CSS - more akin to HTML4 and CSS2, but there are lots of exceptions.
So, it may also not be working because flex is not supported, or align-items (flex is more widely supported, but all of the other parts of flexbox like align-items are very poorly supported).
I'd suggest you take a totally different approach and you'd need to research how to do a responsive HTML email as the topic is much too large for one question.
I'm trying to put a banner image (with transparent section) in a div, over a gradient background that I can change dynamically, and then overlay a table on top of it all.
<div style="margin: 0; padding: 0; width: 796px; position: relative; ">
<img src="LeftSlice.gif" style="margin: 0; padding: 0; position: relative; float: left;">
<div style="margin: 0; padding: 0;
background: -webkit-linear-gradient(white, blue);
background: -o-linear-gradient(white, blue);
background: -moz-linear-gradient(white, blue);
background: linear-gradient(white, blue);
">
<img src="MiddleSlice2.gif" style="margin: 0; padding: 0; position: relative; float: left; z-index: 250; ">
</div>
<img src="RightSlice.gif" style="margin: 0; padding: 0; position: relative; float: left; ">
<table style="padding: 0 20px; width: 796px; position: absolute; left:10px; top:10px; z-index: 500 " >
<tr>
<td valign="bottom" align="left"><img src="IFFUlogo.gif" height="80px" width="200px" ></td>
<td valign="top" align="right">About Us | Register | Login</td>
</tr>
<tr>
<td colspan="2" valign="bottom" align="center" style="padding: 30px 0 0 0; color: white; "><h1>Custer County District High School</h1></td>
</tr>
</table>
</div>
I'm getting no gradient (body bg is showing under transparent portion of the banner .gif)
When I look at the element in Firebug, I get this:
element.style {
background: linear-gradient(#FFFFFF, #0000FF) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
}
I don't think we are allowed to post URLs, but if so, I can do so.
Looks like everything inside your divs is either floating or position:absolute. This will cause the divs to collapse in on themselves, so that you can't see the background. Anytime you float something inside of a container that you want to expand to contain its contents, you either need to insert a clear like this:
<div id="myContainer" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
<div style="clear:left;"></div>
</div>
Or better yet, don't do that, and use a Clearfix instead (See http://nicolasgallagher.com/micro-clearfix-hack/ for accompanying css):
<div id="myContainer" class="cf" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
</div>
For position:absolute, neither option will work, you need to specify a height for the parent in this case.
I tested your CSS gradient code and it works. I see the problem is in the float: left of the image inside the div tag with the gradient background but I don't know what output you wish to see because the image files are not available. Maybe you can post it clearly.
I'm a little new to coding and I've found these boards really helpful over the last few weeks but I've come across a problem that other posts couldn't help me with, so here goes:
I have a number of divs within one rectangle div, 880px across. The left aligned divs are working perfectly but the floated right div, a video 560px across called #shopvid_2013_01 just won't line up right.
I want it so that the #shopvid_2013_01 div lines up exactly beside the #shop_13_01 div, but instead when I preview it on Firefox it seems to be right underneath another div I have and won't move no matter what margin-top or padding-top I use. I tried adding display:block and overflow:hidden as I read on other posts that might help, but to no avail.
Any help would be appreciated!
I've included my relevant html and css:
HTML
<div id="shop_13">
<div id="shop_13_01">
<div id="shop_13_text_01">
<div id="shop_smlheading">
<p><b>West Cork Rally 2013</b></p>
</div>
<div id="shop_p_13">
<p>Our highlights video from a cracking weekend in Clonakilty.</p>
</div>
<div id="buy_shop_01">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="6D49SM33FHD8U">
<input type="image" src="01 Images/buy_now_price.png" border="0" name="submit" alt="Buy Now">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
</div>
<div class="shopvid_2013_01">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ozXu2-Zf5B0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
#shop_13 {
width:880px;
}
#shop_13_01 {
width: 320px;
height:315px;
margin:30px 0 0 0;
background-color:#E9E9E9;
float:left;
}
#shop_13_text_01 {
font-family: "Arial", sans-serif;
width:240px;
font-size:13px;
line-height:1.4em;
}
#shop_smlheading {
padding: 5px 0 0 20px;
font-size:15px;
}
#shop_p_13 {
font-family: "Arial", sans-serif;
width:240px;
font-size:13px;
line-height:1.4em;
margin: -15px 0 0 20px;
float:left;
}
#buy_shop_01 {
padding: 100px 0 0 0;
float:left;
}
#shopvid_2013_01 {
width: 560px;
height:315px;
float: right;
margin-top: 30px;
display:block;
overflow:hidden;
}
It seems that you are referencing shopvid_2013_01 as an ID rather than a CLASS. Try this:
.shopvid_2013_01 {
width: 560px;
height:315px;
float: right;
margin-top: 30px;
display:block;
overflow:hidden;
}
http://jsfiddle.net/gGtPK/
I have an asp page where I am trying to align in center. The following is the specific line,
<td style="height: 50px; background-color: #ffffe0; text-align: center; ">
This code is working fine in IE, but in FF and chrome, the text is aligned in left. If I change the same code as
<td style="height: 50px; background-color: #ffffe0; text-align: -moz-center; ">
Then the alignment is working only in FF. IE and chrome fails :(. Can anyone tell me how to solve this issue ?
UPDATED:
The whole table structure looks like this,
<table style="width: 900px; height: 500px; background-color: gray;">
<tbody>
<tr>
<td style="height: 70px; vertical-align: middle; background-color: #fffff0; text-align: center !important; width: 160px;">
<div id="abc" style="height:40px;width:80px;text-align: center !important ;left: 0px; position: relative; top: 0px" onscroll="JavaScript:document.getElementById(somejavascrpt)'">
<input id="button" type="image" style="height:40px;width:60px;border-width:0px;z-index: 104; left: 4px; text-align: center !important position: absolute; top: 2px" src="../images/help.png" name="help">
</div>
</td>
use both text-align: center; and text-align: -moz-center;
<td style="height: 50px; background-color: #ffffe0;
text-align: -moz-center;text-align: center; ">
Edit 1
You can also try
<td style="height: 50px; background-color: #ffffe0;text-align: center!important;">
Edit 2
You can use fire bug and see what rule is applied on your td
Some link how to use firebug
http://www.studiopress.com/tips/using-firebug.htm
http://net.tutsplus.com/tutorials/other/10-reasons-why-you-should-be-using-firebug/
If it doesn't work for you, you have some other rule somewhere else that is overriding your style. Text-align is perfectly all-browser-friendly.
I'd suggest two things:
stop using inline styles. Styling doesn't have a place in your html, it should be defined in a separate file.
use webdeveloper tools in your browser to find out which rules apply to your TD and make sure you've defined only one rule
There may be different ways to do this. One of the ways is to use left margin. Unless your position is relative, you may use this. For example-
style="margin:0 0 0 100px"
Try using html attribute.
<td align="center" style="height: 50px; background-color: #ffffe0;">
I am new to coding HTML/CSS but I have a pretty good grasp so far. I have spent the last few hours trying to get my code side by side but it always remains stacked. My code is
<div class="api" style="float:left;">
<a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
<div>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
And my CSS is,
.api {
margin: 0 auto;
margin-top: 1em;
max-width: 700px;
padding: 1em;
background-color: #e2e2e2;
border: 1px solid #C9C9C9;
box-shadow: 0 0 2px #C9C9C9;
-moz-box-shadow: 0 0 2px #C9C9C9;
-webkit-box-shadow: 0 0 2px #C9C9C9;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
}
If you tell me what I am missing in order to get the info displayed side by side I would greatly appreciate it. If you have any other code cleanups that you can point out that would be great also but not needed.
EDIT:
Thank you for all your help guys, I have tried both Watson and Pete's answers but sadly they are not working. I took some screenshots of what it is without your code and with your code. You can find them here, https://dl.dropbox.com/u/11217802/sidebyside.png
I have also been able to get it working but I am trying to avoid as much inline styling as possible and I believe that I have pointless tags and way too many <div> for this small project.
<div class="api">
<div>
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:100%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
</td>
</div>
<div style="float: left;">
<div class="appbrain-app">
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' 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>
As far as the CSS, that did not change from what I posted orginally.
Thanks again Grady
try this:
.api a, .api div, .api img {
float: left;
}
and a tip: you should indent your code, so the child nodes are inside the parent nodes, like:
<div>
<a>Example</a>
<img>
<div>
<a>Example</a>
</div>
</div>
sibling nodes (when one tag is not inside another) should be indented the same amount.
looking at your code you have only floated the containing div, all the divs inside it are still block elements, if you want these to be side by side, you can do one of the following:
change them to inline elements .api div {display:inline;}
change them to inline-block elements .api div {display:inline-block;}
float them left .api div {float:left;}
EDIT
Having looked at your edit and tried your code in jsfiddle, the problem is the javascript is creating a lot of extra divs. I have changed your code layout to get things side by side:
http://jsfiddle.net/xFu4Z/1/
html
<div class="api">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play" />
</div>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'></a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
CSS
.api,
.appbrain-app {float:left;}
Please note that you will need to make sure the widths of .api and .appbrain-app added together don't exceed the width of the container they are in - I just noticed that on your original styles you have set a max-width of 700px which means that it is probably going to push the .appbrain-app div down a line
I restructured your markup:
<style>.api {
margin: 0 auto;
margin-top: 1em;
max-width: 700px;
min-width: 300px;
padding: 1em;
background-color: #e2e2e2;
border: 1px solid #C9C9C9;
box-shadow: 0 0 2px #C9C9C9;
-moz-box-shadow: 0 0 2px #C9C9C9;
-webkit-box-shadow: 0 0 2px #C9C9C9;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
}
.appbrain-app { float: right; width: 48%; border: 1px solid red; }
</style>
<div class="api" style="float:left;">
<div>
<a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>