944,142 Members | Top Members by Rank

Ad:
Oct 21st, 2009
0

Background Image for header_inner help!

Expand Post »
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

XHTML Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>3 Column Rounded Corners - from the "Stylin' with CSS" Stylib library</title>
  6. <!--the layoout and text stylesheets-->
  7. <link href="../../lib/css_styles/layouts/3_col_rounded.css" media="all" rel="stylesheet" />
  8. <link href="../../lib/css_styles/text/text_n_colors.css" media="all" rel="stylesheet" />
  9. <script type="text/javascript" src="../../lib/nifty_corners/javascript/niftycube.js"></script>
  10.  
  11. <script type="text/javascript">
  12. window.onload=function(){
  13. Nifty('div#header','transparent medium'); // medium rounded corners w/transparency for gradient background image
  14. Nifty('div#nav,div#content,div#promo','medium same-height'); //medium rounded corners, same height cols
  15. Nifty('div#main_wrapper,div#footer','medium'); //medium rounded corners
  16. AddCss ("../../lib/nifty_corners/css/niftyCorners.css"); // location of Nifty CSS file relative to this page
  17. }
  18. </script>
  19.  
  20. </head>
  21.  
  22. <body class="mocha">
  23. <div id="main_wrapper">
  24. <div id="header">
  25. <div id="header_inner">
  26. background-image: url (../../lib/css_styles/layouts/carlile_bay3.jpg);
  27. <h1>First Bolans Reunion 2011</h1><!-- end header_nav -->
  28. </div><!-- end header_inner -->
  29. </div>
  30. <!-- end header -->
  31.  
  32. <div id="nav">
  33. <div id="nav_inner">
  34. <ul>
  35. <li><a href="#">RSVP</a></li>
  36. <li><a href="#">Flyer</a></li>
  37. <li><a href="#">Program</a></li>
  38. <li><a href="#">Contact Us</a></li>
  39. <li><a href="#">Discussion</a></li>
  40. <li><a href="#">Home</a></li>
  41. </ul>
  42. </div><!-- end nav_inner -->
  43. </div><!-- end nav -->
  44.  
  45. <div id="content">
  46. <div id="content_inner">
  47. <h2>About Bolans First Reunion</h2>
  48. <p><strong>The Bolans Community Development Association (BCDA) is planning a village reunion for 2011.</strong>
  49. The reunion will mark Bolans ??? birthday. There will be educational, cultural and a variety of other activities.
  50. We would like to invite villlagers and their relatives at home and abroad to meet and select one or more representative(s)--or point
  51. of contact(s) (POC(s)). The POCs will provide advice and coordinate activities with members of the BCDA. The Bolans
  52. Reunion Committee (BRC) consists of BCDA organizers and the POCs.</p>
  53. <h3>The Bolans Community Development Association</h3>
  54. <p>The BCDA is a Bolans based community organization. It has been involved in a number of community outreach
  55. activities, such as acquiring computers and books. These resources have benefited both Bolans Primary School students
  56. and the wider community.</p>
  57. <h3>Thoughts and Ideas from Facebook's Bolans Reunion Committee</h3>
  58. <p>Here are some thoughts from Facebook group, Bolans Reunion Committee:</p>
  59. <p><em>"What about doing something along the lines of health and education. We can have a day when people come out and
  60. get their blood pressure and sugar checked. Also we can have someone give talk on health related issues, substance
  61. abuse, STDs etc and another person on the importance of education. Too many young people are sitting on the block...
  62. time for them to do something meaningful with their lives."</em></p>
  63. <p align="right"> <strong>--Lauralee Riley, British Virgin Islands</strong></p>
  64. <p><em>"Lauralee's ideas could be like a health and education fair."</em></p>
  65. <p align="right"> <strong>--Jarusha Turner Jacobs, New York</strong></p>
  66. <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
  67. 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
  68. please don't hesitate to let me know."</em></p>
  69. <p align="right"> <strong>--Cordover Browne, Massachusetts, USA</p>
  70. </div>
  71. </div>
  72.  
  73. <div id="promo">
  74. <div id="promo_inner">
  75. <cite>If you would like to place an ad with us or donate to the reunion, please do not hesistate to contact us.</cite>
  76. </div><!-- end nav_inner -->
  77. </div><!-- end nav -->
  78. <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 -->
  79. <div id="footer">
  80. <div id="footer_inner">
  81. <p>&copy; 2009 - The Bolans Community Development Association</p>
  82. </div>
  83. </div>
  84.  
  85. </div>
  86. <!--end main wrapper-->
  87.  
  88. </body>
  89. </html>



