Printable View
I wanted my header in my CSS document as I require it on all 4 pages of my website, but it doesn't show in any browser or in dreamweaver split view mode. I have checked, more than triple checked, even copied and pasted the paths to where my folders and files are. Can anyone help to why this is happening please?
Code:.header {
background-image: url(Clean9FIT15-Images/C9FIT-Header.jpg);
background-repeat: no-repeat;
height: 303px;
}
.header img {
width:100%;
}
Do you have <div class="header"> </div> in your code? A link to your non-working page would probably allow us to find the problem quickly.
My HTML has this code: <div class="header"> and then the closing </div> tag further down.Quote:
Originally Posted by styxlawyer
Is this want you require? Only the website isn't live yet.
Thanks for looking :)
Here is my code in my index page if that helps:
HTML Code:<!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>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta name=viewport content='width=700'>
<style type="text/css">
/*<![CDATA[*/
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
/*]]>*/
</style>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>9 Day Weight Plan, Clean 9 - C9 packs, Aloe Vera Based, UK, Buy here</title>
<meta name="description" content="CLean 9 day Weight Plan, C9 diet, Results with Forever Living F.I.T. Weight Management Products. F15 Packs and Shakes Fast delivery - 60 day money guarantee" />
<meta name="keywords" content="Clean 9 Day Weight Plan, C9, F.I.T., Forever FIT, aloe drinks, lose weight, Forever Living Products, nine day diet plan, Forever weight management" />
<link rel="sitemap" type="application/xml" title="Sitemap" href="http://9dayweightplan.co.uk/sitemap.xml" />
<meta name="msvalidate.01" content="F93ED627DE19CC37714A6C038AC3DF84" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="C9-F15CSS/C9-F15.css" rel="stylesheet" type="text/css" />
<link href="C9-F15CSS/SixCaps.css" rel="stylesheet" type="text/css" />
<link href="C9-F15CSS/media.css" rel="stylesheet" type="text/css" />
<link href="C9-F15CSS/phone.css" rel="stylesheet" type="text/css" />
<link href="C9-F15CSS/tablet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
div.c1 {text-align: center}
/*]]>*/
</style>
</head>
<body>
<div class="container">
<div class="header">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="45%" bgcolor="#FFFFFF">
<br /><h1><span>C9</span> - 9 Day Weight Plan UK</h1>
</td>
<td valign="middle" width="55%">
<div id="tswcsstabs">
<ul>
<li><a href="index.html">Clean9</a></li>
<li><a href="FIT15.html">FIT15</a></li>
<li><a href="Clean9-Review.html">Clean 9 Review</a></li>
<li><a href="Clean9-F15.html">C9 F15 Recipes</a></li>
<li><a href="opportunity.html">Opportunity</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="content">
<table width="90%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="70%">
<br />
<h2>Clean 9 Day Weight Plan, Weight management life style plan</h2>
</td>
<td valign="top" width="30%"><br /><br /><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&distribID=440100111684" title="Forever Clean 9 FIT, C9 F15 products" target="_blank"><img src="Clean9FIT15-Images/Weight-Loss-392-x-72-Animation.jpg" style="max-width:100%;height:auto;" alt="Forever Clean 9 weight loss plan" /></a>
<p><small>Click banner to go to FLP secure shop</small></p>
</td>
</tr>
<tr>
<td colspan="2">
<ul>
<li>AT CAN YOU EXPECT OVER THE NEXT NINE DAYS? Clean 9 is easy to follow with instructions set out for each of the nine days. This booklet also provides some nutritious shake recipe ideas, a list of free foods that are nutritious but low in calories, and evening meal recipes for days 3-9. Also detailed in this booklet is a range of low to medium impact exercises to support you on your weight management journey.</li><li>MOVING TOWARDS A HEALTHIER LIFESTYLE ISN'T EASY... We all have lifestyle and weight loss goals, but life can sometimes get in the way. Often, we don't have time to make a plan. All you have to do is follow it! Everything for your clean days are listed, the weight programme is designed for you, consequently the Aloe Vera drink, the forever shakes are just as important as the supplements. The Clean 9 or C9 programme does the planning for you. Dedicated space in the Clean 9 booklet is there for you to record your progress and take notes along the way.</li> </ul>
<p>N.B. For comprehensive instructions use the Clean 9 step-by-step guide, download here: <a href="C9_BROCHURE_UK.pdf" title="Clean9 Brochure C9" target="_blank">C9 - Clean 9 guide</a>.</p>
</td>
</tr>
</table>
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" width="30%"><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&itemCode=475&distribID=440100111684" title="Clean 9 Vanilla" target="_blank"><img src="Clean9FIT15-Images/clean9.jpg" style="max-width:100%;height:auto;" alt="Clean 9 Vanilla" /></a></td>
<td align="center" width="30%"><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&itemCode=476&distribID=440100111684" title="Clean 9 Chocolate" target="_blank"><img src="Clean9FIT15-Images/clean9.jpg" style="max-width:100%;height:auto;" alt="Clean 9 Chocolate" /></a></td>
</tr>
<tr>
<td align="center" width="30%">
<h3><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&itemCode=475&distribID=440100111684" title="Clean 9 Vanilla" target="_blank">Clean 9 Vanilla</a></h3>
</td>
<td align="center" width="30%">
<h3><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&itemCode=476&distribID=440100111684" title="Clean 9 Chocolate" target="_blank">Clean 9 Chocolate</a></h3>
</td>
</tr>
</table>
<br />
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<p>Choose the goals you plan to achieve during the 9 day weight plan. This can be anything from losing a few pounds to taking the stairs everyday.</p>
<h4>WHAT ARE YOUR GOALS?</h4>
</td>
</tr>
<tr>
<td align="center">
<p><iframe id="video-D9DA09F5-DF1E-41A2-9BB6-A8FEB48927BF" width="335" height="223" src="https://www.youtube.com/embed/XvB7sTt-bY4?wmode=transparent&enablejsapi=1" frameborder="0"></iframe> Video about the Clean 9 pack</p>
</td>
</tr>
<tr>
<td><br />
<hr />
<ul>
<li><small>Forever Living Business Owner</small></li>
<li><small>Head Office Address - Forever Living Products, Longbridge Manor, Warwick, CV34 6RB.</small></li>
<li><small>Statutory Wealth Warning - It is illegal for a promoter or a participant in a trading scheme to persuade anyone to make a payment by promising benefits from getting others to join a scheme.<br />
Do not be misled by claims that high earnings are easily achieved.</small></li>
<li><small>Forever Living are members of the Direct Selling Association.</small></li>
</ul>
</td>
</tr>
</table>
<!-- end centercol -<!-- end centercol -->
<p>© 2017 9dayweightplan.co.uk All rights reserved</small></p>
</div>
<br />
<div align="center"><a href="index.html">Clean9</a> | <a href="FIT15.html">FIT15</a> | <a href="Clean9-Review.html">Clean 9 Review</a> | <a href="Clean9-F15.html">C9 F15 Recipes</a> | <a href="opportunity.html">Opportunity</a></div>
<!-- end wrapper2 --><br />
<!-- end main content area --></div>
<!-- end footer --></div>
</body>
</html>
You have too many </div> tags! For example the </div> at line 53 closes the <div class="container"> at line 31 which I don't think is your intention. Also the comments in the last few lines appear to be in the wrong order which may be confusing.
I have amended the code and checked with validator but my header is still not showing.
Here is m updated HTML code: Thank you for looking :)
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<style type="text/css">
/*<![CDATA[*/
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
/*]]>*/
</style>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>9 Day Weight Plan, Clean 9 - C9 packs, Aloe Vera Based, UK, Buy here</title>
<meta name="description" content="CLean 9 day Weight Plan, C9 diet, Results with Forever Living F.I.T. Weight Management Products. F15 Packs and Shakes Fast delivery - 60 day money guarantee" />
<meta name="keywords" content="Clean 9 Day Weight Plan, C9, F.I.T., Forever FIT, aloe drinks, lose weight, Forever Living Products, nine day diet plan, Forever weight management" />
<link rel="sitemap" type="application/xml" title="Sitemap" href="http://9dayweightplan.co.uk/sitemap.xml" />
<meta name="msvalidate.01" content="F93ED627DE19CC37714A6C038AC3DF84" />
<link href="C9-F15CSS/C9-F15.css" rel="stylesheet" type="text/css" />
<link href="C9-F15CSS/SixCaps.css" rel="stylesheet" type="text/css" />
<link href="C9-F15CSS/media.css" rel="stylesheet" type="text/css" />
<link href="C9-F15CSS/phone.css" rel="stylesheet" type="text/css" />
<link href="C9-F15CSS/tablet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
div.c1 {text-align: center}
/*]]>*/
</style>
</head>
<body>
<div class="container">
<div class="header">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="40%" bgcolor="#FFFFFF">
<br /><h1><span>C9</span> - 9 Day Weight Plan UK</h1>
</td>
<td valign="middle" width="60%">
<div id="tswcsstabs">
<ul>
<li><a href="index.html">Clean9</a></li>
<li><a href="FIT15.html">FIT15</a></li>
<li><a href="Clean9-Review.html">Clean 9 Review</a></li>
<li><a href="Clean9-F15.html">C9 F15 Recipes</a></li>
<li><a href="opportunity.html">Opportunity</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div class="content">
<table width="90%" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" valign="top" width="60%">
<br />
<h2>Clean 9 Day Weight Plan, Weight management life style plan</h2>
</td>
<td valign="top" width="40%"><br /><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&distribID=440100111684" title="Forever Clean 9 FIT, C9 F15 products" target="_blank"><img src="Clean9FIT15-Images/Weight-Loss-392-x-72-Animation.jpg" style="max-width:100%;height:auto;" alt="FIT F15 Weight Loss plan" /></a>
<p><small>Click banner to go to FLP secure shop</small></p>
</td>
</tr>
</table>
<table width="90%" cellspacing="0" cellpadding="0">
<tr>
<td>
<ul>
<li>WHAT CAN YOU EXPECT OVER THE NEXT NINE DAYS? Clean 9 is easy to follow with instructions set out for each of the nine days. This booklet also provides some nutritious shake recipe ideas, a list of free foods that are nutritious but low in calories, and evening meal recipes for days 3-9. Also detailed in this booklet is a range of low to medium impact exercises to support you on your weight management journey.</li><li>MOVING TOWARDS A HEALTHIER LIFESTYLE ISN'T EASY... We all have lifestyle and weight loss goals, but life can sometimes get in the way. Often, we don't have time to make a plan. All you have to do is follow it! Everything for your clean days are listed, the weight programme is designed for you, consequently the Aloe Vera drink, the forever shakes are just as important as the supplements. The Clean 9 or C9 programme does the planning for you. Dedicated space in the Clean 9 booklet is there for you to record your progress and take notes along the way.</li> </ul>
<p>N.B. For comprehensive instructions use the Clean 9 step-by-step guide, download here: <a href="C9_BROCHURE_UK.pdf" title="Clean9 Brochure C9" target="_blank">C9 - Clean 9 guide</a>.</p>
</td>
</tr>
</table>
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" width="30%"><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&itemCode=475&distribID=440100111684" title="Clean 9 Vanilla" target="_blank"><img src="Clean9FIT15-Images/clean9.jpg" style="max-width:100%;height:auto;" alt="Clean 9 Vanilla" /></a></td>
<td align="center" width="30%"><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&itemCode=476&distribID=440100111684" title="Clean 9 Chocolate" target="_blank"><img src="Clean9FIT15-Images/clean9.jpg" style="max-width:100%;height:auto;" alt="Clean 9 Chocolate" /></a></td>
</tr>
<tr>
<td align="center" width="30%">
<h3><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&itemCode=475&distribID=440100111684" title="Clean 9 Vanilla" target="_blank">Clean 9 Vanilla</a></h3>
</td>
<td align="center" width="30%">
<h3><a href="https://www.foreverliving.com/retail/entry/Shop.do?store=GBR&language=en&itemCode=476&distribID=440100111684" title="Clean 9 Chocolate" target="_blank">Clean 9 Chocolate</a></h3>
</td>
</tr>
</table>
<br />
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<p>Choose the goals you plan to achieve during the 9 day weight plan. This can be anything from losing a few pounds to taking the stairs everyday.</p>
<h4>WHAT ARE YOUR GOALS?</h4>
</td>
</tr>
<tr>
<td align="center">
<p><iframe id="video-D9DA09F5-DF1E-41A2-9BB6-A8FEB48927BF" src="https://www.youtube.com/embed/XvB7sTt-bY4?wmode=transparent&enablejsapi=1" frameborder="0"></iframe> Video about the Clean 9 pack</p>
</td>
</tr>
<tr>
<td><br />
<hr />
<ul>
<li><small>Forever Living Business Owner</small></li>
<li><small>Head Office Address - Forever Living Products, Longbridge Manor, Warwick, CV34 6RB.</small></li>
<li><small>Statutory Wealth Warning - It is illegal for a promoter or a participant in a trading scheme to persuade anyone to make a payment by promising benefits from getting others to join a scheme.<br />
Do not be misled by claims that high earnings are easily achieved.</small></li>
<li><small>Forever Living are members of the Direct Selling Association.</small></li>
</ul>
</td>
</tr>
</table>
<p><small>© 2017 9dayweightplan.co.uk All rights reserved</small></p>
</div>
<br />
<div align="center"><a href="index.html">Clean9</a> | <a href="FIT15.html">FIT15</a> | <a href="Clean9-Review.html">Clean 9 Review</a> | <a href="Clean9-F15.html">C9 F15 Recipes</a> | <a href="opportunity.html">Opportunity</a></div>
<br />
<!-- end wrapper2 -->
<!-- end main content area --></div>
</body>
</html>
Without seeing your CSS files it's impossible to help any further. I tried looking here https://foreverliving.com/C9-F15CSS/C9-F15.css but that just returns a 404 error.
I haven't got it live yet, waiting for IPS change, may have to ask again when uploaded website.
In the meantime I enclose CSS coding:
Code:@charset "UTF-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p, ul, form{
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 90%;
max-width: 960px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 760px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
/* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
.header {
background-image: url(Clean9FIT15-Images/C9FIT-Header.jpg);
background-repeat: no-repeat;
height: 303px;
}
.header img {
width:100%;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
p, form {
font-family : "Century Gothic", Verdana, Arial, sans-serif;
font-size : 12px;
font-weight : lighter;
color : #334d51;
}
h1 {
font-family : "Palatino", Arial, sans-serif;
font-size : 26px;
font-weight : lighter;
color : purple;
}
h2 {
font-family : "Palatino", Arial, sans-serif;
font-size : 25px;
font-weight : lighter;
color : green;
}
h3 {
font-family : "Open Sans", Verdana, Arial, sans-serif;
font-size : 15px;
font-weight : lighter;
color : #334d51;
}
h4 {
font-family : "Century Gothic", Verdana, Arial, sans-serif;
font-size : 13px;
font-weight : lighter;
color : purple;
}
h5 {
font-family : "Century Gothic", Verdana, Arial, sans-serif;
font-size : 12px;
font-weight : lighter;
color : #ffffff;
}
}
hr {
width: 90%;
}
#tswcsstabs ul {
margin : 0;
padding : 0;
list-style : none;
}
#tswcsstabs ul li {
margin : 0;
padding : 0;
display : inline;
text-align : center;
list-style : none;
font-family : Arial, Helvetica, sans-serif;
}
#tswcsstabs li a {
padding : 10px;
display : inline;
}
#tswcsstabs li a:hover {
color : #310d89;
}
So sorry I have just realised I forgot the backslash before the images folder, I have now amended (see below) and it works fine.
So sorry to have wasted your time. :)
Thanks again SusieCode:.header {
background-image: url(/Clean9FIT15-Images/C9FIT-Header.jpg);
background-repeat: no-repeat;
height: 303px;
Sometimes just talking it out is all you need to see a typo like that, so no need to apologize. That's all part of what we're here for.