i have been working on this for a day now (about 2 hours).
it is a simple layout like the one used at <!-- w --><a class="postlink" href="http://www.simplebits.com">www.simplebits.com</a><!-- w -->.
i just want to know if i can imporve this and any pointers anyone may have.
/* ----------( text )---------- */
.hide{
display: none;
}
a:link {
color: #969;
text-decoration:none;
}
a:visited {
color: #969;
text-decoration:none;
}
a:hover {
color: #000;
text-decoration:none;
}
p{
font-size:0.75em;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
/*----------( body layout )----------*/
/*Opera*/
html>body{
margin-top:-9px;
}
body{
text-align:center;
margin:0px;
background-color:#ccc;
background-image:url(bg1.png);
background-repeat:repeat-y;
background-position:center;
padding-left:1px;
voice-family: "\"}\"";
voice-family: inherit;
}
/*Opera*/
html>body#contrainer{
width:682px;
}
div#contrainer{
margin:auto;
width:682px;
voice-family: "\"}\"";
voice-family: inherit;
}
/*Opera*/
html>body#header{
width: 682px;
}
div#header{
margin:auto;
width:682px;
height:100px;
voice-family: "\"}\"";
voice-family: inherit;
background-color:#999999;
}
/*Opera*/
html>body #nav{
width: 682px;
}
div#nav{
margin:auto;
width:682px;
height:23px;
voice-family: "\"}\"";
voice-family: inherit;
background-image:url(nav.png);
background-repeat:repeat-x;
}
div#nav a:link, div#nav a:visited{
line-height:23px;
font-weight:bold;
margin:0px 8px 4px 8px;
text-decoration: none;
color: #fcecf8;
font-size:0.75em;
font-family: Arial, Helvetica, sans-serif;
}
div#nav a.active:link, div#nav a.active:visited, div#nav a:hover{
border-bottom: 4px solid #fff;
color: #FCECF8;
}
div#navfloat{
padding-left:10px;
float:left
}
/*----------( date )----------*/
span#date{
float:right;
font-size:0.60em;
font-family: Arial, Helvetica, sans-serif;
color: #FCECF8;
margin-top:4px;
margin-right:20px;
}
/*----------( main content area )----------*/
div#content{
margin: 0px 220px 20px 20px;
padding-top: 0px;
text-align: justify;
}For your a tags you could use:
a {
color: #969;
text-decoration:none;
}
a:hover {
color: #000;
text-decoration:none;
}
it is a simple layout like the one used at <!-- w --><a class="postlink" href="http://www.simplebits.com">www.simplebits.com</a><!-- w -->.
i just want to know if i can imporve this and any pointers anyone may have.
/* ----------( text )---------- */
.hide{
display: none;
}
a:link {
color: #969;
text-decoration:none;
}
a:visited {
color: #969;
text-decoration:none;
}
a:hover {
color: #000;
text-decoration:none;
}
p{
font-size:0.75em;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
/*----------( body layout )----------*/
/*Opera*/
html>body{
margin-top:-9px;
}
body{
text-align:center;
margin:0px;
background-color:#ccc;
background-image:url(bg1.png);
background-repeat:repeat-y;
background-position:center;
padding-left:1px;
voice-family: "\"}\"";
voice-family: inherit;
}
/*Opera*/
html>body#contrainer{
width:682px;
}
div#contrainer{
margin:auto;
width:682px;
voice-family: "\"}\"";
voice-family: inherit;
}
/*Opera*/
html>body#header{
width: 682px;
}
div#header{
margin:auto;
width:682px;
height:100px;
voice-family: "\"}\"";
voice-family: inherit;
background-color:#999999;
}
/*Opera*/
html>body #nav{
width: 682px;
}
div#nav{
margin:auto;
width:682px;
height:23px;
voice-family: "\"}\"";
voice-family: inherit;
background-image:url(nav.png);
background-repeat:repeat-x;
}
div#nav a:link, div#nav a:visited{
line-height:23px;
font-weight:bold;
margin:0px 8px 4px 8px;
text-decoration: none;
color: #fcecf8;
font-size:0.75em;
font-family: Arial, Helvetica, sans-serif;
}
div#nav a.active:link, div#nav a.active:visited, div#nav a:hover{
border-bottom: 4px solid #fff;
color: #FCECF8;
}
div#navfloat{
padding-left:10px;
float:left
}
/*----------( date )----------*/
span#date{
float:right;
font-size:0.60em;
font-family: Arial, Helvetica, sans-serif;
color: #FCECF8;
margin-top:4px;
margin-right:20px;
}
/*----------( main content area )----------*/
div#content{
margin: 0px 220px 20px 20px;
padding-top: 0px;
text-align: justify;
}For your a tags you could use:
a {
color: #969;
text-decoration:none;
}
a:hover {
color: #000;
text-decoration:none;
}