Homework Sourse Homework Sourse

Css code for a awoko newspaper html website which provides b

Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport.
Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport.

Solution

//Name this css file as style.css

@charset \"utf-8\";
/* General */
body {
   margin:0px;
   font-size:12px;
   background-color:#ffffea;
}
body * {
   outline:none;
}
.float {
   float:left;
}
body form {
   margin:0px;
}
#page {
   width:100%;
   background-image:url(images/body_bg2.png);
   background-repeat:repeat-x;
}
#wrapper {
   width:966px;
   margin:0px auto 0px auto;
}
#left {
   width:12px;
   height:219px;
   background-image:url(images/left_effect.png);
   background-repeat:no-repeat;
   background-position:0px 157px;
}
#center {
   width:942px;
}
#right {
   width:12px;
   height:219px;
   background-image:url(images/right_effect.png);
   background-repeat:no-repeat;
   background-position:0px 157px;
}
/* Header */
#header {
   padding:2px 0px 2px 0px;
}
#search {
   width:50%;
   float:left;
}
.search_field {
   height:18px;
   border:1px solid #e3c6c4;
}
#top_links {
   width:40%;
   float:right;
   margin:4px 0px 4px 0px;
   font-family:Georgia, Arial, Helvetica, sans-serif;
}
#top_links * a {
   color:#FFF;
   text-decoration:none;
}
#top_links ul {
   padding:0px;
   margin:0px;
   float:right;
}
#top_links ul li {
   list-style:none;
   margin-left:15px;
   float:left;
}
#logo {
   width:222px;
   margin-right:16px;
   margin-top:15px;
   font-family:Georgia, \"Times New Roman\", Times, serif;
   color:#000;
   line-height:25px;
   text-align:center;
}
#logo a {
   background-image:url(images/logo.png);
   background-repeat:no-repeat;
   width:202px;
   height:72px;
   margin-right:auto;
   margin-left:auto;
   display:block;
}
#top_ad {
   width:374px;
   margin-right:21px;
   margin-top:15px;
   height:90px;

}
#today_quote {
   width:309px;
   margin-top:15px;
}
#quote {
   width:219px;
   text-align:right;
   margin-right:5px;
   padding:5px;
   font-size:14px;
}
/*Middle*/
#middle {
   border-top:1px solid #df202d;
   border-left:1px solid #df202d;
   border-right:1px solid #df202d;
}
.scroller {
   background-color:#fef407;
   height:22px;
   width:auto;
   color:#959595;
   font-family:Georgia, \'Times New Roman\', Times, serif;
   line-height:22px;
   padding:0px 5px 0px 5px;
}
#main_menu {
   width:100%;
   font-family:Georgia, Arial, Helvetica, sans-serif;
   line-height:29px;
   font-size:12px;
   text-transform:uppercase;
   background-image:url(images/body_bg2.png);
   background-repeat:repeat-x;
   background-position:top;
   background-color:#c0010e;
   height:30px;
}
#main_menu * a {
   color:#FFF;
   text-decoration:none;
}
#main_menu ul {
   padding:0px;
   margin:0px;
   width:100%;
   text-align:center;
}
#main_menu ul li {
   list-style:none;
   margin:0px 10px;
   display:inline-block;
}
/*Three Columns*/
/* column container */
.colmask {
   position:relative;   /* This fixes the IE7 overflow hidden bug */
   clear:both;
   float:left;
   width:100%;           /* width of whole page */
   overflow:hidden;       /* This chops off any overhanging divs */
}
/* common column settings */
.colright, .colmid, .colleft {
   float:left;
   width:100%;           /* width of page */
   position:relative;
}
.col1, .col2, .col3 {
   float:left;
   position:relative;
   padding:0 0 1em 0;   /* no left and right padding on columns, we just make them narrower instead
                   only padding top and bottom is included here, make it whatever value you need */
   overflow:hidden;
}
/* 3 Column settings */
.threecol {
   background:#eee;       /* right column background colour */
   background-image:url(images/sidebar_right_bg.png);
   background-repeat:repeat;
   background-position:48px 0px;
}
.threecol .colmid {
   right:20%;           /* width of the right column */
   background:#fff;       /* center column background colour */
   border-right:1px solid #ccc;
}
.threecol .colleft {
   right:60%;           /* width of the middle column */
   background:#f4f4f4;   /* left column background colour */
   background-image:url(images/sidebar_left_bg.png);
   background-repeat:repeat;
   border-right:1px solid #ccc;
}
.threecol .col1 {
   width:58%;           /* width of center column content (column width minus padding on either side) */
   left:101%;       /* 100% plus left padding of center column */
}
.threecol .col2 {
   width:18%;           /* Width of left column content (column width minus padding on either side) */
   left:23%;           /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
   width:18%;           /* Width of right column content (column width minus padding on either side) */
   left:85%;           /* Please make note of the brackets here:
                   (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer */
#footer {
   width:100%;
   background-image:url(images/body_bg2.png);
   background-repeat:repeat-x;
   background-position:top;
   background-color:#c0010e;
   height:30px;
   color:#FFF;
   font-size:12px;
}
#footer_content div {
   width:460px;
   float:left;
   padding:5px;
   font-family:Georgia, \"Times New Roman\", Times, serif;
   color:#FFF;
   font-size:12px;
   line-height:20px;
}

