Blog top banner separately from rest

How to display a 728X90 banner on top of the entire blog.

[drandakis]

Hello all, I want to display a banner (728X90) on top of my Wordpress blog, but whenever I print it, it is contained within the blog's background, and the header appears broken.

The question is, how can I display the banner in its own style (backround etc) and then have the blog's styesheet appear as normal below. It is obvious that I am not fluent in css :-)

Maybe I could have some example css code for this small piece.

Thanks in advance all!

[Preeminent]

Is this a self hosted blog or is it a Wordpress hosted blog? I would be of some assistance I think, if this is hosted on your own.

[drandakis]

It's self hosted. Not in Wordpress. I have ftp access and all that stuff

Thanks

[Preeminent]

Oh, ok good, well go into your admin area and if you can, copy and paste your css code from of your blog template. I think that will be a good starting point. At first, I was thinking you just wanted to replace your header image, but I now see what you are saying. If I can't help you, at least you will have the code pasted here and hopefully someone can chime in.

[Marcia]

That's dependent on the browser settings, whether or not it's been set to print backgrounds. Depending on the browser (and the printer set-up), the default is not to print a background. It can be manually changed in the print menu, but not all users will know that.

[drandakis]

OK if you mean to copa and paste the code here, here it is:

/*=== Setup ===*/
*{
border: 0;
margin: 0;
padding: 0;
}
body{
background: #ebe9e1 url(images/bgr.jpg) repeat-x top;
color: #555555;
font: 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
}
a{
color: #e8a02c;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
input,select,textarea{
border: #cacaca 1px solid;
font-size: 12px;
padding: 5px;
}
select{
padding: 0;
}
li{
list-style: none;
}

/*=== Layout ===*/

#top{
clear: both;
height: 23px;
margin: 0 auto;
padding: 7px 0 0 0;
font-size:11px;
}

/*========= TOP NAVIGATION =========*/
/*=== Top Menu ===*/
#topmenu{
position:relative;
height: 33px;
margin-bottom:20px;
}
#topmenu li{
border-left: 1px solid #dedbd1;
float: left;
line-height: 33px;
}

/*============== HEADER ===================*/
#header{
height: 109px;
}
#header .spacer{
color: #a0a09b;
float: right;
font-size: 11px;
padding: 37px 0px 0 0;
text-align: right;
}
#header .spacer p{
clear: both;
}
/*- Logo -*/
#header h1{
margin-top:15px;
background: url(images/nylon-header.png) no-repeat;
float: left;
text-indent: -9999px
}
#header h1 a{
display: block;
height: 80px;
width: 520px;
}
#header h1 a:hover{
text-decoration: none;
}
......excess code trimmed

[edited by: SuzyUK at 9:14 am (utc) on Sep. 1, 2008]
[edit reason] trimmed large code drop, please see forum charter [/edit]

[Marcia]

All that's needed is the header code, not the whole thing; and since the "logo" is a background graphic, what was posted above still applies. A background image won't print unless the user's browser is specifically set to print backgrounds.

It's a browser issue, and incidentally, it's the same thing with any regular static HTML site.