homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Blog top banner separately from rest
How to display a 728X90 banner on top of the entire blog.

 2:51 pm on Aug 30, 2008 (gmt 0)

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!



 9:12 pm on Aug 31, 2008 (gmt 0)

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.


 9:44 pm on Aug 31, 2008 (gmt 0)

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



 4:06 am on Sep 1, 2008 (gmt 0)

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.


 5:39 am on Sep 1, 2008 (gmt 0)

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.


 7:20 am on Sep 1, 2008 (gmt 0)

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

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

/*=== Layout ===*/

clear: both;
height: 23px;
margin: 0 auto;
padding: 7px 0 0 0;

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

/*============== 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{
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]


 8:42 am on Sep 1, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved