>Huso-ST>Tasarımlar>html kodları>icon arşivi<

Golden Age Css Tasarım

Golden Age

tasarım önizleme:

Tasarımın üstüne:


<div id="contmain">
<div id="left1">
<div id="right1">
<div id="header">
<div id="logo">
<h1><a href="http://vatandizayn.tr.gg/">BURAYA SİTENİN ADINI YAZABİLİRSİN</a></h1>
<h2><a href="http://vatandizayn.tr.gg/" id="metamorph">buraya sitenin hakkında birkaç birşey yazabilirsin</a></h2>
</div>
<div id="menu">
   <ul>
      <li><a href=http://www.huso-st.tr.gg>Home</a></li>
      <li><a href="#">Blogs</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

</div>

<div id="page">

<div id="content">

Tasarımın Altına:

</div>


<div id="sidebar2" class="sidebar">
   <ul>
      <li>
         <h2>Categories</h2>
         <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer elit</a></li>
            <li><a href="#">Metus pellentesque</a></li>
            <li><a href="#">Suspendisse mauris</a></li>
         </ul>
      </li>
      <li>
         <h2>Archives</h2>
         <ul>
            <li><a href="#">September</a> (23)</li>
            <li><a href="#">August</a> (31)</li>
            <li><a href="#">July</a> (31)</li>
            <li><a href="#">June</a> (30)</li>
            <li><a href="#">May</a> (31)</li>
         </ul>
      </li>
      <li>
         <h2>Lorem ipsum dolor </h2>
         <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer elit</a></li>
            <li><a href="#">Metus pellentesque</a></li>
            <li><a href="#">Suspendisse mauris</a></li>
         </ul>
      </li>
   </ul>
</div>
<div id="bottom" style="clear: both;"></div>
</div>

<div id="footer">
<p>Copyright © 2008. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
<p>Design by <a href="http://huso-st.tr.gg/" title="Flash Web Templates">Flash Web Templates</a>, coded by <a href="http://vatandizayn.tr.gg" title="Free Falsh Templates">Free Flash Templates</a>
   </p>
</div>
</div>
</div>
</div>

Css koduna:

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

* {
margin: 0;
padding: 0;
}

body {
margin: 0;
background: #130506 url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/back_all.jpg) repeat-x top;
}

body, th, td, input, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}

#left1
{
width: 928px;
margin: -31px auto;
background: url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/1.jpg) no-repeat left top;
}

#right1
{
width: 928px;
background: url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/2.jpg) no-repeat right top;
}

#contmain
{
width: 100%;
}

h1, h2, h3 {
color: #44763E;
}

h1 {
font-size: 3em;
}

h2 {
text-transform: uppercase;
font-size: 1.1em;
font-weight: bold;
color: #867B1C;
}

h3 {
font-size: 1em;
}

p, ul, ol {
margin-top: 7px;
font-size: 1.1em;
}

ul, ol {
margin-left: 3em;
}

a {
text-decoration: underline;
color: #867B1C;
}

a:hover {
border: none;
text-decoration: none;
}

h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #867B1C;
}

h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #867B1C;
}

/* Header */

#header {
width: 778px;
margin: 0 auto;
height: 550px;
background: #ffffff;
}

#menu {
float: left;
margin-top: 5px;
height: 46px;
width: 714px;
padding-left: 64px;
background: #ffffff url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/menu.gif) repeat-x;

}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
}

#menu a {
display: block;
float: left;
height: 31px;
width: 125px;
margin-right: 1px;
text-decoration: none;
font-size: 1.1em;
padding-top: 10px;
font-weight: bold;
color: #ffffff;
text-align: center;

}

#menu a:hover {
color: #2C2E22;
background: url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/menu_r.gif) repeat-x;
}

/* Logo */

#logo {
width: 778px;
height: 483px;
margin: 0 auto;
background: url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/header.jpg) no-repeat left top;
text-align: right;
}

#logo h1 {
padding-top: 130px;
padding-right: 20px;
color: #ffffff;
font-size: 18px;
}

#logo h2 {
font-style: italic;
font-size: 10px;
padding-right: 20px;
}

#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #ffffff;
}

#logo a {
color: #FFFFFF;
}

/* Page */

#page {
width: 768px;
margin: 0 auto;
background: #ffffff url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/table_back.gif) repeat-x;
border-top: none;
border-left: 5px solid #ffffff;
border-right: 5px solid #ffffff;
}

/* Content */

#content {
float: left;
width: 480px;
padding-left: 10px;
padding-top: 20px;
}

.post {
}

.post .title {
margin: 0;
font-weight: normal;
}

.post h1.title {
height: 30px;
font-size: 2.4em;
}

.post .entry {
padding: 0 10px 30px 15px;
}

.post .meta {
margin: 0;
padding: 5px 0px 0px 15px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #867B1C;
}

.post .meta a {
color: #867B1C;
}

.post .links {
margin: 0;
}

.post .tags {
margin: 0;
text-transform: uppercase;
font-size: .8em;
font-weight: bold;
}

.post .links a, .post .tags a {
border: none;
}

/* Sidebars */

.sidebar {
float: left;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

.sidebar li {
margin-bottom: 2em;
}

.sidebar li ul {
}

.sidebar li li {
margin: 0;
}

.sidebar li h2 {
margin: 0 0 1em 0;
}

#sidebar1 {
width: 224px;
padding: 0px 0px 0px 20px;
}

#sidebar2 {
width: 236px;
padding: 20px 20px 0px 20px;
}

#sidebar2 li h2 {
margin: 0 0 1em 0;
background: url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/title.gif) no-repeat left top;
height: 35px;
color: #FFFFFF;
padding-left: 20px;
padding-top: 14px;
}

#sidebar2 li ul {
line-height: normal;
margin-left: 20px;
}

#sidebar2 li li {
padding: 5px;
background: url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/small.gif) no-repeat left;
font-size: .8em;
}

#sidebar2 li a {
border: none;
padding-left: 10px;
}

#sidebar2 li a:hover {
border: none;
padding-left: 10px;
}

#bottom
{
height: 30px;
background: url(http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_goldenage/images/footer.gif) bottom no-repeat;
}

/* Footer */
#footer
{
padding: 20px;
height: 50px
}

#footer p {
text-align: center;
font-size: 9px;
color: #ffffff;
margin: 0px;
padding: 0px;
}
#footer a
{
color: #FFFFFF
}