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%;
}
Related
I'm trying to create a new HTML signature for our company, but I can't seem to get it work nicely on Gmaill app (Android in my test case). Both font-size and line-height changes. I tried different stuff, even deleted the whole HTML signature and try to make a new one with just a few lines to test, but unfortunately I can't get it to work. I tried so many things, that I just have no clue anymore how to fix. I also tried to search for the problem, but I still can't seem to make it work. Please see attached code.
If anyone can help me into the right direction, that would be great. I also included screenshots to show what I mean regarding the Gmail app. As you can see, also text-size is different.
https://imgur.com/mxtU4Bs
https://imgur.com/RXKQt9w
Thanks in advance!
<html>
<head>
<meta charset="utf-8">
<title>html signature</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {margin: 0px; padding: 0px; }
img { border: 0px; }
a { color: #00002E; text-decoration: none; }
h1.title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 0px; margin-bottom: 5px; }
span.function { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
#wrapper { width: 100%; max-width: 470px; }
#border { border-left: 1px solid #00002E; }
table.functiondetails { width: 100%; margin-top: 5px; }
table.functiondetails tr { height: 30px; }
table.functiondetails tr td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
table.functiondetails tr td.icon { width: 10%; }
table.functiondetails tr td.detail { width: 90%; }
#media screen and (max-width: 768px) {
#wrapper { width: 90%; }
#logoColumn { width: 30%; max-width: 30%; }
#logoColumn img { width: 100%; }
#functionColumn { width: 70%; max-width: 70%; }
}
#media screen and (max-width: 470px) {
#wrapper{ width: 100%; }
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="wrapper" cellpadding="0" cellspacing="0">
<tr>
<td id="logoColumn">
logo
</td>
<td id="border"></td>
<td id="functionColumn">
<h1 class="title">Name of employee</h1>
<span class="function">Function | Company</span>
<table class="functiondetails" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-phone.jpg" alt="Bel ons" width="13" height="13"></td>
<td class="detail">+31 (0)6 - 12345678<br>+31 (0)162 -123456</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-email.jpg" alt="Mail ons" width="13" height="13"></td>
<td class="detail">email#domain.nl</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-location.jpg" alt="Adresgegevens" width="13" height="13"></td>
<td class="detail">Address line 1<br>Address line 2</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-arrow.jpg" alt="Website" width="13" height="13"></td>
<td class="detail">domain.nl</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[1]: https://imgur.com/mxtU4Bs
Campaign Monitor can tell you a lot of information about what CSS properties are supported by the different email platforms. On there it mentions that font-size and line-height are almost universally supported. But it says that style tags in the head or body are not entirely supported, and there is very low support for linked CSS. So your best bet is to try inline styles.
https://www.campaignmonitor.com/css/text-fonts/line-height/
One downside of only using inline styles however is that you can't use media queries. So you could still leave the media queries in a style tag, but they just won't be used by every platform.
please find my code below: I need to make it responsive to all screen's sizes? how ? Note: I repeated the same text and links to have the same number of info to be shown which I'm looking for. The first code is the html and the second one is the CSS. Really need help on that because it looks not nice to have different format on different screen's sizes. Thanks in advance and lease ask me if the code is not clear to you or need more clarifications:
html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="Header">
<div id="object1"><a href="index.html"><img src="Images/Capture logo.PNG"
width="230" height="100" alt=""/></a></div>
<div id="object2">
<p class="text1">test</p>
</div></div>
<div class="watermarked"> <hr size="20"; color="#140098"</hr>
<table align="center" width="100%" border="0" cellspacing="0"
cellpadding="0" margin="0" border-collapse="collapse" border-spacing="0" >
<tbody >
<tr>
<td width="50%"> <p class="ltrh" >test</p></td>
<td width="50%"><p class="rtlh">test</p></td>
</tr>
</tbody>
</table >
<table align="center" width="100%" border="0" cellspacing="0"
cellpadding="0" margin="0" border-collapse="collapse" border-spacing="0" >
<tbody >
<tr>
<td><p class="ltr" >test</p></td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p></td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p></td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >PR Approval:</p>
</a></td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p>
</td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p>
</td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p>
</td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p>
</td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p></td>
<td><p class="rtl" >test</p></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css code:
#charset "utf-8";
/* CSS Document */
#object1{
width:auto;
float: left;
}
#object2{
width:auto;
float: right;
align-content: center
}
p.text1{
color: #464646;
font-size: 25pt;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
p.rtlh {
direction: rtl;
font-size: 22pt;
color: red;
text-align: center;
font-weight:bold;
}
p.ltrh{
font-size: 21pt;
color: red;
text-align: center;
font-weight:bold;
}
p.ltr{
font-size: 18pt;
color: mediumblue;
margin-left:10em;
margin-top: 0em;
margin-bottom: 1.25em;
}
p.rtl{
direction: rtl;
font-size: 18pt;
color: mediumblue;
margin-right:10em;
margin-top: 0em;
margin-bottom: 1.25em;
}
.Header {
height: 100px;
}
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(Images/blue.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.2;
z-index: -1;
}
2 methods:
Use % and not px
Use #media rules in your css:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
A simple trick I like to use:
#page{
width: 96%;
max-width: 1200px;
margin: 0 auto;
}
On a desktop, or another large device, it'll be 1200px wide. When you go smaller than that, it'll be 96% of the width of the screen. You can make that 100%, but I personally prefer to have a very small gap between the content and the edge of the screen, especially for phone like the Edge series of Samsung. It also gives a little canvas the user can use to scroll the page.
And in my experience float makes responsive design a lot more difficult. I suggest display: inline-block; and learning how to properly use that in combination with block elements :)
To View a Webpage on different devices, you have to add this code below to your Header. (the code is for HTML5)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport is the user's visible area of a web page it will be smaller on a mobile phone than on a computer screen.
The "width=device-width" sets the width of the webpage to the width of the device.
The initial scale is the zoom level when the webpage first get called.
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 replicate the design and structure of a Facebook page post.
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post td {
vertical-align: top;
}
.timestamp {
font-size: 13px;
color: #999;
}
<div class="post">
<table>
<tbody>
<tr>
<td>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<table>
<tr>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
Here is the JSFiddle of what I have: https://jsfiddle.net/6nodfbdj/
As you can see, the image is only 50x50, but it's pushing the td all the way out like that for no reason.
Somehow it's conflicting with the td that contains the content. So basically what's happening, is whatever the width of the content td is, is also being set for the td containing the image.
Any ideas?
As mentioned in one of the comments, tables are not to be used for formatting. They are for tabular data.
From The w3.org site
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Note. This specification includes more detailed information about tables in sections on
https://www.w3.org/TR/html401/appendix/notes.html#notes-tables
Instead you should use CSS. While the layout and sizes aren't exactly the same as your fiddle, take a look at https://jsfiddle.net/ringhidb/jeeu2yrt/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post {
position: absolute;
}
.header {}
.logo {
float: left;
padding: .1em;
}
.info {
float: left;
padding: .25em;
}
.site {
font-size: 1.02em;
font-weight: bold;
}
.timestamp {
font-size: .75em;
color: #999;
}
.content {
clear: both;
}
</style>
<title>CSS Layout</title>
</head>
<body>
<div class="post">
<div class="header">
<div class="logo">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</div>
<div class="info">
<a class="site">Toomblr</a>
<div class="timestamp">20/01/2017 - 11:43</div>
</div>
</div>
<div class="content">
Some content.
</div>
</div>
</body>
</html>
It's being set by the width of the text in the <td> containing "Some content". Try:
<td colspan=2>
Some content.
</td>
I don't know what you want to do, but try this.
.post td {
vertical-align:top;
float:left;
}
You had a "spare cell" what can be fixed with rowspan and colspan.
Try this:
<body>
<div class="post">
<table>
<tbody>
<tr>
<td rowspan=2>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td></tr>
<tr>
<td colspan=2>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
</body>
have you tried image width 100% ?
I could not find a direct answer for this, so please be patient if this has been asked before.
I have limited HTML experience. The width of the table columns within the email change when opened in Entourage and Gmail on my Android phone. Gmail on my PC looks fine, Outlook, Yahoo, etc. also great.
Essentially what happens is the widths of the left and right column switch in Entourage/Gmail-droid. Left column width should stay at width="401"; right column should stay fixed at width="171" (they swap so the left column is 171 and the right is 401).
I am working with an HTML email template I picked up online with nested tables. Here is the basic code with text and images stripped out. Any help would be appreciated:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
html {
-webkit-text-size-adjust:none;
-webkit-background-size:100%;
}
.bold {
color: #61BB46;
}
.Main {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
}
.Sidebar {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
}
a:link {
COLOR: #592989;
}
a:visited {
COLOR: #FAAB53;
}
a:hover {
COLOR: #61BB46;
}
a:active {
COLOR: #592989;
}
</style>
<body bgcolor="#ffffff" text="#666666" style="padding:0px; margin:0px;">
<table style="font-family: Verdana, Helvetica, sans-serif; color: #666666;
font-size: 12px; Line-height: 18px; width: 600px;" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td style="font-size: 30px; line-height: 32px; color: #592989;" colspan="4">
<div style="font-size: 12px; color:#999;"></div></td>
</tr>
<tr>
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 4px; background-color: #e3dede;"><img src=""
width="578" height="190"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td style="padding-top: 20px; padding-bottom: 20px; text-align: left;"
colspan="4"><p><a href="" target="_blank">
</td>
</tr>
<tr>
<td rowspan="5" width="401" valign="top"><p style="color: #592989;
font-size: 20px;"></p>
<p class="Main" style="margin-bottom: 1.0em">
</p></td>
<td rowspan="5" width="19" valign="top"> </td>
<td style="background-color: #592989; padding: 4px; padding-left: 8px;
color: #ffffff; font-size: 14px;" width="171" valign="top"><p></p></td>
<tr>
</table>
</body>
First rule with sending HTML email use inline styles. Many clients will strip out any styles in the <head> tag. The safest bet is to not even bother with a <head> or <body> tag as most of the time these get stripped out. Validate your html. You have some invalid markup that many clients will strip out:
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
Should be:
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<table>
<tbody>