Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

HTML5/CSS Problems


  • Please log in to reply
4 replies to this topic

#1 BLM73

BLM73

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:08:27 PM

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


BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:06:27 PM

Posted 07 December 2011 - 05:22 PM

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

#3 BLM73

BLM73
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:08:27 PM

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

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:06:27 PM

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.

#5 BLM73

BLM73
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:08:27 PM

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.

Edited by BLM73, 07 December 2011 - 10:08 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users