Hi Helen

From a quick look I would approach by calling the image as background image in the css, rather than an image directly in the content, then use media queries to call different images depending on screen size.

The media queries can also position the image to suit your requirement at a given screen size or device. If you then produce variations on the logo image [size] you can call the most suitable for a given screen size, so bit more flexibility and control.

I think I would also place within a container div wrapping all the site content to allow better relative placing of the logo for a given screen size whilst absolutely positioning the logo in that container.

For background css you may find this resource useful:
www.w3schools.com/cssref/css3_pr_background.asp


Anyway that is my thought of the day!

Hope you find a solution.
regards Ian

Hi Ian,

Oh, if only it could be a background image, but my client wants it on top of the menu bar and the banner image.

I have it now adjusting with media queries but for the large desktop I can't find a great solution.

I have the logo in an added module with a custom div and css. I also have one logo variation for smart phones.

But the length of the triangle is playing havoc with other modules like breadcrumbs and content. I have css and media queries adjusting that as well. But it changes depending on if there is a banner or not, if the main body has an article or is an extension, etc. more css.

So I was hoping there was an easier way.

(Spell check keeps changing css to cuss. LOL. Just how I feel!)

Thanks,
Helen

I think my post could have been clearer!

Background is not the background as in print design just a way of stacking images that can appear above other content in the document flow. It is the background of that container or layer only, if that container is above other elements the background image would cover what is below. Here are some more links to help explain better i hope.
css-tricks.com/stacking-order-of-multiple-backgrounds/
css-tricks.com/positioning-offset-background-images/
css-tricks.com/almanac/properties/b/background-image/

Positioning the logo is tricky to work well with every screen size. Seems your client wants an old fixed width design!

For media queries set up i use dreamweaver, old habits but works for me. No doubt there are better ways.

Regards Ian

Thanks again Ian.

Let us know if you need more help Helen.

Thanks

Hi,

I have made some changes thanks to Ian's links. But from other research I am keeping the logo in a module rather than using a background image and trying to make it a foreground image.

Added some space above the main nav bar to match the dated looking current site by using a clear pix in top1 module.

Added some space to the left of the content where pages are short, like the current dummy site map, by using a clear pix in sidebar1 module. This was necessary because even though the logo image is transparent on the right, I cannot click any links under it.

Also added some space below the main content where pages are short by using a clear pix in below module to force modules below maincol to be below the logo image. Same problem as above.

If you can suggest any other way to do this, please do.

I cannot get the logo to link to the home page because the whole image becomes a link, including the transparent area. I tried mapping the image but the mapping area is under the nav bar and the top1 modules.

Oh my, oh my. I got this bid because I was the only one who said I could match their current design.

Thanks,
Helen

If I can layer the logo over the top, header, mainnav, and perhaps breadcrumb, then put it under the maincol and everything below, that might work.

But that Breadcrumb is wonky looking moved over to the right like it is.

Hi,

I pretty much have it but I need one thing I can't figure out, well 2 actually.

On this link prettygoodhost.com/tlc/module-positions, the tabs do not respond correctly. @media (min-width 788px) and (max-width 1051px), the tabs stack but they overlap. I want them to stack like they do at 787px. I can't figure out what's going on.

And if anyone knows anything about why my mapping of the logo image link won't work, I'm all ears.

Thanks,
Helen

well, I got the logo mapping issue. Added a z-index.

I tell ya, this forum is magical. I post for help, then I figure it out on my own!

Thanks!!

Nice one

Cheers
Paul

Don't you love that.

I actually discovered it's a psychological syndrome - can't find the link now. But I get that all the time. Start asking a question then my brain / mind goes and fetches it. Well - not all of the time