[Pro] Full width graphics and Centred Text?

I am trying to create an effect where the background image in the header stretches across the Browser window, which i can do, however the header has two graphical elements, a background image and the Icon (logo) image. See test url. The issue i am having is that the title of the web site is not centred, and the Icon image has moved too far to the left when you view in a wide screen.

At the bottom of the page i have created a duplicate of the header, however there is only one graphic in this element as I have combined the two graphic images together, this solution solves the problem of the centred text, however throws up two new issues.
Firstly, as the image is tiled horizontally to fill the browser window the icon is duplicated to the right when you open up the screen width
And finally, there effect when you view on tablets and smart phones is not that pleasing as the Icon and the text and now overlapping.

So, any suggestions on how i can keep the title text centred in the browser window and also keep the relationship of the icon image closer to the Title text.

Thank You

John

http://www.reenoserve.com/ghyc/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sure. I just went through this in another thread, you can see a demo document (Freeway 5.5, because that’s what the OP there needed) that does this trick. Tl;dr: insert a fixed- (or percentage-) width HTML box within your 100% width element, and anchor your elements to it or within it. Then you will have a visible “page” that will center within the full-width graphic.

Walter

http://www.freewaytalk.net/thread/view/154335#m_154432

On Oct 17, 2014, at 6:08 AM, ejw email@hidden wrote:

I am trying to create an effect where the background image in the header stretches across the Browser window, which i can do, however the header has two graphical elements, a background image and the Icon (logo) image. See test url. The issue i am having is that the title of the web site is not centred, and the Icon image has moved too far to the left when you view in a wide screen.

At the bottom of the page i have created a duplicate of the header, however there is only one graphic in this element as I have combined the two graphic images together, this solution solves the problem of the centred text, however throws up two new issues.
Firstly, as the image is tiled horizontally to fill the browser window the icon is duplicated to the right when you open up the screen width
And finally, there effect when you view on tablets and smart phones is not that pleasing as the Icon and the text and now overlapping.

So, any suggestions on how i can keep the title text centred in the browser window and also keep the relationship of the icon image closer to the Title text.

Thank You

John

reenoserve.com - reenoserve Resources and Information.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

Thanks, that is a very intense thread , sorry did not understand what you meant by Tl;dr: in your response to my question?

I will work on your resolution, but i must admit at this time i am not sure how to anchor elements to each other but will work on it.

Thank You

John


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s net slang for “Too long, don’t read” or “Too long, didn’t read”.

The essence of how to anchor one element to another is to select the “base” element, so its corner handles appear, then click on a drawing tool and draw another object entirely within the bounds of the base element. The two will be locked together, and when one moves, the other will.

Walter

On Oct 18, 2014, at 6:00 PM, ejw email@hidden wrote:

Walter,

Thanks, that is a very intense thread , sorry did not understand what you meant by Tl;dr: in your response to my question?

I will work on your resolution, but i must admit at this time i am not sure how to anchor elements to each other but will work on it.

Thank You

John


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

Your suggestions helped me work out what i needed to do, as i am using Backdraft i went back to the Template and started to reformat my headers etc… i am getting there . . . progress is being made.

Thx to You and Caleb for your continued help

John


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options