PDA

View Full Version : Positioning images over background images in a defined position/page height



VirtualCrisis
Jul 27th, 2010, 12:13 AM
Hello.

Recently I've been trying to code a website of mine using a mix of CSS and HTML. I had a plan all set out, and I wanted the website to look like this:

http://img809.imageshack.us/img809/7185/planb.jpg

I'm having difficulties with the decoration images below, though. My plan was to make the glow a repeating background image using a div and set images on each side. It worked, but there's a huge problem - it stretched the height of the page more than I wanted it to.

http://veecee.net16.net/test.html <- Here's the link to the layout with the problem. Please check the source code of this page, I think it would help in knowing how the site is structured.

http://veecee.net16.net/ <- Here's the link to the layout without the decoration images. Note how the height is more or less how I want it to be - this uses a div tag with a blank image for a CSS repeat background code.

http://veecee.net16.net/templates/header_glow.css <- Here's where all the CSS tags are.

I assume this is because due to the center image (which is a background image in a table that's part of another blasted table), which made it bump down, but I still don't get why it would do that if it's a background image. I assume the table is what's causing it, but there has to be some way to make the images overlap so that the height can be more "fixed". What's wrong, and is there anything I can do about this to fix it somehow?

I really would like this to be monitor friendly too - I want the images to stay to the side, but so far that's proven a little more than difficult, and I don't even think the image to the right is aligned properly (aka: stays on the side no matter what happens to the browser or the monitor). My resolution is 1280x768.

nikee
Jul 27th, 2010, 01:18 AM
Alrighty, i got a solution.

Take these two images:


<img class="dec_left" src="images/dec_left.png" style="z-index: 1;">
<img align="right" src="images/dec_right.png" position:left;="" ,="" style="z-index: 1;">


and move them into the #footer div. Then add the following inline styling to them: (you may add that in your stylesheet later)



<img src="images/dec_left.png" style="z-index: 1; position: absolute; bottom: 0px; left: 0px;">
<img src="images/dec_right.png" style="z-index: 1; position: absolute; bottom: 0px; right: 0px;">
and then move them both into #footer. Set the following styling to the footer:

And now add position:relative to the #footer div.

Also, you can put the footer-glow effect directly in the #footer div as a background, instead of having another DIV in there.

VirtualCrisis
Jul 29th, 2010, 06:46 AM
Bingo, it worked! It took me awhile to figure out some things but it turned out the way I wanted it to. Thank you so much!

There's still a small problem, although it's as I said small and the layout's fine as it is. On IE, there appears to be a gap between the bottom of the browser and the footer glow. Is it possible to fix that with some type of code browser hack?

_Aerospace_Eng_
Jul 29th, 2010, 08:57 AM
Ugh...I suggest that you use the w3 validator. You have a lot of errors in your code. This jumped out at me

<div class="footer">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<img style="z-index:1;", "position:left;" src="images/dec_right.png" align="right" />
</body>
<div class="bottom_glow"><img style="z-index:1;" src="images/dec_left.png" class="dec_left" /></div>
</div>
That html tag and those body tags don't go there. And this is wrong

<img style="z-index:1;", "position:left;" src="images/dec_right.png" align="right" />
It should be

<img style="z-index:1;float:right;" src="images/dec_right.png" />
And there is no position:left. You will also need to add overflow:hidden; to your .footer CSS. This will work for your footer

<div class="footer">

<div class="bottom_glow"><img style="z-index:1;float:left;" src="images/dec_left.png" class="dec_left" /><img style="z-index:1;float:right;" src="images/dec_right.png" /></div>
</div>
but as I said there are tons of other simple errors, 48 errors (http://validator.w3.org/check?uri=http%3A%2F%2Fveecee.net16.net%2Ftest.html&charset=%28detect+automatically%29&doctype=Inline&group=0), to be exact. Don't worry about the <script at the bottom, your host puts that there. I also suggest finding a different host.

VirtualCrisis
Jul 29th, 2010, 09:34 AM
I forgot to mention that I have another test page:

http://veecee.net16.net/pancakes.html

^ this one being my most recent update with nikee's solution.

The host I'm using is pretty decent for a free domain and I've had no major problems with it, plus anything > Webs.com, my last hosting domain for a bunch of sites I've done before. It'll do for now. The URL isn't final either.

abduraooft
Jul 29th, 2010, 09:43 AM
I forgot to mention that I have another test page:

http://veecee.net16.net/pancakes.html

^ this one being my most recent update with nikee's solution.
So what? You need to rectify the errors before expecting any decent output, see http://validator.w3.org/check?uri=http://veecee.net16.net/pancakes.html

VirtualCrisis
Jul 29th, 2010, 10:10 AM
So what? You need to rectify the errors before expecting any decent output, see http://validator.w3.org/check?uri=http://veecee.net16.net/pancakes.html

Oh whoa, 50 errors. When I started this, I was very aware that a lot of this code would be buggy, cluttered, and unorganized based on my knowledge of coding (which is very, very little). But the code that jumped out at Aerospace the most has since been fixed, so from what it looks like (and what it looks like alone) I think that part's fine.

A lot of the code that jumps out on the validator makes me iffy about changing anything, especially a third-party Javascript code I used for the fade-over menu. The last two lines of errors are that of the host's. Despite this, this is an extremely helpful tool; I've heard things about the validator but I've never actually used it or seen it up until now, thank you for showing it to me. It will definitely come in handy for future coding and for anything I need to fix up here.

Rowsdower!
Jul 29th, 2010, 02:36 PM
A lot of your errors (looks like ten or more) are from capitalized or "camelcase" element tags and attributes (which is not allowed in XHTML). Switch those to all lowercase and that will take a big chunk of the problem away. Right now you're at 44 errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fveecee.net16.net%2Fpancakes.html&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1

You are also using the "bgcolor" attribute on your body tag, which is not allowed for XHTML. If you need to assign a background color you should be using CSS for this. And the body tag is also set up to self-close:

<body />

Get rid of that slash character there.

Get rid of the highlighted parts of this code:
<HTML>
<HEAD>
<TITLE>Test</TITLE> <!-- (* Another free JavaScript from JavaScript-FX.com *) -->
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" src="/javascript/JSFX_FadingRollovers.js">
</SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
JSFX.Rollover("home", "/images/navbar/home_navbar_on.png");
JSFX.Rollover("gallery", "/images/navbar/gallery_navbar_on.png");
JSFX.Rollover("about", "/images/navbar/about_navbar_on.png");
JSFX.Rollover("contact", "/images/navbar/contact_navbar_on.png");
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#252525">

...and this code...

<td background="/images/navbar/contact_navbar_off.png">
<a href="#trecool"
onMouseOver="JSFX.fadeIn('contact')"
onMouseOut="JSFX.fadeOut('contact')"><img name="contact"
src="/images/navbar/contact_navbar_off.png" class="imgFader" border="0"></a></td>
</tr>
</table>


</BODY>
</HTML>


</tr>
</table>

You can never have more than one set of <html>, <head>, or <body> tags in an HTML document so remove all of the extra ones.

Doing all of that brings you down to about 28 errors in my check.

VirtualCrisis
Jul 29th, 2010, 09:50 PM
Doing all of that brings you down to about 28 errors in my check.

35 for me after going through what you told me to fix. (http://veecee.net16.net/pancakes.html) About 20 of these errors appear to be from the third-party Javascript code I used (which is from an imported PHP file), and 2 of those errors are from the code the host automatically puts on my site for analytics at the very bottom.

I think I'm good, actually. The only thing I really need to do is fix an IE error that's causing a gap between the bottom glow and the browser, as well as get a CSS box, and those are two completely different things. Thank you all for everything!

_Aerospace_Eng_
Jul 30th, 2010, 01:29 AM
I told you what you needed to do to fix that gap. Pay attention to the advice we are giving. You need to make them display:block; or float them.

VirtualCrisis
Jul 30th, 2010, 09:40 AM
Oh whoops, I completely skimmed over that. I'm sorry if I sounded condescending when I'm the one who needs help. Thank you again, the float attribute worked and the gap is fixed.

There is just one more problem I have, and this came from when I edited the Javascript code for my navbar. I added test links in place of the anchors that were there originally, and this created a gap between the banner and the navbar. I'm not sure how or why.

http://veecee.net16.net/index.php

The navbar is an imported PHP table, that was placed within another table on the actual site layout. On its own, the navbar table looks like this:

http://veecee.net16.net/templates/menu.php

Would I have to use something similar to the float tag you just described?

_Aerospace_Eng_
Jul 30th, 2010, 09:44 AM
These lines at the end of this code seem to be causing the issue. Mainly the comment.

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>

<!-- (* Another free JavaScript from JavaScript-FX.com *) -->

Try it this way

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><!-- (* Another free JavaScript from JavaScript-FX.com *) -->

Also tables are NOT for page layout. Read the link in my sig.

VirtualCrisis
Jul 30th, 2010, 11:16 PM
Reading the link in your sig just makes me realize exactly how much of what I've learned in Info Processing classes has not been enough. I'm going to have to study W3C and a lot of CSS more if I want to continue coding often. At the moment, though, I'm pressed for time to get this done, so something needs to be released until I can rebuild it more to Web standards - my strength is in graphics, not web design.

I aligned the comment next to the td tag, but nothing happened. I even removed the comment to try and get it to work. Started by going from this:


<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>

<?php

include("templates/menu.php");

?>


To this:


<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><?php include("templates/menu.php");?>

But that didn't seem to fix it.

_Aerospace_Eng_
Jul 31st, 2010, 06:13 PM
There is some kind of weird character there. My guess would be a BOM. Open your file menu file in notepad and resave it. Then try that.