• Locked
1 reply [Last post]
Thu, 2010-03-11 10:51
gwh
gwh's picture
User offline. Last seen 1 year 42 weeks ago. Offline
rank Regular
Regular
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

Hi everyone,

I have the following html and css on a page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled</title>
 
<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="outerWrapper">
  <div id="branding">
  <h1><a href="index.php">New Site</a></h1>
 
  <div id="enquiries">
    <h2>Enquiries &amp; Bookings</h2>
    <p>000 000 000</p>
  </div>
<p id="tagline">Tagline goes here</p>
  <div id="nav_main">
    <h3>Site areas </h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Amenities</a></li>
      <li><a href="#">Tarrifs</a></li>
      <li><a href="#">Local Attractions</a></li>
      <li><a href="#">Contact Us</a></li>
      <li id="last"><a href="#">Location Map</a></li>
      </ul>
  </div>
  </div>
 
  <div class="content_main">
    <ul>
      <li><h3>About</h3>
        <p>Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
      <p>Learn more…</p></li>
 
      <li><h3>Amenities</h3>
        <p>Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
      <p>Learn more…</p></li>
 
 
      <li><h3>Local Attractions</h3>
        <p>Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
      <p>Learn more…</p></li>
                </ul>
  </div>
  <div id="site_info">
    <p>© 2010, All Rights Reserved.  Privacy policy   |   Terms and conditions</p>
  </div>
</div>
</body>
</html>

  body {background-color: #fff;
  color: #333;
  font: 12px/1.3 Arial, Helvetica, sans-serif; 
  text-align: center;
}
 
 
#outerWrapper {
  background-color: #fff;
  margin: 0 auto;
  text-align: left;
  width: 860px;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
}
 
/*---------------------Branding---------------------*/
 
div#branding {
	position: relative;
	width: 822px;
	height: 470px;
	background: url(../images/banner_home.jpg) no-repeat left bottom;
	margin: 0 auto;
	overflow: auto;
}
 
div#branding h1 {
	width: 177px;
	height: 73px;
	background: url(../images/logo.gif) no-repeat top left;
}
 
div#branding h1 a {
	display: block;
	width: 177px;
	height: 73px;
	text-indent: -9999px;
	outline: none;
}
 
div#branding p#tagline {
	text-indent: -9999px;
}
 
div#branding div#enquiries {
	position: absolute;
	top: 0;
	right: 0;
	width: 178px;
	height: 28px;
}
 
/*div#branding h2 a {
	background: url(../img/button_brochure2.png) no-repeat;
	display: block;
	width: 178px;
	height: 28px;
	text-indent: -9999px;
	outline: none;
}
 
div#branding h2 a:hover  {
	background-position: 0 -29px;
	border-top: none;
}
*/
 
/*---------------------Main Navigation---------------------*/
 
div#nav_main {
position: absolute;
top: 101px;
right: 0;
width: 812px;
height: 37px;
background-color: #be1e2d;
padding-left: 10px;
}
 
div#nav_main h3 {
position: absolute;
top: -9999px;
}
 
/*div#nav_main ul {
height: 37px;
line-height: 37px;
background-color: #969;
}
*/
 
div#nav_main li {
display: inline;
width: auto;
height: 37px;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #fff;
font-weight: bold;
text-align: center;
background-color: #FF3;
}
 
 
div#nav_main a {
line-height: 20px;
font-weight: bold;
color: #fff;
text-decoration: none;
background-color: #0F0;
}
 
div#nav_main li.last {
border-right: 0;
}
 
div#nav_main a:hover {
border-top: 4px solid #EA2127;
padding-bottom: 2px;
}

div#branding is set to have a height of 470px and it has a background image. Even though div#branding h1 also has a background image and also div#enquiries is absolutely positioned, when I test all I can see is the image that's in the background of div#branding.

I wondered if someone could tell me how to fix this so the elements above the image in div#branding can be seen?

Appreciate any help.

Top
Tags:
Thu, 2010-03-11 13:06
#1
gwh
gwh's picture
User offline. Last seen 1 year 42 weeks ago. Offline
rank Regular
Regular
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

It seems that some other code

It seems that some other code was causing this issue but it's since been fixed, so this post is solved.

Thanks

Top
  • Locked