I have a footer at the bottom of the page but when zooming in, the table in the middle of the screen grows but the footer doesn't. Is there any way, using basic HTML/CSS or any JS/CSS Framework that will allow me to continue it to grow.
.footer-center-vers2 {
position: relative;
background: #292929;
margin-left: 670px;
font-family: arial, Helvetica, sans-serif,verdana;
font-size: 9px;
color: #bfbfbf;
padding: 10px 0px 10px;
}
.Regulations {
padding: 0px 0px 0px 0px;
border-spacing: 0px;
margin: 0 auto;
width:1000px;
}
<table width="100%" class="Regulations">
<tr>
<td class="footer-center-vers2" style="text-align: center; vertical-align: middle;">
<span style="vertical-align: middle">
<img src="small.png" border="0" alt="My Company Ltd." /><br />
© My Insurance Company Text<br />
<br />
</span>
</td>
</tr>
</table>
At 0% Zoom, the table looks great but when you zoom in >125%, the table is no longer 100%. Any ideas, please?
Your table has the class .Regulations, for which you set a fixed width width:1000px;, which interferes with the width="100%" you set in the table tag in the HTML code. Remove one of the two.
Related
I am designing an HTML signature for a client, which needs to work in Outlook 365.
There are two main tables. The top table needs to be the same width as the bottom table.
The problem is I can't seem to align the logo (in the top table) with the right side of the bottom table. And the top table is narrower than the bottom one. I wish to make it the same width as the bottom table.
I want to keep it as much responsive as possible so that it can display properly on mobile displays.
Can you please suggest some solutions?
Thanks so much!
<head>
<style>
<!--
/* Font Definitions */
#font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
a:link,
{color:#f67828;
text-decoration:none;}
a:visited,
{color:#f6c228;
text-decoration:none;
font-weight:bold;}
p
{margin-top:0.0pt;
margin-right:0cm;
margin-bottom:3.0pt;
margin-left:0cm;
text-align:justify;
line-height:100%;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
color:#808080;}
-->
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* Media Queries */
#media screen and (max-width: 600px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 13px !important;
line-height: 24px !important;
}
}
#media screen and (max-width: 400px) {
.hide{display:none!important;}
.block{display:block!important;}
img.center-on-narrow {float:left !important;}
}
</style>
</head>
<body>
<table style="width:auto;">
<tr>
<td style="width:380px;padding-right:30px; display: inline-block;">
<table>
<tr>
<td>
<p style="color: #404040;"><strong>ADMIN USER</strong></p>
<p style="color: #404040;">Business Manager</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/email-icon.png" alt="" width="20" height="20" /> <a style="color: #808080;text-decoration:none;" href="mailto:doe#example.co.uk">nikki#example.co.uk</a> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/tel-icon.png" alt="" width="20" height="20" /> 4958695834</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/address-icon.png" alt="" width="20" height="20" /> Demo Address</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/website-icon.png" alt="" width="20" height="20" /> <a style="color: #808080;text-decoration:none;" href="https://www.example.co.uk">www.example.co.uk</a> </p>
</td>
</tr>
</table>
</td>
<td style="width:auto; display: inline-block;">
<table role="presentation">
<tr>
<td dir="ltr" style="padding: 0px 0px 20px 10px;float:right !important;">
<img src="https://www.example.co.uk/wp-content/uploads/2019/07/example-logo-email.jpg" width="150" height="95" border="0" alt="alt_text" class="center-on-narrow" style="float:right; margin-top:15px; max-width: 162px; height: auto; background: #e41433; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width:80%;">
<tr>
<td style="border-bottom: 1pt solid #808080; border-top: 1pt solid #808080; padding-top: 10pt; padding-bottom: 10pt;">
<p>Sign up to our <strong><a style="color: #808080;text-decoration:none;" href="http://example.com/gd-YnL">Newsletter</a></strong></p>
</td>
<td style="border-bottom: 1pt solid #808080; border-top: 1pt solid #808080; padding-top: 10pt; padding-bottom: 10pt; text-align:right;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/facebook-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/twitter-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/instagram-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/linkedin_icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/youtube-icon.png" alt="" width="20" height="20" /></td>
</tr>
<tr>
<td colspan="2"><p style="color: #808080; font-size: 11px;padding-top: 10pt; ">This e-mail including all attachments has been sent by example Aesthetics Ltd and is meant only for the intended recipient and may be a confidential communication or a communication privileged by law. If you received this e-mail in error, any review, use, dissemination, distribution, or copying of this e-mail is strictly prohibited. Please notify the sender immediately of the error by return e-mail and please delete this message from your system. Thank you in advance for your cooperation. Although we have taken steps to ensure that this email and attachments are free from viruses, we advise that in keeping with good computing practice the recipient must ensure that they are in fact virus free.</p></td>
</tr>
</table>
</body>
There were no error messages, but the tables are not matching in widths. The logo needs to align with the right side of the bottom table.
There was a few things that needed changing.
Your first table had a width auto meaning the width was dependent on its content. If the content was a word, the table would have taken its width.
2nd table had a width of 80% so both would have never been the same.
What I did:
added an outer table
gave both the inner table 100% width.
Image table style was removed and aligned right
So now both tables will always be the same width. You can control the width of the signature using the width of the outer table.
<head>
<style>
<!--
/* Font Definitions */
#font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
a:link,
{color:#f67828;
text-decoration:none;}
a:visited,
{color:#f6c228;
text-decoration:none;
font-weight:bold;}
p
{margin-top:0.0pt;
margin-right:0cm;
margin-bottom:3.0pt;
margin-left:0cm;
text-align:justify;
line-height:100%;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
color:#808080;}
-->
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* Media Queries */
#media screen and (max-width: 600px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 13px !important;
line-height: 24px !important;
}
}
#media screen and (max-width: 400px) {
.hide{display:none!important;}
.block{display:block!important;}
img.center-on-narrow {float:left !important;}
}
</style>
</head>
<body>
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table style="width:100%;">
<tr>
<td style="width:380px;padding-right:30px; display: inline-block;">
<table>
<tr>
<td>
<p style="color: #404040;"><strong>ADMIN USER</strong></p>
<p style="color: #404040;">Business Manager</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/email-icon.png" alt="" width="20" height="20" /> <a style="color: #808080;text-decoration:none;" href="mailto:doe#example.co.uk">nikki#example.co.uk</a> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/tel-icon.png" alt="" width="20" height="20" /> 4958695834</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/address-icon.png" alt="" width="20" height="20" /> Demo Address</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/website-icon.png" alt="" width="20" height="20" /> <a style="color: #808080;text-decoration:none;" href="https://www.example.co.uk">www.example.co.uk</a> </p>
</td>
</tr>
</table>
</td>
<td align="right" style="">
<table align="right" role="presentation">
<tr>
<td dir="ltr" style="padding: 0px 0px 20px 10px;float:right !important;">
<img src="https://www.example.co.uk/wp-content/uploads/2019/07/example-logo-email.jpg" width="150" height="95" border="0" alt="alt_text" class="center-on-narrow" style="float:right; margin-top:15px; max-width: 162px; height: auto; background: #e41433; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td style="border-bottom: 1pt solid #808080; border-top: 1pt solid #808080; padding-top: 10pt; padding-bottom: 10pt;">
<p>Sign up to our <strong><a style="color: #808080;text-decoration:none;" href="http://example.com/gd-YnL">Newsletter</a></strong></p>
</td>
<td style="border-bottom: 1pt solid #808080; border-top: 1pt solid #808080; padding-top: 10pt; padding-bottom: 10pt; text-align:right;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/facebook-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/twitter-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/instagram-icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/linkedin_icon.png" alt="" width="20" height="20" /> <img src="https://www.example.co.uk/wp-content/uploads/2019/07/youtube-icon.png" alt="" width="20" height="20" /></td>
</tr>
<tr>
<td colspan="2"><p style="color: #808080; font-size: 11px;padding-top: 10pt; ">This e-mail including all attachments has been sent by example Aesthetics Ltd and is meant only for the intended recipient and may be a confidential communication or a communication privileged by law. If you received this e-mail in error, any review, use, dissemination, distribution, or copying of this e-mail is strictly prohibited. Please notify the sender immediately of the error by return e-mail and please delete this message from your system. Thank you in advance for your cooperation. Although we have taken steps to ensure that this email and attachments are free from viruses, we advise that in keeping with good computing practice the recipient must ensure that they are in fact virus free.</p></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
Hope that is what you were after.
I am trying to create an Email Signature Generator. I am trying to get the blue line (it can be seen in the program) to stretch all the way down. However, when I do it, it stretches the rest of the items. I believe this may be because it is all inside a table and when one element is sized differently than the others, it tries it equal it out but I am not sure how to change it. Here is my code:
table {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
}
.spacer {
width: 30px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 11px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
padding-top: 6px;
}
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</td>
<td class="spacer"></td>
<td>
<hr>
</td>
<td class="spacer"></td>
</tr>
<tr>
<td>
<center>
<div id="fullName">Billy Staples</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="job"><i>Programmer</i></div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="jobLocationText">at the <b id="jobLocation">HTML hub</b></div>
</center>
</td>
</tr>
</table>
And a working version can be found here.
Again, I am trying to get it so the hr (in the CSS) when the height is changed (to say 300 or something) it doesn't stretch the rest of the table with it. If you have an idea as to how I might be able to do my table differently so that it might be easier or just so that I could fix this problem, suggestions are welcome!
Thanks in advance!
Use rowspan="" to strech <hr> to way down,
<td rowspan="4">
<hr>
</td>
Here's your updated code, https://jsfiddle.net/he84kv8n/10/
<hr> is a horizontal rule (divider), bending it to be a vertical rule (divider) is a use case that will likely be difficult for anyone looking at your code to decipher.
I would suggest using a CSS border attribute on the table cell, that will automatically be the correct size.
I have to design a template for microsoft outlook email which requires me to place a dynamic image and text from server on an existing static background image. I tried designing it using div's as well as table and also gave inline css and (!important) for the html. I could not find support for tags such as margins, float,positions and my layout always breaks. I found that outlook email does not support those css attributes. Please suggest me a way to design the template without layout breaks.
this is how my template should look.
http://templates.mailchimp.com/resources/email-client-css-support/
Above link
I tried it in two different ways for aligning them:
using div:
<div align="left"><img style="padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="staticimage.png " alt=" ">
<h4 style=" font-family: serif; color: rgb(255, 252, 252);">#Some Text#</h4></div>
<h3 style="font-family: -webkit-body !important;font-style: italic;color: #147C6C; margin-top:-55px">Text</h3>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;
width: 731px;height: 500px; margin-top:-150px;margin-left:25px" src="dynamicimage.png">
using table:
<tr>
<td>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;width: 731px;height: 500px;" src="staticimage.jpg">
</td>
<td align="center">
<span style="margin-left: -1458px;">
<img style=" padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="dynamicimage.png " alt=" ">
<span><h4 style=" font-family: serif; color: rgb(255, 252, 252);margin:0px 0px 0px 0px; ">#some text#</h4></span>
</span>
</td>
<td align="center">
<span style="margin-left: -1253px;">
<img style="width: 350px;height: 225px;margin-top: 44px; " src="dynamictext.png " alt=" ">
</span>
</td>
<td>
<h2 style="margin: -5px 0px -55px -877px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">
<strong>Some text</strong>
</h2>
<h3 style="margin:54px 0px -5px -864px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">Employee name</h3>
</td>
</tr>
Tables usually work with outlook emails but if they are not, if you're trying to get 40px margin, for instance, add a 40px transparent image on the location.
Ok, so maybe I'm slightly losing my mind but I'm trying to recreate a homepage that incorporates 2 background images into my CSS. I'm attempting to use one as a top image and one as a bottom image, and in the middle is a table that has links and images. However, for some reason, I'm having difficulty with pulling it all together to make it look like one smooth image.
For example, my container class (as shown below) only puts a border around the topBox class and not the entire container div. I want all 3 divs to have one border around it (coming from the container class) so that it looks as if its one image. Here is my HTML and CSS.
What am I doing wrong? Thanks in advance for any assistance!
#Container {
float:left;
width: inherit;
height: 400px;
margin-left: auto;
margin-right: auto;
border:1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg);
background-repeat: no-repeat;
/*place background image css code here and remove line above*/
background-position: left 0px top 0px;
background-size: 300px;
}
.box {
position: relative;
left: 100;
top: 100;
width: 350px;
height: 550px;
border:0px solid #000000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
/*place background image css code here and remove line above*/
background-repeat: no-repeat;
background-position: left 0px bottom 0px;
background-size: 300px;
}
<div id="Container">
<div class="boxTop"></div>
<div class="box"><table width="300px">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="6">
<tbody>
<tr>
<td valign="top"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" /></td>
<td valign="top">
<h3>Become a Member</h3>
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</td>
</tr>
<tr>
<td valign="top"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" /></td>
<td valign="top">
<h3>Classes & Support</h3>
<p>Learn more about the classes, support groups, and health screenings we offer.</p>
</td>
</tr>
<tr>
<td valign="top"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" /></td>
<td valign="top">
<h3>Watch the TV Segment</h3>
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</td>
</tr>
<tr>
<td valign="top"><img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" /></td>
<td valign="top">
<h3>Read the Magazine</h3>
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></div>
<div class="boxBtm"></div>
</div>
Very simple answer, just remove the hight of the id #Container and it'll work. I hope this is what you where looking for ;)
You have set a specific height on your container, so your border is only going to be that height. If you set the height to 750 pixels, it is going to work.
#Container {
float: left;
width: inherit;
height: 750px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg);
background-repeat: no-repeat;
/*place background image css code here and remove line above*/
background-position: left 0px top 0px;
background-size: 300px;
}
.box {
position: relative;
left: 100;
top: 100;
width: 350px;
height: 550px;
border: 0px solid #000000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
/*place background image css code here and remove line above*/
background-repeat: no-repeat;
background-position: left 0px bottom 0px;
background-size: 300px;
}
<div id="Container">
<div class="boxTop"></div>
<div class="box">
<table width="300px">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="6">
<tbody>
<tr>
<td valign="top">
<a href="http://ejgh.org/your-health/healthy-lifestyles/become-a-member-sp-1672965733">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" />
</a>
</td>
<td valign="top">
<h3>Become a Member</h3>
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/component/wrapper/?Itemid=203">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" />
</a>
</td>
<td valign="top">
<h3>Classes & Support</h3>
<p>Learn more about the classes, support groups, and health screenings we offer.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/component/hwdvideoshare/?task=viewcategory&Itemid=166&cat_id=5">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" />
</a>
</td>
<td valign="top">
<h3>Watch the TV Segment</h3>
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine">
<img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" />
</a>
</td>
<td valign="top">
<h3>Read the Magazine</h3>
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="boxBtm"></div>
</div>
This can be a lot simpler - you only need one wrapper div, not three. (You also shouldn't be using a table for layout purposes, but that's a whole other subject. For now, this'll work if you drop your table in where the content p tags are.)
Here's how to get roughly the visuals you want with a lot less code:
.box {
width: 300px;
border: 1px solid;
border-radius: 0 0 9px 9px;
/* You can specify multiple background images like this: */
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
background-size: 100% auto;
background-repeat: no-repeat;
/* first position goes with the first image url and vice versa */
background-position: top, bottom;
/* 130px padding on top to create room for the "lifestyles" logo
20px on the sides for breathing room
50px at the bottom to create room for the green gradient
tweak these values till you like the spacing */
padding: 130px 20px 50px;
}
<div class="box">
<p>content</p>
<p>content</p>
<p>content</p>
</div>
I'm making this site for my friends mom and for some reason my links aren't working in my table, I have reason to believe that it has something to do with the CSS, also I've never had this problem before so I'm not fully sure how to fix it. The code works in Chrome but not Firefox also to clarify, I can't click on the link, it turns it blue and underlines it but I just generally can't click on it at all.
HTML
<nav>
<table id="nav_table">
<tr>
<td class="nav_border">
<p class="nav_options">Home</p>
</td>
<td class="nav_border">
<p class="nav_options">Restaurants</p>
</td>
<td class="nav_border">
<p class="nav_options">Near you</p>
</td>
<td class="nav_border">
<p class="nav_options">Order Here!</p>
</td>
</tr>
</table>
</nav>
CSS
nav{
position: relative;
top: 50px;
}
#nav_table{
position: relative;
top: 60px;
margin-left:auto;
margin-right:auto;
border-spacing: 5px 0px;
border-collapse: ;
height: 0px;
}
.nav_border{
text-align: center;
border: 2px solid black;
padding: 10px;
width: 120px;
height: 0px;
-webkit-box-shadow: rgb(,,) 0px 0px 0px ;
-moz-box-shadow: rgb(,,) 0px 0px 0px ;
box-shadow: rgb(,,) 0px 0px 0px ;
background:-webkit-radial-gradient(center,circle,red 0%, orange 50%);
background:-moz-radial-gradient(center,circle,red 0%, orange 50%);
background:radial-gradient(center,circle,red 0%, orange 50%);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.nav_options{
font-size: 20px;
text-decoration:none;
}
Now as I said before I've never had this problem, I've tried googling it and it said it had to do with changing the parent element width and height to percentage instead of pixels but I don't think it applied to what I'm trying to get done.
You need to put 'http://' in front of your urls, so the browser knows it is an absolute URL.
e.g. href="http://www.google.com"
Without, the browser thinks the URL is relative so it's taking you to the wrong page.
It's also better backwards compatibility to put your anchor tags inside your paragraph tags.
<p class="nav_options">Home</p>
Your syntax is not correct. If you want link with text you should first try this
link text
<nav>
<table id="nav_table">
<tr>
<td class="nav_border">
Home</p>
</td>
<td class="nav_border">
<p class="nav_options">Restaurants</p>
</td>
<td class="nav_border">
<p class="nav_options">Near you</p>
</td>
<td class="nav_border">
<p class="nav_options">Order Here!</p>
</td>
</tr>
</table>
</nav>
Your cod isn`t correct , you must add < a > < / a > tag in to < p > < / p >
if you want clickable cell use it CSS for a tag :
a.Click {
width:100%;
height:100%;
display:block;
text-align:center
}