Sorted

hi

 

the black box has to do with this in your css

 

#topPanel img{
width:298px;
height:101px;
z-index:1;
padding:0;
position:absolute;
margin:0 0 0 21px;
background-image: url(file:///C|/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Water%20lilies.jpg);
left: -544px;
top: 340px;
}

 

and this part of your html

 

<img width="600" height="300" src="../logo009.jpg"/>

Topic resolved..

Having a quick look at your code you may have to use a wrapper to center your content

Thanks I will fix it and let you know, so how do I centre the content?

 

Hi, I cannot find that code. Where is it located? and how do I insert a wrapper?

 

Thanks

Topic resolved...

Hi

 

The black box has gone.

 

Ill help on the wrapper later on today if you don't solve it.

 

Pat

chk this  articleon centering site

Topic resolved...

Hi

 

Try this

 

html

 

<div id="wrapper">
<div id="topPanel">
<div id="headerPanelfast">
<h2>candIdates</h2>
<p>Find out why more people choose JobJar...</p>
<a href="Candidates.html">
 </a></div>
<div id="headerPanelsecond">
<h2>clients</h2>
<p>JobJar can assist you with all of your recruitment needs...</p>
<a href="Clients.html">
 	</a></div>
<div id="headerPanelthird">
<h2>job search</h2>
<p>Search through our database of part time, full time, temporary and permanant vacancies...</p>
<a href="index.html">
 	</a></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<ul class="MenuBarHorizontal">
<li><a href="Contact.html">Contact Us</a> </li>
<li><a href="Links.html">Links</a></li>
<li><a href="Testimonials.html">Testimonials</a></li>
<li><a href="About%20Us.html">About Us</a>	</li>
<li><a href="Home.html">Home</a></li>
</ul>
</div>
<div id="bodyPanel">
<div id="apDiv1">
<div id="apDiv2">
	<div align="left">JobJar is a recruitment consultancy supplying Social Workers, Social Care Staff, Nurses, Allied Health Professions and Managers throughout the UK. We supply staff to the public, private and voluntary sectors across the United Kingdom. JobJar has the expertise, knowledge and resources in place, enabling us to offer our clients and candidates a premium service. If you are looking for Qualified Social Work Jobs, Nursing Jobs, Social Care Jobs, Residential Care Jobs or other specialist roles within the Social Care, Nursing or Health sector then click on the links above to see what we have to offer.</div>
</div>
<div id="apDiv4">
	<object style="visibility: visible;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="FlashID" title="jobjar" height="235" width="288">
	<param name="movie" value="../Images/homepage.swf">
	<param name="quality" value="high">
	<param name="wmode" value="opaque">
	<param name="swfversion" value="6.0.65.0">
	<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
	<param name="expressinstall" value="../Scripts/expressInstall.swf">
	<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
	<!--[if !IE]>-->
	<object type="application/x-shockwave-flash" data="../Images/homepage.swf" height="235" width="288">
	<!--<![endif]-->
	<param name="quality" value="high">
	<param name="wmode" value="opaque">
	<param name="swfversion" value="6.0.65.0">
	<param name="expressinstall" value="../Scripts/expressInstall.swf">
	<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
	<div>
	<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
	<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" height="33" width="112"></a></p>
	</div>
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
	</object>
</div>
<div id="apDiv8"><a href="Links.html"><img src="../Images/logos.gif" alt="logo" border="0" height="65" width="181"></a></div>
<h4>What we offer</h4>
<ul>
	<li>Excellent pay rates</li>
	<li>Wide range of jobs</li>
	<li>Flexibility</li>
	<li>Nationwide opportunities</li>
	<li>24 hour support</li>
	<li>Unique payment methods</li>
	<li>Manage your own Tax</li>
	<li>Competitve rates</li>
	<li>Plus more...</li>
