Need Help Modifying CSS to Add Header

I desperately need help. My understanding of CSS is non-existent. I have a store http://astore.amazon.com/texasheat-20 with Amazon.com and would like to add a banner to the top of the pages. 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.

My objective is to add an image (header.jpg 959 x 187) to top of all the pages.

On top of this new background/image, I'd like to be able to add the store name "Texas Heat" with a marketing slogan directly below it.

The existing CSS for "Global" is:

===================================


/* PAGE STYLE */
body {
margin:24px;
padding:0px;
background:#000000;
color:#FFFFFF;
min-width:748px;
font-family:'Lucida Console', monospace;
font-size:9pt;
font-weight:500;
line-height:12pt;
text-decoration: none;
}
table {
font-family:'Lucida Console', monospace;
font-size:9pt;
}
form {
margin:0px;
}
a {
color: #FFFFFF;
text-decoration: underline;
}
a img{ border:none;}
hr {
border:0;
width:100%;
color:#880406;
background-color:#880406;
height:1px;
width:100%;
margin:6px 0px 12px 0px;
}
#wrap {
width:748px;
}
#rule {
height:1px;
background-color:#FFFFFF;
width:100%;
margin:6px 0px 12px 0px;
}
h2 {
font-size:16px;
font-weight:bold;
margin:0px;
padding:0px;
}
h3 {
font-size:14px;
font-weight:bold;
margin:0px;
padding:0px;
}

/* MAIN PAGE AREA */
#mainwrap {
float:left;
}
#main {
width:530px;
margin-bottom:19px;
overflow:hidden;
}
div#header {
background:#880406;
padding:6px 24px 4px;
margin:0;
vertical-align:middle;
}
a#mainheadertitle {
padding:0px;
font-family:'Georgia', serif;
font-size:15pt;
font-weight:normal;
line-height:28pt;
color:#FFFFFF;
margin:0px;
text-align:left;
vertical-align:middle;
text-decoration:none;
}
a#mainheadertitle:hover {
text-decoration:underline;
}
td#mainheaderlogo {
padding:5px;
}
img#mainlogo {
padding-right:5px;
}
div#mainsubheader {
background:#303030;
padding:10px 24px;
vertical-align:middle;
}
div#contentsubheader {
width:482px;
overflow:hidden;
}
div#subheaderlinks {
float:right;
text-align:right;
}
div#subheadertitle {
font-size:12pt;
font-weight:bold;
}
div#contenterror {
background:#333333;
padding:14px 24px;
}
span.currentpage {
font-weight:bold;
}

span.error {
font-weight:bold;
}

/* SIDEBAR */
#sidebar {
float:right;
width:200px;
overflow:hidden;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px;
}

/* GENERAL SIDEBAR WIDGET STYLES */
ul#widget,ul.widget li.widget {
margin:0;
padding:0;
list-style:none;
}
li.widget {
float:left;
width:200px;
margin-bottom:19px;
}
ul#widget div {
background:#333333;
}
ul#widget h3 {
font-family:'Lucida Console', monospace;
font-size: 10pt;
font-weight: bold;
color:#FFFFFF;
margin:0px;
padding:6px 15px 4px;
text-align:left;
background:#880406;
}
ul#widget p {
font-family:'Lucida Console', monospace;
font-size: 9pt;
font-weight: normal;
color:#FFFFFF;
margin:0px;
padding: 10px 15px 20px;
}

/* SEARCHBROWSE WIDGET */
div#searchbrowse {
padding:14px;
}
div#searchbrowse div.indent {
padding: 5px 0px 5px 15px;
}
select.searchwidget {
width:173px;
margin-bottom:6px;
}
input#searchwidgetkeywords {
width:134px;
}
span#SearchAtAmazon {
font-size: 8pt;
}
div#browsetitle {
font-weight:bold;
padding-bottom:7px;
}
span.selectedcategory {
font-weight:bold;
}

/* LISTMANIA WIDGET */
div.listwidget {
padding-bottom:16px;
}
ul.listmania {
margin:0px;
padding:0px;
list-style:none;
}
ul.listmania li {
margin:0px;
padding:5px;
padding-left:10px;
list-style:none;
text-align:center;
}
ul.listmania li.clsOdd,li.listimages {
background-color:#353535;
}
ul.listmania li.clsEven {
background-color:#333333;
}

img.listimage {
display:block;
margin-left:auto;
margin-right:auto;
}

/* PRODUCTS WIDGETS */
div.productwidget {
padding:0px;
padding-bottom:16px;
}
div.productwidget .price {
font-weight:bold;
}
table.sidebarproducts {
font-family:'Lucida Console', monospace;
font-size:9pt;
width:200px;
}
table.sidebarproducts td {
padding:5px;
}
table.sidebarproducts td.image {
vertical-align:top;
width:75px;
}
table.sidebarproducts td.text {
vertical-align:middle;
width:115px;
}
table.sidebarproducts span.listtitle {
font-weight:bold;
}
div.privacylink {
padding: 2px 5px;
font-size:7pt;
text-align:center;
}

/* FOOTER */
div#footer {
width:530px;
margin-bottom:28px;
color:#880406;
border-top:1px solid #880406;
}
div#footer p {
padding:5px;
margin:0;
}
div#leftfoot {
float:left;
width:430px;
}
div#rightfoot {
float:right;
width:100px;
text-align:right;
}

/*Associate Provided CSS*/
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #000;
color: #ccc;

