Carey Dayrit

Once in a while a visit Scriptlance.com, I have an account there also if I want to know the trend web master's ask. If I have free time, I bid on interesting projects. Today there's a job post which I got interested, a webmaster before he would hire a coder he needs to pass this task:

1) Using absolute position center #container and set the width to 800px

2) Add a border 15px color #ececec around #container

3) Construct horizontal tabs from the #nav

4) Capitalize the first letter of the first word of each paragraph in #main

5) position the h1 Logo 15px from the top margin 15px from the left margin. Set it's size to 18px. Set the padding to 5px, the back ground color to black and the font color to white.

Here's the link to the original file:orig_test1.html

Here's the solution:

 
/* CSS Code */
 
#container{
/* position:absolute; */
  left:0;
  right:0;
  margin-left: auto;
  margin-right: auto;
  width:800px;
  border:15px #ececec solid;
}
 
#nav{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
}
 
#nav li{
list-style: none;
display: inline;
margin: 0;
}
 
#nav a{
  text-decoration: none;
padding: 3px 0.5em;
margin-right: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
 
#nav li a:link, #tablist li a:visited{
color: navy;
}
 
#nav li a:hover{
color: black;
background: lightyellow;
border-color: navy;
}
 
#nav li a.current{
background: lightyellow;
}
 
#main{
  text-transform:capitalize;
}
 
#logo{
  margin-top:15px;
  margin-left:15px;
  font-size:18px;
  padding:5px;
  background-color:black;
  color:white;
}