#footer a, #footer a:visited, #footer a:active {
color:#FFF;
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}

/* Sidebar 1 */
#sidebar_content1 ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#sidebar_content1 > ul > li {
   margin-bottom:10px;
}
/* Sidebar 2 */
#sidebar_content2 ul{
list-style-type:none;
margin:0px;
padding:0px;
}


/* Polls */
.widget_polls-widget * {
margin:0px;
padding:0px;
}

.widget_polls-widget h2.widgettitle {
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:14px;
font-weight:700;
margin:10px 0px 10px 0px;
}

.wp_poll_question {
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:12px;
color:#d21320;
margin:10px 0px 10px 0px;
}

.wp-polls-ul li {
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:12px;
line-height:18px;
}

.pollbar {
margin:10px 0px 10px 0px;
}

.wp-polls-ans {

}

.vote_button {
text-align: left; width:90px;
}
.Buttons {
outline:none;
}

.view_results a{
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:12px;
color:#d21320;
text-decoration:none;
text-align: right;
line-height:23px;
}
.widget_archive {
margin-top:20px;
}
.widget_archive h2{
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:14px;
font-weight:700;
margin:10px 0px 10px 0px;
}

.widget_archive a{
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:14px;
color:#d21320;
text-decoration:none;
text-align: right;
line-height:23px;
}

#front_posts .post {
border-bottom:1px solid #CCC;
width:254px;
float:left;
margin:0px 4px 0px 3px;
padding:5px;
text-align:justify;
height:425px;
overflow:hidden;
}
.post {
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:14px;
}
.post img{
display:block;
border:0px;
}
#front_posts a {
text-decoration:none;
color:#000000;
}
/*THUMBNAIL CSS*/
.cute-post-thumbnail{width:250px;height:152px;border:0; margin:10px 0px 5px 0px;}

.post h3{
margin-bottom:0px;
padding-bottom:0px;
}

.post a{
font-family:Georgia, \"Times New Roman\", Times, serif;
text-decoration:none;
color:#000000;
}

.post h3 a{
font-size:1.2em;
font-weight:700;
}


.post div.entry {
margin-top:20px;
}

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0px;
   padding: 0px 5px 0px 5px;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

h2.pagetitle {
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:2em;
font-weight:700;
color:#000000;
}

.archive_image {
width:250px;
display:block;
margin:0 auto 0 auto;
}
.navigation_top, .navigation_bottom {
display:block;
height:20px;
}
.navigation_top {
margin-bottom:50px;
}

.navigation_bottom {
margin-top:50px;
}

.navigation_top a, .navigation_bottom a{
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:1.2em;
font-weight:700;
text-decoration:none;
color:#d21320;
}

.frontpages {
margin-top:20px;
}
.frontpages img{
border:none;
display:block;
width:169px;
margin:2px auto 2px auto;
}

.top_add_sidebar ul {
   list-style:none;
   margin:0px;
   padding:0px;
   display:block;
   width:374px;
   height:90px;
   overflow:hidden;
}

--------------------------------------------------

-----------------------------------------------------

Create html file name it as index.html

----------------------

<!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\" lang=\"en-US\">

<head>

<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />

<title>

Awoko Newspaper
</title>

<style type=\"text/css\" media=\"screen\">

@import url(styles.css );

</style>


</head>

<body class=\"home blog\">


<div style=\"clear:both;\"></div>


<div id=\"middle\">
<div class=\"scroller\">
    <marquee>
    Awoke News Paper    </marquee>
</div>
<div id=\"main_menu\" style=\"\">
    <ul>
       <li class=\"cat-item cat-item-6\"><a href=\"adverts/\" >Adverts</a></li>
       <li class=\"cat-item cat-item-9\"><a href=\"business-finance/\" >Business &amp; Finance</a></li>
       <li class=\"cat-item cat-item-8\"><a href=\"editorial-awoko-tok-tok/\" >Editorial Awoko Tok Tok</a></li>
       <li class=\"cat-item cat-item-5\"><a href=\"entertainment/\" >Entertainment</a></li>
       <li class=\"cat-item cat-item-3\"><a href=\"features/\" >Features</a></li>
       <li class=\"cat-item cat-item-1\"><a href=\"news/\" >News</a></li>
       <li class=\"cat-item cat-item-4\"><a href=\"sports/\" >Sports</a></li>
    </ul>
</div>
</body>
</html>

Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport. Css code for a awoko newspaper h
Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport. Css code for a awoko newspaper h
Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport. Css code for a awoko newspaper h
Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport. Css code for a awoko newspaper h
Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport. Css code for a awoko newspaper h
Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport. Css code for a awoko newspaper h
Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport. Css code for a awoko newspaper h
Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport. Css code for a awoko newspaper h
Css code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport. Css code for a awoko newspaper h

Get Help Now

Submit a Take Down Notice
Tutor
Tutor: Dr Jack
Most rated tutor on our site