Help With Banner

[chroniker]

I'm needing some help and I'm hoping someone here can provide it.

 

My site is not very aestheticly pleasing and I would like to add a graphic to the banner. Idealy I would like to replace the entire banner with a graphic. Failing that a smaller one off to the side will suffice.

 

Most of yesterday was spent trying to insert the pic and I learned alot about where it won't go.

 

After a successful up load and MovableType generating the html necessary to imbed the pic, I tried verious spots here on my index page -

 

<div id="container">

<div id="banner">

<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a>

 

</h1>

<h2><$MTBlogDescription$></h2>

 

</div>

 

I did get it to show up, but everything was messed up. And obviously it was only on my index page.

 

I also tried inserting it in my stylesheet here -

 

#banner-img {

display: xxxx;

}

 

and nothing at all showed up.

 

So, my question is, how do I manipulate the banner in MovableType?

[TweezerMan]

From what I can tell, you have two problems:

 

1) The background image file name has spaces in it. This prevents browsers such as Firefox from being able to load and display the image (although Internet Explorer does not appear to have this problem). I would suggest renaming your image file on the server from "Allens Ruminations 04.jpg" to "AllensRuminations04.jpg" (or even "Allens_Ruminations_04.jpg" if you want to preserve the spacing in the name).

 

2) The CSS you have for displaying the background is not correct. This is what I see in your stylesheet:

>#banner {
font-family: Comic Sans MS;
color: #FFFFFF;
background-color: #8F7363;
text-align: left;
padding: 15px;
border-bottom: 1px solid #242424;
height: 39px;
}

#banner-img {
display: <img alt="Allens Ruminations 04.jpg" src="http://www.demesneofallen.com/images/banner/Allens Ruminations 04.jpg" width="625" height="75" />;
}

 

To display your background image, your CSS should look something like this:

>#banner-img {
background: url("http://www.demesneofallen.com/images/banner/AllensRuminations04.jpg");
}

(using alternate file name for image as described in #1 above.)

 

The #banner-img style is not referenced anywhere in your web page, so putting the background there is not going to do anything. Just to get it displaying, move it to the #banner style:

>#banner {
font-family: Comic Sans MS;
color: #FFFFFF;
background-color: #8F7363;
text-align: left;
padding: 15px;
border-bottom: 1px solid #242424;
height: 39px;
background: url("http://www.demesneofallen.com/images/banner/AllensRuminations04.jpg");
}

#banner-img {
}

 

Making those 2 changes allowed me to see the background image in both Internet Explorer and Firefox browsers.

 

Hope this helps...

[chroniker]

Thanks, that works. Now my question is, is the banner too big?

[TweezerMan]

I think the banner looks nice on your site - I don't think that the physical dimensions are too large. In terms of bandwidth though, the image itself is about 50K - the image will definitely take some time to download for anyone viewing the site on a dial-up connection.

 

Side-note: I still cannot see your background image in Firefox, and I'm not really sure why. The CSS code itself appears to be valid, because when I was testing your site's code in Front Page, I uploaded a copy of your image to my web site and changed the background URL to point at it, and it displayed correctly in both Internet Explorer and Firefox.

 

The only thing I noticed that seemed odd about your site: When I first loaded the code for your web site into my local copy of Front Page and did a preview of the page, I was shown a login box, saying:

This operation requires author permission for www.demesneofallen.com:80.

 

Name and password are case sensitive.

...with a Name and Password box, and an OK and Cancel button.

 

It didn't matter if I clicked the OK or Cancel button (I always left the Name and Password boxes blank) - either way, the preview then displayed the copy of your web site.

 

Maybe it's nothing - I don't know. I'm just at a loss at the moment to explain why your background won't display in Firefox (although I wonder if it's connected).

[chroniker]

I run XP Pro SP1 and Firefox 1.01 on one box and XP Pro SP2 with Firefox 1.0 on another and have no problem with the banner coming up (along with IE 6.X on both boxs). However my son is still running 98SE with Firefox 0.8 and had to refresh to display the banner.

 

I don't run the XP firewall nor the MS anti-spyware pgm, but I am behind a Linksys router and am running Norton and ZoneAlarm Pro on both PC's.

 

Does anyone else have a problem with loading the banner?