At the top of my site, I had a banner with a strip of pictures. I had it exactly the way I wanted. All I wanted to do today was the change the pictures, keeping the size, format, etc., exactly the same. I uploaded my pictures, made a collage, everything the same as last time. When I put the pictures in the template, they do not appear the same, and I've now spent the last two hours trying just to get them close to how it appeared before, but I'm really stuck. I'm trying to make the pictures a lot smaller, height-wise, but still retain the whole picture. Was fine before, but I don't understand why it's different now. The whole banner is just way too big, but if I reduce it, it chops the picture in half. Help! Help! Help!
This post was written by Sweetnicks
8 comments:
the image appears to be a big 960px square, but what displays is the upper-right piece... right?
don't you need to string them out in a single line so you have a horizontal rectangle that's more like 200x800?
I looked at your html code and the pertinent section is below:
/* headings
----------------------------------------------- */
/*this begins my main heading with SWEETNICKS and Nick's picture*/
#blog-header h1 {
background: #000 url(http://photos1.blogger.com/img/92/4091/1024/collage311.jpg);
collage311.jpg is large image whose dimensions are 960 pixels x 960 pixels. Are you trying to fit all 3 horizontal rows of the collage into your header, or just the top row?
Which leads to this question: When you say you're reducing the image, hoow are you doing it? By making the actual photo collage smaller in dimension, or by specifying the image height / width in your blog template?
I'm too much of a techno toddler to be able to offer any advise on fixing the problem, but I did want to wish you luck. (When I read these queries I am always grateful for those folks who know sooooooo much more than I do, which includes nearly every one of you.) I love your Sweetnicks blog header and the clever play on words with the title. Nick does look like a sweetie. Of course I teach fourth grade so I'm a real sucker for kids. Good luck.
Kalyn
Thanks for stepping up to help - I really appreciate it.
Last time I did this (and it worked successfully), it took the whole collage and made it into a strip from left to right, repeating pictures as necessary. Then, my padding was 55 0 0 24, and the height was 100. Everything looked and worked fine. This time, the only thing I was changing were the pictures I was using, because I wanted to update them. I thought that should be simple.
Ideally I would have liked on set of the pictures to appear like like time, but now I'd settle for just being able to see the top row, without it being quite so large.
I was trying to reduce the height/width dimension by specifying them in my template - don't know another way to do it, and it worked last time.
Kalyn - thanks for the compliment! I did manage to get a link for you up last night, before I got so frustrated I walked away from the computer.
OK, I uploaded the picture in flickr, where it will let me change the size of the photo and that worked a lot better.
One more question ... my sidebar has been dropping to the bottom for the past few days. It seems to be intermittent. Any way to fix it so it doesn't drop?
OK, I lied. Two more questions... is there a better colot for the SWEETNICKS part that will show up over the sepia, but still look good. I'm having a hard time finding a suitable replacement.
Two: How can I center the title from top to bottom?
I bought a Blogger book, but it has been MOST unhelpful.
There's a few problems with the structure of your html, which might help things behave a little better. The sidebar thing is a float issue, although I'm not sure why it's intermittent.
The first thing to fix is your h1 tag is not inside your blog-header div. Your style specifies that :
#blog-header h1 {
has a background of ... blah blah
that means that the blog-header, and any h1 tag inside will have the background of blah, blah etc. But the h1 is not inside it. And you've got 2 errant closing div tags that don't belong right after that. Once you fix this, things might break, and you'll need to fix it all again, but having correct syntax goes a long way to finding and correcting bugs.
As for centering the title vertically, once the div thing is fixed, you can add an ≤a≥ tag around the title like this:
≤h1≥≤a href="http:/sweetnicks.com"≥Sweetnicks≤/a≥ ≤/h1≥
and add some top padding in the style that says:
#blog-header h1 a
I know this all may not make sense, but I'm afraid explaining it in more detail will take more space (or time) than we have.
As for books, you'll have to step out of the beginner books if you're messing with this stuff. I'd recommend Eric Meyer on css and more Eric Meyer's on css if you intend to mess with this stuff. The first book could be considered for beginner CSS'ers, but will set you right on how css behaves. The second book will show you advanced tricks, but more importantly, tells you how to solve many of IE/windows problems. Page through these in a book store to see if they're right for you.
After that I'd highly recommend the The Zen of CSS Design book. Pretty and chockful of good stuff.
Post a Comment