I have this button that redirects correctly on the browser; however, whenever I put it on my email in Gmail, it doesn't redirect
<DIV style="TEXT-ALIGN: center">
<A style="FONT-SIZE: 14px;
FONT-FAMILY: Arial;
WIDTH: 100%;
COLOR: #fff;
TEXT-ALIGN: center;
DISPLAY: inline-block;
LINE-HEIGHT: 50px;
BACKGROUND-COLOR: #0070ba;
border-radius: 50px" href="[websitelinkhere}">
<STRONG>vérifiez votre compte </STRONG>
</A>
</DIV>
try now. it need to be html verified.
check every time in: https://validator.w3.org
<div style="text-align: center">
<a style="font-size: 14px;
font-family: Arial;
width: 100%;
color: #fff;
text-align: center;
display: inline-block;
line-height: 50px;
background-color: #0070ba;
border-radius: 50px" href="[websitelinkhere]">
<strong>vérifiez votre compte </strong>
</a>
</div>
Related
I'm new to html and css, but I'm trying to teach myself how to make a decent looking website. I've gotten to the footer portion of the website and I thought I created well since it looked as I wanted, but when I zoomed into the page, the elements in the footer all began overlapping with one another. Could someone help me out by showing me how to fix this issue. Any help is appreciated.
My current footer:
.footer {
background: #323132;
text-transform: uppercase;
width: 100%;
height: 350px;
color: white;
}
.footer a {
text-decoration: none;
color: #a2a4a7;
font-family: Arial,sans-serif;
font-size: 14px;
}
.vertical-right-1 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 20%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-2 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 45%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-3 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 70%;
box-shadow: 0.2px 0.2px;
}
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 10px 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div class="vertical-right-1">
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;">Need To Talk?</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div class="vertical-right-2">
</div>
<div style="float:right; margin: 0 auto; width: 330px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;"><strong>Sports</strong></p>
<p>Soccer</p>
<p>Basketball</p>
<p>NFL</p>
<p>Tennis</p>
</div>
<div class="vertical-right-3">
</div>
<div style="margin:0 auto; width:630px; padding:4px 0 0 0;">
<strong>
<p style="font-family: 'Cabin Condensed', sans-serif; font-size: 20px;">About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
<a href="#"><i class="fa fa-facebook"
style="padding: 25px;font-size: 30px; width: 80px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<!-- <a href="#"><i class="fa fa-twitter"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<a href="#"><i class="fa fa-instagram"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a> -->
</div>
As you can see, the lines are all overlapped, and it looks just wrong. If you view it in full screen mode it looks as it should.
Hope someone can lend a hand!
You're going to want to set up some breakpoints which will allow you to alter CSS for different screen sizes.
Also, I wouldn't use absolute and left to position elements on a page, unless in particular circumstances. What you want to do instead is use grid or flexbox, it will make life much easier in the future.
I am new to coding (so go easy on me) doing this project for fun and I'm pretty close to being complete but I can't seem to get rid of this 2-5 px white space dividing my header from the first section. See the screenshot below:
I set all element margins to 0 such as
* {
margin: 0
}
but this didn't help.
the following code uses tables with inline CSS. Can somebody help me!
table.t00 {
width: 640px;
margin: 0;
}
table.t00 th {
max-width: 630px;
max-height: 474px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
}
table.t01 tbody {
text-align: center;
color: #f1f1f1
}
table.t01 th {
width: 636px;
}
table.t02 {
width: 640px;
background-color: white
}
table.t02 tbody {
text-align: center;
width: 634px;
height: 291px;
}
table.t02 th {
width: 634px;
}
table.t03 {
width: 634px;
height: 320px;
}
table.t03 tbody {
text-align: center;
width: 634px;
height: 320px;
padding-top: 60px;
}
table.t03 th {
width: 634px;
padding-bottom: 40px;
}
table.t04 {
width: 640px;
height: 84px;
background-color: #052f66;
}
table.t04 tbody {
text-align: center;
}
<body>
<table class="t00">
<tbody>
<th style="margin: 0;">
<img
class="header-image"
src="victory-club header.jpg"
alt="header for victory clubs membership"
/>
</th>
</tbody>
</table>
<table class="t01">
<tbody>
<th>
<p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 28px; margin: 10px 0;">Your Member ID is:
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; margin: 0;">FL-9999999</h2>
<p style=" font-size: 14px;
font-style: italic; margin: 5px 0;">Please keep this for your records</h4>
</th>
</tbody>
</table>
<table class="t02">
<tbody>
<th>
<p style="padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center; width: 634px; margin: 25px 0px 0px 0px">
Member Benefits
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;">These are just some of the amazing benefits that come with your <br> Victory Clubs membership!</p>
<br>
<br>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive events and parties at local venues for Victory Clubs members only.</p>
<div style="background-color: white;
width: 634px;
height: 7px;"></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Deals and Savings at hundreds of retail and restaurant locations.
<div style="background-color: white;
width: 634px;
height: 7px;"
></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive Perks through your School.</p>
</div>
</th>
</tbody>
</table>
<table class="t03">
<tbody class="schedule">
<th>
<p style=" padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;">
Schedule Now!
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; margin: 0 59px;">Schedule and pass your initial drug test now so you can start enjoying all the perks and benefits your Victory Clubs membership has to offer.
</p>
<br>
<br>
<button style="display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 100px;
border: 1px solid;
color: white;
border-color: #dc1d40;
background-color: #dc1d40;">SHEDULE MY DRUG TEST</button>
<br>
<br>
<br>
<p style="color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px; margin: 0 59px;">
You’ll receive an email letting you know your free 90-day subscription has been activated once you pass your drug test.
</p>
<p style="color: #052f66;
text-align: center;
font-size: 16px; margin: 0 59px;">
<b> Keep up the great work!</b>
</p>
<br>
</th>
</tbody>
</table>
<table class="t04">
<tbody>
<th>
<ul style="padding: 20px;">
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">FB</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;"href="" target="_blank">Twitter</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Insta</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Youtube</a></li>
</ul>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
height: 32px;">© All Rights Reserved. Privacy Policy | Accessibility Policy | Terms & Conditions</p>
</th>
</tbody>
<table>
</body>
Try adding this code:
table.t00 th img {
display: block;
}
One thing about images is that they have a default display: inline-block which makes them leave margins around other elements ... putting block display eliminates this effect
Also try adding
table.t00 {
border-collapse: collapse;
}
instead of having separate which is the default behaviour
<table> have border-spacing and by default it's value is 2px..so change it to 0 ....
border-spacing: 0px;
for both of your tables...t00 and t01
table.t00 {
width: 640px;
margin: 0;
border-spacing: 0px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
border-spacing: 0px;
}
I create a template on Sendgrid as a standard email, I tested on Gmail in different devices, it works fine, until I try Outlook, it looks like all of my css, images are gone. So what is the root cause?
Here is my html code:
<div style="font-family: 'Poppins', Helvetica, sans-serif;">
<div style="background-color: black; position: relative; padding-top: 30px; padding-bottom: 30px;">
<img src="image.png"
style="height: auto; width: 135px; position: absolute; top: 0; bottom: 0; margin: auto; padding-left: 16px;">
</div>
<div style="padding: 10px; text-align: center;">
<img src="image.png"
style="width: 40px; height: auto; margin-bottom: 16px;">
<p style="margin: 0; padding: 0; color: #00cc66; font-size: 24px; font-weight: bold;">Email Confirmation</p>
</div>
<div>
<div style="padding: 16px; color: black;">
<p>Hi -Name-,</p>
<p>Welcome.</p>
<p>Please confirm your email-address by clicking the button below.</p>
</div>
<div style="text-align: center; padding-bottom: 15px;">
<a href="-EmailConfirmUrl-" target="_blank">
<button style="border: none; cursor: pointer; background: #2840ff;
color: white; width: 200px; height: 48px; text-transform: uppercase;
font-size: 0.8rem; outline-style: none;
background-image: linear-gradient(to top right, #2840ff, #22eaff); box-shadow: 0px 1px 15px -2px lightgrey;">
Verify Email Now
</button>
</a>
</div>
<div style="text-align: center; background: #2840ff; color: white;
background-image: linear-gradient(to top right, #2840ff, #22eaff); bottom: 0; padding: 4rem 0;">
<img src="image.png"
style="height: 20px; width: 160px;">
<p style="color: #ced4da; font-weight: 300;">
Copyright © 2018. All rights reserved.
</p>
</div>
</div>
</div>
You can't use standard css3 in your emails, if it has to work in outlook.
Outlook is using the HTML rendering engine of Microsoft Word (sad, but true).
There are a lot of amazing tips and tricks on how to make email work in (all) clients.
Here are just a view links:
https://litmus.com/resources
https://mailchimp.com/resources/?_ga=2.98108630.81642254.1536052613-1816129050.1536052613
I have a input field & button. However, there are two problems.
The text in the button is not centered.
The button is never the same height as the input.
To visualize it:
Ok, I also put together a super convenient fiddle to play with this.
How can I fix these problems? Make it look "perfectly aligned". I tried fiddling around with height settings, though was unsuccessful.
Code in that fiddle:
HTML:
<body style="background-color: #5a6b7d">
<div style="text-align: center">
<h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
<p id='format' style="">this is a site</p>
<br>
<h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
<input type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
<button id="playbutton">Play</button>
</div>
</body>
CSS:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
button:hover{
background-color: darkgreen;
}
try this css for your green button :
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
position: relative;
top: -2px;
}
use position: relative; top:1px; /* adjust this top to repositioning the button
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
button:hover{
background-color: darkgreen;
}
#username{
height: 40px;
padding:0px;
margin-right: 10px;
}
.input-fields{
display:inline-flex;
}
<body style="background-color: #5a6b7d">
<div style="text-align: center">
<h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
<p id='format' style="">this is a site</p>
<br>
<h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
<div class="input-fields">
<input id="username" type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
<button id="playbutton">Play</button>
<div>
</div>
</body>
Just replace your button CSS with this:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
line-height: 35px;
width: 80px;
}
How about this:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
height: 40px;
/* New */
padding: 0px;
width: 50px;
height: 20px;
}
The padding 0px will center the text inside the button and the width and height you can use to define the button size. This is an good option for centering if you dont know the exact size of a picture or other things.
Here is the JSFiddle:
https://jsfiddle.net/vLbbkcna/3/
I'm having a problem with centering my input[type="submit"].
I'm using bootstrap on my website also.
I tried many ways but nothing seems to work. Can someone please help me with this?
.centerButton{
max-width: 700px;
text-align: center;
position: relative;
}
.btnsubmit{
border-radius: 5px;
height: 60px;
color: white;
background-color: #60C3AD;
border: none;
font-family: 'Arial', sans-serif;
font-weight: lighter;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-bottom: 15px;
}
Check with the below link you have a button at center just as you want.
http://jsfiddle.net/wmDL8/26/
<div id='toolbar'>
<div class='text-center'>
<div class="btn">
<input type="button" class="btn btn-default"/>
</div>
</div>