Jump to content
Sign in to follow this  
italoprofeti

Floating sections

Recommended Posts

italoprofeti

Hi! In this blog, I'd like to have all sections (branding, main nav, main content, footer) "floating" on a bkg, i.e. like in this site. Platform Pro + Base is my playground. As you can see, I made it with footer, bur I cannot find an appropriate selector to change bkg = white, and to call for corner-radius=15px, and apply the margin. It should resemble this, but w/rounded corners. I have to designs, another one with Branding + Nav for pages in addition to the BrandNav for post pages as shown above, so I need to locate the appropriate selector for both.

Share this post


Link to post
Share on other sites
kastelic

Try this for starters:

#boxes, #maincontent, #primary-nav, #branding{
	background:white;
	margin-bottom:20px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	}

Just add to the comma seperated selectors any div which you need to do this for. Use Firebug for Firefox or the Chrome Inspector to find the divs that you need.

Share this post


Link to post
Share on other sites
italo

Thanx Jimmy! You reproduced 99% of my two page custom CSS with a few lines! NICE! Where can I read about webkit and moz? How can I mark this RESOLVED, and how can I give you my Karma?

Share this post


Link to post
Share on other sites
italo

So, just to share my tuppence of experience: The aim was to give the effect of "floating" sections - for example header, main content and footer - with a few pixel's transparent horizontal gutter in between where you can see the background. I went like this:

  • Platform Pro Settings & chose Design Control
  • Fixed-Width Design Framework (in Site Design Mode pop up menu)
  • Background Image (in Site Background Image)
  • Page Background Color transparent (in Basic Layout Colors)

Then I applied that brillian piece of Jimmy's progamming above!! :-)

Share this post


Link to post
Share on other sites
timlinson

To understand the reason for -webkit and -moz, look up stuff about "vendor-specific css3 properties." To give karma on your own thread, you should see a gray "Best Answer?" button you can click. I gave you both some karma.

Share this post


Link to post
Share on other sites
italo

Wow, thanks! :-) PS I thought it was an effect of 23h non-stop at the mac, but I just now verified: Firefox 4.0.1 does NOT show unresolved/resolved pop up menu, nor gray best answer btn on my MacBook Pro 1.8GHz. It shows the blue one, though! :-D

Share this post


Link to post
Share on other sites
italoprofeti

Now I resolve the thread and fire another thread with same topic, just numbered, so that I'll be able to give some more karma on rounded borders for pictures on those floating sections??¦

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  

×