By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,041 Members | 1,858 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,041 IT Pros & Developers. It's quick & easy.

Help Needed with Adding Image to Header

P: 1
I desperately need help. My understanding of CSS is non-existent. I have a store http://astore.amazon.com/texasheat-20 with Amazon.com. According to the information from Amazon.com "Write your own overriding CSS to customize your aStore." Their setup page is divided into two sections. On the right they show the existing CSS. On the left there is a box where you can add the new code. They have tabs for "Global", "Category Page", "Detail Page", "Search Results" etc. The existing code in the "Global" section is:

Expand|Select|Wrap|Line Numbers
  1. /* PAGE STYLE */
  2. body {
  3.       margin:24px;
  4.       padding:0px;
  5.       background:#000000;
  6.       color:#FFFFFF;
  7.       min-width:748px;
  8.       font-family:'Lucida Console', monospace;
  9.       font-size:9pt;
  10.       font-weight:500;
  11.       line-height:12pt;
  12.       text-decoration: none;    
  13. }
  14. table {
  15.       font-family:'Lucida Console', monospace;
  16.       font-size:9pt;
  17. }
  18. form {
  19.       margin:0px;
  20. }    
  21. a {
  22.       color: #FFFFFF; 
  23.       text-decoration: underline;
  24. }
  25. a img{ border:none;}
  26. hr {
  27.       border:0;
  28.       width:100%;
  29.       color:#880406;
  30.       background-color:#880406;
  31.       height:1px;
  32.       width:100%;
  33.       margin:6px 0px 12px 0px;
  34. }
  35. #wrap {
  36.       width:748px;
  37. }
  38. #rule {
  39.       height:1px;
  40.       background-color:#FFFFFF;
  41.       width:100%;
  42.       margin:6px 0px 12px 0px;
  43. }
  44. h2 {
  45.       font-size:16px;
  46.       font-weight:bold;
  47.       margin:0px;
  48.       padding:0px;
  49. }
  50. h3 {
  51.       font-size:14px;
  52.       font-weight:bold;
  53.       margin:0px;
  54.       padding:0px;
  55. }
  56.  
  57. /* MAIN PAGE AREA */    
  58. #mainwrap {
  59.       float:left;
  60. }
  61. #main {
  62.       width:530px;
  63.       margin-bottom:19px;
  64.       overflow:hidden;
  65. }
  66. div#header {
  67.       background:#880406;
  68.       padding:6px 24px 4px;
  69.       margin:0;
  70.       vertical-align:middle;
  71. }
  72. a#mainheadertitle {
  73.       padding:0px;
  74.       font-family:'Georgia', serif;
  75.       font-size:15pt;
  76.       font-weight:normal;
  77.       line-height:28pt;
  78.       color:#FFFFFF; 
  79.       margin:0px;
  80.       text-align:left;
  81.       vertical-align:middle;
  82.       text-decoration:none;
  83. }
  84. a#mainheadertitle:hover {
  85.       text-decoration:underline;
  86. }
  87. td#mainheaderlogo {
  88.       padding:5px;
  89. }
  90. img#mainlogo {
  91.       padding-right:5px;
  92. }
  93. div#mainsubheader {
  94.       background:#303030;
  95.       padding:10px 24px;
  96.       vertical-align:middle;
  97. }
  98. div#contentsubheader {
  99.       width:482px;
  100.       overflow:hidden;
  101. }
  102. div#subheaderlinks {
  103.       float:right;
  104.       text-align:right;
  105. }
  106. div#subheadertitle {
  107.       font-size:12pt;
  108.       font-weight:bold;
  109. }
  110. div#contenterror {
  111.       background:#333333;
  112.       padding:14px 24px;      
  113. }
  114. span.currentpage {
  115.       font-weight:bold;
  116. }
  117.  
  118. span.error {
  119.       font-weight:bold;
  120. }
  121.  
  122. /* SIDEBAR */
  123. #sidebar {
  124.       float:right;
  125.       width:200px;
  126.       overflow:hidden;
  127. }
  128. #sidebar ul {
  129.       margin-bottom:0;
  130. }
  131. #sidebar h3, #sidebar p {
  132.       padding:0 10px;
  133. }
  134.  
  135. /* GENERAL SIDEBAR WIDGET STYLES */
  136. ul#widget,ul.widget li.widget {
  137.       margin:0;
  138.       padding:0;
  139.       list-style:none;
  140. }
  141. li.widget {
  142.       float:left;
  143.       width:200px;
  144.       margin-bottom:19px;
  145. }
  146. ul#widget div {
  147.       background:#333333;
  148. }
  149. ul#widget h3 {
  150.       font-family:'Lucida Console', monospace;
  151.       font-size: 10pt;
  152.       font-weight: bold;
  153.       color:#FFFFFF;
  154.       margin:0px;
  155.       padding:6px 15px 4px;
  156.       text-align:left;
  157.       background:#880406;
  158. }
  159. ul#widget p {
  160.       font-family:'Lucida Console', monospace;
  161.       font-size: 9pt;
  162.       font-weight: normal;
  163.       color:#FFFFFF;
  164.       margin:0px;
  165.       padding: 10px 15px 20px;
  166. }
  167.  
  168. /* SEARCHBROWSE WIDGET */
  169. div#searchbrowse {
  170.       padding:14px;
  171. }
  172. div#searchbrowse div.indent {
  173.       padding: 5px 0px 5px 15px;
  174. }
  175. select.searchwidget {
  176.       width:173px;
  177.       margin-bottom:6px;
  178. }
  179. input#searchwidgetkeywords {
  180.       width:134px;
  181. }
  182. span#SearchAtAmazon {
  183.       font-size: 8pt;
  184. }
  185. div#browsetitle {
  186.       font-weight:bold;
  187.       padding-bottom:7px;
  188. }
  189. span.selectedcategory {
  190.       font-weight:bold;
  191. }
  192.  
  193. /* LISTMANIA WIDGET */
  194. div.listwidget {
  195.       padding-bottom:16px;
  196. }
  197. ul.listmania {
  198.       margin:0px;
  199.       padding:0px;
  200.       list-style:none;
  201. }
  202. ul.listmania li {
  203.       margin:0px;
  204.       padding:5px;
  205.       padding-left:10px;
  206.       list-style:none;
  207.       text-align:center;
  208. }
  209. ul.listmania li.clsOdd,li.listimages {
  210.       background-color:#353535;
  211. }
  212. ul.listmania li.clsEven {
  213.       background-color:#333333;
  214. }
  215.  
  216. img.listimage {
  217.     display:block;
  218.     margin-left:auto;
  219.     margin-right:auto;
  220. }
  221.  
  222. /* PRODUCTS WIDGETS */
  223. div.productwidget {
  224.       padding:0px;
  225.       padding-bottom:16px;
  226. }
  227. div.productwidget .price {
  228.       font-weight:bold;
  229. }
  230. table.sidebarproducts {
  231.       font-family:'Lucida Console', monospace;
  232.       font-size:9pt; 
  233.       width:200px;
  234. }
  235. table.sidebarproducts td {
  236.       padding:5px;
  237. }
  238. table.sidebarproducts td.image {
  239.       vertical-align:top;
  240.       width:75px;
  241. }
  242. table.sidebarproducts td.text {
  243.       vertical-align:middle;
  244.       width:115px;
  245. }
  246. table.sidebarproducts span.listtitle {
  247.       font-weight:bold;
  248. }
  249. div.privacylink {
  250.       padding: 2px 5px;
  251.       font-size:7pt;
  252.       text-align:center;
  253. }
  254.  
  255. /* FOOTER */
  256. div#footer {
  257.       width:530px;
  258.       margin-bottom:28px;
  259.       color:#880406;
  260.       border-top:1px solid #880406; 
  261. }
  262. div#footer p {
  263.       padding:5px;
  264.       margin:0;
  265. }
  266. div#leftfoot {
  267.       float:left;
  268.       width:430px;
  269. }
  270. div#rightfoot {
  271.       float:right;
  272.       width:100px;
  273.       text-align:right;
  274. }
  275.  
  276. /*Associate Provided CSS*/
  277. #wrap {
  278.       margin: 0px auto;
  279.       padding-top: 187px;
  280.       background: url(http://TexasHeat.US/wordpress/wp-content/themes/Texas-Heat/images/header.jpg) no-repeat;
  281. }
  282.  
  283. body {
  284.       text-align:center;
  285. }

