By kcorkum on

I have been lurking for a couple of weeks and thanks to everyone for their comprehensive posts. I have managed to get this far without posting. But, this too shall pass!

Here goes:

www.k2chronicles.com is a travel blog site using the friendselectric theme. I have bypassed the default blue banner by creating a "logo" that is a banner image. I just realized that because this theme is dynamic, the image may be too large or too small depending on the browser window size.

Now obviously I can't stretch or shrink the image, without distorting it. Does anyone have any thoughts ? Maybe I could have have the image "float" in a coloured banner where the outer banner can then be manipulated without affecting the image.

Maybe if I'm stuck on the image (I kinda am) I should pick a static template.

If anyone has any great examples, it would be appreciated.

thanks
kevin

⋅ Categories: Drupal 4.6.x

Comments

murph’s picture

murph commented

...but i have been using the friendselectric and have made it fixed width by adding a div around the whole page with width=780. My reasoning was that i have fixed width tables in my content and so i needed to know what everyone was going to see at any screen resolution!

But there is probably a better solution... :)

kcorkum’s picture

kcorkum commented

Murph, although it is limiting it does sound like the trick that will at least allow me to move on to other apects of the site.

Point me to your site will you so I can browse your style.css to find out where you put the div. I'm new to the web side and slowing learning the code.

thanks again.

kevin

murph’s picture

murph commented

Yes it works, but of course is not ideal...there's load of code in there setting variable width stuff, so to put everything inside a fixed width div is a little bizarre! But i have had to do it...

#wrapper1 {
width: 800px;
background: #fff;

}

Put everything inside a div in your FE page template file:

<div id="wrapper1">


</div>

I made the wrapper background #fff and then set the page background to the light blue. I am also about to centre the page and edit the bottom left and right border images as they no longer look good!

sevo’s picture

sevo commented

Images can be scaled by giving them a width in percents and no height definition. As the scaling algorithms used in browsers are rather ugly, this will inevitably create visible artefacts - but no distortion.

As your header image is quite soft-edged, it stands up to that abuse reasonably well. Except for the bitmapped text you placed inside the image, scaling it would work out nicely, provided that you drop that text bitmap in favour of floating your title text as CSS styled HTML text above the image.

This is a widely applicable trick, by the way - by combining a somewhat blurred and softened background with the perfect edges of rendered text, you can usually deceive the viewers into perceiving the blurry background image as much more sharp than it is.

Sevo

kcorkum’s picture

kcorkum commented

Ah I see how to do it in the future. I will add the suggestion as one of the things to learn this year. Yes the text in the image is a bad idea, but damn I can't even push the site name to the right side of the page!! I knew when Mosaic came out in 95 I should have abandoned Netware and gone to the web!!!