#sidebar {
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

===================================

I have read everything I can find concerning CSS and banners but everything I've found assumes that I have at least a basic understanding of CSS. Unfortunately I don't have a clue. I am however confidant that given a starting point, I can easily adjust the positioning of the store name and marketing slogan to position them where I want them using the appropriate fonts.

I apologize for my ignorance. And I will definitely appreciate any guidance that is offered. Thanks in advance for your time and attention!

Steve

My objective is to add an image (header.jpg 959 x 187) to top of all the pages.

On top of this new background/image, I'd like to be able to add the store name "Texas Heat" with a marketing slogan directly below it.


Hi Steve,

Well, adding an image isn’t that hard but to add text (i.e. plain text, not part of the image) you’d need to change the HTML as well, not just the CSS.

Anyway, I don’t know where exactly you want that image but I’d say for now do the following:
Look for the rule that reads…

#wrap {
width:748px;
}

and add this:


#wrap {
width:748px;
padding-top: 187px;
background: url(path/to/image.jpg) no-repeat;
}

or, if you can’t change CSS, just add CSS then write a new rule like the above but without the width line.
You need to upload your image somewhere and reference it with the correct path to show up.

As I said, to add text you’d need to change the HTML as well. I din’t know if you can do that. If not then why not just add the text to the image (like, make it a part of the image)?

Hope that helps.

This will work! I've added the code you sent. Until I can get this portion of the project working properly I'm just using the existing image. I'm really happy that after you gave me the code, I can understand how it works and how it can be changed. This is encouraging! Once I get it perfected, I'll create the new one with the text. I had to change the width to 959 to get the image to display correctly. Now that the image is positioned as it should be I need to make a couple of additional modification.

First I'd like to change the layout for the page so that it is centered. Currently it is aligned to the left.

Then I'd like to be able to change the arrangement for the columns that make up the rest of the page excluding the new image we've added. Before I changed the width to 956 the two columns were separated by a small black border. After I changed the width the distance between the columns has increased and they are apparently using the full width of 956. Is it possible to get them centered with a small border similar to the way they were before I added the image?

You can see how the page looks at http://astore.amazon.com/texasheat-20/105-1256669-6970038

Once again, I apologize for my ignorance. I really appreciate your help with learning how to edit CSS. I have ordered a couple of books that I hope will help me learn how to do this on my own.

Thanks again!

Steve

First I'd like to change the layout for the page so that it is centered. Currently it is aligned to the left.

Change #wrap to look like this:#wrap {
margin: 0px auto;
width:748px;
}


This has the effect of applying a 0px margin to the top and bottom, and applying an equal margin for the left and right automatically based on the user's browser window size.

Some old browsers need more help - you may need to add body {
margin:24px;
padding:0px;
background:#000000;
color:#FFFFFF;
min-width:748px;
font-family:'Lucida Console', monospace;
font-size:9pt;
font-weight:500;
line-height:12pt;
text-decoration: none;
text-align:center;
} in the body style to trick IE6 into centering the content, then add #wrap {
margin: 0px auto;
width:748px;
text-align:left;
} to the #wrap style to bring your text back to where it ought to be. Try it first without this trick.

Then I'd like to be able to change the arrangement for the columns that make up the rest of the page excluding the new image we've added. Before I changed the width to 956 the two columns were separated by a small black border. After I changed the width the distance between the columns has increased and they are apparently using the full width of 956. Is it possible to get them centered with a small border similar to the way they were before I added the image?

Your columns each have a specific width assigned to them:
#sidebar {
float:right;
width:200px;
overflow:hidden;
}

and
#main {
width:530px;
margin-bottom:19px;
overflow:hidden;
}

Try adjusting those widths to fill in the pixels you added. Perhaps you add it all to the #main style in order to keep your sidebar widgets in harmony with your #sidebar wrapper.

Change #wrap to look like this:#wrap {
margin: 0px auto;
width:748px;
}


This has the effect of applying a 0px margin to the top and bottom, and applying an equal margin for the left and right automatically based on the user's browser window size.

Some old browsers need more help - you may need to add body {
margin:24px;
padding:0px;
background:#000000;
color:#FFFFFF;
min-width:748px;
font-family:'Lucida Console', monospace;
font-size:9pt;
font-weight:500;
line-height:12pt;
text-decoration: none;
text-align:center;
} in the body style to trick IE6 into centering the content, then add #wrap {
margin: 0px auto;
width:748px;
text-align:left;
} to the #wrap style to bring your text back to where it ought to be. Try it first without this trick.

This is not the trick to get IE 6 to center a page, but IE 5. IE 6 will play along just fine if the doctype is correct, i.e. with a URL.

The #wrap style brought the text back to where it should be and centered it. It looks exactly as I had wanted it. The new image however is still a problem. When I set width:748px; the lower portion of the page is perfect, but my image is cropped. If I set width:996px; 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. I'm trying to match my WordPress blog.

A secondary problem that I'm seeing is that the original Amazon.com CSS had a small margin at the top of the page. The image has it's own margin built into it, so the margin at the top of the page should probably be set to 0. I've tried several changes which seemed perfectly logical to me, but none of them worked. Just shows how little I know about all of this.

Well... it turns out that I was a bit premature with my report yesterday. Today I have been trying to resolve the problems reported in my last reply and I discovered that the "text-align:center;" also centers the text on the "Detail Page". I' still unable to resolve the problems in the previous reply.