HTML5/CSS Problems

HTML5/CSS Problems Strange Behavior and Likely Numerous Small Mistakes

#1 BLM73

New Member

Group: Members
Posts: 13
Joined: 04-August 09

Posted 07 December 2011 - 05:03 PM

Hi again Bleeping Computer.

I am having a strange problem with a Website I am building using HTML5/CSS. I have managed to make the Background Image fit any size Browser Window, as well as creating a Header and Footer that stay in their proper places regardless of the size of the Browser, but somewhere along the line I must have done something screwy such that any text I try to add now actually shows up behind the Background Image. Any help with this would be greatly appreciated. This is my first website so tips/tricks from those of you far more knowledgeable in these things are also welcome.

Website : http://www.logic-land.com

HTML

<!DOCTYPE html>
<html>
<head>
<title>Logic-Land - The Most Logical Place on the Web</title>
<style>
</style>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<div id="page-background">
<img src="http://www.logic-land.com/images/delphitext.png" width="100%" height="100%">
</div>
<div id="topnav">
<p style="text-align: center" font-style="arial">
<a href="http://www.logic-land.com/" style="text-decoration: none">Home</a>&nbsp; &nbsp;| &nbsp;
<a href="http://www.logic-land.com/forums/index.php" style="text-decoration: none">Forums</a> &nbsp; | &nbsp;
<a href="http://www.logic-land.com/contact.html" style="text-decoration: none">Contact</a>
</p>
</div>
<div id="bottomnav">
<p style="text-align: center"><a href="http://www.logic-land.com/symbols.html" style="text-decoration: none">The Symbols</a> | <a href="http://www.logic-land.com/" style="text-decoration: none">Primitive Rules</a> | <a href="http://www.logic-land.com/" style="text-decoration: none">Derived Rules</a>
<p style="text-align: center; font-size: 75%">The Logical Reference:<a href="http://www.iep.utm.edu/" target="_blank">Internet Encyclopedia of Philosophy</a>
</p>
</div>
</body>
</html>

CSS

p a:link {color: black}
p a:visited {color: black}
p a:hover {color: rgb(112,128,144)}
p {font-family: "Lucida Sans Unicode", "Lucida Grande", "Arial"}
p {font-size: 20px}


#bottomnav {position: absolute; bottom: 35px; left: 28%; right: 28%}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%}
#topnav {position: absolute; top: 15px; left: 28%; right: 28%}

#2 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 07 December 2011 - 05:22 PM

Looks just fine in ie and firefox. Which browser (and version) is giving you problems?

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 BLM73

New Member

Group: Members
Posts: 13
Joined: 04-August 09

Posted 07 December 2011 - 05:36 PM

Yeah, I checked it in a few different browsers and am pleased with it, the problem I'm having is that I can't seem to add anything to it at this point, any additional code I add shows up BEHIND the Background Image (i.e. you can see it only briefly by refreshing).

While there's nothing behind the image at the moment, I am assuming that there is some problem with the current HTML5/CSS that while allowing the <topnav>, and <bottomnav> divisions to appear in front of the image, anything additional I add to the HTML file at this point (an <article> or <table> for example) hides behind it.

#4 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 07 December 2011 - 06:40 PM

Could have sworn I just responded to this. Try setting the z-index on the background image to -1.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#5 BLM73

New Member

Group: Members
Posts: 13
Joined: 04-August 09

Posted 07 December 2011 - 10:08 PM

That did it, thank you very much! I was so proud of what I did get done, and then to find that it wasn't behaving as expected was really irritating. Guess I'll go and buy a more advanced HTML5/CSS3 book, since the one I read didn't mention anything about the z-index.

This post has been edited by BLM73: 07 December 2011 - 10:08 PM