</ul>
<div id="apDiv10">Simply email your CV to cv@jobjar.co.uk , detailing the type of work you are looking for and where you are willing to work. Our team of specialists will search through the database of vacancies and choose the most suitable role for you or click <a href="Upload%20CV.html">here</a> to upload your CV.</div>
<div id="apDiv11">Looking for a job?</div>
<div id="apDiv12">Want to post a vacancy?</div>
<div id="apDiv14">Email: enquiries@jobjar.co.uk</div>
<div id="apDiv15">Phone: 000 00007</div>
<div id="apDiv19"><a href="Clients%20Request%20Call%20Back.html"><img src="../Images/request-call-back.jpg" border="0" height="83" width="177"></a></div>
<div id="apDiv22">Posting a job with JobJar can never be simpler, click <a href="Clients%20Post%20Job.html">here</a> to submit your vancancy and we will find the right candidate for you within 48 hours. Alternatively, you can request a call back.</div>
<div id="apDiv34">Fax: 635635635</div>
<div id="apDiv35"><a href="Home.html"><img src="../Images/Logo8.jpg" border="0" height="69" width="292"></a></div>
</div>
</div></div>
<div id="footerPanel">
<div id="footerbodyPanel">
<ul>
<li><a href="Home.html">Home | </a></li>
<li><a href="About%20Us.html">About us | </a></li>
<li><a href="Sitemap.html">Sitemap | </a></li>
<li><a href="Terms%20&%20Conditions.html">Terms & Conditions | </a></li>
<li><a href="Contact.html">Contact </a> </li>
</ul>
<ul class="templateworld">
<li>Copyright 2009 © JobJar.co.uk</li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
//-->
</script>

 

css

 

#wrapper {
margin:0 auto;
width:762px;
height:auto;
}

 

Pat

Topic resolved...

Hi

 

I have updated your css as follows

 

/* CSS Document */
body{
background:#fff;
color:#0F6;
font:15px/20px Arial, Helvetica, sans-serif;
margin:32px 0 0;
padding:0;
font-family: Georgia, "Times New Roman", Times, serif;
}
#wrapper {margin:0 auto;
width:900px;
height:auto;
}
div, ul, h1, h2, h3, li, p, img{
margin:0;
padding:0;
color: #000;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
}
ul{list-style-type:none;}

/* TOP PANEL*/
#topPanel{width:762px; height:373px; position:relative; margin:0 auto; padding:0;}

/* MENU PANEL*/
#topPanel ul{
display:block;
width:415px;
height:47px;
position:absolute;
top:-14px;
right:2px;
margin:11px 0 0;
padding:0 29px 0 0;
border-bottom:1px solid #a7a7a7;
visibility: visible;
}
#topPanel ul li{float:right; font:12px/36px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold;}
#topPanel ul li a{width:74px; height:36px; display:block; padding:0; color:#555; background:#fff; text-decoration:none; text-align:center; margin:0 1px 0 0; top:0px; left:0px;}
#topPanel ul li a:hover{
width:74px;
height:36px;
text-decoration:none;
color:#999;
font-size: 12px;
background-color: #AEAEAE;
background-image: url(images/button.gif);
background-repeat: no-repeat;
background-position: 0 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#topPanel ul li.active{width:74px; display:block; height:36px; background:url(images/button.gif) no-repeat 0 0 #AEAEAE; color:#fff; text-align:center; margin:0 1px 0 0;}
/* HEADER PANEL*/
#topPanel #headerPanelfast{
width:246px;
height:263px;
position:absolute;
top:0;
left:3px;
margin:110px 0 0;
padding:0px;
background:url(images/orange-normal.jpg) no-repeat 0 0 #FC5F00;
color:#fff;
visibility: visible;
}
#topPanel #headerPanelfast a{width:246px; height:263px; display:block; text-decoration:none; }
#topPanel #headerPanelfast a:hover{
width:246px;
height:263px;
background:url(images/orange-hover.jpg) no-repeat 0 0 #FC5F00;
color:#996;
text-decoration:none;
}
#topPanel #headerPanelfast h2{
display:block;
width:90px;
height:47px;
margin:54px 0 0 120px;
font:28px/28px "Trebuchet MS",Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
position:absolute;
top:0px;
left:-22px;
z-index:1;
font-size: 22px;
color: #FFF;
font-style: normal;
visibility: visible;
}
#topPanel #headerPanelfast p{
width:163px;
display:block;
font:12px/18px Arial, Helvetica, sans-serif;
position:absolute;
top:0px;
left:0px;
z-index:1;
padding:0;
margin:105px 50px 0 38px;
text-align: center;
font-size: 12px;
color: #FFF;
font-weight: bold;
font-style: normal;
visibility: visible;
}

