Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am working on HTML code. I need the title of code be in center of page. The title of page (heading) contain 10 words.
The options i am using start the sentence from middle and then move to right. I need the whole .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.Titleline {
position: absolute;
left: 50%;
width: 546px;
height: 74px;
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
}
</style>
</head>
<body>
<table>
<tr>
<center class="Titleline">You are one step closer to <br/>the experience of a life time</center>
</tr>
</table>
</body>
</html>
You see the sentence start at center but moves to right.
can this be fixed somehow.
Your HTML is invalid. There are two reasons:
<center> tag is deprecated. (Some browsers do support them).
<center> cannot be a direct descendant to <tr>, it should be <td>. Use the class for the td instead.
Better code would be something like:
.Titleline {
/* position: absolute;
left: 50%;
width: 546px;
height: 74px;
*/
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
text-align: center;
}
table {
width: 100%;
}
<table>
<tr>
<td class="Titleline">You are one step closer to <br/>the experience of a life time</td>
</tr>
</table>
See the updated code in the snippet. Use the class for the <td> instead and make the <table>, full width. Also, don't use position unnecessarily.
There are a number of problems:
<center> is deprecated; don't use it.
You have invalid markup; <center> is not a valid child of <tr>. <td> and <th> are the only valid children of <tr>.
You're using position: absolute with left: 50%, which makes your text start with an offset of 50%; it does not centralise it.
I'd recommend adding switching <center> to <td>, and adding text-align: center to .Titleline in order to centralise it. Keep in mind you've also got a fixed width on your .Titleline, which will need removing. You'll also need to add width: 100% to table so that it takes up the full available width (so that the text can centralise). This can be seen in the following example:
.Titleline {
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
text-align: center;
}
table {
width: 100%;
}
<body>
<table>
<tr>
<td class="Titleline">You are one step closer to <br/>the experience of a life time</td>
</tr>
</table>
</body>
The above shows how you can centralise your text in a table, but I'd also recommend not using tables for layouts due to their poor support for smaller screens. I'd recommend making use of something like the <div> element to divide up your content instead. For pure text (like your example), you should also make use of the <p> tag:
.Titleline {
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
text-align: center;
}
<body>
<div>
<p class="Titleline">You are one step closer to <br/>the experience of a life time</p>
</div>
</body>
Hope this helps! :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.Titleline
{
position: absolute;
text-align:center;
width: 546px;
height: 74px;
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
}
</style>
</head>
<body>
<table>
<tr>
<td class="Titleline">
You are one step closer to <br/>the experience of a life time
</td>
</tr>
</table>
</body>
</html>
Related
I'm trying to build an email template based on https://www.muicss.com/docs/v1/example-layouts/html-email.
On top of what they offer, I'd like to have a two solid color background: color A for the top fixed height (say 200px), and color B for the rest of the content, and the table (cards) floating across the two colors, similar to This.
I tried different options using linear-background, but it doesn't show at all, the gradient starts from the bottom of the card, or the card's color becomes transparent when copied to Gmail web client (even after I inlined styles)
This is what I have for now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- NOTE: external links are for testing only -->
<style>
body {
width: 100% !important;
min-width: 100%;
margin: 0;
padding: 0;
background-color: #FFF;
}
.mui-body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #212121;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS";
font-weight: 400;
font-size: 14px;
line-height: 1.429;
letter-spacing: 0.001em;
background-color: #FFF;
}
.mui-container, .mui-container-fixed {
max-width: 600px;
display: block;
margin: 0 auto;
clear: both;
text-align: left;
padding-left: 15px;
padding-right: 15px;
}
.mui-container-fixed {
width: 600px;
}
.mui-panel {
padding: 15px;
border-radius: 0;
background-color: #FFF;
border-top: 1px solid #ededed;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
border-bottom: 2px solid #d4d4d4;
}
</style>
</head>
<body>
<table class="mui-body" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<center>
<!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
<div class="mui-container">
<table cellspacing="0" border="0" width="100%">
<tr>
<td class="mui-panel">
<table id="content-wrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<p>random</p>
<p>text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
</center>
</td>
</tr>
</table>
</body>
</html>
Can someone help me with this please?
If only email clients decided to sit down and strictly follow the RFCs... If only they would use the same html css parsing engine...
The question isn't so much HOW but rather, WHAT type of html and css most email clients support consistently across the board. You will find most clients just do their own thing when it comes to parsing your emails and you could end up writing many templates from scratch for the same email.
To save you some time search Foundation for Emails on Google. See direct Link below.
Foundation for Emails | Responsive Email Templates
Foundation for emails is a framework that helps you develop your own custom email templates from templates they already have. Fluid & Responsive for any device. Very clean.
In the process, you will learn which CSS and HTML tags you can use and which aren't supported. Many aren't supported.. To give you an idea, html layouts in emails are created using <table></table> instead of <div></div>. The DOCTYPE you're using is also not ideal; think early 2000's.
Example of correct doctype for all universal emails you will ever write:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Email clients does not support all the css properties. So in short better you use images for linear gradient.
I'm just learning to create a responsive email signature. I am not good at coding so would appreciate any advice.
In part of the code shown below, do I need any special attributes to correct or make sure it's responsive?
I am editing in DreamWeaver and in Chrome preview it seems to work. Though, I have two columns and it's flexible only for the column text on the right, but it doesn't move the second column below the first column.
Also, how do I define which height or min-height to set for the table?
Sorry - I am really a newbie.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Email Signature</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body style="font-size: 11pt; font-family: Calibri, sans-serif;">
<table style="width: 100%; min-height: 120px; font-size: 11pt; font-family: Calibri, sans-serif;" cellpadding="0px" cellspacing="0">
<tbody>
<tr>
<td width="120" style="font-size: 11pt; font-family: Calibri, sans-serif; border-right: 1px solid; border-right-color: #ba1f31; width: 120px; height: 100%; padding-bottom: 0px; padding-left: 0; padding-right: 10px; vertical-align: top; valign="top" rowspan="6">
I think it's not possible. Not for working on all mailing platforms (Outlook, gmail, apple mail, etc). Each one implements and standar of html, and many times is an old one.
You can use these guide to look for the best and most compatible elements: https://www.campaignmonitor.com/css/style-element/style-in-body/
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
I'm currently working on some simple gallery, that should show thumbnails of a fixed size of 148px.
When I specify <!doctype html> at the very beginning of the file it messes up my style so that it looks like on this picture.
Without this line (I guess the browser is working in HTML4 mode then) it looks correct:
Take a look at the file by yourself: http://ablage.stabentheiner.de/2013-08-10_gallery.html
New file version: http://ablage.stabentheiner.de/2013-08-10_gallery2.html same file with different doctype: http://ablage.stabentheiner.de/2013-08-10_gallery2_html4.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Gallerie</title>
<base target="Hauptframe">
<style>
body {
background-color: #CCFFCC;
background-image:url(../background.gif);
}
table {
border:none;
border-spacing:0;
}
img {
border:none;
}
A:hover {
color: #FF0000;
font-weight: bold
}
.imagefloat {
border: medium solid #FFF;
float: left;
margin-top: 0px;
margin-right: 16px;
margin-bottom: 20px;
margin-left: 0px;
}
.nowrap {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 16px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.nowrapline2 {
font-size: 12px;
}
.nowrapline3 {
font-size: 10px;
}
.error {
font-weight: bold;
color: #F00;
}
.caption_cell {
background-color: #FFF;
width: 148px;
height: 80px;
}
</style>
</head>
<body>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p><p class="nowrap nowrapline3">Copyright</p>
</td>
</tr>
</table>
</div>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p>
</td>
</tr>
</table>
</div>
</body>
The solution is simple enough. Images by default are handled as inline objects. For inline rendering, a minimum vertical clearance between rows is generally required and this is added by the browser for better readability. To remove this additional clearance try applying 'display: block' to these images.
Okay, your problem here's simple: you aren't using valid HTML5. The first thing you should always check is that your code validates as well-formed HTML, which yours doesn't. After that, check your CSS too; but just be aware that if the problem is that your site displays more nicely in HTML4 mode than HTML5 mode, then that's not a bug, that means that you've done something wrong writing your code.
Your first step here is to fix all of the glitches which the W3C validator has pointed out; if that doesn't fix the problem, then take another look at your CSS.
I want to define the style of Div based on a CSS file. The CSS code I have written is:
.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
I want the background of each Div section to be light-grey. What's wrong with the above code?
Edited:
This is my HTML code. I changed the Div class as suggested below, but it is not working. Please also check whether the Link tag contains path correctly or not. The CSS file is located in a Lib folder, up-one-level.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Add/Update Political Party</title>
<link rel="stylesheet" href=".\Lib\entryformstyle.css" type="text/css"/>
</head>
<body>
<div id="sectionEntryForm" class="div">
<table id="tblEntryForm" cols="2">
<tr>
<td colspan="2" align="center">Add/Update Political Party</td>
</tr>
<tr>
<td>Party full name:</td>
<td><input id="inPartyFullName" name="inPartyFullName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
</tr>
<tr>
<td>Party short name (initials):</td>
<td><input id="inPartyShortName" name="inPartyShortName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
</tr>
</table>
</div>
</body>
</html>
Nothing, you just have to use <div class="body"> to make the DIV pick it up.
ALL DIVs:
div
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
DIVs with class "body":
div.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
If your CSS file is up one level, you have to include it like this:
<link rel="stylesheet" href="../lib/entryformstyle.css" type="text/css"/>
This only works on the class "body", that is
<div class="body">
If you want it to work on any divs, the selector (".body" in your sample code) should be div.
try deleting the period (.) before 'body'
edit: it is also probably worth having a quick read of this post
it explains the difference between "." and '#' when defining styles.
For this style to work, your div needs to be written like this:
<div class="body">Your text here</div>
In other words, the . in front of the body in your css tells the browser to apply the style in the braces to an element whose class is named body.
Try changing:
background-color:lightgrey;
to
background-color:silver;
or
background-color:#CCC;
This is assuming that your div has the body class applied:
<div class="body"></div>
Either use
div
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;/*#CCC*/
}
to set background color of all div
Or use
div.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
and set <div class="body"></div> for each div.
You can use inline stylesheet as :
<div style="background-color:lightgrey;"></div>