HTML and CSS

Background Image for header_inner help!

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2008

Posts: 370

Reputation: NinjaLink is an unknown quantity at this point

Solved Threads: 0

NinjaLink

Offline

Posting Whiz

Background Image for header_inner help!

Oct 21st, 2009

In my header_inner, I am trying to display an image in the background, but whenever I try, it just shows the blank. Will someone please help me with this as I have been messing with this for hours. I posted a .doc to show how I want the image to be displayed. I appreciate it.

.HTML

 Help with Code Tags 
 XHTML Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 Column Rounded Corners - from the "Stylin' with CSS" Stylib library</title>
<!--the layoout and text stylesheets-->
<link href="../../lib/css_styles/layouts/3_col_rounded.css" media="all" rel="stylesheet" />
<link href="../../lib/css_styles/text/text_n_colors.css" media="all" rel="stylesheet" />
<script type="text/javascript"  src="../../lib/nifty_corners/javascript/niftycube.js"></script>
 
<script type="text/javascript">
window.onload=function(){
Nifty('div#header','transparent medium'); // medium rounded corners w/transparency for gradient background image
Nifty('div#nav,div#content,div#promo','medium same-height'); //medium rounded corners, same height cols
Nifty('div#main_wrapper,div#footer','medium');  //medium rounded corners
AddCss ("../../lib/nifty_corners/css/niftyCorners.css"); // location of Nifty CSS file relative to this page
}
</script>
 
</head>
 
<body class="mocha">
<div id="main_wrapper">
<div id="header">
	<div id="header_inner">
	background-image: url (../../lib/css_styles/layouts/carlile_bay3.jpg);
		<h1>First Bolans Reunion 2011</h1><!-- end header_nav -->
 	</div><!-- end header_inner -->
</div>
<!-- end header -->
 
<div id="nav">
	<div id="nav_inner">
		<ul>
			<li><a href="#">RSVP</a></li>
			<li><a href="#">Flyer</a></li>
			<li><a href="#">Program</a></li>
			<li><a href="#">Contact Us</a></li>
			<li><a href="#">Discussion</a></li>
			<li><a href="#">Home</a></li>
	  </ul>
	</div><!-- end nav_inner -->
</div><!-- end nav -->
 
<div id="content">
	<div id="content_inner">
	<h2>About Bolans First Reunion</h2>
<p><strong>The Bolans Community Development Association (BCDA) is planning a village reunion for 2011.</strong>
       The reunion will mark Bolans ??? birthday. There will be educational, cultural and a variety of other activities. 
       We would like to invite villlagers and their relatives at home and abroad to meet and select one or more representative(s)--or point
       of contact(s) (POC(s)). The POCs will provide advice and coordinate activities with members of the BCDA. The Bolans
       Reunion Committee (BRC) consists of BCDA organizers and the POCs.</p>
	<h3>The Bolans Community Development Association</h3>
	<p>The BCDA is a Bolans based community organization. It has been involved in a number of community outreach
      activities, such as acquiring computers and books. These resources have benefited both Bolans Primary School students
      and the wider community.</p>
	<h3>Thoughts and Ideas from Facebook's Bolans Reunion Committee</h3>
<p>Here are some thoughts from Facebook group, Bolans Reunion Committee:</p>
<p><em>"What about doing something along the lines of health and education. We can have a day when people come out and
         get their blood pressure and sugar checked. Also we can have someone give talk on health related issues, substance
         abuse, STDs etc and another person on the importance of education. Too many young people are sitting on the block...
         time for them to do something meaningful with their lives."</em></p>
<p align="right">      <strong>--Lauralee Riley, British Virgin Islands</strong></p>
<p><em>"Lauralee's ideas could be like a health and education fair."</em></p>
<p align="right">      <strong>--Jarusha Turner Jacobs, New York</strong></p>
<p><em>Excellent idea. We need to be mindful of giving people enough time to plan for this trip. if it's going to be in 2010
       then we need to really get on the ball with the planning. If there's anything that I can do to assist with the planning
       please don't hesitate to let me know."</em></p>
<p align="right">      <strong>--Cordover Browne, Massachusetts, USA</p>
	</div>
</div>
 
<div id="promo">
	<div id="promo_inner">
		<cite>If you would like to place an ad with us or donate to the reunion, please do not hesistate to contact us.</cite>
	</div><!-- end nav_inner -->
