I am new to coding (so go easy on me) doing this project for fun and I'm pretty close to being complete but I can't seem to get rid of this 2-5 px white space dividing my header from the first section. See the screenshot below:
I set all element margins to 0 such as
* {
margin: 0
}
but this didn't help.
the following code uses tables with inline CSS. Can somebody help me!
table.t00 {
width: 640px;
margin: 0;
}
table.t00 th {
max-width: 630px;
max-height: 474px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
}
table.t01 tbody {
text-align: center;
color: #f1f1f1
}
table.t01 th {
width: 636px;
}
table.t02 {
width: 640px;
background-color: white
}
table.t02 tbody {
text-align: center;
width: 634px;
height: 291px;
}
table.t02 th {
width: 634px;
}
table.t03 {
width: 634px;
height: 320px;
}
table.t03 tbody {
text-align: center;
width: 634px;
height: 320px;
padding-top: 60px;
}
table.t03 th {
width: 634px;
padding-bottom: 40px;
}
table.t04 {
width: 640px;
height: 84px;
background-color: #052f66;
}
table.t04 tbody {
text-align: center;
}
<body>
<table class="t00">
<tbody>
<th style="margin: 0;">
<img
class="header-image"
src="victory-club header.jpg"
alt="header for victory clubs membership"
/>
</th>
</tbody>
</table>
<table class="t01">
<tbody>
<th>
<p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 28px; margin: 10px 0;">Your Member ID is:
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; margin: 0;">FL-9999999</h2>
<p style=" font-size: 14px;
font-style: italic; margin: 5px 0;">Please keep this for your records</h4>
</th>
</tbody>
</table>
<table class="t02">
<tbody>
<th>
<p style="padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center; width: 634px; margin: 25px 0px 0px 0px">
Member Benefits
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;">These are just some of the amazing benefits that come with your <br> Victory Clubs membership!</p>
<br>
<br>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive events and parties at local venues for Victory Clubs members only.</p>
<div style="background-color: white;
width: 634px;
height: 7px;"></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Deals and Savings at hundreds of retail and restaurant locations.
<div style="background-color: white;
width: 634px;
height: 7px;"
></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive Perks through your School.</p>
</div>
</th>
</tbody>
</table>
<table class="t03">
<tbody class="schedule">
<th>
<p style=" padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;">
Schedule Now!
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; margin: 0 59px;">Schedule and pass your initial drug test now so you can start enjoying all the perks and benefits your Victory Clubs membership has to offer.
</p>
<br>
<br>
<button style="display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 100px;
border: 1px solid;
color: white;
border-color: #dc1d40;
background-color: #dc1d40;">SHEDULE MY DRUG TEST</button>
<br>
<br>
<br>
<p style="color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px; margin: 0 59px;">
You’ll receive an email letting you know your free 90-day subscription has been activated once you pass your drug test.
</p>
<p style="color: #052f66;
text-align: center;
font-size: 16px; margin: 0 59px;">
<b> Keep up the great work!</b>
</p>
<br>
</th>
</tbody>
</table>
<table class="t04">
<tbody>
<th>
<ul style="padding: 20px;">
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">FB</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;"href="" target="_blank">Twitter</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Insta</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Youtube</a></li>
</ul>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
height: 32px;">© All Rights Reserved. Privacy Policy | Accessibility Policy | Terms & Conditions</p>
</th>
</tbody>
<table>
</body>
Try adding this code:
table.t00 th img {
display: block;
}
One thing about images is that they have a default display: inline-block which makes them leave margins around other elements ... putting block display eliminates this effect
Also try adding
table.t00 {
border-collapse: collapse;
}
instead of having separate which is the default behaviour
<table> have border-spacing and by default it's value is 2px..so change it to 0 ....
border-spacing: 0px;
for both of your tables...t00 and t01
table.t00 {
width: 640px;
margin: 0;
border-spacing: 0px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
border-spacing: 0px;
}
Related
I am trying to create a certificate in an html email. I cannot get the border to extend to the right alignment. Below is my code and an image of it. I know that html in outlook doesnt behave the same way but I do want instructor and manager on the same line inside the border. Float doesnt work and I could not get the margins to work.
CSS Code
<pre>
<style>
.cert {
border: 15px solid #0072c6;
border-right: 15px solid #0894fb;
border-left: 15px solid #0894fb;
width: 700px;
font-family: arial;
color: #383737;
overflow: visible;
}
.crt_title {
margin-top: 30px;
font-family: "Satisfy", cursive;
font-size: 40px;
letter-spacing: 1px;
color: #0060a9;
}
.crt_logo img {
width: 130px;
height: auto;
margin: auto;
padding: 30px;
}
.colorGreen {
color: #27ae60;
}
.crt_user {
display: inline-block;
width: 20%;
padding: 5px 25px;
margin-bottom: 0px;
padding-bottom: 0px;
font-family: "Satisfy", cursive;
font-size: 40px;
border-bottom: 1px dashed #cecece;
}
.signature{
font-family: 'Brush Script MT', cursive;
font-size: 40px;
letter-spacing: 3px;
text-decoration: underline;
}
.normal{
font-family: 'Arial';
font-size: 40px;
letter-spacing: 3px;
}
.afterName {
font-weight: 100;
color: #383737;
}
.colorGrey {
color: grey;
}
.certSign {
width: 200px;
}
#media (max-width: 700px) {
.cert {
width: 100%;
}
.tableClass {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 20px 0px !important;
}
</style>
</pre>
HTML Code
<table al[![enter image description here][1]][1]ign="center" width="600" border="0" cellpadding="0" cellspacing="0" class="cert">
<tr>
<td width="70%" align="center" class="crt_logo">
<img src="logo path"width="200" height="121" alt="logo">
</td>
</tr>
<tr>
<td width="70%" align="center">
<h1 class="crt_title">Certificate Of Completion
<h2>This Certificate is awarded to</h2>
<h1 class="colorGreen crt_user">Name</h1>
<h3 class="afterName">For completion in Class
</h3>
<h3>Awarded on Date taken</h3></td>
</tr>
<tr>
<td align="left" valign ="middle" style="font-family: 'Brush Script MT', cursive;
font-size:30px; text-decoration: underline;display:inline:">Instructor </td>
<td width="10px" align="left" valign ="middle" style="font-family: 'Brush Script MT',
cursive; font-size:30px; text-decoration: underline;display:inline:">Manager</td>
</td>
</td>
</tr>
</table>
I'm new here and I was wondering: how do I align my header to the top of the page? Right now there is too much white space between the header and top of the page. Is there a way to 'valign' it to the top somehow? Any help is appreciated. Thank you. Attached is my html code as well as CSS.
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
padding-top: 0;
padding-left: 10px;
padding-right: 10px;
font-family: Helvetica, sans-serif;
color: #666;
}
h1 {
color: #333;
font-size: 32px;
line-height: 38px;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
}
h2 {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
padding-top: 25px;
margin-bottom: 15px;
}
h3 {
color: #333;
font-size: 26px;
font-weight: 700;
text-align: center;
}
h5 {
font-size: 18px;
font-weight: normal;
text-align: center;
margin-top: 0;
}
p,
ul {
font-size: 16px;
line-height: 23px;
font-weight: normal;
text-align: left;
}
.container {
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
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;
}
.container3 {
background-color: #375e97;
margin-right: auto;
margin-left: auto;
max-width: 850px;
top: 0;
}
.container4 {
padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.subhead {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 28px;
font-weight: normal;
font-style: italic;
text-align: center;
padding-bottom: 25px;
margin-top: 0px;
}
.title {
color: #fff;
padding: 5px;
font-size: 20px;
font-weight: 500;
text-align: center;
margin-top: 8px;
margin-bottom: 8px;
}
.cell {
font-size: 17px;
font-weight: normal;
text-align: center;
margin-bottom: 9px;
margin-top: 9px;
}
.refund {
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;
}
<html lang="en">
<head>
<title>Multifamily Texas – Early Bird 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>
<div class="container3">
<h2>ACT NOW and SAVE $80!</h2>
<p class="subhead">Early Bird Registration is $279 through August 17th</p>
</div>
<div class="container4">
<table align="center" width="600" border="1" bordercolor="#375e97" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#375e97" align="center" colspan="2">
<p class="title">Early Bird Registration Pricing</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Single Attendee</p>
</td>
<td width="50%">
<p class="cell">$279</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Two Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$568</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Three Attendees</p>
</td>
<td width="50%">
<p class="cell">$857</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Four Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$1146</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Five Attendees</p>
</td>
<td width="50%">
<p class="cell">$1435</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Six Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$1724</p>
</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. Attendance & Substitution Policy and <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/4c106328c8e140e4b66ba30f4659af92.docx"
target="_blank">Privacy Policy</a></p>
</div>
</body>
</html>
It's because of the <h2>'s margin-top not being removed. Update this rule:
h2 {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
padding-top: 25px;
margin-bottom: 15px;
margin-top: 0; /* This one */
}
Preview
I've added some script to my code and it's messing up formatting elsewhere in my doc. I thought maybe it had to do with where I was including it and I read this answer and tried to add async or defer but it didn't make a difference. Specifically, it's adding a block of space on the right side of my "aboutus5" div and then my footer is all squished to the left. As soon as I remove the code, the formatting goes back to normal. So I'm still not sure if it's the placement of the code or maybe just bad code I have elsewhere that is only now being affected.
Any suggestions would be much appreciated!!
Here's the specific code that's screwing things up:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
And here's all of the code (I know it's really bad... this is my first go at building a website):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Budget Line of Business</title>
<style>
h1 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 100px; color:#FF3B3F; font-weight: bold; margin: 0 }
h2 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 52px; color: #FF3B3F; font-weight: bold; margin: 0 }
h3 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 42px; color: #FF3B3F; font-weight: bold; margin: 0}
h4 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 32px; color: #FF3B3F; font-weight: bold; margin: 0}
h5 {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: bold; margin: 0}
h6 {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: bold; margin: 0}
p {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: none; margin: 0}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: none;
}
li {
float: right;
}
li a {
display: block;
color: #062f4f;
font-family: "Footlight MT Light";
font-size:28px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #FF3B3F;
color: #ffffff;
}
#aboutus1{
background-color:#CAEBF2;
width: 100%;
margin: 0;
}
#aboutus2{
background-color:#EFEFEF;
width: 100%;
margin: 0;
}
.aboutus3{
background-color:#CAEBF2;
width: 100%;
margin: 0;
}
.aboutus3 h{
background-color:#CAEBF2;
width: 100%;
margin: 0;
}
.aboutus3 h1 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 100px; color: #062f4f; font-weight: bold; margin: 0 }
.aboutus3 h2 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 52px; color: #062f4f; font-weight: bold; margin: 0 }
.aboutus3 h3 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 42px; color: #FF3B3F; font-weight: bold; margin: 0}
.aboutus3 h4 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 32px; color: #FF3B3F; font-weight: bold; margin: 0}
.aboutus3 h5 {font-family: 'Georgia', 'Garamond';
font-size: 22px; color: #062f4f; font-weight: bold; margin: 0}
.aboutus3 h6 {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: bold; margin: 0}
.aboutus3 p {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: none; margin: 0}
#aboutus4{
background-color:#EFEFEF;
width: 100%;
margin: 0;
}
#aboutus5{
width: 100%;
margin: 0;
}
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 37%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
white-space: nowrap;
}
}
.footer{
width: 100%;
height: 25vh;
background-color: #ffffff;
}
.footer a {
color: #FC4A1A;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.footer p {
font-size: 14px; padding: 2px; color: #062f4f;
}
#footercolumn1 {
float: left; margin: 0; width: 200px; padding: 15px 280px 0 5px;
}
#footercolumn2 {
float: left; margin: 0; width: 200px; padding: 15px 280px 0 0px;
}
#footercolumn3 {
float: left; margin: 0; width: 200px; padding: 15px 0px 0 0px;
}
button {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
background: #062f4f;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
button:hover {
background: #FF3B3F;
text-decoration: none;
}
#ideascolumn {
float: left; margin: 0; width: 48%; height: 300px; background-color:#CAEBF2; padding: 0 0 0 2%;
}
#casestudiescolumn {
float: left; margin: 0; width: 48%; height: 300px; background-color:#062f4f; padding: 0 0 0 2%;"
}
#avatar1hover {
padding: 0px;
display: none;
text-align: center;
}
#pmhover:hover + #avatar1hover {
display: block;
}
#avatar2hover {
padding: 0px;
display: none;
text-align: center;
}
#awhover:hover + #avatar2hover {
display: block;
}
#avatar3hover {
padding: 0px;
display: none;
text-align: center;
}
#drhover:hover + #avatar3hover {
display: block;
}
#avatar4hover {
padding: 0px;
display: none;
text-align: center;
}
#mdhover:hover + #avatar4hover {
display: block;
}
#avatar5hover {
padding: 0px;
display: none;
text-align: left;
}
#rkhover:hover + #avatar5hover {
display: block;
}
#avatar6hover {
padding: 0px;
display: none;
text-align: left;
}
#mwhover:hover + #avatar6hover {
display: block;
}
#avatar7hover {
padding: 0px;
display: none;
text-align: left;
}
#lrhover:hover + #avatar7hover {
display: block;
}
#avatar8hover {
padding: 0px;
display: none;
text-align: left;
}
#ahhover:hover + #avatar8hover {
display: block;
}
span:hover + div {
display:block;
}
</style>
</head>
<body>
<div id="aboutus1">
<a href="*"><img src="images/Logo1.png" alt="Budget Line of Business Logo"
style="float:left;width:220px;height:237px;padding:10px 0px 0px 15px;"/></a>
<ul><strong>
<li>Contact</li>
<li>Ideas</li>
<li>Our Work</li>
<li>About Us</li>
<li>Home</li>
</strong>
</ul>
<br>
<br>
<br>
<br>
<br>
<br><br><br>
<br>
<br>
<h1><center>Illuminators & Inventors</center></h1><br>
<h5 style="text-align: center; padding:0px 100px;">We're a creative team of problem-solving consultants bringing fresh ideas and innovation to budget communities across the federal government.<br>Find out what we can do for you.</h5>
<br><br>
<center><button>SEE OUR WORK</button></center>
<br><br>
</div>
<div id="aboutus2">
<br><br><br>
<div class="container"><center>
<h3>What can we do for you?</h3>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo"><b>+</b></button>
<div id="demo" class="collapse">
<h5>
Onboarding<br>
Portals<br>
Workflows<br>
Data Collection<br>
Data Analytics<br>
Project Management<br>
Budget Trainings<br>
Career Development</center>
</h5>
</div>
<br>
<div id="avatartable1">
<table style="table-layout:fixed; width:100%">
<tr>
<td id="avatar4"><center>
<span id="staffmdhover"><img src="images/avatarmd.png" alt="The Mastermind Avatar"
style="width:170px;height:150px"/></span>
<div id="avatar4hover"><p>I can connect you with an agency who is working through the exact same questions.</p></div>
</center></td>
<td id="avatar1"><center>
<span id="pmhover"><img src="images/avatarpm.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar1hover"><p>I am building tools behind the scenes to make your life easier.</p></div>
</center></td>
<td id="avatar2"><center>
<span id="awhover"><img src="images/avataraw.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar2hover"><p>I can help you become a MAX guru.</p></div>
</center></td>
<td id="avatar3"><center>
<span id="drhover"><img src="images/avatardr.png" alt="The Mastermind Avatar"
style="width:200px;height:150px"/></span>
<div id="avatar3hover"><p>I can help you build a workflow using Collect Forms.</p></div>
</center></td>
</tr>
</table>
</div>
<br><br>
<div id="avatartable2">
<table style="table-layout:fixed; width:100%">
<tr>
<td id="avatar5">
<span id="rkhover"><img src="images/avatarrk.png" alt="The Mastermind Avatar"
style="width:200px;height:150px"/></span>
<div id="avatar5hover"><p>I can teach you how to master Excel.</p></div>
</td>
<td id="avatar6">
<span id="mwhover"><img src="images/avatarmw.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar6hover"><p>I can brainstorm with you about how to streamline your budget processes.</p></div>
</td>
<td id="avatar7">
<span id="lrhover"><img src="images/avatarlr.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar7hover"><p>I can point you in the direction of career development resources.</p></div>
<td id="avatar8">
<span id="ahhover"> <img src="images/avatarah.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar8hover"><p>I can help you create a one-stop shop budget portal for your office.</p></div>
</td>
</tr>
</table>
</div>
<br><br>
</div>
<div class="aboutus3" style="color: #062f4f">
<br><br><br>
<center>
<h3>Our Vision</h3>
<h6 style="text-align: center; width: 60%;">Developing modern, adaptable, cost effective and optimized process, technology, and human capital solutions supporting all phases of the formulation and execution of the Federal Budget.</h6>
</center>
<br><br>
<div>
<table style="table-layout:fixed; width:100%">
<tr>
<td id="goal1">
<center><img src="images/goal1.png" alt="Goal 1: Process Picture"
style="width:425px;height:425px"/>
<h4 style="text-align: center;">Process</h4><br>
<p style="text-align: center; width: 450px;"><b>Goal 1:</b> Improve the efficiency and effectiveness of agency and central processes for forumulating and executing the Federal Budget.</p>
</center>
</td>
<td id="goal2">
<center><img src="images/goal2.png" alt="Goal 2: Technology Picture"
style="width:425px;height:425px"/>
<h4 style="text-align: center;">Technology</h4><br>
<p style="text-align: center;width: 450px;"><b>Goal 2:</b> Improve capabilities for analyzing and presenting budget, execution, planning, and financial information in support of decision making.</p></center>
</td>
<td id="goal3">
<center><img src="images/goal3.png" alt="Goal 3: Human Capital Picture"
style="width:425px;height:425px"/>
<h4 style="text-align: center;">Human Capital</h4><br>
<p style="text-align: center;width: 450px;"><b>Goal 3:</b> Enhance the effectiveness of the Federal budgeting workforce.</p></center>
</td>
</tr>
</table>
</div>
<br><br><br>
</div>
<div id="aboutus4">
<center>
<br><br><br>
<h3>Transforming budget offices since 2006</h3><br><br>
<img src="images/timeline.png" alt="Budget Line of Business Timeline"
style="width: 1100px;height:850px"/>
<br><br>
</center>
</div>
<div id="aboutus5">
<div id="ideascolumn">
<br><br><br><br>
<table style="table-layout:fixed; width:100%">
<tr>
<td id="ideaspic" style="width:20%">
<img src="images/groupavatar.png" alt="Group of Avatars"
style="width:150px;height:150px"/><br>
</td>
<td id="ideasdescription" style="width:60%">
<h3 style="text-align: left; width: 80%;">Send us a challenge</h3></center>
<br><h6 style="text-align: left; width: 70%;">If you've got a specific business challenge, we’d love to help you tackle it. Please get in touch with us.</h6></center>
<br><h6 style="text-align: left; width: 70%;">*</h6></center>
</td>
</tr>
</table>
<br><br><br>
</div>
<div id="casestudiescolumn">
<br><br><br><br>
<table style="table-layout:fixed; width:100%">
<tr>
<td id="ideaspic" style="width:20%">
<img src="images/atwork.png" alt="At Work Graphic"
style="width:150px;height:150px"/><br>
</td>
<td id="ideasdescription" style="width:60%">
<h3 style="text-align: left; width: 90%;">View our work</h3></center>
<br><h6 style="text-align: left; width: 70%; color:white">Check out some of the cool things we're working on right now.</h6></center>
<br><button>SEE OUR WORK</button>
</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<div id="footercolumn1">
<h5 style="color: #062f4f;">Sign up at MAX.gov</h5><br>
<p>Have a .gov email address?<br><br> Sign up for MAX.gov here and then email us to access all of our budget resources.</p>
</div>
<div id="footercolumn2">
<h5 style="color: #062f4f;">Send us your ideas</h5><br>
<p>If you have a specific challenge for us, fill out this form with all of your details.</p></div>
<div id="footercolumn3">
<h5 style="color: #062f4f;">Get in touch
</h5><br>
<p>*<p>
Text
<br><br>
<div>
<a href="[full link to your Twitter]">
<img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter1.png" width="35" height="35" />
</a>
<a href="[full link to your LinkedIn]">
<img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin1.png" width="35" height="35" />
</a>
<a href="[full link to your Facebook page]">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook1.png" width="35" height="35" />
</a>
<a href="pinterestaddress">
<img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest1.png" width="35" height="35" />
</a>
</div>
</div>
</div>
</body>
</html>
That's not a JS issue. It's because you're including Bootstrap css in
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Which is conflicting with your own CSS. At a glance, I could see the property which is conflicting here is box-sizing
Standard solution:
Rewrite your custom CSS so it wouldn't conflict with the boostrap one.
Hack Solution (Not encouraged.. Just to show you where you're wrong):
Just include the following in your custom CSS
* {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
This is what I need to do:
http://s27.postimg.org/ancbbaa6r/111.png
That is what I've done:
http://s27.postimg.org/87ahxfs43/222.png
Don't mind about fonts, I will change them Later.
I can't change HTML and use JS. Only CSS.
Any help?
CSS:
table {
width: 100%;
background-color: #f3c035;
padding: 10px;
font-family: "Arial", Arial, serif;
color: white;
}
iframe {
width: 100%;
}
.lewa {
background-color: #f3dfab;
width: 25%;
padding: 15px;
vertical-align: top;
font-family: "Times New Roman", Times, serif;
color: black;
}
.prawa {
background-color: #f3ecd9;
padding:15px;
vertical-align: top;
font-family: "Times New Roman", Times, serif;
color: black;
width: 100%;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="style/szablon.css" type="text/css" />
</head>
<body>
<table>
<th colspan="2">
<p class="naglowek">
Sugerowane w programie nauczania algorytmy do omówienia w ramach przedmiotu.
</p>
<hr/>
</th>
<tr>
<td class="lewa">
<p class="brown"> Menu: </p>
<ul class="brown">
<li><a target="tresc"
href="
http://www.algorytm.org/algorytmy-matematyczne/algorytm euklidesa.html
">Największy wspólny dzielnik</a></li>
<li><a target="tresc"
href="
http://www.ordona.internetdsl.pl/pascom/download/informatyka/algorytmy.pdf">Najmniejsza wspólna wielokrotność</a></li>
</ul>
</td>
<td class="prawa">
<iframe nama="tresc" style="width": 100%; height: 95%"> </iframe>
<p class="brown" style="text-align: right;"> Copyright 2013</p>
</td>
</tr>
</table>
</body>
Follow the code mate:
table {
width: 100%;
background-color: #f3c035;
padding: 10px;
font-family: "Arial", Arial, serif;
color: white;
height: 100%;
}
iframe {
width: 100%;
}
.lewa {
background-color: #f3dfab;
width: 25%;
padding: 15px;
vertical-align: top;
font-family: "Times New Roman", Times, serif;
color: black;
}
.prawa {
background-color: #f3ecd9;
padding:15px;
vertical-align: top;
font-family: "Times New Roman", Times, serif;
color: black;
width: 100%;
height: 100%;
}
I just added
height: 100%
in table {}
Remember that you have to fix the line:
<iframe nama="tresc" style="width": 100%; height: 95%"> </iframe>
to:
<iframe nama="tresc" style="width: 100%; height: 95%"> </iframe>
Look, you've added one extra " after width.
You have to add your th inside of a tr:
<tr>
<th colspan="2">
<p class="naglowek">
Sugerowane w programie nauczania algorytmy do omówienia w ramach przedmiotu.
</p>
<hr/>
</th>
</tr>
Is it possible to align text in a cell?
In my example I want to align hours and city centrally like this:
PLUNKER
#presentation {
background-color: #dedede;
padding-top: 25px;
padding-left: 50px;
padding-right: 50px;
}
#offers h1 {
text-transform: uppercase;
color: #666666;
}
#offers h1 em {
color: #4598d1;
font-style: normal;
}
.offers {
padding: 25px 50px;
width: 50%;
margin: auto;
}
.offers button {
background-color: #dddddd;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #868686;
border: #868686;
border-style: solid;
border-width: 1px;
}
.offers .right {
float: right;
width: 100px;
}
.offers table {
background-color: #DEDEDE;
text-align: left;
float: left;
}
.offers .tittle {
font-size: 18px;
color: #666666;
font-family: 'Arial Normal', 'Arial';
text-transform: uppercase;
}
.offers th {
font-family: 'Arial Normal', 'Arial';
font-weight: 400;
font-size: 11px;
white-space: nowrap;
}
.offers table th .fistClass {
font-family: 'Arial Gras', 'Arial';
font-weight: 700;
font-style: normal;
font-size: 12px;
color: #669900;
text-align: center;
}
.offers table .td {
background-color: #ffffff;
}
.offers .departureTime {
color: #35A6F4;
font-size: 18px;
font-weight: bold;
}
.offers .arrivalTime {
color: #35A6F4;
font-size: 11px;
}
.offers .originStation {
font-family: 'Arial Gras', 'Arial';
font-weight: bold;
font-style: normal;
font-size: 11px;
}
.offers .destinationStation {
font-family: 'Arial Gras', 'Arial';
font-style: normal;
font-size: 11px;
}
.offers .duration {
font-size: 11px;
color: #666666;
}
.offers .priceFirstClass {
color: #7ABB00;
text-align: right;
font-family: 'Arial Gras', 'Arial';
font-weight: bold;
font-size: 20px;
}
.offers .minPrice {
}
.offers .lastPlaces {
}
.offers .unavailable {
font-size: 12px;
color: #E4E4E4;
text-align: center;
}
.offers .foo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: auto;
}
.offers p.espacement_important {
margin: 5px 0;
}
.offers span{
padding-left: 15px;
}
<div id="presentation">
<section>
<div class="offers">
<table border="0">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>
<div>
<p>
<span class="departureTime">03h00</span>
<span>New-York</span>
</p>
<p>
<span class="arrivalTime">15h00</span>
<span>Bahamas</span>
</p>
<p class="duration"><span >8h00</span>
<span>2 correspond.</span>
<span>A380</span>
</p>
</div>
</td>
<td class="unavailable">indisponible</td>
<td><input type="radio" />
<label >10.00 €</label>
</td>
<td>
<label >50.00 €</label>
</td>
</tr>
</table>
</div>
</section>
</div>
Try below code.
HTML
<div id="presentation">
<section>
<div class="offers">
<table class="locationtable" width="100%;" cellpadding="0">
<tr>
<td width="50%"><span class="departureTime">03h00</span></td>
<td width="50%"><span>New-York</span></td>
</tr>
<tr>
<td class="duration">8h00</td>
<td><span>Bahamas</span></td>
</tr>
</table>
</div>
</section>
CSS
.locationtable{
width: 200px;
margin: 0 auto;
background: #eee;
}
table td{
padding: 5px 10px;
vertical-align: middle;
text-align: center;
}
.departureTime,
.duration{
color: blue;
}
JSFIDDLE DEMO
What you want to do, is to force the text on a unique line.
I can think now of two solutions to proceed so.
The first one, would be to give to the cell that contains your text a minimum width that would always allow the text to display on one line, but, what if a new longer station name is created forward ?
The second solution is to force the text on one line with a css property call "white-space", and, in a table cell it will automatically resize the "td" to fit your text :
.offers td:first-child p{
white-space:nowrap;
}