Yeah, if anyone can solve the problem of my rubbish looking blog banner above than I would greatly appreciate it. It's been bugging me for ages. For some reason the image is a lot narrower than the blog. I know it's changing some of the html code somewhere but I'm afraid of buggering things up completely if I start fiddling around with things I know nothing about...
Thursday, 24 September 2009
Turn it off and turn it on again doesn't work
Yeah, if anyone can solve the problem of my rubbish looking blog banner above than I would greatly appreciate it. It's been bugging me for ages. For some reason the image is a lot narrower than the blog. I know it's changing some of the html code somewhere but I'm afraid of buggering things up completely if I start fiddling around with things I know nothing about...
Subscribe to:
Post Comments (Atom)
18 comments:
i had the same issue. my bodge was to make the boarders black as well, just as helpful as 'turning it off and back on again'!
As far as I can tell, the header inner with the banner image has a width of 640px, while the header wrapper (which gives the width to the main text column) itself is styled to have a width of 840px.
Kate - hopefully someone will come along with some idiot-proof advice we can both use!
Anonymous - thanks for trying to help. I can't find the 640px header inner/banner image value anywhere in the html code. I'm guessing if I could find that I could simply change it to 840px and the image would be as wide as the header wrapper?
Here is the code if it means something to anyone and they can tell me which bit to change!
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:840px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 590px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Well, 640px is the width of your image. You want to edit it in some image editing software and increase the width to 840px, then it should work.
Hello, I've just come across your blog while I was following links about lightweight gear.
As 'Anonymous' said, I think your problem is that your image isn't big enough. The code you posted was for your template, but further down the page, in the html code, there is a section like this:
div id='header-inner' style='background-image: url("http://lh3.ggpht.com/_KJLi-x_8Zns/SmQxdtKEdBI/AAAAAAAADAI/oVITees2DLA/DSC03365.JPG"); background-position: left; width: 640px; min-height: 207px;_height: 207px;background-repeat: no-repeat;
The code links to an image you have uploaded that is 640px wide. I tried changing the code to 840px, which made the title fill the width, but the image stayed the same. There may be a way of stretching the image, but I think the simplest solution would be to upload a new image which is 840px wide.
Don't know much about Blogger, but I'd suggest doing what you said - taking your current header pic, enlarging it to 840px wide, then using that instead.
Better still, move the lot over to WordPress and enjoy some flexibility :-)
This is only tenuously related, but if you're a Firefox user, the ColorZilla add-on can be useful for matching what you see to the code that generates it.
Keith & BG - thanks for your input, it makes a lot of sense. I will upload a bigger image later this evening and I'm sure that will sort it. Thank you.
Ok Joe.
@ Keith - I'm impressed by your painting blog - there is some seriously good stuff on there.
I'm intrigued as to why your walking blog is by invitation only.
If you are still getting prblem I would be happpy to load your template into my test blog and see if I can fiddle around with it to fit (no promises) If you go to Edit HTML and download a Full template.
I have changed my blog to look a bit less blogger like. Cheers Ben
Ben - thanks for your offer of help. I've managed to get the image bigger now but it's still a bit untidy around the border. I also have a problem with my post images being a wee bit wide for the post width. I'll be in touch when I get back on my own computer.
I see from your blog some Dorset related activities. Are you from The Shire?
The header pic looks a lot better.
For pics in posts, have a gander at http://www.techieblogger.com/2009/08/image-resizer-tool-php-css-script.html
Blog header looks good now. Yes I am from West Dorset, very near where BG was recently on his holidays!
BG - thanks for that techieblogger tip, I'll give that a go tomorrow
Ben - lovely part of the world. I'm Dorzet born and bred.
This information is also very helpful to me. Thanks Holdfast for asking the question.
Now with added width! Excellent!
BG - I cheated a bit! I switched to a wider Blogger template, switched the colours around and got rid of the borders, Kate-style ;-). It looks much neater I think but I gave up with the picture/title combo after spending an entire morning on my ageing IBM Thinkpad laptop trying to combine an image from my external hard-drive into Paint and then into Blogger. For some reason Picasa on my laptop won't find all the images on my hard-drive and I was drinking too much coffee which ended up with a lot of swearing and me going for a walk to calm down! I also can't add the font I downloaded off the internet to my Font folder but this I'm sure is user error. I'll have another go at it when I'm bored!
Post a Comment