It is my first time putting together a website and I was hoping some of you might be able to help me as there seems to be a wealth of knowledge here. I am having the hardest time trying to have the navigation bar stretch across the length of the webpage. Additionally, there is a space between the photo header and the navigation bar which I'd like to get rid of. I have made it white for now, but when i hover, you can see the white space.
I included all the code (I'm sorry if it's overwhelming, but I'm not sure what's important and what's not as I am adapting it from the current code of a user who is no longer with my lab) and I would appreciate all the help I can get.
Thank you so much!
UPDATE: I have made a js fiddle as chandan suggested
http://jsfiddle.net/amchen/rzdmytqz/
I was hoping to make a website similar to the one as the tutorial I looked at:
https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html
The picture above is what I am seeing when I do a test webpage.
I hope this gives you a better idea of what I am looking for in terms of design.
THANK YOU!
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav">
<img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
<li>HOME</li>
<li>RESEARCH</li>
<li>SUSAN TAYLOR</li>
<li>LAB MEMBERS</li>
<li>PUBLICATIONS</li>
<li>LINKS</li>
<li>CONTACT US</li>
<li>REAGENT REQUESTS</li>
</ul>
</nav>
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><a href="javascript:openWindow('Figurepanes/PKAfigure.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
</div>
</body>
</html>
Try setting the width in #wrapper to 100%. Also, I don't know if it matters but your whole style section looks like it's commented out. Kinda hard to see what is going on since none of your images are visible.
It's because you have your navigation inside the main wrapper and '#wrapper' width is 1400px. Take the Navigation out of the main wrapper and it will stretch 100%;
<head>
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>
<div id="header"></div>
<nav id="mainnav">
<img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
<li>HOME</li>
<li>RESEARCH</li>
<li>SUSAN TAYLOR</li>
<li>LAB MEMBERS</li>
<li>PUBLICATIONS</li>
<li>LINKS</li>
<li>CONTACT US</li>
<li>REAGENT REQUESTS</li>
</ul>
</nav>
<div id="wrapper">
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><a href="javascript:openWindow('Figurepanes/PKAfigure.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
</div>
</body>
</html>
There's a few errors in your style code. Make sure you input semicolons after every style you want to implement. Also background-color should have the hyphen in between (see the #footer section in your style tag). You wont be able to expand the navbar to 100% of the screen AND have the image in the same plane unless you put both items in a . I have tried as much as I can for now. You can decrease the width of the #mainnav as you increase the size of the image. Also you need to increase the height of the header. 2% height for the header hides most of the content. I used display:inline-block to get the navbar and the image in the same plane:
<head>
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min-height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 100px;
width: 100%;
}
#mainnav{
height:50px;
display:inline-block;
width:1300px;
}
#mainnav img{
display:inline-block;
width:50px;
height:50px;
position:absolute;
}
#mainnav a {
display: inline-block;
width: 12%;
float:right;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background:#357f7f;
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg');">
<div id="header">
<img src="images/NewTitle copy.jpg" align="middle">
<nav id="mainnav">
<ul style="list-style: none;">
<li>HOME</li>
<li>RESEARCH</li>
<li>SUSAN TAYLOR</li>
<li>LAB MEMBERS</li>
<li>PUBLICATIONS</li>
<li>LINKS</li>
<li>CONTACT US</li>
<li>REAGENT REQUESTS</li>
</ul>
</nav>
</div>
<div id="wrapper">
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
Related
Please note that I have no access to the HTML itself so I can't make any changes that way.
What I'm trying to do is hide only .openBullet leaving .lowerAlpha, .numeral, and .bullet black.
The issue I'm running into is that the transparent coloration of the marker for .openBullet is cascading down if it has children that are another marker type.
<body>
<p style="font-size: 9px; text-align: right;"><span style="color: #10265f;">Submit manual improvement suggestions here.</span></p>
<div style="text-align: right;">
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%; border-top: hidden; border-left: hidden; border-right:hidden; border-bottom: 6px solid #007db6;">
<p style="text-align: right;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMsAAAArCAYAAADWv3yxAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFJWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgMTE2LjE2NDc2NiwgMjAyMS8wMi8xOS0yMzoxMDowNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMC0wOS0wOVQxNDoxNDo0MS0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDQtMTNUMTY6MTE6MjUtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDQtMTNUMTY6MTE6MjUtMDQ6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjViOGNlMDQtMDA4Zi00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"
alt=""></p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="topic" data-documentRefId="Introduction" data-type="chapter" data-noNamespaceSchemaLocation="urn:fontoxml:cpa.xsd:1.0">
<h2 data-id="id-f5cc2363-db3b-43a6-b9f9-4ff438e7faa2">1 Introduction</h2>
<ol class="decimal" data-type="decimal" data-id="id-16c75eaf-f903-4ce9-d4ef-f6e2c8213c53">
<li data-id="id-9dcba4f8-dae3-4751-ef37-deb3b1287c11">
<p data-id="id-7baae131-d2fe-4e32-b3ed-824e7ee355e6">Step one goes here</p>
<ul class="openBullet" data-type="openBullet" data-id="id-f5a5de88-dada-4089-d60e-1953caf701a4">
<li data-id="id-d5e2366c-da46-4ee3-b044-7f2121d8e1fe">
<p data-id="id-59bc91da-bc49-4fbc-ba22-bdb631d369fc">Open bullet</p>
<ol class="lowerAlpha" data-type="lowerAlpha" data-id="id-b422622b-65a4-4fda-892c-ce370d851d0e">
<li data-id="id-b609503f-a39e-4674-9ca3-15bf05ec392d">
<p data-id="id-f051002a-9332-4254-8c0a-5be3614e8bc5">loweralpha</p>
</li>
<li data-id="id-1f0824e6-110b-4e7b-9979-35b3118d6b1b">
<p data-id="id-e95c7baa-4507-43be-bfa5-acd541419bbc">loweralpha</p>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</div>
<p><br></p>
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%; font-size: 12px;">
<tbody>
<tr>
<td style="width: 33.3333%;border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>Test Manual</b></span></td>
<td style="width: 33.3333%; text-align: center; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><strong><strong><strong><span style="color: #55555c;"> Internal Use Only</span></strong></strong>
</strong>
</td>
<td style="width: 33.3333%; text-align: right; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>11/12/2021</b></span></td>
</tr>
</tbody>
</table>
</body>
I have tried targeting .openBullet more specifically with :nth-child() but this also cascades.
You can remove just the circular marker without affecting subsequent numbering by setting list-style-type: none on the open bullet class.
.openBullet {
list-style-type: none;
}
<body>
<p style="font-size: 9px; text-align: right;"><span style="color: #10265f;">Submit manual improvement suggestions here.</span></p>
<div style="text-align: right;">
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%; border-top: hidden; border-left: hidden; border-right:hidden; border-bottom: 6px solid #007db6;">
<p style="text-align: right;"><img src="" alt=""></p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="topic" data-documentRefId="Introduction" data-type="chapter" data-noNamespaceSchemaLocation="urn:fontoxml:cpa.xsd:1.0">
<h2 data-id="id-f5cc2363-db3b-43a6-b9f9-4ff438e7faa2">1 Introduction</h2>
<ol class="decimal" data-type="decimal" data-id="id-16c75eaf-f903-4ce9-d4ef-f6e2c8213c53">
<li data-id="id-9dcba4f8-dae3-4751-ef37-deb3b1287c11">
<p data-id="id-7baae131-d2fe-4e32-b3ed-824e7ee355e6">Step one goes here</p>
<ul class="openBullet" data-type="openBullet" data-id="id-f5a5de88-dada-4089-d60e-1953caf701a4">
<li data-id="id-d5e2366c-da46-4ee3-b044-7f2121d8e1fe">
<p data-id="id-59bc91da-bc49-4fbc-ba22-bdb631d369fc">Open bullet</p>
<ol class="lowerAlpha" data-type="lowerAlpha" data-id="id-b422622b-65a4-4fda-892c-ce370d851d0e">
<li data-id="id-b609503f-a39e-4674-9ca3-15bf05ec392d">
<p data-id="id-f051002a-9332-4254-8c0a-5be3614e8bc5">loweralpha</p>
</li>
<li data-id="id-1f0824e6-110b-4e7b-9979-35b3118d6b1b">
<p data-id="id-e95c7baa-4507-43be-bfa5-acd541419bbc">loweralpha</p>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</div>
<p><br></p>
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%; font-size: 12px;">
<tbody>
<tr>
<td style="width: 33.3333%;border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>Test Manual</b></span></td>
<td style="width: 33.3333%; text-align: center; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><strong><strong><strong><span style="color: #55555c;"> Internal Use Only</span></strong></strong>
</strong>
</td>
<td style="width: 33.3333%; text-align: right; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>11/12/2021</b></span></td>
</tr>
</tbody>
</table>
</body>
Note the SO snippet system did allow the copy of the complete snippet from the question as there were too many characters. I removed the contents of the img just for this demo,
I'm creating an email templates using Marketo app. Once created, I tried sending a sample mail to myself and it all looks good:
As you can see all the elements [table] shows fine, all together and neat, but when I try forwarding the same email, this happens:
As you can see the header is broken from the body. This also happens for the footer. Why is this happening?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mizona</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
#logo img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: block;
}
td {
word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0;
}
#content-subsection-right-img td, #content-subsection-plain td, #content-subsection-left-img td {
color: #555555;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.no-spacing {
padding:0px;
margin: 0px;
}
.pad-cell5 td{
padding: 5px !important;
}
.mobile-center {
text-align: left !important;
}
#socialicons img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: inline-block !important;
border: none;
}
img {
max-width: 100%;
}
#graphic img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: none !important;
clear: both;
display: inline-block !important;
}
table[class="body"] .columns td.one {
width: 8.333333% !important;
}
table[class="body"] .column td.one {
width: 8.333333% !important;
}
table[class="body"] .columns td.two {
width: 16.666666% !important;
}
table[class="body"] .column td.two {
width: 16.666666% !important;
}
table[class="body"] .columns td.three {
width: 25% !important;
}
table[class="body"] .column td.three {
width: 25% !important;
}
table[class="body"] .columns td.four {
width: 33.333333% !important;
}
table[class="body"] .column td.four {
width: 33.333333% !important;
}
table[class="body"] .columns td.five {
width: 41.666666% !important;
}
table[class="body"] .column td.five {
width: 41.666666% !important;
}
table[class="body"] .columns td.six {
width: 50%;
}
table[class="body"] .column td.six {
width: 50%;
}
table[class="body"] .columns td.seven {
width: 58.333333% !important;
}
table[class="body"] .column td.seven {
width: 58.333333% !important;
}
table[class="body"] .columns td.eight {
width: 66.666666% !important;
}
table[class="body"] .column td.eight {
width: 66.666666% !important;
}
table[class="body"] .columns td.nine {
width: 75% !important;
}
table[class="body"] .column td.nine {
width: 75% !important;
}
table[class="body"] .columns td.ten {
width: 83.333333% !important;
}
table[class="body"] .column td.ten {
width: 83.333333% !important;
}
table[class="body"] .columns td.eleven {
width: 91.666666% !important;
}
table[class="body"] .column td.eleven {
width: 91.666666% !important;
}
table[class="body"] .columns td.twelve {
width: 100% !important;
}
table[class="body"] .column td.twelve {
width: 100% !important;
}
.pad-right-5 {
padding-right: 5px;
}
.pad-right-10 {
padding-right: 10px;
}
.pad-top-10 {
padding-top: 10px;
}
#media only screen and (max-width: 600px) {
.pad-right-10 {
padding-right: 0px;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: block;
}
#logo img {
width: 100% !important;
}
#logo-mobile img {
width: 80% !important;
}
#graphic img {
width: 100% !important;
height: auto !important;
}
*[class].center {
text-align:center !important;
margin:0 auto !important;
}
*[class].bottom-pad{ padding-bottom:35px !important;}
table[class="body"] table.columns td {
width: auto !important;
}
.social-icon td img {
width: 40px !important;
height: 40px !important;
}
}
</style>
</head>
<body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; color: #555555;">
<table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; ">
<center style="width:100%; min-width:600px; ">
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top" width="600">
<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:600px; padding:0; display:table !important; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<div class="mktEditable" id="logo" style="" mktoname="logo">
<p style="margin:0px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-header-digest-general-v2.1.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /> </p>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tr class="mktoModule" id="title-date" mktoname="title/date">
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr bgcolor="#2EA049">
<td style="color:#ffffff; padding: 10px 40px" align="left" valign="middle">
<div class="mktEditable" id="title" style="" mktoname="title-date">
<p style="margin: 0px;">Volume 4 | Issue 11 | 2018</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="content-general" mktoname="general content">
<td style="padding: 20px 40px">
<div class="mktEditable" id="intro" style="margin-top: 20px;" mktoname="intro">
<h3 style="color: #88c34d; text-align: center;">Trust the Asset. Trust the Transaction.™</h3>
<p>More and more players across industries are realizing the advantages of digital transformation, making it a competitive necessity for companies to harness digital solutions. Our own rapid growth mirrors this trend, with eOriginal recently being named one of the fastest growing companies in the country.</p>
<p>Entering into 2019, eOriginal knows becoming part of the auto finance digital ecosystem is essential to achieving your business goals. To take full advantage of this continued growth, please join our upcoming webinar which is focus on the auto finance industry. Learn more about digital best practices and how originators and lenders can prioritize tech stack building and expansion.</p>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title" mktoname="subsection-title">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsection" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>eOriginal Named to Deloitte's Technology Fast 500™ </b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="mod-subsection-left-img-1">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="content-subsection-left-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing"><img src="https://www.eoriginal.com/wp-content/uploads/2017/07/Random-image-_0005_iStock-511197926-1024x683.jpg" width="100%" /></p> </td>
<td width="260"> <p class="no-spacing">For the second consecutive year, eOriginal was named to Deloitte’s Technology Fast 500™, a ranking of the 500 fastest growing technology, media, telecommunications, life sciences and energy tech companies in North America. eOriginal's growth of 266 percent reaffirms its status as a leader in digital lending transformation and management.</p> <p class="no-spacing"><b>Read more</b></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-titlef7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="subsection-title-1">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsectionf7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>Live Webinar: Building an End-to-End eContracting Experience in Auto Finance</b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="mod-subsection-right-img-1">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="content-subsection-right-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing">Whether you provide direct or indirect lending, meeting the demands of today’s auto finance market means going digital is no longer a matter of ‘if’ but ‘when’. Join defi SOLUTIONS Chief Operating Officer Lana Johnson and eOriginal's Director of FinTech Strategies John Jacobs for insights on end-to-end digital auto financing processes, from origination to asset monetization through warehouse financing or securitization. </p> <p class="no-spacing"><b>Register Now</b></p> </td>
<td width="260"> <p class="no-spacing"><br /></p> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Cover Defi Solutions.jpg" height="151" width="269" /></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="subsection-title-clone">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsection3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>Case Study: MotoLease Selects eOriginal to Digitally Transform Powersports Financing</b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-img" mktoname="mod-subsection-left-img">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-left-img" mktoname="content-subsection-left-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/eO_Job-327_CS_MotoLease_COVER_01112018.png" width="178" height="252" style="display: block; margin-left: auto; margin-right: auto;" /></p> </td>
<td width="260"> <p class="no-spacing">Driven by a vision to disrupt the powersports leasing segment, MotoLease turned to eOriginal to adopt best practices in eSignature and digital asset management. This case study highlights how transformative digital lending technology drove the company's dramatic growth to corner 75 percent of the powersports leasing market. <b>Read more</b></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
</table>
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr bgcolor="#2EA049">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> eOriginal.com </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" width="50"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr bgcolor="#353937">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</tbody>
</table>
</center></td>
</tr>
</tbody>
</table>
</body>
</html>
There isn't really anything you can do to prevent this. It's well known across email development that forwarding trashes any and all email layouts in any number of ways depending on the client being used.
Best bet is to try and avoid suggesting users forward the email on and provide a 'send to a friend' landing page instead. Also informing colleagues/clients of the same and making sure they don't forward between each other. Alternatives for them are to send any tests on as attachments OR sending tests directly from your ESP.
Useful Litmus blog post going into the issue a bit more here
I try to put text in image and email that image so I do this
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
<table width="400" class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/bd.jpg" border="0" />
<p id="text">
Hello
</p>
</td>
</tr>
</table>
When I check email .. image is displayed but text is displayed under image . not on image so how I display text on image
To display absolute positioned element relatively to the parent, not screen, you need to set position: relative to the parent (to the table in your case). In this example the image is under the text and the text is positioned relatively to the image:
table {
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 100px;
font-weight: bold;
left: 150px;
top: 350px;
}
<table width="400" class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" border="0" />
<p id="text">
Hello
</p>
</td>
</tr>
</table>
You must set img has position: relative;
img {
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: black;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 150px;
}
<table width="400" class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="https://thumb9.shutterstock.com/display_pic_with_logo/436114/274833056/stock-vector-sample-grunge-retro-red-isolated-ribbon-stamp-sample-stamp-sample-sample-sign-274833056.jpg" border="0" />
<p id="text">
Hello
</p>
</td>
</tr>
</table>
Why don't you make the image the background image of the paragraph but you have to adjust the size as your image to make it visible
#text {
background-image: url("images/bd.jpg");
}
<table width="400" class="main" border="0" cellpadding="0" cellspacing="0">
<td>
<img src="images/bd.jpg" border="0" />
<p id="text">
Hello
</p>
</td>
</tr>
</table>
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 0;
}
table{
position:relative;
}
The blue table data entry won't reside its width. Is there a new html5 way to be able to achieve this feat? The row should be the same width as the photo above it.
<div class="template" style="text-align:center">
<table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
<tr>
<td width='100%' height='100%' bgcolor='#f2f3f4'>
<div style="text-align: center;">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</div>
</td>
</tr>
<!-- Background photo -->
<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
<TR>
<TD WIDTH="997" HEIGHT="326"
background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat:
no-repeat;">
<!-- <b>WELCOME TO ROVER! </b> -->
<FONT class="titletext" color="white" align="center" style="width: 800px;
font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br>
<FONT class="subtitletext" color="white" align="center" style="width:
100px;
font-size: 30px;">Ready to get started?</FONT><br><br><br>
<a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png"
alt="Button" border="0"></a>
</TD>
</TR>
<tr>
<td width="80%" bgcolor="#blue" style="width:80%">
</td>
</tr>
</TABLE>
</table>
</div>
article {
width: 100%;
}
#banner {
background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
padding: 25px 0;
}
h1 {
font-size: 50px;
margin-bottom: 0;
}
h1, p {
color: white;
width: 100%;
text-align: center;
}
p {
font-size: 30px;
}
button {
width: 200px;
background: #00c55c;
border: none;
padding: 12px 24px;
color: white;
font-size: 24px;
border-radius: 6px;
display: block;
margin: 0 auto;
clear: both;
}
#logo {
background: #f2f3f4;
}
#logo img {
display: block;
margin: 0 auto;
clear: both;
}
<article>
<section id="logo">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</section>
<section id="banner">
<h1>Welcome to Rover!</h1>
<p>Ready to get started?</p>
<button>Search Sitters</button>
</section>
</article>
I'd do something like this. No table for layout. If it has to be inline, just put a <style></style> tag above the HTML block.
For the background color of the button i used the following website.
https://flatuicolors.com/
I also made everything separated into css and html so you could see. No inline CSS. This is the proper way to use tables, and headers.
Use a <div> tag for the headers as it automatically pushes things to a new line after it. No need for the break tag. The break tag is rarely used in design anymore.
Also i made sure that your separator line is blue.
I believe there are better ways of accomplishing this WITHOUT tables, however you said you needed this in table form, so here ya go!
table {
width: 80%;
border: none;
text-align: center;
margin: 0 auto;
color: white;
}
.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
font-size: 50px;
}
.subtitletext {
font-size: 30px;
}
button {
margin: 10px 0;
width: 50%;
border-radius: 15px;
height: 100px;
background: #27ae60;
border: 1px solid rgba(255,255,255,0.8);
font-size: 20px;
color: white;
}
button:hover {
background-color: #2ecc71;
}
.seperator {
width: 80%;
background: blue;
}
<TABLE>
<TR class="background">
<TD>
<div class="titletext">WELCOME TO ROVER!</div>
<div class="subtitletext">Ready to get started?</div>
<button>Search Sitters</button>
</TD>
</TR>
<tr>
<td class="seperator""></td>
</tr>
</TABLE>
You are using inline css,Try this:
<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>
The html file is
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
<div id="detailed_div_image">
</div>
<div id="detailed_div_basicinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Basic Info</strong></div>
<div>
<table id="detailed_table_basicinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Birthday</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="detailed_div_contactinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Contact Info</strong></div>
<div>
<table id="detailed_table_contactinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Address</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="detailed_div_reminding">
<textarea id="detailed_reminding"></textarea>
<input type="button" class="button" value="update"></input>
</div>
</div>
</body>
</html>
and this is my css file:
body{
margin:0;
padding:0;
}
#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}
#detailed_fistpart {
margin-top: 10px;
}
#detailed_image {
width: 200px;
height: 200px;
}
#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.detailed_div_captain {
font-size: 20px;
height: 40px;
}
#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.detailed_table_td {
border-bottom: 1px solid #efefef;
}
#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#detailed_div_reminding {
width: 900px;
}
#detailed_reminding {
width: 700px;
height: 70px;
}
.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
And when I use firebug (the extension), I can see that it is the div with id=detailed_div_reminding includes the div with id=detailed_div_basicinfo and div with id=detailed_div_contactinfo rather than the div with id=detailed_fistpart.
One problem is that if you add magin-top: 20px to #detailed_div_reminding, it doesn't produces margin with #detailed_fistpart
Why?
hi there u need to add this line
<div style="clear:both"></div>
before this line of code <div id="detailed_div_reminding">
Did you mean that you are not getting the margin on top of your last section? It is because you have floats present and and you need to clear them for subsequent section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link href="test.css" rel="stylesheet" />
<style>
body{
margin:0;
padding:0;
}
#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}
#detailed_fistpart {
margin-top: 10px;
}
#detailed_image {
width: 200px;
height: 200px;
}
#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.detailed_div_captain {
font-size: 20px;
height: 40px;
}
#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.detailed_table_td {
border-bottom: 1px solid #efefef;
}
#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#detailed_div_reminding {
width: 900px;
margin-top:20px;
}
#detailed_reminding {
width: 700px;
height: 70px;
}
.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
<div id="detailed_div_image">
</div>
<div id="detailed_div_basicinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Basic Info</strong></div>
<div>
<table id="detailed_table_basicinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Birthday</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="detailed_div_contactinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Contact Info</strong></div>
<div>
<table id="detailed_table_contactinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Address</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div style="clear:both" ></div>
<div id="detailed_div_reminding">
<textarea id="detailed_reminding"></textarea>
<input type="button" class="button" value="update"></input>
</div>
</div>
</body>
</html>