</div><!-- end nav -->
<div style="clear:both"></div>   <!-- to fix square-edge draw problem on rounded footer box in Safari - CSS-based clearing doesn't fix the problem in this case  -->	
<div id="footer">
	<div id="footer_inner">
		<p>&copy; 2009 - The Bolans Community Development Association</p>
	</div>
</div>
 
</div>
<!--end main wrapper-->
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 Column Rounded Corners - from the "Stylin' with CSS" Stylib library</title>
<!--the layoout and text stylesheets-->
<link href="../../lib/css_styles/layouts/3_col_rounded.css" media="all" rel="stylesheet" />
<link href="../../lib/css_styles/text/text_n_colors.css" media="all" rel="stylesheet" />
<script type="text/javascript"  src="../../lib/nifty_corners/javascript/niftycube.js"></script>

<script type="text/javascript">
window.onload=function(){
Nifty('div#header','transparent medium'); // medium rounded corners w/transparency for gradient background image
Nifty('div#nav,div#content,div#promo','medium same-height'); //medium rounded corners, same height cols
Nifty('div#main_wrapper,div#footer','medium');  //medium rounded corners
AddCss ("../../lib/nifty_corners/css/niftyCorners.css"); // location of Nifty CSS file relative to this page
}
</script>

</head>

<body class="mocha">
<div id="main_wrapper">
<div id="header">
	<div id="header_inner">
	background-image: url (../../lib/css_styles/layouts/carlile_bay3.jpg);
		<h1>First Bolans Reunion 2011</h1><!-- end header_nav -->
 	</div><!-- end header_inner -->
</div>
<!-- end header -->

<div id="nav">
	<div id="nav_inner">
		<ul>
			<li><a href="#">RSVP</a></li>
			<li><a href="#">Flyer</a></li>
			<li><a href="#">Program</a></li>
			<li><a href="#">Contact Us</a></li>
			<li><a href="#">Discussion</a></li>
			<li><a href="#">Home</a></li>
	  </ul>
	</div><!-- end nav_inner -->
</div><!-- end nav -->

<div id="content">
	<div id="content_inner">
	<h2>About Bolans First Reunion</h2>
<p><strong>The Bolans Community Development Association (BCDA) is planning a village reunion for 2011.</strong>
       The reunion will mark Bolans ??? birthday. There will be educational, cultural and a variety of other activities. 
       We would like to invite villlagers and their relatives at home and abroad to meet and select one or more representative(s)--or point
       of contact(s) (POC(s)). The POCs will provide advice and coordinate activities with members of the BCDA. The Bolans
       Reunion Committee (BRC) consists of BCDA organizers and the POCs.</p>
	<h3>The Bolans Community Development Association</h3>
	<p>The BCDA is a Bolans based community organization. It has been involved in a number of community outreach
      activities, such as acquiring computers and books. These resources have benefited both Bolans Primary School students
      and the wider community.</p>
	<h3>Thoughts and Ideas from Facebook's Bolans Reunion Committee</h3>
<p>Here are some thoughts from Facebook group, Bolans Reunion Committee:</p>
<p><em>"What about doing something along the lines of health and education. We can have a day when people come out and
         get their blood pressure and sugar checked. Also we can have someone give talk on health related issues, substance
         abuse, STDs etc and another person on the importance of education. Too many young people are sitting on the block...
         time for them to do something meaningful with their lives."</em></p>
<p align="right">      <strong>--Lauralee Riley, British Virgin Islands</strong></p>
<p><em>"Lauralee's ideas could be like a health and education fair."</em></p>
<p align="right">      <strong>--Jarusha Turner Jacobs, New York</strong></p>
<p><em>Excellent idea. We need to be mindful of giving people enough time to plan for this trip. if it's going to be in 2010
       then we need to really get on the ball with the planning. If there's anything that I can do to assist with the planning
       please don't hesitate to let me know."</em></p>
<p align="right">      <strong>--Cordover Browne, Massachusetts, USA</p>
	</div>
</div>

<div id="promo">
	<div id="promo_inner">
		<cite>If you would like to place an ad with us or donate to the reunion, please do not hesistate to contact us.</cite>
	</div><!-- end nav_inner -->
</div><!-- end nav -->
<div style="clear:both"></div>   <!-- to fix square-edge draw problem on rounded footer box in Safari - CSS-based clearing doesn't fix the problem in this case  -->	
<div id="footer">
	<div id="footer_inner">
		<p>&copy; 2009 - The Bolans Community Development Association</p>
	</div>
</div>

</div>
<!--end main wrapper-->

</body>
</html>

.CSS

 Help with Code Tags 
 CSS Syntax (Toggle Plain Text) 