.CSS


CSS Syntax (Toggle Plain Text)
  1. /* THREE COLUMN LAYOUT */
  2. /* 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. */
  3.  
  4. /*padd the */
  5. * {margin:0 padding:0;}
  6. body {
  7. text-align:center; /* IE6 needs this to center the layout in the browser window */
  8. }
  9. #main_wrapper {
  10. width:840px; /* widths of columns will scale proportionately as this width is changed */
  11. margin-left:auto; /* centers max'd layout in browser */
  12. margin-right:auto; /* centers max'd layout in browser */
  13. text-align:left; /* prevents page inheriting IE6 centering hack on body */
  14. padding:10px 0;
  15. margin-top:10px;
  16. }
  17. #header {
  18. margin: 0 10px;
  19.  
  20. }
  21. #nav {
  22. width:130px;
  23. margin:10px 10px 10px 10px;
  24. float:left;
  25. display:inline; /* fixes IE6 margin doubling bug */
  26. }
  27. #content {
  28. width:550px;
  29. margin:10px 10px 10px 0px;
  30. float:left;
  31. }
  32. #promo {
  33. width:120px;
  34. margin:10px 0 10px 0;
  35. float:left;
  36. }
  37. #footer {
  38. margin:0 10px;
  39. clear:both;
  40. }
  41. #header_inner, #content_inner, #promo_inner
  42. {
  43. overflow:hidden; /* prevents oversize elements from breaking the layout */
  44. }
  45. #header_inner {
  46. padding:1em 2em;
  47. width: 494 px;
  48. height: 119 px;
  49. background: url(../../lib/css_styles/layouts/carlile_bay3.jpg);
  50. }
  51. #nav_inner {
  52. padding:1em .5em;
  53. }
  54. #content_inner {
  55. padding:0em 1em 1em 1.5em;
  56. }
  57. #promo_inner {
  58. padding:1em .5em;
  59. }
  60. #footer_inner {
  61. padding:.5em 1em;
  62. text-align:center;
  63. }
Attached Files
File Type: doc Webpage.doc (130.0 KB, 15 views)
Similar Threads
Reputation Points: 8
Solved Threads: 0
Posting Pro in Training
NinjaLink is offline Offline
416 posts
since Mar 2008
Oct 21st, 2009
0
Re: Background Image for header_inner help!
does anyone know?
Reputation Points: 8
Solved Threads: 0
Posting Pro in Training
NinjaLink is offline Offline
416 posts
since Mar 2008
Oct 21st, 2009
0
Re: Background Image for header_inner help!
Click to Expand / Collapse  Quote originally posted by NinjaLink ...
does anyone know?
It would help if you posted a URL.
Reputation Points: 25
Solved Threads: 23
Junior Poster
cfajohnson is offline Offline
193 posts
since Dec 2008
Oct 23rd, 2009
0
Re: Background Image for header_inner help!
Not sure, try fixing this first. Removing the space between the numbers and px

HTML and CSS Syntax (Toggle Plain Text)
  1. #header_inner {
  2. padding:1em 2em;
  3. width: 494 px; /* 494px */
  4. height: 119 px; /* 119px */
  5. background: url(../../lib/css_styles/layouts/carlile_bay3.jpg);
  6. }
Reputation Points: 10
Solved Threads: 0
Light Poster
Besherek is offline Offline
36 posts
since May 2008
Oct 23rd, 2009
0
Re: Background Image for header_inner help!
Yes, do as Besherek and check your background-image location. Or move your background-image and css in the same root. And try this:
HTML and CSS Syntax (Toggle Plain Text)
  1. background: url('background.jpg');
Reputation Points: 120
Solved Threads: 134
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: re: Website
Next Thread in HTML and CSS Forum Timeline: dissapearing blanks in textbox





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC