max-width: 850px;
Thanks! Almost there. Why won’t the first section cooperate like the rest?
It looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body style="margin: 0; padding: 0;">
<div class="jumbotron text-center">
<h1>InterFace Multifamily Texas<br />to be Held September 26th in Dallas</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p>The leading <b>owners, investors, developers and operators of multifamily property</b> in the great state of Texas will come together September 26th for the 7th annual <b>InterFace Multifamily Texas</b> conference.</p>
<p>The conference will focus on both the supply/demand balance as well as on who is <b>buying, building and financing apartment properties in Dallas, Houston, San Antonio and Austin, as well as trends in leasing, management and operations.</b> The event also looks at macro economic and demographic trends influencing and impacting the apartment markets in Texas.</p>
<p>The event will be held at The Westin Galleria with an opening cocktail reception on the evening of September 25th. Last year's event attracted over 300 attendees from around the state, as well as investors, developers and financiers from around the country who are active in Texas. With the multifamily market still continuing its extended strong run in Texas, albeit with more issues and concerns than in the past, there will be plenty to talk about and attendance for the conference is expected to surpass last year.</p>
<p><b>If you are active in multifamily property in Texas, you need to attend the 7th annual InterFace Multifamily Texas!</b></p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Topics to be Discussed</h3>
<ul>
<li>Investment trends: Who's buying? Who's selling? Where are cap rates headed?</li>
<li>Are Texas markets still absorbing new supply or has new development lapped demand? What impact is being seen on rental rates and occupancy?</li>
<li>What is the development pipeline for 2019-2020? What's being built? Where?</li>
<li>What's the "Big Picture" outlook for supply and demand and what is short and near term outlook for Texas economy?</li>
<li>The availability of debt and equity capital for multifamily investment and development projects</li>
<li>Operations trends and issues impacting the bottom line</li>
<li>Architecture/design trends in new product</li>
<li>The outlook for the DFW, Houston, San Antonio and Austin markets</li></ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p><img src="http://interfaceconferencegroup.com/shs17/images/ShakeHands.png"></p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Who Should Attend?</h3>
<ul>
<li>Owners/Investors/Developers</li>
<li>Operators/Managers</li>
<li>Lenders/Financial Intermediaries</li>
<li>Investment Sales Brokers, Appraisers, Attorneys</li>
<li>Architects, Design Specialists, Contractors</li>
<li>Leasing & Marketing Professionals</li>
<li>Vendors and Others Allied to the Field</li></ul>
And anyone investigating or interested in learning more about the multifamily markets in Texas!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Additional InterFace Event Happening on September 27!</h3>
<p>InterFace will also be hosting the tenth annual <b>Healthcare Real Estate</b> conference on September 27th. For more information on that event, <a href="http://interfaceconferencegroup.com/hcre2018" target="_blank">click here</a>.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p>InterFace Multifamily Texas</b> is produced by <b><i>Texas Real Estate Business</i></b>, <b><i>Student Housing Business</i></b> and the InterFace Conference Group, a division of France Media, Inc. the <b>largest commercial real estate publisher in the United States.</b> France Media, Inc.'s titles include <i>Seniors Housing Business, Shopping Center Business, Ancillary Retail, California Centers, Retail & Restaurant Facility Business, Heartland Real Estate Business, Texas Real Estate Business, Southeast Real Estate Business, Northeast Real Estate Business, and Western Real Estate Business,</i> along with 12 E-newsletters and numerous news and information sites.</p>
</div>
</div>
</div>
</body>
</html>
created
23h
last reply
7m
17
replies
158
views
5
users
4
likes
1
link
9
gandalf458A closed mouth gathers no feet.
23h
@nickjtopolski
<off-topic>
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
</off-topic>
WebSteve
22h
Simply remove everything except the content between <td></td> then convert all the <td> to <div> and </td> to </div>.
nickjtopolski
22h
gandalf458
Ok, fixed.
nickjtopolski
22h
WebSteve
What about the CSS?
nickjtopolski
22h
This is my new code. Can anyone help with css please? My h1 isn't working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
<style>
.h1
{color: #990000;
display: block;
font-family: Helvetica, sans-serif;;
font-size: 24px;
line-height: 34px;
font-weight: 700;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<div class="jumbotron text-center">
<h1>InterFace Multifamily Texas<br />to be Held September 26th in Dallas</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p>The leading <b>owners, investors, developers and operators of multifamily property</b> in the great state of Texas will come together September 26th for the 7th annual <b>InterFace Multifamily Texas</b> conference.</p>
<p>The conference will focus on both the supply/demand balance as well as on who is <b>buying, building and financing apartment properties in Dallas, Houston, San Antonio and Austin, as well as trends in leasing, management and operations.</b> The event also looks at macro economic and demographic trends influencing and impacting the apartment markets in Texas.</p>
<p>The event will be held at The Westin Galleria with an opening cocktail reception on the evening of September 25th. Last year's event attracted over 300 attendees from around the state, as well as investors, developers and financiers from around the country who are active in Texas. With the multifamily market still continuing its extended strong run in Texas, albeit with more issues and concerns than in the past, there will be plenty to talk about and attendance for the conference is expected to surpass last year.</p>
<p><b>If you are active in multifamily property in Texas, you need to attend the 7th annual InterFace Multifamily Texas!</b></p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Topics to be Discussed</h3>
<ul>
<li>Investment trends: Who's buying? Who's selling? Where are cap rates headed?</li>
<li>Are Texas markets still absorbing new supply or has new development lapped demand? What impact is being seen on rental rates and occupancy?</li>
<li>What is the development pipeline for 2019-2020? What's being built? Where?</li>
<li>What's the "Big Picture" outlook for supply and demand and what is short and near term outlook for Texas economy?</li>
<li>The availability of debt and equity capital for multifamily investment and development projects</li>
<li>Operations trends and issues impacting the bottom line</li>
<li>Architecture/design trends in new product</li>
<li>The outlook for the DFW, Houston, San Antonio and Austin markets</li></ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p><img src="http://interfaceconferencegroup.com/shs17/images/ShakeHands.png"></p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Who Should Attend?</h3>
<ul>
<li>Owners/Investors/Developers</li>
<li>Operators/Managers</li>
<li>Lenders/Financial Intermediaries</li>
<li>Investment Sales Brokers, Appraisers, Attorneys</li>
<li>Architects, Design Specialists, Contractors</li>
<li>Leasing & Marketing Professionals</li>
<li>Vendors and Others Allied to the Field</li></ul>
And anyone investigating or interested in learning more about the multifamily markets in Texas!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Additional InterFace Event Happening on September 27!</h3>
<p>InterFace will also be hosting the tenth annual <b>Healthcare Real Estate</b> conference on September 27th. For more information on that event, <a href="http://interfaceconferencegroup.com/hcre2018" target="_blank">click here</a>.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p>InterFace Multifamily Texas</b> is produced by <b><i>Texas Real Estate Business</i></b>, <b><i>Student Housing Business</i></b> and the InterFace Conference Group, a division of France Media, Inc. the <b>largest commercial real estate publisher in the United States.</b> France Media, Inc.'s titles include <i>Seniors Housing Business, Shopping Center Business, Ancillary Retail, California Centers, Retail & Restaurant Facility Business, Heartland Real Estate Business, Texas Real Estate Business, Southeast Real Estate Business, Northeast Real Estate Business, and Western Real Estate Business,</i> along with 12 E-newsletters and numerous news and information sites.</p>
</div>
</div>
</div>
</body>
</html>
TechnoBearLife is not a malfunction
22h
.h1
Try removing the dot before the h1. .h1 is targetting something with a class of h1, rather than the element.
nickjtopolski
21h
Ok, thanks!
nickjtopolski
21h
TechnoBear
What about padding, justification, containers, etc?
gandalf458A closed mouth gathers no feet.
21h
Apply whatever padding, margin etc you want to your .container, .row or .col-sm-4 classes.
nickjtopolski
21h
Thanks guys. How do I center the image now?
PaulOBAdvisor
18h
How do I center the image now?
An image is an inline element and can be centred just like text by using text-align:center on the parent container of the image. Or alternatively set the image itself to be display:block and then use margin:auto to centre it.
nickjtopolski
1h
1
Thanks. Sorry, but why doesn't the p5 work at the bottom of the code (see below)? It's supposed to be Helvetica (like the rest of the font) but smaller. It shows up in a serif font for some reason. Also, how do I shorten my <hr> lines? When placed into cvent, the <hr> lines are too long and run off the page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multifamily Texas – Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body style="margin-left: 20px; margin-right: 20px; padding: 0;">
<div>
<h1>InterFace Multifamily Texas to be Held<br>September 26th in Dallas</h1>
</div>
<div class="container1">
<p>The leading <b>owners, investors, developers and operators of multifamily property</b> in the great state of Texas will come together September 26th for the 7th annual <b>InterFace Multifamily Texas</b> conference.</p>
<p>The conference will focus on both the supply/demand balance as well as on who is <b>buying, building and financing apartment properties in Dallas, Houston, San Antonio and Austin, as well as trends in leasing, management and operations.</b> The event also looks at macro economic and demographic trends influencing and impacting the apartment markets in Texas.</p>
<p>The event will be held at The Westin Galleria with an opening cocktail reception on the evening of September 25th. Last year's event attracted over 300 attendees from around the state, as well as investors, developers and financiers from around the country who are active in Texas. With the multifamily market still continuing its extended strong run in Texas, albeit with more issues and concerns than in the past, there will be plenty to talk about and attendance for the conference is expected to surpass last year.</p>
<p><b>If you are active in multifamily property in Texas, you need to attend the 7th annual InterFace Multifamily Texas!</b></p>
</div>
<div class="container">
<hr style="margin-bottom: 20px;" />
<h3>Topics to be Discussed</h3>
<ul>
<li>Investment trends: Who's buying? Who's selling? Where are cap rates headed?</li>
<li>Are Texas markets still absorbing new supply or has new development lapped demand? What impact is being seen on rental rates and occupancy?</li>
<li>What is the development pipeline for 2019-2020? What's being built? Where?</li>
<li>What's the "Big Picture" outlook for supply and demand and what is short and near term outlook for Texas economy?</li>
<li>The availability of debt and equity capital for multifamily investment and development projects</li>
<li>Operations trends and issues impacting the bottom line</li>
<li>Architecture/design trends in new product</li>
<li>The outlook for the DFW, Houston, San Antonio and Austin markets</li>
</ul>
</div>
<div class="container3">
<p4><img src="http://interfaceconferencegroup.com/mftx18/images/MFTX-ShakeHands.jpg"></p4>
</div>
<div class="container">
<h3>Who Should Attend?</h3>
<ul>
<li>Owners/Investors/Developers</li>
<li>Operators/Managers</li>
<li>Lenders/Financial Intermediaries</li>
<li>Investment Sales Brokers, Appraisers, Attorneys</li>
<li>Architects, Design Specialists, Contractors</li>
<li>Leasing & Marketing Professionals</li>
<li>Vendors and Others Allied to the Field</li></ul>
<p>And anyone investigating or interested in learning more about the multifamily markets in Texas!</p>
</div>
<div class="container">
<hr style="margin-bottom: 20px;" />
<h3>Additional InterFace Event Happening on September 27!</h3>
<p>InterFace will also be hosting the tenth annual <b>Healthcare Real Estate</b> conference on September 27th. For more information on that event, <a href="http://interfaceconferencegroup.com/hcre2018" target="_blank">click here</a>.</p>
</div>
<div class="container">
<hr style="margin-bottom: 20px;" />
<p5><b>InterFace Multifamily Texas</b> is produced by <b><i>Texas Real Estate Business</i></b>, <b><i>Student Housing Business</i></b> and the InterFace Conference Group, a division of France Media, Inc. the <b>largest commercial real estate publisher in the United States.</b> France Media, Inc.'s titles include <i>Seniors Housing Business, Shopping Center Business, Ancillary Retail, California Centers, Retail & Restaurant Facility Business, Heartland Real Estate Business, Texas Real Estate Business, Southeast Real Estate Business, Northeast Real Estate Business, and Western Real Estate Business,</i> along with 12 E-newsletters and numerous news and information sites.</p5>
</div>
</body>
</html>
TechnoBearLife is not a malfunction
why doesn't the p5 work at the bottom of the code
There is no such element in HTML.
It's supposed to be Helvetica (like the rest of the font) but smaller.
Just add a class to the paragraph and style it accordingly. Set font-size to 80%, or 0.75em, or whatever suits.
Also, how do I shorten my <hr> lines?
Have you tried setting a width on it in your CSS?
TechnoBearLife is not a malfunction
1h
1
why doesn't the p5 work at the bottom of the code
There is no such element in HTML.
It's supposed to be Helvetica (like the rest of the font) but smaller.
Just add a class to the paragraph and style it accordingly. Set font-size to 80%, or 0.75em, or whatever suits.
Also, how do I shorten my <hr> lines?
Have you tried setting a width on it in your CSS?
nickjtopolski
37m
Yes, just did, but now this is happening. The type is running off the page:
Screen Shot 2018-06-20 at 10.03.48 AM.png1001x802 175 KB
Here is my css:
@charset "UTF-8";
/* CSS Document */
h1 {color: #333;
display: block;
font-family: Helvetica, sans-serif;
font-size: 32px;
line-height: 38px;
font-weight: 700;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
h2 {color: #fff;
display: block;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
h3 {color: #333;
display: block;
font-family: Helvetica, sans-serif;
font-size: 26px;
font-weight: 700;
margin-top: 0px !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
h4 {color: #fff;
display: block;
font-family: Minion Pro, Times New Roman, serif;
font-size: 28px;
font-weight: normal;
font-style: italic;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
h5 {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
p {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 23px;
font-weight: normal;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: left;
}
p2 {color: #fff;
display: block;
padding-top: 15px;
padding-bottom: 5px;
font-family: Helvetica, sans-serif;
font-size: 22px;
font-weight: 500;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
p3 {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 17px;
font-weight: normal;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
p4 {display: block;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
p5 {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 14px;
line-height: 22px;
font-weight: normal;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: left;
}
ul {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 25px;
font-weight: normal;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: left;
}
.container {padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto}
@media (min-width:768px)
{
.container1 {padding-right: 15px;
padding-left: 15px;
padding-bottom: 20px
margin-right: auto;
margin-left: auto}
@media (min-width:768px)
{
.container2 {padding-right: 15px;
padding-left: 15px;
padding-top: 20px;
padding-bottom: 20px;
background-color: #dce4ea;
margin-right: auto;
margin-left: auto}
@media (min-width:768px)
{
.container3 {padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 15px;
align-content: center;
margin-right: auto;
margin-left: auto}
@media (min-width:768px)
{
.container4 {padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 15px;
background-color: #375e97;
margin-right: auto;
margin-left: auto}
@media (min-width:768px)
{
.container5 {padding-right: 15px;
padding-left: 15px;
padding-top: 20px;
padding-bottom: 20px;
background-color: #dce4ea;
margin-right: auto;
margin-left: auto}
@media (min-width:768px)
{
.container6 {padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 35px;
margin-right: auto;
margin-left: auto}
@media (min-width:768px)
{
.button {transition: all 100ms ease-in; /**doubtful in emails**/
background: #375e97;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color:#ffffff;
text-align:center;
}
.button:hover {transition: all 100ms ease-in; /**doubtful in emails**/
background: #555;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color:#ffffff;
text-align:center;
}
TechnoBearLife is not a malfunction
24m
There are several problems there that I see at a glance.
<p4>, <p5> etc. are not valid HTML elements.
Your media queries are all missing the closing }.
(And you really shouldn't need all those !important rules. That's usually an indication of an underlying problem.)
nickjtopolski
16m
Thanks, I understand. But how do I separate each section and streamline them at the same time. What could I use for a substitute for let's say, p3, p2, etc?
This is why I need them:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body style="margin: 0; padding: 0;">
<div>
<h1>Register Now!</h1>
<h5>Registration is $359 and $289 for each additional attendee from the same company.</h5>
</div>
<div class="container6">
<table align="center" width="600" border="1" bordercolor="#375e97" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#375e97" align="center" colspan="2"><p2>Regular Registration Pricing</p2></td>
</tr>
<tr>
<td width="50%" style="padding: 10px;"><p3>Single Attendee</p3></td>
<td width="50%" style="padding: 10px;"><p3>$359</p3></td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>Two Attendees</p3></td>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>$648</p3></td>
</tr>
<tr>
<td width="50%" style="padding: 10px;"><p3>Three Attendees</p3></td>
<td width="50%" style="padding: 10px;"><p3>$937</p3></td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>Four Attendees</p3></td>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>$1226</p3></td>
</tr>
<tr>
<td width="50%" style="padding: 10px;"><p3>Five Attendees</p3></td>
<td width="50%" style="padding: 10px;"><p3>$1515</p3></td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>Six Attendees</p3></td>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>$1804</p3></td>
</tr>
</table>
</div>
<div class="container5">
<h3>Refund Policy</h3>
<p><b>InterFace Conference Group/France Media, Inc. Cancellation Policy:</b> If you cancel your attendance 30 days or more before the conference, you will be issued a full refund. Within 30 days, you will be given a credit for the amount you paid. This credit must be used within one year of the conference date to apply to another InterFace conference, for an equal or lesser amount.</p>
<p align="center">InterFace Conference Group/France Media, Inc. <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/7e42d5bc6e55405e8c8bd7f280de4d3c.doc" target="_blank">Attendance & Substitution Policy</a> and <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/4c106328c8e140e4b66ba30f4659af92.docx" target="_blank">Privacy Policy</a></p>
</div>
</body>
</html>
This is really the most basic of CSS basics, so I’d strongly suggest you take time to look at a couple of tutorials and ensure you get a good grasp of this. e.g. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
You add a class name to the paragraph. The choice of name is up to you, but make it something meaningful.
<p class="refund">This is our refund policy</p>
Then you create a rule for it in your CSS:
.refund {font-size: 0.8em;
font-weight: bold;
color: #FF0000;
}
(I’m not suggesting that’s how you want to style it; just giving an example.)
1 Like
I can’t make head nor tail of the code posted, but it looks like you have not applied the max-width to the first paragraph.
Oh, ok. Yes that looks familiar. I will look at tutorials again. Thanks for your patience!
1 Like
@nickjtopolski: your code in this post is decidedly garbled. It looks as if you tried to copy from an earlier post and accidentally got the whole thread with it! Please could you edit it so that we know which code you’re currently working with? Thank you.
1 Like
Sorry. I edited the html AND css. These are the latest updates:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multifamily Texas – Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body style="margin: 0; padding-left: 10px; padding-right: 10px;">
<div>
<h1>InterFace Multifamily Texas to be Held<br>September 26th in Dallas</h1>
</div>
<div class="container">
<p>The leading <b>owners, investors, developers and operators of multifamily property</b> in the great state of Texas will come together September 26th for the 7th annual <b>InterFace Multifamily Texas</b> conference.</p>
<p>The conference will focus on both the supply/demand balance as well as on who is <b>buying, building and financing apartment properties in Dallas, Houston, San Antonio and Austin, as well as trends in leasing, management and operations.</b> The event also looks at macro economic and demographic trends influencing and impacting the apartment markets in Texas.</p>
<p>The event will be held at The Westin Galleria with an opening cocktail reception on the evening of September 25th. Last year's event attracted over 300 attendees from around the state, as well as investors, developers and financiers from around the country who are active in Texas. With the multifamily market still continuing its extended strong run in Texas, albeit with more issues and concerns than in the past, there will be plenty to talk about and attendance for the conference is expected to surpass last year.</p>
<p><b>If you are active in multifamily property in Texas, you need to attend the 7th annual InterFace Multifamily Texas!</b></p>
</div>
<div class="container">
<hr align="center" style="margin-bottom: 20px; max-width: 850px;" />
<h3>Topics to be Discussed</h3>
<ul>
<li>Investment trends: Who's buying? Who's selling? Where are cap rates headed?</li>
<li>Are Texas markets still absorbing new supply or has new development lapped demand? What impact is being seen on rental rates and occupancy?</li>
<li>What is the development pipeline for 2019-2020? What's being built? Where?</li>
<li>What's the "Big Picture" outlook for supply and demand and what is short and near term outlook for Texas economy?</li>
<li>The availability of debt and equity capital for multifamily investment and development projects</li>
<li>Operations trends and issues impacting the bottom line</li>
<li>Architecture/design trends in new product</li>
<li>The outlook for the DFW, Houston, San Antonio and Austin markets</li>
</ul>
</div>
<div class="container3">
<p4><img src="http://interfaceconferencegroup.com/mftx18/images/MFTX-ShakeHands.jpg"></p4>
</div>
<div class="container">
<h3>Who Should Attend?</h3>
<ul>
<li>Owners/Investors/Developers</li>
<li>Operators/Managers</li>
<li>Lenders/Financial Intermediaries</li>
<li>Investment Sales Brokers, Appraisers, Attorneys</li>
<li>Architects, Design Specialists, Contractors</li>
<li>Leasing & Marketing Professionals</li>
<li>Vendors and Others Allied to the Field</li>
</ul>
<p>And anyone investigating or interested in learning more about the multifamily markets in Texas!</p>
</div>
<div class="container">
<hr align="center" style="margin-bottom: 20px; max-width: 850px;" />
<h3>Additional InterFace Event Happening on September 27!</h3>
<p>InterFace will also be hosting the tenth annual <b>Healthcare Real Estate</b> conference on September 27th. For more information on that event, <a href="http://interfaceconferencegroup.com/hcre2018" target="_blank">click here</a>.</p>
</div>
<div class="container">
<hr align="center" style="margin-bottom: 20px; max-width: 850px;" />
<p class="refund"><b>InterFace Multifamily Texas</b> is produced by <b><i>Texas Real Estate Business</i></b>, <b><i>Student Housing Business</i></b> and the InterFace Conference Group, a division of France Media, Inc. the <b>largest commercial real estate publisher in the United States.</b> France Media, Inc.'s titles include <i>Seniors Housing Business, Shopping Center Business, Ancillary Retail, California Centers, Retail & Restaurant Facility Business, Heartland Real Estate Business, Texas Real Estate Business, Southeast Real Estate Business, Northeast Real Estate Business, and Western Real Estate Business,</i> along with 12 E-newsletters and numerous news and information sites.</p>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
h1 {color: #333;
display: block;
font-family: Helvetica, sans-serif;
font-size: 32px;
line-height: 38px;
font-weight: 700;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
h2 {color: #fff;
display: block;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
h3 {color: #333;
display: block;
font-family: Helvetica, sans-serif;
font-size: 26px;
font-weight: 700;
margin-top: 0px !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
h4 {color: #fff;
display: block;
font-family: Minion Pro, Times New Roman, serif;
font-size: 28px;
font-weight: normal;
font-style: italic;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
h5 {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
p {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 23px;
font-weight: normal;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: left;
}
p3 {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 17px;
font-weight: normal;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
p4 {display: block;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: center;
}
ul {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 25px;
font-weight: normal;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
text-align: left;
}
.container {padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
@media (min-width:768px)
{
.container1 {padding-right: 15px;
padding-left: 15px;
padding-bottom: 20px
margin-right: auto;
margin-left: auto;
max-width: 850px;
@media (min-width: 768px)
{
.container2 {padding-right: 15px;
padding-left: 15px;
padding-top: 20px;
padding-bottom: 20px;
background-color: #dce4ea;
margin-right: auto;
margin-left: auto
max-width: 850px;
@media (min-width:768px)
{
.container3 {padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 15px;
align-content: center;
margin-right: auto;
margin-left: auto
max-width: 850px;
@media (min-width:768px)
{
.container4 {padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 15px;
background-color: #375e97;
margin-right: auto;
margin-left: auto;
max-width: 850px;
@media (min-width:768px)
{
.container5 {padding-right: 15px;
padding-left: 15px;
padding-top: 20px;
padding-bottom: 20px;
background-color: #dce4ea;
margin-right: auto;
margin-left: auto;
@media (min-width:768px)
{
.container6 {padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 35px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
@media (min-width:768px)
{
.title {color: #fff;
display: block;
padding-top: 15px;
padding-bottom: 5px;
font-family: Helvetica, sans-serif;
font-size: 22px;
font-weight: 500;
text-align: center;
}
.refund {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 14px;
line-height: 22px;
font-weight: normal;
text-align: left;
}
.button {transition: all 100ms ease-in; /**doubtful in emails**/
background: #375e97;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color:#ffffff;
text-align:center;
}
.button:hover {transition: all 100ms ease-in; /**doubtful in emails**/
background: #555;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color:#ffffff;
text-align:center;
}
Don’t use inline CSS. Put these rules in with the rest of your CSS.
I did the p class refund, but it didn’t seem to work?
.container {padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
@media (min-width:768px)
{
.container1 {padding-right: 15px;
padding-left: 15px;
padding-bottom: 20px
margin-right: auto;
margin-left: auto;
max-width: 850px;
@media (min-width: 768px)
{
As I said before, your media queries are badly formed. You need to close your first set of rules before opening the media query:
.container {padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
} /* Add this*/
If the next set of rules is really intended to be a media query, then the whole lot needs to be wrapped in { }:
@media screen and (min-width:768px){
.container1 {padding-right: 15px;
padding-left: 15px;
padding-bottom: 20px
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
}
However, looking at that section, I’m not sure what’s intended. Generally, you have the basic rules for an element or class, and then the media query to adjust those rules for certain widths, but it doesn’t look as if that’s what you’re trying to do.
The mis-formed rules earlier in your page will be having a knock-on effect. Try fixing those first.
Ok, I will fix these issues. As for the media queries, I copied and paste the original css from a tutorial template the other day. If they are not needed in MY code, I will get rid of them.
Thanks!
Excellent. You’re amazing! Here are my latest codes:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multifamily Texas – Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body>
<div class="container">
<h1>InterFace Multifamily Texas to be Held<br>September 26th in Dallas</h1>
<p>The leading <b>owners, investors, developers and operators of multifamily property</b> in the great state of Texas will come together September 26th for the 7th annual <b>InterFace Multifamily Texas</b> conference.</p>
<p>The conference will focus on both the supply/demand balance as well as on who is <b>buying, building and financing apartment properties in Dallas, Houston, San Antonio and Austin, as well as trends in leasing, management and operations.</b> The event also looks at macro economic and demographic trends influencing and impacting the apartment markets in Texas.</p>
<p>The event will be held at The Westin Galleria with an opening cocktail reception on the evening of September 25th. Last year's event attracted over 300 attendees from around the state, as well as investors, developers and financiers from around the country who are active in Texas. With the multifamily market still continuing its extended strong run in Texas, albeit with more issues and concerns than in the past, there will be plenty to talk about and attendance for the conference is expected to surpass last year.</p>
<p><b>If you are active in multifamily property in Texas, you need to attend the 7th annual InterFace Multifamily Texas!</b></p>
</div>
<div class="container">
<img src="http://interfaceconferencegroup.com/mftx18/images/MFTX-ShakeHands.jpg" alt="Shake Hands" class="center">
</div>
<div class="container">
<h3>Topics to be Discussed</h3>
<ul>
<li>Investment trends: Who's buying? Who's selling? Where are cap rates headed?</li>
<li>Are Texas markets still absorbing new supply or has new development lapped demand? What impact is being seen on rental rates and occupancy?</li>
<li>What is the development pipeline for 2019-2020? What's being built? Where?</li>
<li>What's the "Big Picture" outlook for supply and demand and what is short and near term outlook for Texas economy?</li>
<li>The availability of debt and equity capital for multifamily investment and development projects</li>
<li>Operations trends and issues impacting the bottom line</li>
<li>Architecture/design trends in new product</li>
<li>The outlook for the DFW, Houston, San Antonio and Austin markets</li>
</ul>
</div>
<div class="container">
<hr align="center" style="margin-bottom: 20px; max-width: 850px;" />
<h3>Who Should Attend?</h3>
<ul>
<li>Owners/Investors/Developers</li>
<li>Operators/Managers</li>
<li>Lenders/Financial Intermediaries</li>
<li>Investment Sales Brokers, Appraisers, Attorneys</li>
<li>Architects, Design Specialists, Contractors</li>
<li>Leasing & Marketing Professionals</li>
<li>Vendors and Others Allied to the Field</li>
</ul>
<p>And anyone investigating or interested in learning more about the multifamily markets in Texas!</p>
</div>
<div class="container2">
<h3>Additional InterFace Event Happening on September 27!</h3>
<p>InterFace will also be hosting the tenth annual <b>Healthcare Real Estate</b> conference on September 27th. For more information on that event, <a href="http://interfaceconferencegroup.com/hcre2018" target="_blank">click here</a>.</p>
</div>
<div class="container">
<p class="refund"><b>InterFace Multifamily Texas</b> is produced by <b><i>Texas Real Estate Business</i></b>, <b><i>Student Housing Business</i></b> and the InterFace Conference Group, a division of France Media, Inc. the <b>largest commercial real estate publisher in the United States.</b> France Media, Inc.'s titles include <i>Seniors Housing Business, Shopping Center Business, Ancillary Retail, California Centers, Retail & Restaurant Facility Business, Heartland Real Estate Business, Texas Real Estate Business, Southeast Real Estate Business, Northeast Real Estate Business, and Western Real Estate Business,</i> along with 12 E-newsletters and numerous news and information sites.</p>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
body {margin: 0;
padding-left: 10px;
padding-right: 10px;
}
h1 {color: #333;
display: block;
font-family: Helvetica, sans-serif;
font-size: 32px;
line-height: 38px;
font-weight: 700;
text-align: center;
}
h2 {color: #fff;
display: block;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
}
h3 {color: #333;
display: block;
font-family: Helvetica, sans-serif;
font-size: 26px;
font-weight: 700;
text-align: center;
}
h4 {color: #fff;
display: block;
font-family: Minion Pro, Times New Roman, serif;
font-size: 28px;
font-weight: normal;
font-style: italic;
text-align: center;
}
h5 {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
text-align: center;
}
p, ul {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 23px;
font-weight: normal;
text-align: left;
}
p3 {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 17px;
font-weight: normal;
text-align: center;
}
.container {padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container2 {padding-top: 10px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
background-color: #dce4ea;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.title {color: #fff;
display: block;
padding-top: 15px;
padding-bottom: 5px;
font-family: Helvetica, sans-serif;
font-size: 22px;
font-weight: 500;
text-align: center;
}
.refund {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 14px;
line-height: 22px;
font-weight: normal;
text-align: left;
}
.button {transition: all 100ms ease-in; /**doubtful in emails**/
background: #375e97;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color:#ffffff;
text-align:center;
}
.button:hover {transition: all 100ms ease-in; /**doubtful in emails**/
background: #555;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color:#ffffff;
text-align:center;
}
OK - that’s looking better. Is it behaving as you want?
You could tidy the code up a bit further.
p3 {color: #666;
display: block;
font-family: Helvetica, sans-serif;
font-size: 17px;
font-weight: normal;
text-align: center;
}
That can all come out, as we’ve established there is no <p3>.
Heading tags (<h1> to <h6>) are display:block by default, as are paragraphs, so you can remove those rules from your CSS; they’re not needed.
Add font-family: Helvetica, sans-serif; to your rules for body, and then you can remove it from all the other places it appears.
There are other places you could consolidate your code. For example, you could also put the color: #666; rule on the body and remove the other instances of it. Then you only need the color declaration on those elements which are not #666.
Oh, great. It is working better. Thanks!
I have another question if that’s okay. How do I fix this spacing??
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multifamily Texas – Registration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body style="margin: 0; padding: 0;">
<div>
<h1>Register Now!</h1>
<h5>Registration is $359 and $289 for each additional attendee from the same company.</h5>
</div>
<div class="container6">
<table align="center" width="600" border="1" bordercolor="#375e97" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#375e97" align="center" colspan="2"><p class="title">Regular Registration Pricing</p></td>
</tr>
<tr>
<td width="50%" style="padding: 10px;"><p3>Single Attendee</p3></td>
<td width="50%" style="padding: 10px;"><p3>$359</p3></td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>Two Attendees</p3></td>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>$648</p3></td>
</tr>
<tr>
<td width="50%" style="padding: 10px;"><p3>Three Attendees</p3></td>
<td width="50%" style="padding: 10px;"><p3>$937</p3></td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>Four Attendees</p3></td>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>$1226</p3></td>
</tr>
<tr>
<td width="50%" style="padding: 10px;"><p3>Five Attendees</p3></td>
<td width="50%" style="padding: 10px;"><p3>$1515</p3></td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>Six Attendees</p3></td>
<td width="50%" bgcolor="#d3daee" style="padding: 10px;"><p3>$1804</p3></td>
</tr>
</table>
</div>
<div class="container">
<h3>Refund Policy</h3>
<p class="refund"><b>InterFace Conference Group/France Media, Inc. Cancellation Policy:</b> If you cancel your attendance 30 days or more before the conference, you will be issued a full refund. Within 30 days, you will be given a credit for the amount you paid. This credit must be used within one year of the conference date to apply to another InterFace conference, for an equal or lesser amount.</p>
<p class="refund" align="center">InterFace Conference Group/France Media, Inc. <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/7e42d5bc6e55405e8c8bd7f280de4d3c.doc" target="_blank">Attendance & Substitution Policy</a> and <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/4c106328c8e140e4b66ba30f4659af92.docx" target="_blank">Privacy Policy</a></p>
</div>
</body>
</html>
Which spacing? I don’t see an obvious problem.
The space between the header, Register Now!, and “Registration is $359…”
Also, the box around ‘Regular Registration Pricing’ is too big. I tried to make the padding smaller sizes, but it still looks too big.
It also looks too clunky and the blue box is too big and the gap between the header and text is too much as well.
Play around with padding and margin.
If you use developer tools in your browser to inspect those elements, you’ll see that there is default margin added, which is creating the space. If you add margin-bottom: 0; to the h1 rule, and margin-top: 0; to the h5 rule, then the space will disappear. Change one of those 0s to get the spacing you require (e.g. 10px, 0.5em or whatever).
The <h5> heading is incorrect here. You should not use a heading based on its default size, but in the correct hierarchical order, from h1 down to h6. Use CSS to adjust the displayed size of the heading.
1 Like
Thanks. How do I get white space between the header and table?