Jump to content
Sign in to follow this  
maxquinn

Semi Content Areas- Full Transparant Page Canvas

Recommended Posts

maxquinn    0
maxquinn

Hi,

 

I'm trying to create the design layed out in the image below:

http://www.broken-culture.co.uk/DesignTest.jpg

 

As you can see, I need main content areas to be semi transparant (which is fine), but then I need the spaces between them to be fully transparant.

 

What I've got so far is here: www.thirdside.co.uk/site/

 

I'm fairly confident with Platform Pro and can usually do most things, but I can't for the life of me work out how to define these sections separately in CSS. Is it possible?

 

I've seen people mention building the boxes into the background, but then they either won't scroll with the content, or the background won't be fixed in place (full screen).

 

Thanks! Max.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

First things first please do not create duplicate topics, it only leads to confusion.

 

http://www.pagelines.com/forum/topic/23827-semi-content-areas-full-transparant-page-canvas/

 

The duplicate topic has been locked.

 

To make areas of your site separated but have a transparent background, will require quite a lot of custom CSS, I have given you an example below.

 

 

Now usually I would say to use the .content class for Branding but you have made some changes to the padding so when using the .content for branding it doesn't look quite right.

 

Branding:

#branding .texture {
background: rgba(600, 600, 600, 0.6);
}

Sidebar1 (on the left)

 

 

#sidebar1 {
background: rgba(600, 600, 600, 0.6);
}

 

 

 

SIdebar2 (on the right)

#sidebar2 {
background: rgba(600, 600, 600, 0.6);
}

So use these as examples for the other areas on your site. However, the menu and content area may be tricky due to your padding changes, you may also need to use margins on some areas.

 

Something like this would be much easier on PageLines Framework, have you not thought about upgrading ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
maxquinn    0
maxquinn

That's great, thanks Danny! I have thought about upgrading, but December's such a tight month I'm trying to wait untill new year when I have the funds.

 

Sorry about the duplicate topic too, completely unintentional I think it must have been lag in my internet somewhere.

 

As you can see it's well on it's way: http://www.thirdside.co.uk/site/

 

The only things I'm struggling with are:

 

1) Creating the space between the nav and the actual content area. I essentially need to move the whole page-main down 10px, but any CSS margins I apply to the top of page-main, maincontent etc etc seem to have no effect, and if I do it individually by sidebar, loop, sidebar then it doesn't actually create a gap but just increases the semi transparent area at the top of the sidebars, pushing their content down.

 

2) Is it possible to move the sidebars out left and right respectively so I can line it all up with the sides of the branding section? And likewise for the nav.

 

Thanks again!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there

 

Have you tried

 


#primary-nav {margin-bottom:20px;} 

You can move the sidebars out with negative margins.

 

Something like

 

 

#sidebar1 {margin-left:-50px;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
maxquinn    0
maxquinn

Perfect thanks, not sure why I didn't think of putting the spacing under the nav rather than above the content!

 

As for the sidebars, neg margins wouldn't work but I've resolved it by actually removing the backing from the header image and include it within it itself graphically.

 

Final results here:

http://www.thirdside.co.uk/site

 

Thanks again.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Look great, nice job!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×