PDA

View Full Version : Rounded Corners for Wrapper



sixrfan
Feb 4th, 2010, 03:20 AM
i want to create rounded corners of the white outer wrapper on my page here: http://www.diveneycue.com/wordpress/ so that it looks like the corners in the mockup here: http://www.diveneycue.com/mockup.gif

whats the best way to go about this? I'm concerned its not as simple as a standard rounded corner box because i have an image that stretches across the back of the wrap, rather than just a color so i cant figure out how to set it up so that a semi-circle gets cut out of the corner of the images.

please advise. thanks!

Josephbm91
Feb 4th, 2010, 08:32 AM
What I tend to do is make the top and bottom parts of the rounded corners their own div layers. I'll make a wrapper for the middle layer, then a div for the middle layer. I had a negative margin-top on the middle layer to scoot the content upwards so there isn't a large gab between the top layer and middle layer. You can check out how I did it (http://mcculloughdesigns.com/services.php) on my personal site using these three images:

http://mcculloughdesigns.com/images/services/services_contentbg_header.jpg

http://mcculloughdesigns.com/images/services/services_contentbg.jpg

http://mcculloughdesigns.com/images/services/services_contentbg_footer.jpg

Avril
Feb 4th, 2010, 11:12 AM
Hi!

You have a wide choice of rounded corners here:

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

Hope you find what you are looking for.

Cheers!

Excavator
Feb 4th, 2010, 05:38 PM
Hello sixrfan,
When you say "so that a semi-circle gets cut out of the corner of the images" it sounds like you want to edit your background image with CSS.

Maybe what you really need is to photoshop your background image?

sixrfan
Feb 4th, 2010, 08:21 PM
thanks. i'm kinda getting there now: http://www.diveneycue.com/wordpress/

the only issue is that the color is a little off because the wood in the footer sliver wont always match up with the wood in the middle as the height of the middle slivers are raised and lowered as the content grows.

any thoughts on how to get it exact?

Avril
Feb 5th, 2010, 03:07 PM
Could you post your code? It would be easier to see what has to be changed. Looks like there is a difference in colour at the bottom of the footer too. Have you tried adjusting its height?

sixrfan
Feb 5th, 2010, 07:21 PM
<div id="footer">
<p><span class="credits"> 2010 Diveney Cues</span><br>Designed with love by <a href="http://www.diveneycue.com/" target="blank">SBM</a>.</p>
</div>
</div>

<div id="bottom">
<span>&nbsp;</span>
</div>




body {background:#f4f4f4 url(img/bg.gif) top left repeat; color:#FFFFFF; font:76% Georgia;}
#wrap {
background: url(img/wrap_slice.gif);
margin:10px auto 0 auto;
width:900px;
}
#bottom {
background: url(img/bottom.gif) no-repeat;
margin: 0 auto 10px auto;
padding: 0;
width:900px;
}


thanks.

Avril
Feb 5th, 2010, 09:09 PM
Is it the span under your footer that is showing? Not sure.

Just an idea: If you wanted the darker wood grain as background and the lighter one in the rounded rectangle, you could have put a transparent layer in the rectangle as background (so that the grain underneath shows through), and you would have no need to use images in the rectangle itself. To get the text in the footer to centre, I generally make a line-height that is the height of the footer and use text-align: center.

Hope it helps!

Cheers!

sixrfan
Feb 5th, 2010, 11:05 PM
that's a great idea. thank you!

sixrfan
Feb 5th, 2010, 11:35 PM
on second thought, that trick did not work because the dark background of the body showed through, but I need the lighter wood color of the middle to show and line up properly with the wood slice immediately above it. :(

Avril
Feb 7th, 2010, 09:06 AM
Did you use a transparent background for the rounded div? I.e., you would need a white background that is about 15% opaque. Add this to your div's css:



background-color: #FFFFFF; opacity: 0.15; filter:alpha(opacity=15);


The second filter is for IE. Here the background of your body div will show through the layer, but the rectangle will be opaque so it looks lighter. You can lay the navbar on top of this with its own background image.

Is that how you would like it?

Cheers!

sixrfan
Feb 7th, 2010, 10:09 PM
thanks avril. that opacity is a great trick and now that i know it, i'll make the slices above it somewhat transparent so that background shows through and everything appears to line up.

however, there's now a new issue. because i have the 15% opacity, its basically removing the white border of the image that i have around my bottom slice and making the white appear transparent. any idea on how to fix?

Avril
Feb 8th, 2010, 04:23 PM
Strange. It shouldn't. Post a link or your code so we can take a look.

sixrfan
Feb 8th, 2010, 11:20 PM
i could understand why the opacity would affect the background image, but i also put that same image within the div itself so its acting as content.


<div id="bottom">
<img src="http://www.diveneycue.com/wordpress/wp-content/themes/green-theme/img/bottom.gif">
</div>





#bottom {
background: url(img/bottom.gif) no-repeat;
margin: 0 auto 10px auto;
padding: 0;
width:900px;
background-color: #FFFFFF; opacity: 0.10; filter:alpha(opacity=15);
height: 10px;
}

Avril
Feb 9th, 2010, 01:09 PM
Have you uploaded the sample folder? It would be easier to see. The present link does not seem to be the right one. There is a div that is not the correct height (you can see the white border that stops short of the lower edge, and causes a break in the footer image. It does not help to repeat the same image. The only solution would be to create another layer on top of the bottom one, but that would mean the divs would have to be positioned absolutely, and the whole image on the top layer will have no opacity...

Cheers!

sixrfan
Feb 9th, 2010, 09:25 PM
well i'm a little confused. but here's the two image locations:

http://www.diveneycue.com/wordpress/wp-content/themes/green-theme/img/bottom1.gif

http://www.diveneycue.com/wordpress/wp-content/themes/green-theme/img/bottom.gif

please advise. thanks.

fball
Feb 11th, 2010, 06:58 AM
For rounded corners I always draw the image in Fireworks/Photoshop and slice it into three horizontal images. The top, middle and bottom. The top and bottom images are usually 10px high and the middle piece is only 1px.

Then I write CSS/HTML similar to this:


#featured_top {
width: 200px;
height: 14px;
margin: 0 auto;
background: transparent url("images/featured_top.png");
margin-top: -10px;
}

#featured {
width: 200px;
height: 160px;
margin: 0 auto;
background: transparent url("images/featured_middle.png");
text-align: center;
}

#featured_bottom {
width: 200px;
height: 14px;
margin: 0 auto;
background: transparent url("images/featured_bottom.png");
}


<div id="featured_top"></div>

<div id="featured">

</div>

<div id="featured_bottom"></div>

sixrfan
Feb 11th, 2010, 03:00 PM
well i found a way around my issue which was to use the white top border of the footer as a starting point for a whole new image, so that i dont have to worry about two different wood grains aligning: http://www.diveneycue.com/wordpress/?page_id=10

Avril
Feb 11th, 2010, 08:08 PM
Hi!

That's great! I have really been busy these last few days, so could not reply. I'm glad you found the solution.

Cheers!