I've added the following:

Expand|Select|Wrap|Line Numbers
  1. #wrap {
  2.       margin: 0px auto;
  3.       padding-top: 187px;
  4.       background: url(http://TexasHeat.US/wordpress/wp-content/themes/Texas-Heat/images/header.jpg) no-repeat;
  5. }
  6.  
  7. body {
  8.       text-align:center;
  9. }
This added the image as I wanted but there are problems I can't resolve. When I set width:748px; the lower portion of the page is perfect, but my image is cropped. If I set width:959px; (the width of the image) the image is perfect but the text is now spread out across the page. My ultimate goal is to have the image (which is obviously wider than the text) centered above the text and spanning it on the left and the right. The "text-align:center;" also centers the text on the "Detail Page" which tells me I'm probably using an incorrect procedure to senter the page or I'm omitting something.

Thanks in advance for your time and attention!

Steve
Aug 11 '07 #1
Share this Question
Share on Google+
1 Reply


P: 2
Hello,

I believe this will fix Your Problem [ Be sure to change (header.gif) to your image )


ADD THIS TO CSS



<h1 id="album">My photo album</h1>
#album {
width: 300px; height: 75px;
background-image: url(header.gif);
background-repeat: no-repeat;
}



ADD THIS TO HTML WHERE YOU WANT THE HEADER


<h1 id="album"><span></span>My photo album</h1>




lzellner
Aug 14 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.