I have attended the lab 4 which was held on September 23 rd in ARMS. We have discussed a lot of things in the lab.
I have added two new CSS files
1) Default.css
2)style.css
Below is the code for Default.css
@charset "utf-8";
/* CSS Document */
/* General */
*
{
margin: 0;
padding: 0;
}
html
{
height: 100%;
font-size: 62.5%;
}
body
{
height: 100%;
background: #DEDEDE url('../img/bg2.gif') repeat-x 0 0;
text-align: center;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
position: relative;
width: 900px; min-width: 900px;
margin: 0 auto;
padding-bottom: 60px;
}
a:link, a:visited
{
color: #007099; text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
.noscreen
{
display: none;
}
.cleaner
{
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}
/* Skip menu */
.hidden
{
position: absolute;
top: -10000px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
abbr, acronym, span.abbr
{
border-bottom: 1px dotted black;
cursor: help;
}
/* Wrapper */
#wrapper {width: 900px; margin: 40px auto 60px auto; border: 4px solid #FEFEFE; border-bottom: 0; display: table;}
/* Header */
.header {width: 900px; height: 100px; margin: 0 auto; position: relative; text-align: left; background-color: #007099;}
/* Headings */
h1 {color: #FFF; font: 2.8em Georgia, "Times New Roman", Times, serif; padding-top: 14px; margin: 0 0 11px 30px;}
h1 a:link, h1 a:visited {color: #FFF; text-decoration: none;}
h1 span {border-bottom: 1px solid #66A9C2; padding-bottom: 2px;} h1 span#color {color: #FEB125; border: 0;}
h2 {font: 1.8em normal Georgia, "Times New Roman", Times, serif; background: url('../img/b.gif') no-repeat 0 50%; padding-left: 23px; margin-bottom: 5px; letter-spacing: 1px;}
h3 {font: 1.3em Georgia, "Times New Roman", Times, serif; background: url('../img/h3-bg.gif') repeat-x 0 60%; letter-spacing: 1px; margin-bottom: 3px;}
h3 span {background: #FFF; padding: 2px 8px; margin-left: 20px; background-color: #FFFFC7; border-left: 4px solid #FFF; border-right: 4px solid #FFF;}
.col-l h3 {font: bold 1.1em Verdana; background: #0085B6 url('../img/h3-bg2.gif') repeat-x 0 0; color: #FFF; text-align: center; padding: 7px 0; letter-spacing: 0;}
/* Paragraphs */
p {line-height: 1.9; margin-bottom: 14px;}
p#about {font-size: 1.2em; line-height: 1.2; margin: 0 0 0 30px; color: #FEFEFE}
p#backlinks {position: relative; top: -56px; font-size: 0.9em; color: #656565;} p#backlinks a, p#backlinks a:visited {color: #656565;}
p#backlinks a:hover {color: #151515;}
/* Page */
.page {width: 900px; margin: 0 auto; text-align: left; background: #FFF url('../img/content-bg.gif') repeat-y 0 0; color: white;}
.col-l {float: left; width: 23%; background-color: #DDECF1; border-top: 1px solid #578B9E;}
.col-r {float: right; width: 100%;}
.col-l-in {margin: 0 0 0 0;} .col-r-in {margin: 1.2em 2em 2em 1.2em;}
.bodyContent
{
color: Black;
}
/* Article */
.article {background-color: #DDD; border: 1px solid #AAA; padding: 5px 12px 27px 12px; margin: 14px 0 14px 0; position: relative; _width: 619px;}
.article-zebra {background-color: #E6FFD2; border: 1px solid #B5E390; padding: 5px 12px 27px 12px; margin: 8px 0 14px 0; position: relative; _width: 619px;}
.article p, .article-zebra p {line-height: 1.5; margin-bottom: 3px;}
.article a.more, .article-zebra a.more {position: absolute; bottom: 7px; right: 10px; line-height: 1;} /* Read more positioning */
.article a.more, .article a.more:visited, .article-zebra a.more, .article-zebra a.more:visited
{background-color: #343434; color: #FEFEFE; padding: 5px 7px; text-decoration: none; border: 1px solid #606060; font-size: 0.9em;}
.article a.more:hover, .article-zebra a.more:hover {text-decoration: underline;}
/* Gallery */
.gallery {width: 99%; margin: 18px 0 0 0;}
.gallery img {border: 1px solid #AAA; margin-right: 12px;}
.gallery a:hover img {border: 1px solid #505050;}
/* Menu */
#menu-box {
width: 99.7%;
position: absolute;
right: 1px;
bottom: 1px;
background-color: #353535;
border: 1px solid #5A5A5A;
border-bottom: 0;
}
ul#web {list-style: none; text-align: right; margin-right: 30px;}
ul#web li {display: inline; color: #FFF;}
ul#web li a#first {border-left: 1px solid #505050;}
ul#web li a, ul#web li a:visited {float: right; display: block; color: #FFF; padding: 10px 26px; border-right: 1px solid #505050;}
ul#web li a:hover {text-decoration: none; background-color: #505050;}
ul#web li a.active {background: black !important;}
ul.menu {list-style: square; list-style-position: inside; margin: 8px 0 12px 16px;}
ul.menu li {margin-bottom: 9px;}
ul.menu li a, ul.menu li a:visited {color: #101010; text-decoration: none;}
ul.menu li a:hover {color: #181818; text-decoration: underline; background: 0;}
/* Footer */
#footer {width: 900px; height: 50px; margin: 0 auto; background-color: #222222; border-bottom: 4px solid #FEFEFE; border-top: 2px solid #909090;}
#footer a:link, #footer a:visited {color: #FFF; font-weight: normal;}
#footer ul {list-style-type: none; color: #FFF; padding: 16px 0 0 14px; text-align: left; float: left; width: 430px; }
#footer ul li {float: left; display: inline; white-space: nowrap;}
#footer ul li a, #footer ul li a:visited {margin: 0 6px;}
#footer p {float: right; text-align: right; color: #FFF; padding: 10px 10px 0 0; line-height: 1.2;}
/* Searching form */
form.searching {width: 252px; position: absolute; top: 18px; right: 2px;} form.searching fieldset {border: 0;}
input.search {width: 150px; border: 1px solid silver; letter-spacing: 1px; padding: 4px 7px;}
form.searching input.hledat {letter-spacing: 1px; font-weight: bold;}
form.searching label {display: none;}
/* Standard form */
.formTable td {text-align: right; padding-right:2px;}
.label
{
float: left;
text-align: right;
}
.input
{
float: left;
text-align: left;
}
Below is the code for print.css
@charset "utf-8";
/* CSS Document - print style sheet */
body {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #595959;}
h1 {font-size: 15pt;}
h2 {font-size: 13pt;}
h3, h4, h5, h6 {font-size: 11pt;}
p {line-height: 1.3; font-size: 11pt;}
a:link, a:visited {
text-decoration: underline;
font-weight: bolder;
color: #000000;
}
a img {border: 1px solid #595959;}
.hidden {
position: absolute;
top: -10000px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
form.searching, #menu-box , ul.menu, .col-l h3, #footer, br {
display: none;
}
John added image and also copy right at the bottom of the website.
Daniel put some Place holders for body and footer. Dharmil renamed the CSS files to the appropriate naming convention. Jason completed the file structure.
Thursday, October 21, 2010
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment