Page Expands but Logo doesn't...Resolution Issue?

[NattyCat]

My page looks lovely on my screen. It looks lovely on one of my friend's screens. It's laid out perfectly and looks how I want it to look.

However, on another friends screen, who must be using a different resolution, the width of the page has expanded to fit the 95% that I have specified (I wanted a thin space between the edge of the page and the edge of the monitor) but the logo doesn't. This is probably a good thing, because if the logo stretched, it would warp.

So the choice I have is to figure out a way to make the logo shrink or expand without warping, or to stop the page from expanding - which would result in massive blank areas on the left and right hand side of the screen.

Any ideas? Can provide links and sample images if needed.

Nat

[Sermonzone]

Suggest you post a url and read this thread - http://www.zen-cart.com/forum/showth...ht=liquid+logo

[kuroi]

Images cannot stretch, only repeat. You can achieve a stretched effect if part of your image can be repeated as many times a necessary to fill the viewers window (the link Sermonzone gives above is a good but rare example).

With almost affordable 30 inch flat screen monitors now appearing for macs and PCs that is becoming a longer and longer distance to stretch meaning that readability and whole designs break down very easily when using liquid designs and so many designers prefer to used fixed widths and use attractive but non-distractive designs to the left and right of a centered page to break up the acres of space that can arise.

[NattyCat]

thanks for this, I read the "liquid" thread and have absolutely no clue what it said - i'm afraid they lost me at hello.

Sorry, I am just not a coder, programmer, php guru or anything above an amoeba. I can make candles, and soap, and you should SEE my gorgeous range of bath bombs - but alas, i'm sure my craft skills are worth less than nothing when faced with the prospect of making my page fit nicely in zen cart.

Perhaps I should find out how wide my logo is and instead of making my page a percentage (currently 95%) I make it the same width as the logo and therefore, the page would not expand on a large screen. The gutters on the left and right would be larger but I suppose I'd have to live with it.

please don't laugh at my feeble efforts so far, but here's the link www.scentifique.co.uk

Kobra helped me out a lot to get me where I am so far, but I'm sure I'm now beginnng to gnaw on his very last nerve, so don't want to be a pain in the ######## for him yet again!

Natasha

[NattyCat]

Images cannot stretch, only repeat. You can achieve a stretched effect if part of your image can be repeated as many times a necessary to fill the viewers window (the link Sermonzone gives above is a good but rare example).

With almost affordable 30 inch flat screen monitors now appearing for macs and PCs that is becoming a longer and longer distance to stretch meaning that readability and whole designs break down very easily when using liquid designs and so many designers prefer to used fixed widths and use attractive but non-distractive designs to the left and right of a centered page to break up the acres of space that can arise.

I could put a little green line at each end of the text part of the logo - between the text and picture, and that could repeat over and over until it reached the right size...can you be that specific though to say that if the page gets bigger put this green line right here >> << and repeat it till the logo is the same width as the page?

blimey. sounds complicated.

[kuroi]

I could put a little green line at each end of the text part of the logo - between the text and picture, and that could repeat over and over until it reached the right size...can you be that specific though to say that if the page gets bigger put this green line right here >> << and repeat it till the logo is the same width as the page?

blimey. sounds complicated.

Ah self-deprication. Use of Blimey. I answer this in English. Firstly, don't apologise for what you've done so far. Even in development this is looking stylish.

Alas what needs to be done is a little more complicated than you were hoping for. It would need some changes to the header template to allow for three logo files. One to the left, one centered and one to the right, all against a repeated background that matches your logo colour). However in the overall scheme of things it's not difficult, so stay there and I'll be back in a jiffy with the files you need.

[Sermonzone]

Natasha,

Just an alert that I will officially be 'borrowing' that most excellent green.

Your site colors are some of the best I've seen for your products. Good job!.

[NattyCat]

you're welcome to borrow the green, it must be returned each evening though, with all fingerprints removed and no beer-scented breath please.

The exact code for the green is 6e,73,4b or 110,115,75

[kuroi]

I'll be back in a jiffy with the files you need.

Jiffy over. Here are the files >> scentifique.zip <<

You will need to put the header.php file in includes/languages/english/custom/ but check first that you don't already a file of that name in there. If so compare them so that you don't lose any changes in the original file. It's a small file so there isn't much to compare.

The tpl_header.php file goes into the includes/templates/custom/ directory

The three image files go into the includes/templates/custom/images/

You will also need to add the following styling to your stylesheet

#logoWrapper {
width:100%;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-position:center top}

This basically works by having a very long central image that is centred in, but constrained by the edges of, the logoWrapper div. It will degrade reasonably gracefully on very wide screens (>1564 pixels) or small ones (<926 pixels), and finally break when the browser window gets so narrow that the two outside images collide (I wouldn't worry too much about this). You can make it work on bigger windows by extending the width of the header_bg.jpg and on smaller ones by reducing the size of your text.

Over to you.

[NattyCat]

ooooooh guv'nor (but not the scary Lenny McLean type) I'm just burning something on the BBQ right now, but as soon as I've scraped the charred offerings off and fed them to the dog, I will have a go at this - your instructions seem pretty clear, but I'm sure I'll break it and cause some sort of electro-magnetic force field to implode/explode.

I'll be back.