Shading background border : Round « CSS Controls « HTML / CSS






Shading background border

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<!-- Template Design by www.studio7designs.com. -->

<head>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta name="description" content="Studio7designs - Professional Photography and Graphic Designs, Victoria BC Canada" />
<meta name="keywords" content="Studio7designs" />
<meta name="author" content="Aran / Original design: Aran Down - http://www.studio7designs.com" />
<title>Nautica02</title>
<style type='text/css'>
/* This Style sheet was made by aran @ studio7designs.com  if you have any questions please email me or visit http://www.studio7designs.com */


body
{
font-family: trebuchet ms, verdana, arial, tahoma;
font-size: 80%; color: #999999;
background-color: #ffffff;
line-height: 200%;
margin-top: 0px;
background: #ffffff url('Nautica02-images/bg.gif') top center repeat-x;
}

#border
{
border: 0px ;
width: 800px;
background-color: #FFFFFF;
background:url('Nautica02-images/backround2.gif') no-repeat;
margin: 0 auto;
}

#header
{
height: 190px;
border-bottom: 1px solid #669900; 
background-image:url('Nautica02-images/header.jpg');
}

#content
{
padding: 0.5em 1em;
max-width: 740px;
background-color: #FFFFFF;
}

#container
{
width: 770px;
margin: 0px auto;
background-color: #ffffff;
border: 0px solid #669900;
}

.splitright {
background: #ffffff url('Nautica02-images/menu.gif') top center no-repeat;
width: 30%;
float: right;
overflow: hidden;
text-align: center;
}

.splitleft {
background: #ffffff;
margin:auto;
width: 68%;
float: left;
overflow: hidden;
text-align: justify;
}

#introduction{
  float:right;
  width:180px;
  padding:0px 0px;
  margin:20px 0 20px 20px;
  background: url(Nautica02-images/menu.gif) no-repeat;
  text-align:center;
  line-height:1.5em;
  color:#999999;
  font-size:1.0em;
  font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
  letter-spacing:0px;
}

#introduction ul, #introduction li {
text-align:center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#introduction a {
  border-bottom: none;
  color:#999999;
}

#introduction h3{
  text-align: center;
  position:static;
}

#introduction a:link, a:visited{
  color:#999999;
}

#introduction a:hover, a:active{
  color:#b8ce83;
}



/* ~~~~~~~~~ footer ~~~~~~~~~ */
#footer
{
  text-align: center;
  height: 30px;
  background-color: #F5FAF5;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #CCCCCC;
  margin-top: 50px;
  margin-right: 15px;
  margin-bottom: 0;
  margin-left: 15px;
  padding-top: 0;
  padding-right: 20px;
  padding-bottom: 0;
  padding-left: 20px;
  clear: both;
  
}


#footer a:link, a:visited{
  color:#b8ce83;
}

#footer a:hover, a:active{
  color:#cccccc;
}




a:active,
a:visited,
a:link            { color: #b8ce83; text-decoration: none; }
a:hover          { color: #999999; text-decoration: none; }

/* ~~~~~~~~~ PROPS FOR THE MENU GO OUT TO EXPLODING-BOY.COM ~~~~~~~~~ */

    #topmenu {
  position: relative;
  top: 13px;
  left: 15px;
  width: 540px;
  font-size:93%;
  margin: 0;
  line-height:normal;
  height: 41px;
      }
    #topmenu ul {
    margin:0;
    padding:0px 0px 0 2px;
    list-style:none;
      }
    #topmenu li {
      display:inline;
      margin:0;
      padding:0;
      }
    #topmenu a {
      float:left;
      background:url(Nautica02-images/menuleft.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #topmenu a span {
      float:left;
      display:block;
      background:url(Nautica02-images/menuright.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#669900;
      }
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #topmenu a span {float:none;}
    /* End IE5-Mac hack */
    #topmenu a:hover span {
      color:#669900;
      }
    #topmenu a:hover {
      background-position:0% -42px;
      }
    #topmenu a:hover span {
      background-position:100% -42px;
    }
/* ~~~~~~~~~ Headings ~~~~~~~~~ */    
h1
{
font-size: 120%;
color: #659500;
}

h3{
  color:#9aba11;
  font-family:geneva,arial,sans-serif;
  font-weight:normal;
  text-transform:uppercase;
  word-spacing:4px;
  letter-spacing:3px;
  font-size:0.8em;
  font-weight:bold;
  padding:0 2px;
  margin:0;
}

/*~~~~~~~~~~~styles~~~~~~~~~~~~~~~*/

.style4 {font-size: 16px}
.style5 {
  font-size: 12px;
  color: #CCCCCC;
</style>


</head>

<!-- Begin Body -->

<body>

<div id="border"><div id="container"> 

<!-- menu -->

<div id="topmenu">
     <ul>
    <li><a href="#" title="Downloads"><span>Downloads</span></a></li>
    <li><a href="#" title="Gallery"><span>Gallery</span></a></li>
  <li><a href="#" title="Links"><span>Links</span></a></li>
  <li><a href="#" title="Links"><span>Links</span></a></li>
  <li><a href="#" title="Links"><span>Links</span></a></li>
  <li><a href="#" title="Links"><span>Links</span></a></li>
  </ul>
</div>


<!-- header backround image is in the style sheet-->
<div id="header"></div>


<!-- content -->
<div id="content">

<div class="splitleft">

     <p><span class="style4">Welcome to Nautica02</span><br />
       <br />
     Many many thanks for to <a href="http://openwebdesign.org/userinfo.phtml?user=mejobloggs">'mejobloggs' </a>for all the    coding help. This is a simple theme that I had fun making, If there is anything that I can do better, please email me. Also, I need some help with margins, how to use them properly. You can use this theme for whatever, all I ask is if you want please keep a <a href="http://www.studio7designs.com">link</a> to my website and <a href="mailto:aran@studio7designs.com">email me</a>, I love to see my themes in action <br />
      <br />
      imperdiet, sapien pharetra congue luctus, orci orci suscipit ipsum, vitae hendrerit ante dui ac purus. Curabitur tristique velit ut nulla. Etiam volutpat pellentesque orci.
         Nunc abt <br />
       Nunc diam. Cras tempor ligula at dui. Aenean ornare velit at nunc. In vitae tortor aliquet purus porttitor gravida. Nullam massa dui, venenatis lobortis, interdum in, scelerisque. abs </p>
     <p>dui ac purus. Curabitur tristique velit ut nulla. Etiam volutpat pellentesque orci. Nunc tet <br />
Nunc diam. Cras tempor ligula at dui. Aenean ornare velit at nunc. In vitae tortor aliquet purus porttitor gravida. Nullam massa dui, venenatis lobortis, interdum in, scelerisque. be </p>
     <p>dui ac purus. Curabitur tristique velit ut nulla. Etiam volutpat pellentesque orci. Nunc hre <br />
Nunc diam. Cras tempor ligula at dui. Aenean ornare velit at nunc. In vitae tortor aliquet purus porttitor gravida. Nullam massa dui, venenatis lobortis, interdum in, scelerisque.</p>
     <p>dui ac purus. Curabitur tristique velit ut nulla. Etiam volutpat pellentesque orci. Etiam rul <br />
       Nunc diam. Cras tempor ligula at dui. Aenean ornare velit at nunc. In vitae tortor aliquet purus porttitor gravida. Nullam massa dui, venenatis lobortis, interdum in, scelerisque.</p>
     <p>dui ac purus. Curabitur tristique velit ut nulla. Etiam volutpat pellentesque orci. Etiam yer <br />
       Nunc diam. Cras tempor ligula at dui. Aenean ornare velit at nunc. In vitae tortor aliquet purus porttitor gravida. Nullam massa dui, venenatis lobortis, interdum in, scelerisque.</p>
</div>

<!-- Begin Page Menu  -->

   <div id="introduction"><br /><h3>
          Page navigation</h3>
        <ul>
          <li><a href="#">Example Link 1</a></li>
          <li><a href="#">Example Link 2</a></li>
          <li><a href="#">Example Link 3</a></li>
          <li><a href="#">Example Link 4</a></li>
        </ul>
        <h3>sub page menu </h3>
        <ul>
          <li><a href="#">Example Link 1</a></li>
          <li><a href="#">Example Link 2</a></li>
          <li><a href="#">Example Link 3</a></li>
          <li><a href="#">Example Link 4</a></li>
        </ul>
<br />
<br />
   <img src="images/n3.jpg" alt="n2" width="165" height="59" /></div>

  
</div>


<!-- footer -->

</div>
<div id="footer">
<span class="style5">Design by <a href="http://www.studio7designs.com">Aran</a> |
  <a href="http://www.ehostinfo.com/">Web Hosting</a> | copyright 2006 your name</span><br />
<br />
</div>
</div>

</body>

</html>

   
    
    
  








Related examples in the same category

1.Round corner sections
2.Round corner section title bar
3.Round corner for all sections
4.Round corner
5.HTML for borders with rounded corners
6.Sliding door round corner