#topPanel #headerPanelsecond{
width:246px;
height:263px;
position:absolute;
top:0;
left:258px;
margin:110px 0 0;
padding:0px;
background:url(images/green-normal.jpg) no-repeat 0 0 #FC5F00;
color:#fff;
visibility: visible;
}
#topPanel #headerPanelsecond a{width:246px; height:263px; display:block; text-decoration:none; }
#topPanel #headerPanelsecond a:hover{
width:246px;
height:263px;
background:url(images/green-hover.jpg) no-repeat 0 0 #FC5F00;
color:#C5D5FC;
text-decoration:none;
}
#topPanel #headerPanelsecond h2{
display:block;
width:90px;
height:47px;
background:none;
margin:54px 0 0 103px;
font:28px/28px "Trebuchet MS",Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
padding:0;
position:absolute;
z-index:1;
font-size: 22px;
left: 12px;
color: #FFF;
font-style: normal;
visibility: visible;
}
#topPanel #headerPanelsecond p{
width:163px;
display:block;
font:12px/18px Arial, Helvetica, sans-serif;
font-weight:bold;
position:absolute;
top:0px;
left:0px;
z-index:1;
padding:0;
margin:105px 50px 0 38px;
text-align: center;
font-size: 12px;
color: #FFF;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
visibility: visible;
}

#topPanel #headerPanelthird{
width:246px;
height:263px;
position:absolute;
top:0;
right:0;
margin:110px 0 0;
padding:0px;
background:url(images/blue-normal.jpg) no-repeat 0 0 #FC5F00;
color:#fff;
visibility: visible;
}
#topPanel #headerPanelthird a{width:246px; height:263px; display:block; text-decoration:none; }
#topPanel #headerPanelthird a:hover{width:246px; height:263px; background:url(images/blue-hover.jpg) no-repeat 0 0 #FC5F00; color:#fff; text-decoration:none;}
#topPanel #headerPanelthird h2{
display:block;
width:90;
height:47;
background:none;
margin:54px 0 0 93px;
font:28px/28px "Trebuchet MS",Arial, Helvetica, sans-serif;
text-transform:uppercase;
padding:0;
position:absolute;
z-index:1;
font-size: 22px;
top: -2px;
font-weight: bold;
color: #FFF;
font-style: normal;
visibility: visible;
}
#topPanel #headerPanelthird p{
width:163px;
display:block;
font:12px/18px Arial, Helvetica, sans-serif;
font-weight:bold;
position:absolute;
top:0px;
left:-3px;
z-index:1;
padding:0;
margin:105px 50px 0 38px;
text-align: center;
font-size: 12px;
color: #FFF;
font-style: normal;
visibility: visible;
}
/* /TOP PANEL*/

