Adding 'Position fixed' div to Prosilver

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Anti-Spam Guide
User avatar
Volksdevil
Registered User
Posts: 2415
Joined: Sun Oct 03, 2010 2:03 pm
Location: Lancashire, UK
Name: Neil

Adding 'Position fixed' div to Prosilver

Post by Volksdevil »

I'm adding a DIV to the bottom of prosilver (Position:fixed) and trying to basically get it to act like the (#wrap) regards responsiveness and positioning (left and right).

I've managed to get it sorted in chrome, but as per usual IE11 is being a d*** head about it.

All is fine until going full screen, where the black DIV ends up to the far left, instead of inline with the #wrap.

See pics, can anybody help? Site is http://www.OpelManta.co.uk

Chrome left, IE11 right. All is well side by side, half screen.
Image

Chrome full screen.
Image

IE11 Full screen.
Image
My phpBB Extensions
Finally found great Website Hosting from :arrow: KUALO!
Do NOT use 123-reg.co.uk - Incapable of running phpBB!
:ugeek: TekNeil - Streamer on Twitch | My Volkswagen Corrado G60
User avatar
Rahber
Former Team Member
Posts: 2720
Joined: Tue Feb 12, 2008 3:39 pm
Location: Pakistan
Name: Rahber

Re: Adding 'Position fixed' div to Prosilver

Post by Rahber »

Well i don't really have a absolute fix. But if you add width: 1000px in css it will fixed it but will be odd when in tablet or mobile mode. So use a media query if the width is greather than 625px add a width:1000px style. Meanwhile i am still trying to figure this out.
User avatar
Volksdevil
Registered User
Posts: 2415
Joined: Sun Oct 03, 2010 2:03 pm
Location: Lancashire, UK
Name: Neil

Re: Adding 'Position fixed' div to Prosilver

Post by Volksdevil »

Thanks for your input...

I can't understand why IE does that, when I've pretty much copied the CSS from the (#wrap) which does of course work as it should.
My phpBB Extensions
Finally found great Website Hosting from :arrow: KUALO!
Do NOT use 123-reg.co.uk - Incapable of running phpBB!
:ugeek: TekNeil - Streamer on Twitch | My Volkswagen Corrado G60
User avatar
Volksdevil
Registered User
Posts: 2415
Joined: Sun Oct 03, 2010 2:03 pm
Location: Lancashire, UK
Name: Neil

Re: Adding 'Position fixed' div to Prosilver

Post by Volksdevil »

Meh...Damn Internet explorer. I've had to just revert to using 100% width on the div. I friggin hate that browser.
My phpBB Extensions
Finally found great Website Hosting from :arrow: KUALO!
Do NOT use 123-reg.co.uk - Incapable of running phpBB!
:ugeek: TekNeil - Streamer on Twitch | My Volkswagen Corrado G60
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian

Re: Adding 'Position fixed' div to Prosilver

Post by PlanetStyles.net »

Volksdevil wrote: Wed Jan 04, 2017 12:33 am Meh...Damn Internet explorer. I've had to just revert to using 100% width on the div. I friggin hate that browser.
Hey Neil :)

You can achieve this fairly easily if you commit to a fixed width.

Keep your existing code for #bottom-sticky, but change the width to 1000px (or whatever), then add: left: 50%; and margin-left: -500px;. The margin-left value here should be exactly half of your defined 'width' value (which is why it won't be possible with fluid widths).

Then just make sure you override that in a media query and reset the margins / widths to 100% width for responsive devices :)
User avatar
Volksdevil
Registered User
Posts: 2415
Joined: Sun Oct 03, 2010 2:03 pm
Location: Lancashire, UK
Name: Neil

Re: Adding 'Position fixed' div to Prosilver

Post by Volksdevil »

Cheers Christian. I did use nearly the same method but I wanted to stick with the 'min-width' and 'max-width' ideally just to keep the CSS as similar as possible to the #wrap for accuracy. It just wouldn't take though...IE needs the width explicitly defined as you suggest...

I may have another look. Kinda accepted that it looks 'ok'ish.
My phpBB Extensions
Finally found great Website Hosting from :arrow: KUALO!
Do NOT use 123-reg.co.uk - Incapable of running phpBB!
:ugeek: TekNeil - Streamer on Twitch | My Volkswagen Corrado G60
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian

Re: Adding 'Position fixed' div to Prosilver

Post by PlanetStyles.net »

Volksdevil wrote: Wed Jan 04, 2017 7:29 pm Cheers Christian. I did use nearly the same method but I wanted to stick with the 'min-width' and 'max-width' ideally just to keep the CSS as similar as possible to the #wrap for accuracy.
Interesting. Can I ask why?

Only reason I ask is that with the wrap widths set as they are, the wrap column is only fluid between 700px and 1080px . Below that and the responsive mobile breakpoint kicks in, above that and it's fixed width anyway.

I think the only devices that will hit that middle ground (between 700px and 1080px) are tablets, and even they'll be viewing in a viewport unable to drag the browser width.

A simpler approach would probably be to define a fixed width for wrap in every breakpoint :)
User avatar
Volksdevil
Registered User
Posts: 2415
Joined: Sun Oct 03, 2010 2:03 pm
Location: Lancashire, UK
Name: Neil

Re: Adding 'Position fixed' div to Prosilver

Post by Volksdevil »

Ah...no special reason mate, other than my slight OCD. :lol: I'll revisit this when I get time and try the responsive media queries.

Cheers.
My phpBB Extensions
Finally found great Website Hosting from :arrow: KUALO!
Do NOT use 123-reg.co.uk - Incapable of running phpBB!
:ugeek: TekNeil - Streamer on Twitch | My Volkswagen Corrado G60

Return to “[3.1.x] Styles Support & Discussion”