SharePoint 2010 Rounded Div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SharePoint 2010 Rounded Div</title>
<style type="text/css">
.page-container {
float:left;
width:422px;
}
.div-header {
background-image:url("district-center-tab.jpg");
background-position:left top;
background-repeat:no-repeat;
height:27px;
padding-left:12px;
padding-top:13px;
width:410px;
}

.div-header-left {
background-image:url("wpart-head-left.jpg");
background-position:left top;
background-repeat:no-repeat;
height:37px;
width:3px;
float:left;
}

.div-header-center {
background-image:url("wpart-head-center.jpg");
background-position:left top;
background-repeat:repeat-x;
height:37px;
width:400px;
float:left;
}

.div-header-right {
background-image:url("wpart-head-right.jpg");
background-position:left top;
background-repeat:no-repeat;
height:37px;
width:10px;
float:left;
}

.div-header-txt {
/*background-image:url("images/bullet.png");
background-position:left top;
background-repeat:no-repeat;*/
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
font-weight:bold;
height:27px;
/*padding-left:17px;*/
text-decoration:none;
padding-top:9px;
text-align:center;
}
.div-container {
background-image:url("wpart-bg.jpg");
background-position:left bottom;
background-repeat:repeat-x;
width:410px;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
min-height:90px;
word-wrap: break-word;
}
.div-container-text
{
padding:10px;
}

.div-bottom {
background-image:url("district-center-bottom-img1.jpg");
background-position:left top;
background-repeat:no-repeat;
height:42px;
width:422px;
}

.page-right-district-bg_top {
background-image:url("district-tab-bg.jpg");
background-position:left top;
background-repeat:repeat-y;
width:237px;
height:90px;
}

</style>
</head>

<body>

<div class="page-container">
<div>
<div class="div-header-left">
</div>
<div class="div-header-center">
<div class="div-header-txt">SCHOOL NEWS</div>
</div>
<div class="div-header-right">
</div>
</div>

<div class="div-container">
<div class="div-container-text" >

DATADATADATADATADATADATADATADATADATADATADATA DATADATADATADATADATADATADATADATADATADATADATA DATADATADATADATADATADATADATADATADATADATADATA DATADATADATADATADATADATADATADATADATADATADATA <br/>
DATADATADATADATADATADATADATADATADATADATADATA DATADATADATADATADATADATADATADATADATADATADATA DATADATADATADATADATADATADATADATADATADATADATA <br/>

</div>
</div>
</div>
</body>
</html>

Images download : 






No comments:

Powered by Blogger.