asked on How to change the Css page background
I would like to create a page background simmilar to the one on:
http://www.aapc.com/
My current markup is next, I am having issues on how to set like a main background on the website, and then all content white background.
Also I am attaching the style sheet here.
Thanks in advance!
![bg-body]()
http://www.aapc.com/
My current markup is next, I am having issues on how to set like a main background on the website, and then all content white background.
Also I am attaching the style sheet here.
Thanks in advance!
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Doctors Hospital at Renaissance - ICD-10 Website</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper" >
<div class="wrapper-holder">
<div id="main">
<div id="header">
<div id="banner">
<div class="logo2"><a href="http://www.maadesigns.co.uk/services/identity-designs/logo-design-services.htm">Logo
1</a></div>
</div>
<!--<div class="menupanel">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div> -->
<div id="content">
<div class="col1">
<div class="sidelinksheader">Menu Navigation </div>
<ul>
<li><a href="default.aspx">
Home</a></li>
<li><a href="ProjectSchedule.aspx">Project
Schedule</a></li>
<li><a href="DepartmentPage.aspx">
Department Pages</a></li>
<li><a href="MedicalOffices.aspx">
Medical Offices Page</a></li>
<li><a href="Training.aspx">
Training</a></li>
<li><a href="Testing.aspx">Testing</a></li>
<li><a href="FAQ.aspx">
FAQS</a></li>
<li><a href="ContactUs.aspx">
Contact Us</a></li>
</ul>
</div>
<div id="widget" class="widget">
<script type="text/javascript" src="http://widgets.aapc.com/countdown/aapc_cdwidgetbox_300.js"></script>
</div>
<div id="survey" class="survey">
Survey from WebMonkey Link.
</div>
<div class="col2">
<h1>Introduction</h1>
On October 1, 2013, the ICD-9 coding for medical diagnoses and inpatient procedures will be replaced by ICD-10
·<br />
<br />
The transition to ICD-10 is occurring because ICD-9 produces less specific information about patients’ medical conditions and hospital inpatient procedures.<br />
<br />
ICD-9 is 30 years old, has outdated terms, and is inconsistent with current medical practices.
<br />
<br />
The U.S. is the only industrialized nation that is still using ICD-9.<br />
<br />
ICD-10 will affect diagnosis and procedure coding for all patients types, not just those who submit Medicare or Medicaid claims.
<br />
<br />
ICD-10 diagnosis and procedure codes must be used for all health care services provided in the U.S. on or after October 1, 2013.<br />
<br />
Claims with ICD-9 codes for services provided on or after October 1, 2013, will not be paid.
<br />
<br />
Healthcare is a global community. In order to be compliant we need to be compatible with the international version of ICD-10.
<br />
<br />
ICD-10 transition is a huge project that has the potential to impact every department/unit within the hospital, as well as every physician and their medical offices. Over the next few months the ICD-10 Steering Committee will be releasing Awareness Bulletins, such as this one, to inform you of the wide-spread impact this transition will have, as well as what we are doing to mitigate this impact.
</div>
</div>
<div id="footer"><a href="#">Doctors Hospital at Renaissance</a> :: <a href="#">Home</a> ::
<a href="#">Contact Us</a> </div>
</div>
</div>
</div>
</div>
</body>
</html>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#main
{
width: 900px;
margin-right: auto;
margin-left: auto;
}
#main #footer
{
font-family: Arial,Helvetica,sans-serif;
/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
font-size: 11px;
text-align: center;
width: 900px;
padding-top: 8px;
padding-bottom: 8px;
clear: both;
color: #000000;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #00A7CE;
}
#wrapper
{
background-color:White;
/* background: url('bg-wrapper1.gif') repeat-y 50% 0;*/
}
#wrapper .wrapper-holder
{
width:900px;margin:0 auto;border-top:1px solid #e6e7e8;
}
.title1 {
/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
color: #006699;
}
#main #footer a {
color: #0283A3;
text-decoration: none;
}
#main #footer a:hover {
color: #00CCFF;
text-decoration: none;
}
#main #header .menupanel {
float: left;
height: 30px;
width: 900px;
background-color: #00A7CE;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000000;
visibility:hidden;
}
#main #banner {
background-image: url(../images/banner.jpg);
background-repeat: no-repeat;
float: left;
height: 240px;
width: 900px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #0283A3;
margin-bottom: 5px;
}
#main #header {
float: left;
width: 900px;
}
#main #content {
float: left;
width: 900px;
}
.col2 a {
text-decoration: none;
color: #006699;
}
.col2 a:hover {
color: #666666;
}
#main #content .col1 {
float: left;
width: 240px;
background-color: #F7F7F7;
margin-top: 5px;
height: 260px;
}
.sidelinksheader {
background-image: url(../images/sidelinks.jpg);
background-repeat: repeat-x;
font-family: tahoma, verdana, arial;
font-size: 16px;
color: #006699;
float: left;
width: 230px;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
}
.col1 ul {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
.col1 li {
display: inline;
}
.col1 li a {
/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
color: #000000;
text-decoration: none;
width: 225px;
padding-left: 15px;
float: left;
display: block;
line-height: 20px;
margin-top: 2px;
background-color: #EFEFEF;
padding-top: 2px;
padding-bottom: 2px;
height:17px;
}
.col1 li a:hover
{
color: #FFFFFF;
background-color: #5b9dbd;
}
.widget {
float: right;
width: 640px;
margin-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding: 10px;
}
.survey {
float: right;
width: 640px;
margin-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding: 10px;
height: 6px;
}
#main #content .col2 {
float: right;
width: 640px;
margin-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding: 10px;
}
#main #header .logo {
/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
font-family: Arial,Helvetica,sans-serif;
font-size: 24px;
color: #006699;
font-weight: bold;
float: left;
width: 880px;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
}
#main #header .logo a {
color: #006699;
text-decoration: none;
}
#main #header .menupanel ul {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#main #header .menupanel li {
display: inline;
}
#main #header .menupanel li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
float: left;
background-color: #00A7CE;
background-image: url(../images/menu_link.jpg);
background-repeat: no-repeat;
background-position: right center;
margin-left: 15px;
width: 124px;
}
#main #header .menupanel a.current {
background-image: url(../images/menu_hover_active.jpg);
background-repeat: no-repeat;
color: #FFFFFF;
}
#main #header .menupanel a:hover {
color: #000000;
background-image: url(../images/menu_hover_active.jpg);
}
.smallfont {
font-size: 11px;
font-weight: normal;
}
#main #banner2 {
background-image: url(../images/illustration_image2.jpg);
background-repeat: no-repeat;
float: left;
height: 300px;
width: 900px;
background-color: #FFFFFF;
background-position: right;
}
#banner2 .col111 {
float: left;
width: 200px;
background-color: #F7F7F7;
margin-top: 5px;
height: 295px;
}
.col111 ul {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
.col111 li {
display: inline;
}
.col111 li a {
/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
color: #000000;
text-decoration: none;
width: 185px;
padding-left: 15px;
float: left;
display: block;
line-height: 20px;
margin-top: 2px;
background-color: #EFEFEF;
padding-top: 2px;
padding-bottom: 2px;
}
.col111 li a:hover {
color: #FFFFFF;
background-image: url(../images/1021.jpg);
background-repeat: repeat-x;
}
#main #content .col222 {
float: left;
width: 880px;
margin-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding: 10px;
}
.col222 a {
text-decoration: none;
color: #990000;
}
.col222 a:hover {
color: #666666;
}
#main #banner .logo2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #0283A3;
font-weight: bold;
float: left;
width: 880px;
padding-top: 20px;
padding-bottom: 20px;
text-align: left;
padding-right: 20px;
background-color: #DBF0F9;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #0283A3;
}
#main #banner .logo2 a {
color: #0085A6;
text-decoration: none;
}
h1
{
/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
font-family: Arial,Helvetica,sans-serif;
font-size: 22px;
font-weight: bold;
line-height:125%;
/*color: #006699;*/
color:Black;
}
h2{font-size:16px;}h3{font-size:14px;}h4{font-size:12px;}h5{font-size:10px;}h6{font-size:8px;}
CSSHTMLASP.NET
Last Comment
TonyReba
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
> nothing happens
Strange ... It works for me in Dreamweaver
Strange ... It works for me in Dreamweaver
ASKER
I got it working but I had to define this
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: url('bg-body1.gif') repeat 0% 0;
}
#main
{
border: 1px solid #e6e7e8;
width: 900px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/bg-body1.gif
background-repeat: repeat-x repeat-y;
}
Open in new window
Open in new window