Jump to content

[SOLVED] Two backgrounds (no errors)

ev5unleash

By ev5unleash
in HTML Help

 Share

Recommended Posts

ev5unleash Member

ev5unleash

Posted
Posted

Alright I followed a tutorial on how to have two backgrounds on a webpage at the same time. I got it to work on the contact page of (http://www.ev5unleash.com/indexnew.php) but I there is an error that I don't know how to fix. At the top of the page there is a little white spacing. (Direct link to the page with the error http://www.ev5unleash.com/indexnew.php?id=49fjdkfodijfldkji

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Honestly, it's only because browsers are designed to display html regardless of the errors in it that you are seeing anything at all. Clean up these errors:

 

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww1.ev5unleash.com%3A1212%2Findexnew.php%3Fid%3D49fjdkfodijfldkji

 

And it should solve your problem.

 

Your biggest problem right now is that you have a second head declared in the middle of your body, complete with new scripts and styles and everything! Your page structure should be like this:

 

<html>
   <head>
      // scripts and styles go here
   </head>
   <body>
      //content goes here
   </body>
</html>

 

Right now you have 

<html>
   <head>
     //some scripts and styles
   </head>
   <body>
      <head>
         // more scripts and styles
         // some content
         // more styles!
   </body>
</html>

 

You've gotta clean that code up. Get everything in the head that should be in the head (scripts actually don't have to be in the head, but until you figure out when they shouldn't be in the head, stick them in the head and you wont go wrong). Have only content in the body. Then if you are still having troubles, come back here.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Yes - clean up your code! I have no doubt that the problems you are having stems from what I wrote above. You can't have a head in the middle of your document.

 

To explain why this is happening - browsers are designed to show ANY HTML code. They will do the best they can to make sense of errors in code and show something. On one hand this is a strong point of HTML, because it means that even the rookiest of rookies can get in there and try out HTML. On the other hand it's a weakness, because it allows for code with error, leading to problems and frustrations like you have right now.

 

Because browsers will display any code, they have been designed to try to read through, and figure out what they can do with what they have. The result being that code with errors leads to unpredictable results - results like having a white bar at the top of your screen for no apparent reason.

 

The reason for your problems is your disjointed code. So to fix your problem, you need to fix your disjointed code. You probably don't even have to make it perfect, but at the very least you need to move all the head stuff into the head, and make sure you only have one head.

Link to comment
Share on other sites
ev5unleash Member

ev5unleash

Posted
  • Author
Posted

The reason that the CSS codes are not together is because when you go to the contact page it replaces HTML in the table with the contact HTML.

 

This is the contact code

<link href="/css.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
html {
background-image: url(/images/sidebarcolor1.png);
background-repeat: repeat-x;
background-position: center bottom;
background-attachment: fixed;
margin:0;
    padding:0;
}
-->
</style>
Contact information

 

I want it so that the purple background will show at the bottom without the problem with the top border. It's very hard for me to beleave that the white bar at the top of the page comes out of no where.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

You can still put that in the head, just put it in the head below your other CSS.

 

Now, it may be possible that you can put css in the body - I don't know, I've never done it and never heard of it, and I'm about 99% sure your code won't validate if you do so. And invalid code leads to unpredictability - which leads to things like unexplained white bars at the top of your page.

 

But if you do decide to go with the CSS in the body (which you really shouldn't), then at least get rid of that extra head tag in the body. That may 'solve' your problem.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Alright, your code looks much better. There are some errors in it, which you should honestly try to fix, but nothing too serious. The one error I would really recommend fixing is on line 65 where you have an open <p> tag, but didn't close it.

 

Now on to your problem. Your biggest problem here is that you are putting CSS in to your <html> tag. You shouldn't apply CSS to this tag. The reason being that all presentation should be limited to the body of the page, and the html tag encloses all of the page including the head.

 

The solution:

 

First, add a new div to your page. start it directly after the opening body tag, and close it directly before the closing body tag. It should encompass everything, just the same as the body tag does. Give this tag an id of 'container'. So your page will look like this:

 

<html>
   <head>
      // head stuff - css, title, scripts etc
   </head>
   <body>
      <div id="container">
         // all your body stuff
      </div>
   </body>
</html>

 

Next, you need to change css.css. Change this:

 

body {
background-image: url(images/sidebar.png);
background-repeat: repeat-x;
margin:0;
    padding:0;
background-position: top;
}
html {
background-image: url(images/sidebarcolor1.png);
background-repeat: repeat-x;
margin:0;
    padding:0;
background-position: bottom;
}

 

to this:

 

#container {
background-image: url(images/sidebar.png);
background-repeat: repeat-x;
margin:0;
    padding:0;
background-position: top;
}
body {
background-image: url(images/sidebarcolor1.png);
background-repeat: repeat-x;
margin:0;
    padding:0;
background-position: bottom;
}

 

This will solve your problem, and you can reuse this on every page. Just make sure every page has the container div surrounding the content of the page.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Only changing the CSS is only half the solution. You didn't add the container div which was the first thing I told you about in that post. The background image is set to that div, so if it doesn't exist, then neither does the background image.

 

And you still need to close that p tag.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

It's the way to do it if you don't want the white bar at the top of your screen.

 

Just edit the included files. Find where the opening body tag is being included, and add the opening div tag after it. Find where the closing body tag is, and add the closing div tag before it.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.