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; } Link to comment https://forums.phpfreaks.com/topic/81842-rounded-edges/ 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/ Link to comment https://forums.phpfreaks.com/topic/81842-rounded-edges/#findComment-415797 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. Link to comment https://forums.phpfreaks.com/topic/81842-rounded-edges/#findComment-417049 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> Link to comment https://forums.phpfreaks.com/topic/81842-rounded-edges/#findComment-417250 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; } Link to comment https://forums.phpfreaks.com/topic/81842-rounded-edges/#findComment-417268 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; } Link to comment https://forums.phpfreaks.com/topic/81842-rounded-edges/#findComment-417542 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.