I’ve updated the page, you’ll see that the paper is showing though the image and that I want to position the Style Class=SideBar in the middle of the bluish background image when I position the Style Class=Sidebar it shrinks the bluish background image, why is that ?
Hi,
As I said above if you want the bluish image to go behind the torn paper then apply it to #wrap instead of the sidebar.
e.g.
#wrap {
width:800px;
margin:auto;
text-align:left;
background: url(images/bio_image.png) no-repeat 100% 300px;
}
#sidebar {
float: right;
width:345px;
height: 438px;
}
I assume you want it to go behind the torn paper sidebar which is what the code above will do. You can adjust the images position to match with the sidebar by adjusting the background position properties accordingly. I am assuming that the sidebar is always to be in the same place of course.
The URL provided in the first post in this topic is now displaying a page titled “Hacked by…” (I’m not going to advertise the hacker’s tag here).
The page downloads an image from a remote site.
It may be best to view the domain with caution until the OP has investigated.
Thanks for the heads up I have removed the link from the first post to stop others clicking until the OP sorts it out.
From checking via reverse IP, the exploit seems to have hit many domains on the same server. Some appear to have had their index pages replaced or perhaps redirected. I’d guess a security hole allowed a script run on one account to write to any other accounts where the conditions met its requirements. I saw a similar exploit create thousands of htaccess and php files across a server. Not pretty.
It’s the kind of situation where you discover whether your hosting provider is worth their salt. There’ll be some unhappy clients out there today. 
I haven’t got around to apply the changes, the computer had a little fault that happened I’m just about done fixing it. I’m also going to do a few more things to the page before updating.
The URL provided in the first post in this topic is now displaying a page titled “Hacked by…” (I’m not going to advertise the hacker’s tag here).
The URL provided in the first post in this topic is now displaying a page titled “Hacked by…” (I’m not going to advertise the hacker’s tag here).
The page downloads an image from a remote site.
It may be best to view the domain with caution until the OP has investigated.
Which page did this happen at ?
The hack appears to intercept the 404 error page, so the page had probably already been removed by you. I think the URL was:
http://www.thecreativesheep.ca/pagehome/home2.htm
Attempting to access any non-existent URL on your domain returns the same page content.
The page is no longer displaying the “Hacked by…” title, image link or other dubious content. Perhaps your hosting provider has run a global search and replace on the server. Haven’t they informed you of the exploit yet?
Your blog page has been affected too, suggesting the exploit has replaced or is redirecting Wordpress’s index.php file.
I assume you want it to go behind the torn paper sidebar which is what the code above will do. You can adjust the images position to match with the sidebar by adjusting the background position properties accordingly. I am assuming that the sidebar is always to be in the same place of course.
I have got around to updating the page. Placing the background image within #wrap worked and it allows me to position the class=sidebar with ease. I’ve also adding an element you may want to check to see if any problems, also the top of the image is not wide enough I assume I have to change the graphic with a wider image ?
Attempting to access any non-existent URL on your domain returns the same page content.
The page is no longer displaying the “Hacked by…” title, image link or other dubious content. Perhaps your hosting provider has run a global search and replace on the server. Haven’t they informed you of the exploit yet?
Your blog page has been affected too, suggesting the exploit has replaced or is redirecting Wordpress’s index.php file.
You don’t have the Hacked message saved or remembered ? They have affected my blog page, do you know when exactly this happened I wasn’t keeping track ?
I saved a copy of the code and will PM it to you. Note this will contain a link to an image located on an external site so I’d advise against viewing it in a browser connected to the internet.
The exploit probably occurred some time on March 1st.
That is fine you can send it. They probably found a hole as I didn’t update WP.
The hole was patched on the server. I’m just having a little problem styling a form id that I have nested within another id to get it positioned in the right spot.
Give us an updated link and tell us what you want where and we will do our best 
You don’t seem to be using any code to do what you want it to do. It seems you have just added elements to the page but not styled them at all. (I gave you a link earlier to a graphical search input button and you need to follow that process. You have to do something to make this all happen.)
If you want the input to sit over the image then make it transparent and remove the borders and position it correctly. You haven’t done any of those things so all you have is a background image and a few scattered form elements.
Here is the basis of the form technique.
#searchbox {/* position graphical background image */
background-image: url(http://www.thecreativesheep.ca/page_adjust/images/searchbox.gif);
height: 17px;
width: 187px;
z-index: 99;
float: right;
margin: 89px 35px 0 0;
display: inline;
clear: both;
position:relative;
z-index:99;
}
#searchform {/* move the form in place to match the image above */
margin:-3px 0 0 4px;
height: 12px;
}
#searchform legend span,
#searchform label{
position:absolute;
left:-999em;
top:-999em;/* hide label and legend */
}
#s{
width:140px;
background:transparent;/* hide input background and borders and size it to match image */
border:none;/* hide borders */
}
#go{/* place submit button over magnifying glass to act as search button */
width:22px;
height:21px;
background:transparent;/* hide input background and borders and size it to match image */
margin:0 6px 0 0;
text-indent:-999em;
float:left;
text-transform:capitalize;
border:none;
cursor:pointer;
}
<ul id="nav">
<li class="home"><a href="#"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About Me</span></a></li>
<li class="back"><a href="#"><span>Back(News news)</span></a></li>
<li class="basepage"><a href="#"><span>BasePage</span></a></li>
</ul>
[B] <div id="searchbox">
<form id="searchform" method="get" action="#">
<fieldset>
<legend><span>Search</span></legend>
<div>
<input type="hidden" name="s" value="1" />
<label for="s">Search</label>
<input type="submit" name="submit" value="go" id="go" title="Search This Site" />
<input type="text" name="s" id="s" size="30" value="Search ..." />
</div>
</fieldset>
</form>
</div>[/B]
<div id="feedicon"></div>
</div>
Here is the whole page again just in case you copy that incorrectly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="http://www.thecreativesheep.ca/page_adjust/reset.css" rel="stylesheet" media="screen, projection" type="text/css">
<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
<style type="text/css">
body {
line-height:1.2;
background:#afabac url(http://www.thecreativesheep.ca/page_adjust/images/bg.gif) repeat-x 0 0;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
text-align:center;
padding:25px 0 20px;
}
#wrap {
width:800px;
margin:auto;
text-align:left;
background: url(http://www.thecreativesheep.ca/page_adjust/images/bio_image.png) no-repeat 100% 300px;
}
#maincol {
width:800px;
margin: auto;
background: url(http://www.thecreativesheep.ca/page_adjust/images/middle.gif) repeat-y 4px -200px;
}
.subject_title {
background-color: transparent;
font: cursive;
margin: 0 45px -60px 63px;
height: 60px;
width: 355px;
}
.subject_title h1 {
font: fantasy;
font-size: 3.2em;
}
#content {
width:440px;
padding:15px 0px 1px 0px;
text-align:left;
float:left;
}
.content-top, .content-base {
width:436px;
height:24px;
background: url(http://www.thecreativesheep.ca/page_adjust/images/topbox.png) no-repeat 0 0;
overflow:hidden;
clear:both;
margin:.5em 0 0 60px;
}
.content-base {
background: url(http://www.thecreativesheep.ca/page_adjust/images/bottombox.png) no-repeat 0 0;
margin: 0 0 .5em 60px;
}
.content_boxes {
width:436px;
overflow: hidden;
background: url(http://www.thecreativesheep.ca/page_adjust/images/middlebox.png) repeat-y 0 0;
margin: 0 0 0 60px;
padding: 1px 10px;
}
/*
* html #content {
height:400px
}
*/
#content p {
margin:0 0 1em;
line-height:1.5;
}
/*.content_boxes {
background-image: url(http://www.thecreativesheep.ca/page_adjust/images/content_box_03.png);
width: 300px;
overflow: hidden;
}*/
.top, .base {
background:url(http://www.thecreativesheep.ca/page_adjust/images/top.gif) no-repeat 0 0;
clear:both;
width:520px;
height:23px;
}
.base {
background:url(http://www.thecreativesheep.ca/page_adjust/images/base.gif) no-repeat 0 0;
clear:both;
width:525px;
height:28px;
margin: 0 0 0 20px;
}
.bg_sidebar {
background-color: #3300FF;
height: 250px;
margin: 169px 0 65px 75px;
width: 200px;
}
#sidebar {
float: right;
width:345px;
height: 438px margin-top:27px 0 0;
}
#header {
width:528px;
height:236px;
background: url(http://www.thecreativesheep.ca/page_adjust/images/header.jpg) no-repeat 0 0;
position:relative;
margin:0 0 0 9px;
top:2px;
}
#masterhome {
position: relative;
top: 60px;
left: 85px;
width: 125px;
height: 125px;
}
#masterhome a {
display: block;
width: 125px;
height: 125px;
}
ul#nav {
position:absolute;
top:180px;
left:225px;
margin:0;
z-index:75;
}
#searchbox {
background-image: url(http://www.thecreativesheep.ca/page_adjust/images/searchbox.gif);
height: 17px;
width: 187px;
z-index: 99;
float: right;
margin: 89px 35px 0 0;
display: inline;
clear: both;
position:relative;
z-index:99;
}
#searchform {
margin:-3px 0 0 4px;
height: 12px;
}
#searchform legend span, #searchform label {
position:absolute;
left:-999em;
top:-999em;
}
#s {
width:140px;
background:transparent;
border:none;
}
#go {
width:22px;
height:21px;
background:transparent;
margin:0 6px 0 0;
text-indent:-999em;
float:left;
text-transform:capitalize;
border:none;
cursor:pointer;
}
#feedicon {
background-color: #000000;
height: 44px;
width: 44px;
margin: 125px 0 0 510px;
}
#nav li, #nav li a {
width:60px;
height:25px;
float:left;
position:relative;
}
#nav li.about {
width:70px;
margin-top:-7px;
}
#nav li.about a {
width:70px;
}
#nav li.back {
width:130px;
margin:-18px 0 0;
}
#nav li.basepage {
width:130px;
height:90px;
}
#nav li.basepage a {
width: 100px;
height:100px;
}
#nav li.back a {
width:142px;
}
#nav li.back a:hover {
background: green url(http://www.thecreativesheep.ca/page_adjust/headerhover.jpg) -352px -162px;
}
#nav li a span {
position:absolute;
left:-99em;
top:-999em
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix: {
display:inline-block;
}
/* mac hide \\*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide */
</style>
<!--[if lte IE 7]>
<link href="iecss.css" rel="stylesheet" media="screen,projection" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" media="screen,projection" type="text/css">
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://www.thecreativesheep.ca/page_adjust/js/iehover.js"></script>
<![endif]-->
</head>
<body id="home">
<div id="wrap">
<div id="header">
<h1><span class="hide">WIP Creative Biology of animation</span></h1>
<div id="masterhome"><a href="#"></a></div>
<ul id="nav">
<li class="home"><a href="#"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About Me</span></a></li>
<li class="back"><a href="#"><span>Back(News news)</span></a></li>
<li class="basepage"><a href="#"><span>BasePage</span></a></li>
</ul>
<div id="searchbox">
<form id="searchform" method="get" action="#">
<fieldset>
<legend><span>Search</span></legend>
<div>
<input type="hidden" name="s" value="1" />
<label for="s">Search</label>
<input type="submit" name="submit" value="go" id="go" title="Search This Site" />
<input type="text" name="s" id="s" size="30" value="Search ..." />
</div>
</fieldset>
</form>
</div>
<div id="feedicon"></div>
</div>
<div id="maincol" class="clearfix">
<div class="subject_title">
<h1>Title</h1>
</div>
<div id="content">
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="subject_title"></div>
<div class="content-base"></div>
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="subject_title"></div>
<div class="content-base"></div>
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="subject_title"></div>
<div class="content-base"></div>
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="subject_title"></div>
<div class="content-base"></div>
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="content-base"></div>
</div>
<div id="sidebar">
<div class="bg_sidebar">
<p>Sidecolumn</p>
<p>Sidecolumn</p>
<p>Sidecolumn</p>
<p>Sidecolumn</p>
<p>Sidecolumn</p>
</div>
</div>
</div>
<div class="base"></div>
</div>
</body>
</html>
Why is the header broken again -we fixed that a few times already? It all seems not to match up with the rest of the page now either!
That is so cool, I know that with CSS are you are doing is styling tags but the science behind it is knowing what each tag does and with PHP that threw me off guard even more then the regular HTML tags do I have got it positioned but it’s still local, I’m going to try the final part of this page on my own And I’ll post when things go wonky.
The header I had fixed the graphical element but I don’t know why it’s looking like that, when I previewed it looked fine, I’m going to re-check over it again
That URL returns a 404 error.
It will be in that state for a little while.