I want to create my Resume in HTML
Is the dimension of the page good as a A4?
How to Position the text like in picture, but I want without divs?
And How to make the page & the text fixed like a PDF or Word so when I print it, it be conform?
This is my Code:
#name {
font-size: 26pt;
font-family: garamond;
font-weight: bold;
display: inline;
}
/*ignore line break*/
.title {
font-size: 12pt;
}
.sous-title {
font-weight: bold;
}
body {
font-size: 11pt;
font-family: Verdana;
color: rgb(64, 64, 64);
max-width: 44em;
/*3ordh*/
padding: 65 45px;
margin: 6em auto 19em;
position: relative;
box-shadow: 0 0.3em 1em rgb(110, 110, 110);
height: 90em
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="portfolionotabs.css">
<title>Resume</title>
</head>
<body>
<p id="name">REDACTED <br>REDACTED</p>
REDACTED REDACTEDAdress Adress EMailEMailEMail
<br> REDACTED0000000
<hr />
<p class="title">Objective</p>
A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to work
with customers and satisfy their needs.
<hr />
<p class="title">Education</p>
ISGS
<p class="sous-title">IT management</p>
September 2014 - July 2017<br> Graduated: No<br> Completed 2nd year
<hr /> CSFMTS
<p class="sous-title"></p>International trade</p>
September 2019 - Current<br> Graduated: Yes<br> Currently on internship
<hr />
<p class="title">Work experience</p>
<p class="sous-title"></p>REDACTED</p>
REDACTED<br> October 2021 - November 2021<br>
<hr />
<p class="title">Languages</p>
English •••••<br> French •••••<br> Italian •••••
<hr />
<p class="title">Skills</p>
Problem-solving Reasonably experienced<br> Communication Reasonably experienced<br> Adaptability
<br> Active Listening
<hr />
<p class="title">Technical skills</p>
Ms-office Advanced level<br> Ciel 2019 Advanced level<br>
<hr />
<p class="title">Hobbies and interests</p>
Exercising and healthcare<br> Yoga and meditation<br> Volunteering
</body>
</html>
Maybe I can answer two of your questions.
How to Position the text like in picture, but i want without divs..?
Divs are really not too difficult and a core concept of html, so it would be beneficial to learn how to use them. You can find some good explanation on MDN Web Docs div details to help you. But since you ask for an alternate, I can offer one: Tables. Now, I personally do not like to use tables, but it can do the job. A warning is that tables can make it more difficult to have a responsive site that works well on small screens. But since you wish to mimic a printed document it would work for that.
Example:
<hr />
<table>
<tr>
<td>
<p class="title">Objective</p>
</td>
<td>A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to
work with customers and satisfy their needs.</td>
</tr>
</table>
<hr />
That's a bit basic and doesn't match the style you want, but gives you the idea of how to place the two columns side by side. Of course you will need to add the appropriate properties to set the cell sizes, padding, and spacing to what you want it to be.
The basic principle is use <tr> for each row and <td> for each cell in the row. Then build like you would a spreadsheet or table in a word document.
And how to make the page and the text fixed like a pdf or word so when i print it, it be conform?
If you use tables, you can use a fixed width (in pixels). That can accomplish this. A good reference is Fixed-width tables with text-overflow on MDN. But again, a warning. This approach can cause difficulty on smaller screens; it is not a responsive design.
Edit: In the other answer, the user updated your entire code into tables for you. But to make it always print the same you may need to add fixed widths. I do hope my answer explains to you way tables are an option and the possible issue with them.
#name{
font-size: 26pt;
font-family: garamond;
font-weight: bold;
display:inline;
} /*ignore line break*/
.title{font-size: 12pt;}
.sous-title{font-weight: bold;}
body{
padding: 10px;
font-size: 11pt;
font-family: Verdana;
color: rgb(64, 64, 64);
max-width: 44em; /*3ordh*/
padding: 65 45px;
margin: 6em auto 19em;
position: relative;
box-shadow: 0 0.3em 1em rgb(110, 110, 110);
height: 90em
}
.fright{
float: right;
margin: 0 20px;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="portfolionotabs.css">
<title>Resume</title>
</head>
<body>
<p id="name">REDACTED <br>REDACTED</p>
<span class="fright">
REDACTED<br>
REDACTED
</span>
<span class="fright">
REDACTED<br>
REDACTED
</span>
<hr />
<table>
<tr>
<td valign="top" width="230px">Objective</td>
<td>
A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to work with customers and satisfy their needs.
</td>
<tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td valign="top">Education</td>
<td>
ISGS<br>
<b>IT management</b><br>
September 2014 - July 2017<br>
Graduated: No<br>
Completed 2nd year
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td></td>
<td>
CSFMTS<br>
<b> International trade</b><br>
September 2019 - Current<br>
Graduated: Yes<br>
Currently on internship
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Work experience</td>
<td>
<b>REDACTED</b><br>
REDACTED<br>
October 2021 - November 2021<br>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Languages</td>
<td>
English •••••<br>
French •••••<br>
Italian •••••
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Skills</td>
<td>
Problem-solving Reasonably experienced<br>
Communication Reasonably experienced<br>
Adaptability<br>
Active Listening
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Technical skills</td>
<td>
Ms-office Advanced level<br>
Ciel 2019 Advanced level<br>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Hobbies and interests</td>
<td>
Exercising and healthcare<br>
Yoga and meditation<br>
Volunteering
</td>
</tr>
</table>
</body>
Related
So, I have the code below and ideally the goal is to have any images present hit a maximum width of 120px for browsers with viewports of 641px+ and then only a maximum width of 27px. The odd part is that if I remove the resizing coding and put it in a separate code block at the bottom of my site it will resize all images on the page, but not how it's supposed to. When I remove the portion of coding, the coding seems to try and work a little more, but not exactly. Maybe there's a different way to do the resizing coding?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media screen and ( min-width: 641px ){
img {
width: 120px;
height: auto;
}
}
#media screen and ( max-width: 640px ){
img {
width: 27px;
height: auto;
}
</style>
</head>
<body>
<!--VGC Year-->
<p style="font-size: 30px">
<b>
VGC 2015
</b>
</p>
<!-- Acronym-->
<table>
<tr>
<td>
<b style="font-size: 20px">
CHALK - - -
</b>
</td>
<!--Arconym Pokemon-->
<td>
<img src="https://www.serebii.net/art/th/488.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/485.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/591.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/645-s.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/115-m.png">
</td>
</tr>
</table>
<!--Arconym descption-->
<p>
This acronym refers to a five Pokemon core consisting of Cresselia, Heatran, Amoonguss, Landorus-Therian, and Mega Kangaskhan with the sixth and final Pokemon being up to a Trainer's personal preference. This sixth Pokemon was typically added on to the end of the acronym and was considered a variant on this standard core. For example, Thundurus-Incarnate was a popular sixth option resulting in the term CHALK-T.
</p>
<!-- Acronym-->
<table>
<tbody>
<tr>
<td>
<p style="font-size: 20px">
<b>
Japan Sand - - -
</b>
</p>
</td>
<!--Arconym Pokemon-->
<td>
<img src="https://www.serebii.net/art/th/373-m.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/248.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/530.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/591.png">
</td>
</tr>
</tbody>
</table>
<!--Arconym descption-->
<p>
Japan Sand was a team popularized in Japan - hence the name - and almost always featured the four Pokemon core of Mega Salamence, Tyranitar, Excadrill and Amoonguss. A common fifth Pokemon added to the team was Belly Drum Huge Power Azumarill to pair with Amoonguss.
</p>
</body>
</html>
I am currently building my first webpage using a custom font from the CSS. This looks like this:
#font-face {
font-family: "Baiti";
src: url("./fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
.navbar
{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
.container{
width:900px;
margin:auto;
}
.box-2 /*targeting class from HTML*/
{
border:8px dotted #ccc;
}
I am now putting some text into my page. Some is inside a table while other is outside of a table:
<html>
<head>
<title>innomotion media</title>
<!--reference CSS file, will only affect CSS PART, HTML comes first-->
<link rel="stylesheet"
type"text/css"
href="styles.css">
</head>
<body>
<!--NavBar-->
<div class="navbar">
Contact
What we do
Who we are
Home
</div>
<!--Heading-->
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
</div>
</body>
</html>
But the result looks like this:
So, if my eyes aren't deceiving me, both texts don't look the same, or do they? To me, the one inside the table seems to be "bolder" or "bigger" in a way? or maybe even a bit darker. However, this cannot be from the HTML code I wrote, or am I just blind here?
The problem is that you are using a th tag, which applies the style font-weight:bold (in my browser at least, and presumably yours).
One simple solution is to add a css rule to override this browser default. A better solution is probably to change the ths (table header) to tds (table cell).
I was able to find this problem by copying your html into the stack editor, then right clicking on the bold text, choosing Inspect, then going to computed properties and looking at the applied properties. I suggest you get comfortable with the inspector; it's invaluable in debugging webpage problems.
th {
font-weight:normal;
}
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
If you use the dev tools in Chrome to inspect the element, you will see that the font-weight is being inherited from the th cell. You should not be using table headers this way.
I would strongly recommend against using table-based layouts in modern web development, but in this instance, you should be putting your header on one row and move your image and paragraph to a new row, using proper td table cells.
[Edit]
To elaborate further, tables are the old way to achieve a small part of what the modern grid properties achieve. To achieve the desired layout, you will need to use two rows, the first of which should span both columns:
.center{
text-align:center;
}
<table border="0">
<tr>
<th colspan=2>
<h1>Julius Tolksdorf</h1>
</th>
</tr>
<tr>
<td class="center">
<img
src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
width=60%
/>
</td>
<td class="center">
<font color="#534f4f" size="+2" >
<p>CEO of innomotion media and head of software developement.
<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</td>
</tr>
</table>
You are applying size = "+2" to all the text and not just the title
Change this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
</font>
To this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
</font>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
Also, check class="box-2" which is assigned only to the first text
$https://jsbin.com/huqukopixe/edit?html,output
Hello guys , this is a edX homework for practice. In the code you will see a border on the banner. This border should not be there. I was trying to make a border to use it emphasizing on the social media account png's. But unfortunately I could not make to make it's length smaller. Andy advice?
Thank you alredy.
I found that your #media has a border-style: solid, if you remove it the white border is gone, and if you remove padding-left: 1000px you will also see the social media icons.
See this.
It's being caused by border-style on the #media selector. Adjust your CSS.
Change
#media {
padding-left: 1000px;
border-style: solid;
border-color: white;
position: relative;
}
to
#media {
padding-left: 1000px;
border-color: white;
position: relative;
}
https://jsbin.com/haxaluweme/1/edit?html,output
And if you want to keep the white border but only at the social media icons:
<!DOCTYPE html>
<html>
<head>
<!-- meta parts-->
<meta charset="utf-8">
<meta lang="en">
<meta name="keywords" content="recipe, content, webdesign, edx">
<meta name="viewport" content="width=device-width" , initial-scale=1.0p>
<meta name="author" content="Berkay MAKAS">
<title>Recipe Project Module-2 by Berkay Makas</title>
<style>
/* Css Parts. "Double Background color failure with text combination */
.textAll {
font-style: italic;
}
#headerone {
font-size: 70px;
background-color: cornflowerblue;
text-align: center;
color: white;
border: 3px solid black;
}
#copy {
background-image: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/music/colorful-fantasy-piano-keyboard-keys-web-header.jpg);
color: white;
background-repeat: no-repeat;
border: 2px solid black;
}
h3 {
color: crimson;
font-style: oblique;
}
h4 {
color: crimson;
}
#media {
float: right;
margin-right: 20px;
text-align: center;
border-style: solid;
width: 200px;
border-color: white;
position: relative;
}
#header #copy {
height: 119px;
}
</style>
</head>
<!-- End of CSS-->
<body class="textAll">
<header role="banner">
</header>
<!-- Header Part-->
<div id="header">
<div id="copy">
<p><b>Designed by Berkay Makas®</b></p>
<!-- Social Media -->
<div id="media">
<img src="http://pngimg.com/uploads/instagram/instagram_PNG10.png" alt="Instagram Logo" width="50" height="50">
<img src="http://www.imagespng.com/Data/Logo/Linkedin-Picture-180x180.png" width="55" height="55">
</div>
</div>
<h1 id="headerone"><i>Recipes for lunch!</i></h1>
<nav>
<ul style="display: inline;">Chicken with Sourdough-Mushroom Stuffing</ul>
<ul style="display: inline">Blueberry-Sour Cream Dessert</ul>
<ul style="display: inline">Main Page</ul>
</nav>
<hr>
<details>
<summary>READ ME!!! </summary>
<p>A brand new recipe paper per day to help you in order to overcome your thoughts on <b>"What the hell I am going to fo this day !</b>"</p>
</details>
<hr>
</div>
<!-- End of the header part-->
<!--Recipes Part -->
<article>
<header id="firstone">
<!-- First Recipe-->
<h3>Chicken with Sourdough-Mushroom Stuffing</h3>
<h4>Ingridients</h4>
<table>
<tr>
<td>Lemon Peel</td>
<td>2 tablespoons</td>
</tr>
<tr>
<td>Sage</td>
<td>1 Tablespoon</td>
</tr>
<tr>
<td>Salt</td>
<td>1 tablespoon</td>
</tr>
<tr>
<td>Grounded black pepper</td>
<td>1 1/2 teaspoons</td>
</tr>
<tr>
<td>Small chicken</td>
<td>8(5 pounds)</td>
</tr>
<tr>
<td>Butter</td>
<td>1/4 cups</td>
</tr>
<tr>
<td>Mushrooms</td>
<td>4 cups</td>
</tr>
<tr>
<td>Garlic</td>
<td>2 cloves</td>
</tr>
<tr>
<td>Baguette</td>
<td>10oz</td>
</tr>
<tr>
<td>Shredded carrot</td>
<td>1 cup</td>
</tr>
<tr>
<td>Chicken broth</td>
<td>1 cup</td>
<tr>
<td>Chopped wallnuts</td>
<td>1/4 cup</td>
</tr>
<tr>
<td>Italian parsley</td>
<td>3 tablespoons</td>
</tr>
</table>
</header>
<section>
<figure>
<img src="http://images.meredith.com/bhg/images/recipe/ss_R064439.jpg" height="250px" weight="250px" alt="Original photo of the food" style="border-style: solid;">
<figcaption>Fig 1. The image of the food.</figcaption>
</figure>
<footer>
<h4>Directions</h4>
<p> 1. Line a 5-1/2- to 6-quart slow cooker with a disposable cooker liner. Lightly coat liner with cooking spray; set aside. Reserve 1 teaspoon of the lemon peel. In a small bowl combine remaining lemon peel, sage, seasoned salt and pepper. Remove
3/4 of the mixture and rub onto chicken legs. Place chicken in slow cooker.<br> 2. Meanwhile, melt butter in a skillet; add mushrooms and garlic. Cook and stir 3 to 5 minutes or until just tender. Stir in remaining sage mixture. Transfer mushroom
mixture to a large bowl. Add bread cubes, and shredded carrot. Drizzle with chicken broth, tossing gently.<br> 3. Lightly pack stuffing on top of chicken. Cover and cook on high-heat setting for 4 to 5 hours.<br> 4. Transfer stuffing and chicken
to a platter.<br> 5. In a bowl combine reserved lemon peel, walnuts, and parsley; sprinkle over chicken. Makes 8 servings.</p>
</footer>
</section>
</article>
<!-- End of first recipe <article> -->
<hr>
<!-- HR lining to design.-->
<article>
<!-- Header Part-->
<header id="secondone">
<h3>Blueberry-Sour Cream Dessert</h3>
<h4>Ingredients</h4>
<table>
<tr>
<td>Dessert Crust</td>
<td>1 recipe</td>
</tr>
<tr>
<td>Fresh or frozen blueberries</td>
<td>3 cups</td>
</tr>
<tr>
<td>Sugar</td>
<td>1/3 cup</td>
</tr>
<tr>
<td>Tapioka</td>
<td>3 tablespoons</td>
</tr>
<tr>
<td>Water</td>
<td>1/4 cup</td>
</tr>
<tr>
<td>Ground Cinnamon</td>
<td>1 teaspoon</td>
</tr>
<tr>
<td>Lemon Peel</td>
<td>1 teaspoon</td>
</tr>
<tr>
<td>Ground Nutmeg</td>
<td>1/4</td>
</tr>
<tr>
<td>Egg yolks</td>
<td>3 units</td>
</tr>
<tr>
<td>Sugar</td>
<td>1/2 cup</td>
</tr>
<tr>
<td>Vanilla</td>
<td>1 teaspoon</td>
</tr>
</table>
</header>
<!-- Section part-->
<section>
<figure>
<img src="http://images.meredith.com/content/dam/bhg/Images/recipe/33/R090601.jpg.rendition.largest.jpg" alt="Blueberry cheesecake" height="250px" weight="250px" style="border-style: solid;">
<figcaption>Fig 1. The image of the food.</figcaption>
</figure>
<footer>
<h4>Directions</h4>
<p>
1. Prepare and bake Dessert Crust. Reduce oven temperature to 350 degrees F. In a medium saucepan, combine 3 cups blueberries, the 1/3 cup sugar, the tapioca, water, cinnamon, lemon peel, and nutmeg. Let stand for 15 minutes. Cook and stir mixture over
medium heat until blueberries become juicy and mixture is bubbly. Turn into partially baked Dessert Crust.<br> 2. In a medium mixing bowl, combine sour cream, egg yolks, the 1/2 cup sugar, and the vanilla. Pour evenly over blueberry
mixture.<br> 3. Bake about 50 minutes or until sour cream layer is set when gently shaken. Cool in pan on a wire rack for 1 hour. With a sharp knife, loosen crust from side of pan; remove side. Cover and chill overnight before serving.<br> 4.
To serve, if desired, garnish with additional blueberries. Makes 12 to 16 slices.</p>
</footer>
</section>
</article>
<hr>
<footer>
<nav>
<ul style="display: inline;">Chicken with Sourdough-Mushroom Stuffing</ul>
<ul style="display: inline">Blueberry-Sour Cream Dessert</ul>
<ul style="display: inline">Main Page</ul>
</nav>
</footer>
</body>
</html>
I'm coding an email for my place of work and because we are business to business, there's a lot of pressure for me to get emails to look nice in Microsoft Outlook. I originally had this set up as a 6 column table (I broke my first row into 6 empty divisions and used colspan), but reduced it to a 3 column table. I was sure that I had all my measurements right, but it seems that Microsoft Outlook is still breaking my table.
In Outlook, the right side of the 3rd, 4th and 5th rows jut out about 100px from the 1st and 2nd rows, and the 5th row, my footer, has the white text squashed into what looks like a 100px wide division and the button floats in the center of rest of the space.
I've quadruple checked my colspans and pixel measurements, as well as replacing my hr tags with .jpg images (but changed them back to hr tags when I found that that didn't make a difference), but it's still giving me Hell. I've been looking at this way to long, I must be missing the problem over and over again.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w31.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>2015 Outdoor Room Design Ideas Promo</title>
<style type="text/css">
.ExternalClass * {
width: 100%;
line-height: 100%;
margin: 0 auto;
}
body {
margin: 0 auto !important;
}
table.container {
width: 100% !important;
border-collapse: collapse !important;
mso-table-lspace:0;
mso-table-rspace:0;
table-layout: fixed ;
vertical-align: top !important;
}
table.layout {
width: 600px !important;
}
table.copy {
width: 550px !important;
}
</style>
</head>
<body style="background-color: #d1d1d1; font-family: sans-serif; font-size: 16px;">
<table class="container" cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center">
<table class="layout" cellspacing="0" cellpadding="0" border="0" width="600px">
<tr><td width="200px" height="10px"></td><td width="200px" height="10px"></td><td width="200px" height="10px"></td></tr>
<tr><td colspan="3" width="600px" height="50px">
<img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Header.jpg" width="600px" height="50px" alt="Hearth and Home magazine, the voice of the hearth, barbecue, and patio industries" /></td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="3" width="600px" height="347px">
<img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Image.jpg" width="600px" height="347px" alt="David Thorne Landscape Architect" /></td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="3" width="550px" height="auto" style="background-color: #FFF; padding-left: 25px; padding-right: 25px;">
<h1 align="center" style="font-size: 22px; color: #477696;">We're Looking for a Few Great<br /> Outdoor Rooms</h1>
<hr width="550px" style="border: 1px #d1d1d1 solid;" />
<p style="color: #000000; font-size: 16px;">The August issue of <i>Hearth & Home</i> will feature Outdoor Room Designs. From spectacular, over-the-top showstoppers, to modest, small-scale spaces, we plan to showcase outdoor living areas that will delight and inspire you, and your customers, no matter their budget or vision.</p>
<p style="font-size: 16px; word-spacing: -1px; color: #000000">We hope this Special Section in <i>Hearth & Home</i> will be something you'll want to save for reference and share with your customers as a design resource and idea source while helping them create outdoor kitchens and living spaces in their backyards.</p>
<p style="color: #000000; font-size: 16px;">We invite you to share photos of outdoor projects you have worked on for possible inclusion in this section. Ideally, we would love to see projects that include outdoor kitchens, outdoor fireplaces or fire pits, AND outdoor dining and seating, but we'll gladly consider those that have only some of those elements.</p>
<p style="word-spacing: -1px; color: #000000; font-size: 16px;">Whether you or your business handled the entire project from inception to completion, or worked on just one aspect of it, such as the design, landscaping or supplying the outdoor kitchen appliances, hearth products, patio furniture or other products, we would love to see your photos and hear a little bit about the details.</p>
<p style="color: #000000; font-size: 16px;">Deadline for submissions will be <b>May 22, 2015</b>. All work will be properly credited to you.</p>
<hr width="550px" style="border: 1px #d1d1d1 solid;" />
<p style="font-size: 19px; color: #477696; font-weight: 600" align="center">Thanks! We can't wait to see<br /> your great Outdoor Rooms!</p>
</td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="2" width="350px" height="80px" style="background-color: #477696; padding-left: 25px; padding-right: 25px;"><p style="color: #FFFFFF; font-size: 14px; font-weight: 200">To submit your project for consideration, click the button to the right and fill out the submission form. When uploading your images, we encourage you to send <i>.zip files</i>. Not sure how to zip files? <a style="color: #FFF" href="http://www.wikihow.com/Zip-Files-Together" alt="How to zip files" target="_blank">Click here</a>.</p></td>
<td width="200px" height="80px" style="background-color: #477696;"><img style="vertical-align: center;" src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Button.jpg" width="167px" height="61px" alt="Click here to submit your outdoor room project" /></td></tr>
<tr><td colspan="3" width="600px" height="50px" style="vertical-align: center;"><p align="center" style="font-size: 14px; color: #000000"><i>Any questions, please contact<br />
</i></p></td></tr>
</table>
</td></tr></table>
</body>
</html>
Nevermind, I resolved my own issue.
It was the three empty cells at the top of the page, so I dropped from 3 columns to 2 columns. I've lost the nice spacing I had above the header, but it is no longer breaking in Outlook.
I have clearly defined the width of my email to be 804px wide max. But within Outlook it will full screen width the whole thing, can't tell if it's a specific element somewhere not taking into account the max width. Trying to see if anyone can see an obvious reason for this.
It looks like the left content text is the issue but I have defined width for that too!
Looks fine within a browser of course! Dam email programs (Outlook).
Screenshot of what it looks like in Outlook.
HTML Email Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WYLES HARDY & Co</title>
<meta name="viewport" content="width = 483" />
<style type="text/css">
a {text-decoration:none; color: #004466; }
a img, img, .images, .images a, .images a img, .images img { border: 0; padding: 0; margin: 0; }
body {width: 100% !important; background-color: #fff; font-family: 'Arial'; }
p { margin: 10px 5px 0px 5px; line-height: 19px; font-size: 14px; font-family: 'Arial'; color: #004466; }
p.larger { margin: 5px 5px 8px 5px; line-height: 19px; font-size: 15px; font-family: 'Arial'; color: #004466; }
p a { color: #00A952; text-decoration: none; font-weight: bold; }
h1 { margin: 5px; color: #00405C; font-weight: bold; font-size: 18px; }
h2 { margin: 10px 5px 10px 5px; color: #00405C; font-weight: bold; font-size: 14px; }
.blue-table { background: #EAF0F4; margin: 0; padding: 0 10px 10px 10px; border: 0; }
.clear-table { background: #fff; margin: 0; padding: 0; border: 0; }
.grid-table { border: 1px solid #004466; margin: 5px; line-height: 20px; font-size: 11px; font-family: 'Arial'; color: #004466; }
.table-div { width: 96%; margin: 2%; height: 1px; border-top: 1px solid #004466; }
.left { text-align: left;}
.right { text-align: right; }
.main { border: 1px solid #444; margin-top: 10px; margin-bottom: 10px; padding: 5px; }
.content { background: #fff; }
</style>
</head>
<body style="margin:0;padding:0">
<a name="top"></a>
<table class="main" width="804px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="804px" class="images">
<tr><td><a target="_blank" href="http://www.wyleshardy.com/businesssales.asp?pge=3"><img style="border: 0; padding: 0" src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/header.jpg" /></a></td></tr>
</table>
<br />
<table width="804px" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td class="clear-table" width="20px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="clear-table" width="395px" valign="top" >
<table class="clear-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<!-- <ul width="405px">
<li>Company established over 30 years ago.</li>
<li>Trades from NW London from leased industrial premises.</li>
<li>Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</li>
<li>The company has a diverse number of clients, together with a significant business relationship with a high profile client group, forged over many years.</li>
<li>It holds ISO 9001 Certification for quality management and also FSC and PEFC accreditations.</li>
<li>It has a dedicated and loyal workforce, with employees currently totaling 23, including 4 directors.</li>
<li>The business and assets include goodwill (name, web domains, client data base, telephone numbers etc.) Contracts, various items of plant & machinery (some subject to finance agreements), and minimal stock.</li>
</ul> -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>•</td>
<td> Company established over 30 years ago.</td>
</tr>
<tr>
<td>•</td>
<td> Trades from NW London from leased industrial premises.</td>
</tr>
<tr>
<td>•</td>
<td> Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</td>
</tr>
</table>
</a>
<img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/frplogo.jpg" width="375px" alt="" title="" />
</td>
</tr>
</table>
</td>
<td class="clear-table" width="10px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="content" width="346px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<p><strong>TURNOVER:</strong> Turnover totalled £2.8m per accounts to June 2013, and £ 1.9m for the 9 months to March 2014.</p>
<p><strong>OPPORTUNITIES:</strong> The Company offers an excellent opportunity to consolidate existing trade and exploit the contracts already in place.</p>
<br>
<h1>ENQUIRIES:</h1>
<p class="larger">All enquiries should<br>be directed to:<br>
<strong>Julie Gearing<br>Nigel Strike<br>FRP Advisory LLP</strong></p>
<p><strong>Tel:</strong> 01277 503 304<br><strong>Fax:</strong> 01277 503 300<br><strong>Email:</strong><br> Julie.Gearing#frpadvisory.com<br>Nigel.Strike#frpadvisory.com</p>
<br>
<p><strong>FRP Advisory LLP</strong><br>Jupiter House<br>Warley Hill Business Park<br>The Drive<br>Brentwood<br>Essex<br>CM13 3BE</p>
<br>
<p>A sales pack containing detailed information regarding the business for sale will be provided to interested parties following the signing and return of a Non-Disclosure Agreement.</p></a>
</td>
</tr>
</table>
<td class="clear-table" width="13px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
</td>
</tr>
</tr>
</table>
</table>
</body>
</html>
You have missed some closing tag and misplaced the closing tag in your HTML part.
I have modified your HTML part and it should be like below.
<table class="main" width="804px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="804px" class="images">
<tr><td><a target="_blank" href="http://www.wyleshardy.com/businesssales.asp?pge=3"><img style="border: 0; padding: 0" src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/header.jpg" /></a></td></tr>
</table>
<br />
<table width="804px" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td class="clear-table" width="20px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="clear-table" width="395px" valign="top" >
<table class="clear-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<!-- <ul width="405px">
<li>Company established over 30 years ago.</li>
<li>Trades from NW London from leased industrial premises.</li>
<li>Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</li>
<li>The company has a diverse number of clients, together with a significant business relationship with a high profile client group, forged over many years.</li>
<li>It holds ISO 9001 Certification for quality management and also FSC and PEFC accreditations.</li>
<li>It has a dedicated and loyal workforce, with employees currently totaling 23, including 4 directors.</li>
<li>The business and assets include goodwill (name, web domains, client data base, telephone numbers etc.) Contracts, various items of plant & machinery (some subject to finance agreements), and minimal stock.</li>
</ul> -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>•</td>
<td> Company established over 30 years ago.</td>
</tr>
<tr>
<td>•</td>
<td> Trades from NW London from leased industrial premises.</td>
</tr>
<tr>
<td>•</td>
<td> Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</td>
</tr>
</table>
</a>
<img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/frplogo.jpg" width="375px" alt="" title="" />
</td>
</tr>
</table>
</td>
<td class="clear-table" width="10px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="content" width="346px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<p><strong>TURNOVER:</strong> Turnover totalled £2.8m per accounts to June 2013, and £ 1.9m for the 9 months to March 2014.</p>
<p><strong>OPPORTUNITIES:</strong> The Company offers an excellent opportunity to consolidate existing trade and exploit the contracts already in place.</p>
<br>
<h1>ENQUIRIES:</h1>
<p class="larger">All enquiries should<br>be directed to:<br>
<strong>Julie Gearing<br>Nigel Strike<br>FRP Advisory LLP</strong></p>
<p><strong>Tel:</strong> 01277 503 304<br><strong>Fax:</strong> 01277 503 300<br><strong>Email:</strong><br> Julie.Gearing#frpadvisory.com<br>Nigel.Strike#frpadvisory.com</p>
<br>
<p><strong>FRP Advisory LLP</strong><br>Jupiter House<br>Warley Hill Business Park<br>The Drive<br>Brentwood<br>Essex<br>CM13 3BE</p>
<br>
<p>A sales pack containing detailed information regarding the business for sale will be provided to interested parties following the signing and return of a Non-Disclosure Agreement.</p></a>
</td>
</tr>
</table>
</td>
<td class="clear-table" width="13px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
</tr>
</table>
</td>
</tr>
</table>
I've now fixed the issue, the changes required were to change the following:
Before
width="395px"
After
width="395"