Anchor not working

[Paul O'B]

There is white showing in the background I'm going to take a look at the image it could be because it was saved in JPEG/GIF that is causing it.

If you want it transparent then you will need to create a transparent png which means that there should be no background behind the image itself. It looks like you have a background behind the image. The shadows should be transparent with no colour behind until they are placed on the background of the page.

The base element is showing more or less ok so just do the same as you did there. I can't help you with slicing as that is your job.

It also looks like you still have the wrong path to the image e.g. url(/images.... Is that the correct path?

Alright, how do I get Style-ID:SideBar to have it placed behind the Style-ID:MainCol the entire image will be see but parts will fall behind it, and how come since it is a PNG-24 FireFox is not showing the transparency for that image ?

Well the transparency would be an option in your paint package. Which image are you talking about exactly?

I think I'd need to see the psd mock up again as I'm not sure what you want to accomplish here. If you want overlapping images then show behind other images then you either cut them out exactly as they should look and fix them exactly in place.

Or you make opaque images for everything and set the stacking contexts accordingly. Without a look at the end result it's hard to imagine what you want it to look like.

Not everything is possible and if it's possible it may not be feasible so you have to make sure what you want is workable and usable (I may copyright that sentence ) .

[SiberianHuskey]

If you want it transparent then you will need to create a transparent png which means that there should be no background behind the image itself. It looks like you have a background behind the image. The shadows should be transparent with no colour behind until they are placed on the background of the page.

The base element is showing more or less ok so just do the same as you did there. I can't help you with slicing as that is your job.

It also looks like you still have the wrong path to the image e.g. url(/images.... Is that the correct path?

I'm going to check the images and the paths again and do the changes that probably are needed.

Well the transparency would be an option in your paint package. Which image are you talking about exactly?

I think I'd need to see the psd mock up again as I'm not sure what you want to accomplish here. If you want overlapping images then show behind other images then you either cut them out exactly as they should look and fix them exactly in place.

Or you make opaque images for everything and set the stacking contexts accordingly. Without a look at the end result it's hard to imagine what you want it to look like.

Not everything is possible and if it's possible it may not be feasible so you have to make sure what you want is workable and usable (I may copyright that sentence ) .

The image I was talking about was the side image that has the blue squares as it's not transparent. The mock up image you will see, and I think instead of placing the image that has blue squares in the background as I mentioned I think that just cutting it as a specific point may do the job as well take a look at the original design and decide if I may be right

[SiberianHuskey]

I had forgotten as well the "title" box before getting to the side part, you will see on the updated page the black box for each content_box at the top.

[Paul O'B]

Hi,

I'm not sure what you want done with that subject_title box. You seemed to have placed it ok except that it needs a margin left to line it up.

If you want that bluish round image that is at the side to go under the main content then you will nee to apply it as a background image to #wrap instead. You will of course need to redo it as a transparent png because you have cut it with a white background.

You seem to have the correct images for your content box at last

[SiberianHuskey]

If you take a look at the way the page is when I try to add a font to the style:Subject_Title and some things shift or don't align no longer ?

Edit: Problem fixed code error. How do you make the text larger what is the best setting ?

Are you sure to apply the bluish round image to that style sheet works ? I've tried it locally and it's all over the place that is with no-repeat in place as well ?

[RyanReese]

Edit:

He fixed it.

Place the bluish round image in the page and we will tell you what went wrong .

You can either say percentage font sizes or em font sizes (which are the same thing, just different decimals ).

The font-size property can increase/decrease text size, e.g. font-size:1em;

[SiberianHuskey]

I have uploaded the image, how come it's not loading ?

[RyanReese]

Hi, you use background-image but then you mix in the background-repeat and background-position in there as well. background-image can't accept all those values and as a result it isn't used

#wrap {
	width:800px;
	margin:auto;
	text-align:left;
    background-image: url(images/bio_image.png) no-repeat 0 0;
}

Change it from "background-image" to "background" and see if that helps

[SiberianHuskey]

Worked, take a look where the image is.

[RyanReese]

The problem right now is that children backgrounds will always appear on top of the parents. That's just the way it is, which is logical if you think about it .

Since most of your children have background images set, making it nearly impossible to get the image in the right spot (I don't know where it is even supposed to go), I'd recommend removing the background image on #wrap and placing it on an empty absolutely positioned elmenet (placed to perfection)

[SiberianHuskey]

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 ?

[Paul O'B]

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.

[Victorinox]

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.

[Paul O'B]

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.

[Victorinox]

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.

[SiberianHuskey]

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 ?

[Victorinox]

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.

[SiberianHuskey]

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 ?

[Victorinox]

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.

[SiberianHuskey]

That is fine you can send it. They probably found a hole as I didn't update WP.

[SiberianHuskey]

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.

[RyanReese]

Give us an updated link and tell us what you want where and we will do our best

[SiberianHuskey]

Here I'm trying to position the form within the gray area with the search icon that you see.

[Paul O'B]

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>
        <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>

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&#37; 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!

[SiberianHuskey]

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