SyncViews Posted December 15, 2007 Share Posted December 15, 2007 How do I get those rounded edges that many sites have around parts of the layout. Ive looked at the html for serval sites. Many seem to have a normal div with a solid background colour and i'm not sure how there getting the edges An example would be the phpbb homepage. The main page is on a block with round edges but I can't see how this works. I found this in the css code but I can't see how it works but the page seems to be within this object. (the background image doesn't help either as it just seems to be for the shading effect...) #wrap { width: 910px; background: #FFFFFF url("http://static.phpbb.com/theme/images/bg_body.gif") repeat-y 0 0; margin: 10px auto; text-align: left; padding: 0; } Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 15, 2007 Share Posted December 15, 2007 try this tutorial: http://www.alistapart.com/articles/customcorners/ Quote Link to comment Share on other sites More sharing options...
kts Posted December 17, 2007 Share Posted December 17, 2007 Cool tutorial, I found it to be useful thanks. Quote Link to comment Share on other sites More sharing options...
SyncViews Posted December 18, 2007 Author Share Posted December 18, 2007 I find it really anooying that it needs a header and footer with text in it (making the elments empty screws it up for some reason )and I can't find anyother methods... How can I have it such that all the content goes in one centeral div? I don't mind having elements before or after this div as long as I don't need to put text or anything in them... code for top border eg like this but without the header that for some reason must contain text... <div class="main"> <h2 class="main_top">Article header</h2> code foy body (this is the only place I want there to be actual content) eg <div class="body"> --CONTENT-- </div> code for bottom border eg like this but without the text it seems I can't remove for some reason... <div class="footer"> <p>A paragraph containing author information</p> </div> Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted December 18, 2007 Share Posted December 18, 2007 The phpbb site uses empty span elements to display a positioned image. For example, the source code within #page-header contains these span elements: <span class="side-left"></span> <span class="side-right"></span> And this is their css: span.side-left, span.side-right { background:transparent url(http://static.phpbb.com/theme/images/sides_top.gif) no-repeat; display:block; height:150px; width:20px; } span.side-left { background-position:0px; float:left; margin-right:10px; } span.side-right { background-position:100% 0px; float:right; } Quote Link to comment Share on other sites More sharing options...
SyncViews Posted December 18, 2007 Author Share Posted December 18, 2007 ok. To get a basic idea of how this works I thought I'd make a basic box the same as theres. Ive got the top edge working and both the bottom corners but I don't know where to go from here -I need to shift the bottom edge 20 px up to be in line with the corners -How do I do the left and right edges? EDIT: Change some code. -Still need to know how to do the sides -The bottom edge is fine except the bottom right corner is now 20px too low <html> <head> <link rel="stylesheet" type="text/css" href="corners2.css" /> </head> <body> <div id="page_body"> <!--TOP--> <div class="side_top"> <span class="corner_top_left"></span> <span class="corner_top_right"></span> <!--END TOP--> <h1>CONTENT</h1><br /><br /><br /><br /><br /><br /><br /><br /> <h1>MORE CONTENT</h1> <!--FOOTER--> <div class="side_bottom"> <span class="corner_bottom_left"></span> <span class="corner_bottom_right"></span> </div> <!--END FOOTER--> </div> </div> </body> </html> #page_body { width: 80%; margin-left: auto; margin-right: auto; } div.side_top { background: url("http://static.phpbb.com/theme/images/bg_header.gif") repeat-x 0 0; height: 150px; clear: both; } div.side_bottom { height: 20px; background: url("http://static.phpbb.com/theme/images/bg_footer.gif") repeat-x 0 100%; clear: both; } span.corner_top_left, span.corner_top_right { background: transparent url("http://static.phpbb.com/theme/images/sides_top.gif") no-repeat; display: block; height: 150px; width: 20px; } span.corner_top_left { background-position: 0px; float: left; margin-right: 10px; } span.corner_top_right { background-position: 100% 0px; float: right; } span.corner_bottom_left, span.corner_bottom_right { font-size: 1px; line-height: 1px; display: block; height: 20px; background-repeat: no-repeat; background-image: url("http://static.phpbb.com/theme/images/corners_bottom.gif"); margin: 0; } span.corner_bottom_left { background-position: 0 0; } span.corner_bottom_right { background-position: 100% -20px; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.