I'mkind of knew so I have no idea if I'm formatting this correctly, but my question is: How do center the footer to the middle of the page (vertically of course)?
<!-- Header & footer-->
<header>
<style type="text/css">
body {
font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:400px;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
</style>
</header>
<footer><table align="center">
<tr><td align="left"><p class="padding"><font color="white">Phone: 555-555-1800<br>Fax: 555-555-1800<br>Canada:1-800-555-5555<br>Mexico:001-800-555-5555</p></font></td>
<td align="left"> <p> <font color="white"> company title<br>Street<br>City, State zip<br>
<font color="white"> email adress</p></font></td></tr>
</table><table align="center">
<tr><td><p class="padding"><font color="white" font size="2"> copy write 2014 yatayata </tr></td>
</table> </footer>
</html>
there are several method to vertically center.. here is one of them. Check the DEMO first.
html, body {
width:100%;
height:100%;
}
html {display:table;}
body {
display:table-cell;
vertical-align:middle;
font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
Now its centered , Tested
<header>
<style type="text/css">
body {
font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
margin: 0 auto;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
</style>
</header>
<footer><table align="center">
<tr><td align="left"><p class="padding"><font color="white">Phone: 555-555-1800<br>Fax: 555-555-1800<br>Canada:1-800-555-5555<br>Mexico:001-800-555-5555</p></font></td>
<td align="left"> <p> <font color="white"> company title<br>Street<br>City, State zip<br>
<font color="white"> email adress</p></font></td></tr>
</table><table align="center">
<tr><td><p class="padding"><font color="white" font size="2"> copy write 2014 yatayata </tr></td>
</table> </footer>
</html>
remove
"
margin-right:0px;
margin-left:400px;
margin-top:0px;
margin-bottom:0px;
"
from body
You should use margin auto for center.
add in body
"margin: 0 auto; "
Use <center> tag
Link: JSFiddle
<html>
<style>
body {
font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
</style>
<body>
<footer>
<center>
<table align='center'>
<tr><td align="left"><p class="padding"><font color="white">Phone: 555-555-1800<br>Fax: 555-555-1800<br>Canada:1-800-555-5555<br>Mexico:001-800-555-5555</p></font></td>
<td align="left"> <p> <font color="white"> company title<br>Street<br>City, State zip<br>
<font color="white"> email adress</p></font></td></tr>
</table><table align="center">
<tr><td><p class="padding"><font color="white" font size="2"> copy write 2014 yatayata </tr></td>
</table>
</center>
</footer>
</body>
</html>
Related
I'm trying to create a responsive HTML email for Outlook 2013 but I'm having trouble trying to get the email to respect the width limit I have set (i.e. width="100%"). The actual width is indeed being set to 100% until I reach a certain smaller width at which point I have to scroll to view the information.
The code works fine in IE (no surprise) so I know the code itself is at least appropriate in that sense (i.e. I haven't wrapped something incorrectly).
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Responsive Email Template</title>
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
body {
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
font-family: Georgia, Times, serif
}
table {
border-collapse: collapse;
}
a {
color:#0076b7;
}
.nav-link:visited {
color:#fff;
}
/*
#media only screen and (max-width: 640px) {
.deviceWidth {width:440px!important; padding:0;}
.ReadMsgBody {width:440px!important; padding:0;}
.center {text-align: center!important;}
}
#media only screen and (max-width: 479px) {
.deviceWidth {width:280px!important; padding:0;}
.ReadMsgBody {width:280px!important; padding:0;}
.center {text-align: left!important;}
} */
</style>
</head>
<body style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#fff" style="padding-top:20px" valign="top" width="100%">
<!-- Start Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="font-size:21px; font-weight:bold; margin:0 auto; font-family:'Franklin Gothic',sans-serif;" width="100%">
<tr>
<td bgcolor="#0076B7" width="100%">
<!-- Logo -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="line-height:32px; padding:5px 20px;">
<a class="nav-link" style="font-size:21px; font-weight:bold; color:#fff; text-decoration: none; font-family:'Franklin Gothic',sans-serif;" href="#">LOGO</a>
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #fff; font-weight: light; text-align: right; font-family:'Franklin Gothic Book',sans-serif; line-height: 24px; vertical-align: middle; padding:10px 20px; font-style:normal">
Home | News | Events | Applications | OrgChart
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<!-- Actual Email Section -->
<table align="center" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="margin:0 auto;" width="100%">
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table>
<tr>
<td style="padding:10px 10px 10px 0" valign="middle">
Title
</td>
</tr>
</table>
<!-- Content -->
<p>Content here.</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:40px 8px 10px 8px">
Place of Work<br>
Jacob Johnson<br>
Work Role<br>
jacobjohnson#me.com<br>
555-555-5555
</td>
</tr>
</table><!-- End One Column -->
</td>
</tr>
</table><!-- End Wrapper -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
Recap: My email extends beyond the width limit I have it set for and I can't figure out why. Outlook is a pain in my butt.
Outlook isn't broken, your code exhibits the same behavior in almost every email client.
The problem is that you set all the tables to have a width of 100%. On many of them, you added the class .deviceWidth, where you specify the width in media queries, but not for anything wider than 640px. Outlook does not support #media queries.
Try adding .deviceWidth {width:440px!important; padding:0;} to your style sheet outside of media queries and address your width="100%" on every table.
JSFiddle is not working for me right now so I can't show you a sample.
Good luck.
Outlook doesn't respect 100% width so you need to set a fixed width for outlook, add width to the wrapper table
<table class="for_others" align="center" border="0"
cellpadding="0" cellspacing="0" width="600">
And using the class set width to 100% for all others. Use !important at the end of the declaration to override inline css.
table.for_others {width: 100% !important;}
I'm trying to build my first HTML/CSS webpage, but it seems that I'm having a problum with maximizing the page to the bottom limit. I mean if the content is not huge, the footer comes up the the middle of the page, how can I solve this problem?
I have attached a snapshot.
Here's the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blogs</title>
<style type="text/css">
body{ margin-left:0 ;margin-right:0 ;margin-top:0; margin-bottom:0 ; }
.design { padding: 0 ; margin:0 ;border: 0}
.left_head {background-image:url("images/header_left.gif"); }
.header_center {background-image: url("images/header_center.gif");background-repeat:repeatx;}
.right_head {background-image: url("images/header_right.gif");}
table { margin-left:0 ;margin-right:0 ;margin-top:0; margin-bottom:0; padding: 0 ; border: 0; cellpadding: 0 ; cellspacing: 0 }
table td { margin:0 ; padding: 0 ; border: 0; cellpadding: 0 ; cellspacing: 0 }
.left_body {background-image: url("images/blogs_22.gif");background-repeat:repeaty;}
.right_body {background-image: url("images/blogs_25.gif");background-repeat:repeaty;}
.left_footer {background-image:url("images/footer_left.gif"); }
.right_footer {background-image:url("images/footer_right.gif"); }
.footer_center {background-image: url("images/footer_center.gif");background-repeat:repeatx; color: white; font-family: tahoma; font-size: 12px}
h1 { color:#abbb2d; font-family: tahoma; padding-left: 10px}
p { font-family: tahoma; font-size: 14px}
.welcome { font-size: 18px; font-weight: bold}
.menu { list-style: none; margin: 0; padding:0 ; font-family: tahoma; font-size: 14px; }
a { color: gray; text-decoration: none}
a:hover { color: #abbb2d; text-decoration: underline; font-weight: bold}
.menu_cell {background-color: #dce6ca; }
</style>
</head>
<body height="100%">
<table class="design" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="left_head" width="42" height="153"></td>
<td class="header_center" ><img src="images/logo.gif" width="258" height="140" alt="Blogs logo"></td>
<td class="right_head" width="43" height="153"></td>
</tr>
<tr>
<td class="left_body" width="42" height="100%"></td>
<td class="center_body">
<table center_table width="100%">
<tr>
<td class="menu_cell"width="10%" height="100%">
<ul class="menu" >
<li> Home</li>
<li> About me</li>
<li> Links</li>
<li> Contact me</li>
</ul>
</td>
<td width="90%">
<h1>Home</h1>
<hr>
<p class="welcome"> Welcome to my first HTML & CSS website.</p>
<p>This is an assignment assigned by Dr. Jameleddine Hussaine, Web Development & Engineering course at King Fahd University. </p>
<p>* You can either navigate my website through the left navigation bar or the using the linke at the top. </p>
</td>
</tr>
</table>
</td>
<td class="right_body" width="43" height="100%"></td>
</tr>
<tr class="footer" valign="bottom">
<td class="left_footer" width="42" height="84"></td>
<td class="footer_center" >All copyright reserved © Hamad Alkathiri <br/> King Fahad University for Petroluem & Minerals</td>
<td class="right_footer" width="43" height="84"></td>
</tr>
</table>
</body>
</html>
Thank you.
html, body { height: 100%; } and you should look at this.
Make sure you add a min-height to your container or your body.
#container {
min-height:100%;
}
I have some HTML code. I have added two images: one alinged to the left and one to the right. Then it has two headings and an HTML table after that.
The problem is that I have use the following code to add the images to the document.
<img src="http://Path_To_Foler/Logo1.jpg" align="left" />
<img src="http://Path_To_Foler/Logo2.jpg" align="right" />
<p class="h1"><b>Private and Confidential</b> </p>
<p class="h1"><b>REPORT FOR Mr Person A BLA BLA</b> </p>
<table class="table" >
<tr>
<td class="CellHeader">Date </td>
<td class="CellHeader">Time</td>
</tr>
<tr>
<td class="cell"><AssessmentDateFrmMSPAPARR /></td>
<td class="cell"><CurrentRcFrmMSPAPARR /></td>
</tr>
</table>
CSS
<style>
.CellHeader{
width:50%;
text-align:left;
font-family: 'calibri';
font-size: 11pt;
color:#FFFFFF;
background-color:#151515;
border:1px solid black;
border-collapse:collapse;
}
.cell{
width:50%;
text-align:left;
font-family: 'calibri';
font-size: 11pt;
border:1px solid black;
border-collapse:collapse;
}
.table{
width:100%;
border:1px solid black;
border-collapse:collapse;
}
.h1{
page-break-before: always;
text-align: center;
font-family: 'calibri';
font-size: 12pt;
}
<style>
Issue
Everything was working fine as expected. The problem started when I added the second image. Adding second image causes the table to be aligned right as well.
And when I take out the align:"right" atribute from the image element, the table is where it is supposed to be but the second image is pushed to the right which is kind of understandable.
How can I fix this?
Try replacing align="left" by style="float:left" and align="right" by style="float:right"
Then, add clear: both in .table{} in your CSS.
I want to apply the following style on my specific td but I dont know why its unable to do so
/*Style*/
font: 100%/1.4 "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif; color: black;
<td colspan="2" class="centerAlign border">ABC</td>
kindly help to do so. Thanks in advance.
EDIT:
The class centerAlign border is class for all other td's but I want to apply special styling on this cell.
Here is a new style created for your td element
<style type="text/css">
.style1
{
font-size:100%;
font-family: "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif;
color: #00000;
}
</style>
To use it just modify your td as such
<td colspan="2" class="centerAlign border style1">ABC</td>
You cannot use 100%/1.4 for your font-size. Anyway, wrap your style in another class and apply it to your element:
.font-style {
font-family: "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif;
color: black;
font-size: 13px;
}
HTML:
<td colspan="2" class="centerAlign border font-style">ABC</td>
Css
.centerAlign.border{
font: 100%/1.4 "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif; color: black;
}
HTML
<table>
<tr>
<td colspan="2" class="centerAlign border">ABC</td>
</tr>
</table>
Live demo http://jsfiddle.net/mWRMS/1/
HTML
<table>
<tr>
<td colspan="2" class="font">ABC</td>
</tr>
</table>
Css
.font{
font-family:"Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:13px;
}
I currently use the following HTML to render the image shown below. This however does not work in Outlook as background images are not supported. I have been tipped to use tables to render elements correctly in outlook, but have no idea how to go about this. 200 bounty to the person who provides the html that will render the image below correctly in Outlook 2007/2010"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
div, p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
div.box {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color:rgb(255,232,0);
}
div.box div.inner {
height:100%;
background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<p class="name">John</p>
<p>XYZ Company</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
table {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color: #fee800;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<table>
<tr><td>John Smith</td><td></td></tr>
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr>
</table>
</body>
</html>
For emailer You should have to use table and don't use CSS in head or different CSS. Try to use and inline CSS.
<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;">
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td> </td>
</tr>
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td>
</tr>
</table>