/* BODY PANEL*/
#bodyPanel{width:762px; height:640px; position:relative; margin:0 auto; padding:0;}
#bodyPanel h2{
background:#fff;
display:block;
width:250px;
height:50px;
margin:0;
font:30px/30px Georgia, "Times New Roman", Times, serif;
font-weight:normal;
padding:4px 0 0 202px;
color:#FF7113;
font-size: 28px;
}
#bodyPanel p{background:url(images/symbol.jpg) 0 0 no-repeat #fff; margin:0 0 0 54px; padding:0 42px 35px 150px; color:#0F0F0F;}
#bodyPanel p span{font-weight:bold;}
#bodyPanel p.dotline{background:url(images/dot-line.gif) 0 0 repeat-x #fff; padding:0; margin:0 40px 0 25px; color:#000;}
#bodyPanel p.capstext{background: url(images/name.gif) bottom right no-repeat #fff; font:18px/24px Georgia, "Times New Roman", Times, serif; font-style:italic; color:#555555; padding:2px 10px 0 25px ; margin:0 35px 10px 0; }
#bodyPanel p.more{height:26px; padding:0; background:none; margin:0;}
#bodyPanel p.more a{
width:76px;
height:26px;
display:block;
margin:314px 20px 19px 618px;
background:url(images/more.gif) 0 0 no-repeat #fff;
color:#555;
text-decoration:none;
font:15px/26px "Trebuchet MS",Arial, Helvetica, sans-serif;
padding:0 0 0 10px;
text-transform:uppercase;
position:absolute;
top:11px;
right:41px;
}
#bodyPanel p.more a:hover{background:url(images/more.gif) 0 0 no-repeat #fff; color:#216EBD; text-decoration:none;}
#bodyPanel h3{background:#fff; display:block; width:250px; height:34px; margin:34px 0 12px 0; font:30px/30px Georgia, "Times New Roman", Times, serif; font-weight:normal; padding:0 0 0 20px; color:#FF7113;}
#bodyPanel #testimonial{width:283px; height:162px; display:block; background:url(images/testimonial-bg.gif) 0 0 no-repeat #FFF6DB; padding:32px 33px 0 148px; margin:0 0 0 20px; color:#786321;}
#bodyPanel #testimonial p{background:none; margin:0; padding:0 0 5px 0;}
#bodyPanel #testimonial p span{color:#786321 !Important; background:#FFFAED !Important;}
#bodyPanel p.moretwo{height:26px; padding:0; background:none; margin:0;}
#bodyPanel p.moretwo a{width:76px; height:26px; display:block; margin:0px 0px 0px 196px; background:url(images/more2.gif) 0 0 no-repeat #FFF5D6; color:#555; text-decoration:none; font:15px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase; padding:0 0 0 10px; top:0px; right:0px;}
#bodyPanel p.moretwo a:hover{background:url(images/more2.gif) 0 0 no-repeat #FFF5D6; color:#216EBD; text-decoration:none;}
#bodyPanel h4{
background:#fff;
width:250px;
height:30px;
position:absolute;
top:263px;
right:8px;
margin:0;
font:30px/30px Georgia, "Times New Roman", Times, serif;
padding:0px;
color:#FF7113;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
}
#bodyPanel ul{
width:225px;
display:block;
position:absolute;
right:25px;
top:299px;
color: #000;
}
#bodyPanel ul li{
font:12px/25px Arial, Helvetica, sans-serif;
font-weight:normal;
background:url(images/symbol2.gif) 0 8px no-repeat;
padding:0 0 0 30px;
color: #000;
font-size: 12px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
#bodyPanel ul span{ background:url(images/dot-line.gif) repeat-x 0 100%; height:25px; display:block;}
/* FOOTER PANEL*/
#footerPanel{width:100%; background:#DCDCDC; color:#4C4C4C; font-size:12px;}
#footerbodyPanel{
width:1000px;
position:relative;
margin:0 auto;
padding:0;
left: 0px;
height: 55px;
overflow: auto;
}
#footerPanel ul{
width:383px;
display:block;
position:absolute;
right:138px;
top:3px;
height: 20px;
visibility: visible;
}
#footerPanel li{
float:left;
font:12px/15px Arial, Helvetica, sans-serif;
font-weight:normal;
color: #4C4C4C;
font-style: normal;
}
#footerPanel ul li a{padding:0 6px; color:#4C4C4C; background:#DCDCDC; text-decoration:none;}
#footerPanel ul li a:hover{
text-decoration:underline;
text-align: center;
}
#footerPanel ul li a.padl{padding:0 0 0 6px;}
#footerPanel p.copyright{
background:#DCDCDC;
display:block;
position:absolute;
top:54px;
right:45px;
color:#A64200;
width: 190px;
}
#footerPanel ul.templateworld{
width:173px;
background:#DCDCDC;
color:#4C4C4C;
display:block;
position:absolute;
top:31px;
right:156px;
visibility: visible;
}
#footerPanel ul.templateworld li a{background:#DCDCDC; display:block; color:#4C4C4C; text-decoration:none;}
#footerPanel ul.templateworld li a:hover{text-decoration:underline;}

