Re: Fixed & Expanding Banner in XDP 10
I can't check this directly for IE8 but it should work and for IE8+ and other browsers:
Quote:
<div style="background-image:url('index_htm_files/banner.png');
background-repeat: no-repeat;
/*background-attachment: fixed;*/
background-size: cover;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-size: 100%;
background-position: center top;
padding-bottom: 50%;
/*margin: -5%;*/
"></div>
Acorn
Re: Fixed & Expanding Banner in XDP 10
Quote:
Originally Posted by
Acorn
Pete, yes I did use XWD11P but nothing in the design should prevent it working in earlier and bigger Xara products. It is possible the approach fails in IE8 simply because it is IE. I checked in all my (modern) browsers and things were clean.CanIUse identifies an issue for IE8 and
http://caniuse.com/#search=background-attachment, which affects 0.77% of all users.The approach to using a Name for the Header on a hidden Layer is robust and would work in your method.Acorn
Acorn, You seem to be missing one fundamental point with Xara; each time it releases a new version the underlying code structure changes to accommodate any new enhancements in webpage development. This means that CSS code injected into one version of webpage may not work when you open the Xara source file in another version. When I imported the FixedTab! version into XWDPX it showed code errors in the source html/css which I corrected. There was probably nothing wrong with your CSS coding, its just that the webpage code in each version of XWDPx is different.
The other point is that the member who requested the expanding banner only had XWDPX, that's why I used that in my development.
1 Attachment(s)
Re: Fixed & Expanding Banner in XDP 10
Quote:
Originally Posted by
penmore
Acorn, You seem to be missing one fundamental point with Xara; each time it releases a new version the underlying code structure changes to accommodate any new enhancements in webpage development. This means that CSS code injected into one version of webpage may not work when you open the Xara source file in another version. When I imported the FixedTab! version into XWDPX it showed code errors in the source html/css which I corrected. There was probably nothing wrong with your CSS coding, its just that the webpage code in each version of XWDPx is different.
The other point is that the member who requested the expanding banner only had XWDPX, that's why I used that in my development.
Ken, there is a difference in what Xara renders as HTML across versions. I do not dispute that. Where I disagree is in how Xara handles the design file created in a later version when it is opened in a earlier version.
The Warning Attachment 112354 is not an error as everything loads correctly.
While I presented the solution (from a later version), the actual detail in the file allows anyone to build up the Header in their own version of their Xara application. I also chose to use XWD11P as more users have this over XDPXn. What works in XWDnP will always work in XDPXn so there is no risk in doing this.
I just ran the file from XDPX10 and it worked fine (with its Warning), and with the separate browser issue for IE8, for which I offered a fix above.
What we have done is present two alternative approaches so the OP should be very happy. Both have the potential to exceed Xara's in-built v11 approach.
Acorn
Re: Fixed & Expanding Banner in XDP 10
Hi Acorn, I have used your example, but the mouse off layer scrolls over the top of the banner layer.
The page background layer is behind it.
The mouse pointer is also able to click on something, nothing loads, but is it picking up the popup layer which the rectangle is set to?
Re: Fixed & Expanding Banner in XDP 10
Quote:
Originally Posted by
Megg81
Hi Acorn, I have used your example, but the mouse off layer scrolls over the top of the banner layer.
The page background layer is behind it.
The mouse pointer is also able to click on something, nothing loads, but is it picking up the popup layer which the rectangle is set to?
Megg, what I have found is that the text with a background colour seems to float above the Header. Everything else is as expected.
The Banner Layer should not be published, it only holds objects that become the Header.
I don't have any click areas appearing in my browsers. What browser and version are you using?
Are you using my file or one you have modified?
Acorn
Re: Fixed & Expanding Banner in XDP 10
I created my own following your instructions. I disabled the popup layer and the banner still remains at the top but without the mouse pointer being able to click anything.
A second issue Im having is putting text links on the same layer to remain ontop of the banner. So the banner will be used as a background for the menu. However, when I place the text on the same banner layer it scrolls with the page. If i give it the name "banner" it then becomes 100% browser width, as per the code.
Is there a way to place text ontop of the horizontal bar which will form my menu bar and have the text become clickable text links and remain ontop without scrolling?
Thank you for your help with this.
Re: Fixed & Expanding Banner in XDP 10
Have done this with !FixedTab
Re: Fixed & Expanding Banner in XDP 10
Quote:
Originally Posted by
Megg81
Have done this with !FixedTab
Then that is the winning solution!
Thank you for trying to use my approach.
Acorn
Re: Fixed & Expanding Banner in XDP 10
Sorry no :( I still have an issue with it, as I cant use full width in !FixedTab so it's ok until you reach the full width image im using scrolling down and then the rectangle only covers the central part of the image. The mouse off text is scrolling over the top of the banner layer, even though the banner layer sits above the mouse off layer and the !FixedTab layer sits above them both.
Is there a way to prevent the mouseoff text scrolling over the banner layer and to go behind it?
The page background and pasteboard background scrolls behind banner, but not mouseoff
Re: Fixed & Expanding Banner in XDP 10
Quote:
Originally Posted by
Megg81
Sorry no :( I still have an issue with it, as I cant use full width in !FixedTab so it's ok until you reach the full width image im using scrolling down and then the rectangle only covers the central part of the image. The mouse off text is scrolling over the top of the banner layer, even though the banner layer sits above the mouse off layer and the !FixedTab layer sits above them both.
Is there a way to prevent the mouseoff text scrolling over the banner layer and to go behind it?
The page background and pasteboard background scrolls behind banner, but not mouseoff
Megg, it's a busy week at work so I may not manage to look at this immediately,
Acorn