By tonks1501 on

Hello,

I have made a website, which has a rounded menu-area, a round header and circle-pictures in my right-side. The only problem is, that I don't know how to get the main-area rounded. I have a patterned background, so NiftyCube doesn't work.

Does anyone has an idea, how to realize this?

greets,
dani

⋅ Categories: Drupal 4.7.x

Comments

platform8-1’s picture

platform8-1 commented

I tend to use multiple divs with background images to attain this. The number required varies on your design, and whether you are creating a liquid layout or fixed width layout.

HTML:

<div id="main-wrapper-1">
  <div id="main-wrapper-2">
  
   Your page content here.
 
  </div>
</div>

CSS:


#main-wrapper-1 {
  background: transparent url("gif image with top rounded corners, in your case with transparent bg") no-repeat;
}

#main-wrapper-2 {
  background: transparent url("gif image with bottom rounded corners") no-repeat;
  padding-top: 20px; // padding to allow for top corners
  padding-bottom: 20px; // padding to allow for bottom corners
}