#footerhtmlPanel{ width:86px; height:31px; display:block; position:absolute; top:34px; left:29px; margin:0; padding:0;} 
#footerhtmlPanel a{ width:86px; height:31px; display:block; background:url(images/html-img.gif) no-repeat 0 0 #DCDCDC; text-decoration:none; font:14px/31px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2F2F2F; text-transform:uppercase; padding:0 0 0 10px; position:absolute; top:0px; right:0px;}
#footerhtmlPanel a:hover{background:url(images/html-img.gif) no-repeat 0 0 #DCDCDC; color:#216EBD; text-decoration:none; }
#footercssPanel{ width:86px; height:31px; display:block; position:absolute; top:34px; left:115px; margin:0; padding:0;} 
#footercssPanel a{ width:86px; height:31px; display:block; background:url(images/css-img.gif) no-repeat 0 0 #DCDCDC; text-decoration:none; font:14px/31px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2F2F2F; text-transform:uppercase; padding:0 0 0 10px; position:absolute; top:0px; right:0px;}
#footercssPanel a:hover{background:url(images/css-img.gif) no-repeat 0 0 #DCDCDC; color:#216EBD; text-decoration:none; }
#bodyPanel #apDiv1 #apDiv2 {
font-family: Arial, Helvetica, sans-serif;
}
#bodyPanel #apDiv1 #apDiv2 div {
color: #000;
font-size: 15px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
#apDiv4 h4 {
color: #E87400;
font-size: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
}
#apDiv3 #apDiv8 form table tr td font {
color: #000;
}
#apDiv3 #apDiv10 p {
font-family: Georgia, "Times New Roman", Times, serif;
}
#apDiv3 #apDiv10 p {
font-size: large;
font-style: normal;
}
#apDiv2 #apDiv5 #apDiv10 {
color: #FF7113;
font-size: x-large;
font-weight: bold;
}
#apDiv2 #apDiv5 #apDiv10 p a {
font-family: Georgia, "Times New Roman", Times, serif;
}
#apDiv2 #apDiv6 p {
font-family: Georgia, "Times New Roman", Times, serif;
}
#apDiv2 #apDiv6 p {
font-weight: bold;
}
#apDiv2 #apDiv6 p {
color: #FF7113;
font-size: large;
font-style: normal;
}
#apDiv3 #apDiv11 form table tr td font {
font-family: Georgia, "Times New Roman", Times, serif;
}
#apDiv14 p {
font-family: Georgia, "Times New Roman", Times, serif;
}
#apDiv14 p {
font-weight: bold;
font-size: large;
}
#apDiv3 #apDiv10 p a {
font-size: large;
}
#apDiv25 p {
font-size: 12px;
color: #000;
font-style: normal;
text-align: left;

}
.dsssss {
font-size: 12px;
}
#apDiv12 form table {
font-size: 12px;
}
#apDiv20 p {
font-style: italic;
font-size: 12px;
}
#apDiv23 p {
font-style: italic;
font-size: 12px;
}
#apDiv29 p {
font-style: italic;
font-size: 12px;
}
#apDiv56 {
color: #FF7113;
}
#apDiv13 {
border: thin solid #960;
}
#apDiv13 {
border: thick groove #C90;
}
#apDiv13 {
background-color: #FFF;
border: medium dotted #FF7113;
}
#apDiv13 {
}
#apDiv74 p {
font-size: large;
color: #FF7113;
font-weight: bold;
}
#apDiv15 p {
font-size: 12px;
font-weight: normal;
color: #000;
}
#apDiv15 pj {
font-size: large;
}
#apDiv65 div {
font-size: 12px;
}

 

the <div id="wrapper"> should be

 

<div id="wrapper">
<div id="topPanel">
<div id="headerPanelfast">
<h2>candidates</h2>

 

and yu should close it before the start of your footer div

 

try the above code on the about us page

 

Pat

Sorted