Jump to content

Rounded edges


SyncViews

Recommended Posts

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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.