Page 1 of 1
[SOLVED] Positioning Problem with Tab containing GBC
Posted: Wed Aug 07, 2013 5:46 pm
by CapereSpiritum
Hi
I've almost fininshed a template design.
Here
My CSS is pretty good.
I've just added a tab to display external links.
It fixes to extreme right or left of browser window only.
I'm trying to apply {position: relative;} and fix it to the right side of <div id="content">
Am I trying in vane and fighting against the JQuery ?
Suggestions appreciated
Re: Positioning Problem with Tab containing GBC
Posted: Wed Aug 07, 2013 10:37 pm
by Dr.CSS
You may want to explain what you mean by "a tab to display external links", I see some social networking links then some for NHS, BBC, etc...
Re: Positioning Problem with Tab containing GBC
Posted: Thu Aug 08, 2013 7:19 am
by velden
Don't see what you mean.
But if you want to position something absolute right or left in div#content then
Code: Select all
div#content {position:relative;}
div#tab {position:absolute;left:0;}
OR
div#content {position:relative;}
div#tab {position:absolute;right:0;}
should do.
Re: Positioning Problem with Tab containing GBC
Posted: Thu Aug 08, 2013 11:42 am
by CapereSpiritum
Hi Doc
There's a blue tab that, when clicked, opens a 'drawer' displaying social links.
It's the tab (only) that I want to display to the right edge of the website rather than the right edge of the screen.
Re: Positioning Problem with Tab containing GBC
Posted: Thu Aug 08, 2013 11:47 am
by CapereSpiritum
Got it. Although I think by cheating... I hope it's ok across browsers...
Used Velden's
div#content {position:relative;}
div#tab {position:absolute;right:0;}
Couldn't get overflow:hidden to work when the tab was closed, so...
Added a div called tabcover and used this CSS to cover the right side of the tab drawer
Code: Select all
div#tabcover {width: 120px; height: 300px; position:absolute; right: -120px; top: 160px; background: #fff; z-index: 100}
It all works.
Have I got away with it?
Re: Positioning Problem with Tab containing GBC
Posted: Sat Sep 28, 2013 11:40 pm
by Rolf
[solved] ??