/* THREE COLUMN LAYOUT */
/* you have to be careful with Nifty Corners - don't add height to the outer containers or the corners will no display correctly in Safari. */
 
/*padd the */
* {margin:0 padding:0;}
body {
	text-align:center;  /* IE6 needs this to center the layout in the browser window */
	}
#main_wrapper {
	width:840px; /* widths of columns will scale proportionately as this width is changed */
	margin-left:auto;  /* centers max'd layout in browser */
	margin-right:auto; /* centers max'd layout in browser */
	text-align:left; /* prevents page inheriting IE6 centering hack on body */
	padding:10px 0;
	margin-top:10px;
	}	
#header {
	margin: 0 10px;
 
	}
#nav {
	width:130px;
	margin:10px 10px 10px 10px;
	float:left;
	display:inline; /* fixes IE6 margin doubling bug */
	}
#content {
	width:550px;
	margin:10px 10px 10px 0px;
	float:left;
	}
#promo {
	width:120px;
	margin:10px 0 10px 0;
	float:left;
	}
#footer {
	margin:0 10px;
	clear:both;
	}
#header_inner, #content_inner, #promo_inner 
	{
	overflow:hidden; /* prevents oversize elements from breaking the layout */
	}
#header_inner {
	padding:1em 2em;
	width: 494 px;
	height: 119 px;
	background: url(../../lib/css_styles/layouts/carlile_bay3.jpg);
	}
#nav_inner {
	padding:1em .5em;
	}
#content_inner {
	padding:0em 1em 1em 1.5em;
	}
#promo_inner {
	padding:1em .5em;
	}
#footer_inner {
	padding:.5em 1em;
	text-align:center;
	}
/* THREE COLUMN LAYOUT */
/* you have to be careful with Nifty Corners - don't add height to the outer containers or the corners will no display correctly in Safari. */

/*padd the */
* {margin:0 padding:0;}
body {
	text-align:center;  /* IE6 needs this to center the layout in the browser window */
	}
#main_wrapper {
	width:840px; /* widths of columns will scale proportionately as this width is changed */
	margin-left:auto;  /* centers max'd layout in browser */
	margin-right:auto; /* centers max'd layout in browser */
	text-align:left; /* prevents page inheriting IE6 centering hack on body */
	padding:10px 0;
	margin-top:10px;
	}	
#header {
	margin: 0 10px;
	
	}
#nav {
	width:130px;
	margin:10px 10px 10px 10px;
	float:left;
	display:inline; /* fixes IE6 margin doubling bug */
	}
#content {
	width:550px;
	margin:10px 10px 10px 0px;
	float:left;
	}
#promo {
	width:120px;
	margin:10px 0 10px 0;
	float:left;
	}
#footer {
	margin:0 10px;
	clear:both;
	}
#header_inner, #content_inner, #promo_inner 
	{
	overflow:hidden; /* prevents oversize elements from breaking the layout */
	}
#header_inner {
	padding:1em 2em;
	width: 494 px;
	height: 119 px;
	background: url(../../lib/css_styles/layouts/carlile_bay3.jpg);
	}
#nav_inner {
	padding:1em .5em;
	}
#content_inner {
	padding:0em 1em 1em 1.5em;
	}
#promo_inner {
	padding:1em .5em;
	}
#footer_inner {
	padding:.5em 1em;
	text-align:center;
	}

Attached Files

Webpage.doc (130.0 KB, 2 views)

•

Join Date: Mar 2008

Posts: 370

Reputation: NinjaLink is an unknown quantity at this point

Solved Threads: 0

NinjaLink

Offline

Posting Whiz

Oct 21st, 2009

does anyone know?

•

Join Date: Dec 2008

Posts: 64

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 13

cfajohnson cfajohnson is offline

Offline

Junior Poster in Training

Oct 21st, 2009

•

Originally Posted by NinjaLink

does anyone know?

It would help if you posted a URL.

Chris F.A. Johnson
http://cfajohnson.com

•

Join Date: May 2008

Posts: 23

Reputation: Besherek is an unknown quantity at this point

Solved Threads: 0

Besherek

Offline

Newbie Poster

Oct 23rd, 2009

Not sure, try fixing this first. Removing the space between the numbers and px

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

#header_inner {
	padding:1em 2em;
	width: 494 px;  /* 494px */
	height: 119 px;  /* 119px */
	background: url(../../lib/css_styles/layouts/carlile_bay3.jpg);
	}

Besherek Design