Welcome to WebmasterWorld Guest from 54.166.179.165

Forum Moderators: not2easy

Message Too Old, No Replies

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)

New User

5+ Year Member

joined:Aug 30, 2008
posts: 3
votes: 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)

Junior Member

5+ Year Member

joined:Dec 11, 2006
posts:57
votes: 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)

New User

5+ Year Member

joined:Aug 30, 2008
posts: 3
votes: 0


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

Thanks

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

Junior Member

5+ Year Member

joined:Dec 11, 2006
posts:57
votes: 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 Sept 1, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 29, 2000
posts:12095
votes: 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 Sept 1, 2008 (gmt 0)

New User

5+ Year Member

joined:Aug 30, 2008
posts: 3
votes: 0


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]

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

Senior Member

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 29, 2000
posts:12095
votes: 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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members