[SOLVED] Positioning Problem with Tab containing GBC

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
CapereSpiritum
Forum Members
Forum Members
Posts: 223
Joined: Wed Dec 28, 2011 12:11 pm

[SOLVED] Positioning Problem with Tab containing GBC

Post 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
Last edited by CapereSpiritum on Mon Sep 30, 2013 8:20 am, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Positioning Problem with Tab containing GBC

Post 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...
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Positioning Problem with Tab containing GBC

Post 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.
CapereSpiritum
Forum Members
Forum Members
Posts: 223
Joined: Wed Dec 28, 2011 12:11 pm

Re: Positioning Problem with Tab containing GBC

Post 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.
CapereSpiritum
Forum Members
Forum Members
Posts: 223
Joined: Wed Dec 28, 2011 12:11 pm

Re: Positioning Problem with Tab containing GBC

Post 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?
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Contact:

Re: Positioning Problem with Tab containing GBC

Post by Rolf »

[solved] ??
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
Post Reply

Return to “Layout and Design (CSS & HTML)”