kodlarex - Css Tasarim 4

Css Hazır Tasarımlar Koduları Linkler Asagıda;

Kısa Yollar

Spon Sor Ve Dost Sitler

MReklam Alanı

Kodlarex Kod'da Öncü

Css Tasarim 4

Tasarım Üstüne

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Texto - Texto</title>
   <meta name="Description" content="summerBreeze is a CSS driven and XHML 1.1 valid template featuring a special tabbed main navigation and wise use of the white spaces." />
   <meta name="Keywords" content="summerbreeze, summer breeze, free css template, valid xhtml template, open source template, free xhtml template, stamatis kritikos" />
   
   <link rel="stylesheet" href="styling.css" type="text/css" media="screen" />
   <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
   
   <meta http-equiv="Content-Language" content="English" />
   <meta name="Author" content="Stamatis Kritikos" />
   <meta name="Robots" content="index,follow" />
   <meta http-equiv="imagetoolbar" content="no" />

</head>
<body>

<div id="monster">

<div id="navcontainer">

<div id="tagline">
   <a href="index.htm" title="Home">
   <br /><img src="http://img145.imageshack.us/img145/5751/blankl.gif" alt="Your logo here" width="200" height="110" /><br />
   <br /></a>
   </div>
   
   <ul id="navlist">
      <li><a accesskey="1" id="taba" href="index.html" class="active" title="Your daily information source">News</a></li>
      <li><a accesskey="2" id="tabb" href="reviews.html" title="Our reviews database">Reviews</a></li>
      <li><a accesskey="3" id="tabc" href="forums.html" title="Our friendly, vibrant and well-informed community">Forums</a></li>
      <li><a accesskey="4" id="tabd" href="contact.html" title="Direct ways to contact us">Contact</a></li>
   </ul>
</div>

<div id="search">
   <form method="get" action="">
   <div>
      <label for="mainsearchbox">Search the site </label>
      <input type="hidden" name="ps" value="10" />
      <input id="mainsearchbox" type="text" name="q" value="" class="tbox" />
      <input type="submit" value="Search" name="submit" />
   </div>
   </form>
   <ul>
      <li><a href="#">Advanced Search</a></li>
      <li><a href="#">Sitemap</a></li>
   </ul>
</div>

<div id="left">
<div id="lc">
   <h1>NAVEGACION</h1>
   <div id="sidemenu">
   <ul>
      <li><a href="#">Advertise</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Glossary</a></li>
      <li><a href="#">Link Exchange</a></li>
   </ul>
   </div>
   <br class="clear" />
   <h1>TITULO</h1>
   <p>
   ALGUN TEXTO
   </p>
   <h1>TITULO</h1>
   <p>TEXTO</p>
</div>
</div>

<div id="center">
<div id="cc">
   <h1>TITULO</h1>
   </div>

Tasarım Altına-

</div>

<div id="right">
<div id="rc">
   <h1>TITULO</h1>
   <p>TEXTO</p>
   <h1>TITULO</h1>
   <p>Texto</p>
</div>
</div>

<br class="clear" />

<div id="footer">

<div id="footmenu">
   <a href="#">Advertise</a> |
   <a href="#">About Us</a> |
   <a href="#">Contact Us</a> |
   <a href="#">Site Map</a> |
   <a href="#">Write For Us</a> |
   <a href="#">RSS</a> |
   <a href="#">Search</a> |
   <a href="#">Privacy</a> |
   <a href="#">Glossary</a> |
   <a href="#">AccessKeys</a>
   </div>
   
   The contents of this webpage are copyright ©2006 Your Company.
   <a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.1!">XHTML 1.1</a> |
   <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS!">CSS 2.1</a>
   <br />
   
   <div class="author">
   Diseñado por<a href="http://www.stamatiskritikos.com" title="Visit our development site">Stamatis Kritikos</a>, Adaptado por
   <a href="http://www.imageloads.es.tl"title="Visita nuestro Sitio">Creative Dutch (Imageloads)</a>.
   </div>
   
</div>

</div>

</body>

</html>

Css Bölmüne-

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#nav_container{display: none;}
#pre_header{display: none;}
#header{display:none;}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Adaptado por: Dutch
   ©2009, www.iWebHelp.co.cc
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   *** Basic Styling ***
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
html, body {
   height: 100%; /* Height Hack 1/3 */
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   We set the page background, the font color and size,
   center the template...
   We set the relative font size of IE5-5.5 differently
   to everything else, and we scale it from there.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body {
   background: #eee url("http://img145.imageshack.us/img145/5866/sharp.gif") repeat-y center top;
   line-height: 1.1em;
   color: #333;
   font: small Verdana, Geneva, Arial, Helvetica, sans-serif!important;
   font /*IE5-5.5 Hack*/: x-small Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center; /* center template 1/2 */
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Global Whitespace Reset"
   We define padding and margin for all elements and
   we scale it from there if we need to.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body, form, input {   
   padding: 0px;
   margin: 0px;
}
h1, h2, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address {
   margin: 5px 0;    
}
dd, blockquote {
   margin-left: 40px;
}
fieldset {
   padding: 10px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Global Hyperlink Control"
   We keep the underline since users have gotten used
   to that line defining a hyperlink and we just change
   the mouseover color.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
a:link, a:visited {
   color: #06c;
}
a:hover {
   color: #8ccc33;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Heading Settings"
   We define font size and color mostly among some
   other more specific things.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
h1, h2, h3 {
   color: #036;
   font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
h1 {
   font-size: 18px;
   position: relative;
}
h2 {
   font-size: 15px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Global Image Control"
   We remove the border from all images and we scale it
   from there if we need to.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
img {
   border: 0;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   *** Layers Time ***
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Global Wrapper"
   This is our parent layer which includes them all.
   From here we mainly choose the width of our page.
   We made it fixed and appropriate for 800x600 res.
   However, if you change it, remember to also alter
   the width for the "center" layer. If you wish to go
   for relative width, well... be careful.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#monster {
   background: #fff url("http://img145.imageshack.us/img145/1396/headersfq.jpg") no-repeat top center;
   width: 774px;
   text-align: center; /* center tabbed menu 1/2 */
   margin: 0 auto; /* center template 2/2 */
   height: 100%; /* Height Hack 2/3 */
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Tabbed Menu"
   We mainly set the width of the tabs as a whole.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navcontainer {
   clear: left;
   z-index: 3;
   position: relative;
   margin: 0 auto; /* center tabbed menu 2/2 */
   width: 62%;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   The blue line below the tabs.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#tabbar {
   position: relative;
   background: #1f5791 url("http://img145.imageshack.us/img145/1118/overburn.gif") no-repeat center top;
   font: bold italic 10px Verdana, Arial, Helvetica, sans-serif;
   text-align: center;
   clear:both;   
   height:14px;   
   margin:0;   
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   The actual tabs
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navlist {
   width: 100%;
   margin: 0 auto;
   padding: 0;
   clear: both;
}
#navlist ul, #navlist, #navlist li  {
   margin: 0;
   padding: 0;
}
#navlist li {
   float: left;
   display: block;
   width: 24.5%;
   min-height: 20px;
}
#navlist li a {
   position: relative;
   display: block;
   text-align: center;
   color: #fff;
   text-decoration: none;
   font: bold 13px Verdana, sans-serif;
}
#navlist li a.active, #navlist li a:active {
   padding-bottom: 5px;
   color: #fff;
   background-color: #1f5791;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Site Logo" or "Site Header Graphic"
   You could put the site title in this div or insert
   an image in your html. If you want to place an old
   classic header to your site, define a background
   image within the "monster" div and insert a
   transparent image within this div in your html with
   the height of your background image.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#tagline {
   clear: both;
   font: bold italic 86% Verdana, Arial, Helvetica, sans-serif;
   text-align: center;
   color: #036;
   margin: 0;   
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Individual Tab Control"
   We make each tab a seperate div so we can have better
   control of the tabbed assembly.
   One nice trick that we achieve this way is the use
   of one image for the two edges of the menu without
   bothering altering the width of the image.
   If you want to add more tabs, just copy and paste
   the whole code of "tabb" or "tabc", give it a name of
   your choice and remember to define it in your html.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#taba, #tabb, #tabc, #tabd {
   padding: 4px;
   background-color: #546F9E;
}
#taba {
   background: #003366 url("http://img145.imageshack.us/img145/1479/slanter.gif");
   background-position: bottom left;
   padding-left: 25px;
   margin-right: -1px;
}
#tabb {
   background: #003366;
   margin-right: -1px;
   border-left: 1px solid #fff;
}
#tabc {
   background: #003366;
   margin-right: -1px;
   border-left: 1px solid #fff;
}
#tabd {
   background: #003366 url("http://img145.imageshack.us/img145/1479/slanter.gif");
   background-position: bottom right;
   border-left: 1px solid #fff;
   padding-right: 25px;
}
#taba:hover, #tabb:hover, #tabc:hover, #tabd:hover {
   background-color: #8ccc33;
   color: #fff!important;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Search Utility"
   You can remove the "search" div from your html if
   you don't want it to exist, or simply alter it's
   content.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#search {
   border-top: 2px solid #fff;
   border-bottom: 4px solid #1f5791;
   background: #8ccc33 url("http://img145.imageshack.us/img145/2954/gradient.gif") repeat-x;
   color: #fff;
   padding-top: 5px;
   padding-bottom: 5px;
   text-align: left;
}
#search label {
   font-weight: bold;
   color: #fff;
}
#search input.tbox {
   width: 45%;
}
#search input {
   padding: 1px;
   border-width: 1px;
   font: 12px Verdana, Arial, sans-serif;
   margin: 2px;
}
#search form {
   display: block;
   float: left;
   text-align: right;
   width: 70.5%;
   margin: 0 40px 0 0;
}
#search ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
#search ul li {
   font: 10px/140% Verdana, Arial, sans-serif;
}
#search ul li a:link, #search ul li a:visited {
   color: #E3EDF4;
}
#search ul li a:hover {
   color: #fff!important;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Columns"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Left Column
   "sidemenu" div is included in here.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#left {
   width: 160px;
   float: left;
   background: #f6f6f6 url("http://img145.imageshack.us/img145/2882/bgleft.gif") no-repeat center bottom;
   color: #555;
   border-right: 1px solid #ccc;
   font-size: 11px;
   text-align: left;
   line-height: 14px;
   height: 100%; /* Height Hack 3/3 */
}
#lc {
   padding: 10px;
}
#lc p {
   padding: 0 0 10px 2px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Side Menu"
   Remove it from your html if you don't need it.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#sidemenu {
   font-family: Tahoma,Arial,sans-serif;
   clear: left;
   float: left;
   width: 140px;
   margin: 0;
   padding: 0;
   font-size: 11px;
}
#sidemenu ul {   
   list-style: none;
   width: 140px;
   margin: 0 0 10px 0;
   padding: 0;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Set the following to whatever you want for the menu
   items to have some space between them (e.g. 4px).
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#sidemenu li {
   margin-bottom: 0;
}
#sidemenu li a {
   font-weight: bold;
   height: 13px;
   text-decoration: none;
   color: #505050;
   display: block;
   padding: 6px 0 4px 10px;
   background: #fff;
   border-left: 4px solid #cccccc;
}
#sidemenu li a:hover {
   background: #fff;
   color: #286ea0;
   border-left: 4px solid #286ea0;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Center Column
   Where the main content goes...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#center {
   width: 460px;
   height: auto;
   float: left;
   background: #fff;
   color: #666;
   line-height: 16px;
   letter-spacing: 1px;
   text-align: left;
}
#cc {
   padding: 10px;
}
#center p {
   padding: 0 0 10px 10px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Right Column
   Good for headlines, ads and so on...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#right {
   width: 150px;
   float: right;
   background: #eee url("http://img145.imageshack.us/img145/7500/bgright.gif") no-repeat center bottom;
   line-height: 14px;
   color: #444;
   font-size: 11px;
   text-align: left;
   height: 100%; /* Height Hack 3/3 */
}
#rc {
   padding: 10px;
}
#rc p {
   padding: 0 0 10px 2px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Footer"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#footer {
   width: auto!important;
   background: #8ccc33 url("http://img145.imageshack.us/img145/3799/overburn2.gif") no-repeat center bottom;
   clear: both;
   position: relative;
   text-align: center;
   font-size: 10px;
   line-height: 0.9em;
   padding: 0;
}
#footer a:link, #footer a:visited {
   color: #424242;
   font-weight: bold;
}
#footer a:hover {
   color: #1f5791!important;
   font-weight: bold!important;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   "Footer Menu"
   This could be a nice place to fill with useful
   shortcuts of pages within your site so they'd be
   easily accessible.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#footmenu {
   background: #1f5791;
   border-top: 4px solid #8ccc33;
   border-left: 5px solid #fff;
   border-right: 5px solid #fff;
   color: #ADADAD;
   font: 10px Arial,Verdana,Helvetica,sans-serif;
   position: relative;
   text-align: center;
   z-index: 1;
   clear: both;
   margin: 0 0 3px 0;
   padding: 3px;
}
#footmenu a:link, #footmenu a:visited {
   color: #E3EDF4;
}
#footmenu a:hover {
   color: #fff!important;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Miscellaneous Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.author {
   padding: 5px 0;
}
.clear {
   clear: both;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Forms Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
fieldset {
   margin: 1em 0;
   border-top: 1px solid #ccc;
   border-bottom: none;
   border-left: none;
   border-right: none;
}
legend {
   margin: 1em 0;
   padding: 0 .5em;
   color: #069;
   background: #f7f7f7;
   font-size: 1.3em;
   font-weight: bold;
}
label {
   width: 170px;
   padding: 0 1em;
   text-align: right;
   float: left;
}
fieldset div {
   margin-bottom: .5em;
   padding: 0;
   display: block;
}
fieldset div input, fieldset div textarea {
   width: 150px;
   border-top: 1px solid #555;
   border-left: 1px solid #555;
   border-bottom: 1px solid #ccc;
   border-right: 1px solid #ccc;
   padding: 1px;
   color: #333;
   background-color: #eee;
}
fieldset div select {
   padding: 1px;
}
div.fm-multi div {
   margin: 5px 0;
}
div.fm-multi input {
   width: 1em;
}
div.fm-multi label {
   display: block;
   width: 200px;
   padding-left: 5em;
   text-align: left;
}
#fm-submit {
   clear: both;
   padding-top: 1em;
   text-align: center;
}
#fm-submit input {
   border: 1px solid #333;
   padding: 2px 1em;
   background: #666;
   color: #fff;
   font-size: 100%;
}
input:focus, textarea:focus {
   background: #f7f7f7;
   color: #000;
}

Bugün 4 ziyaretçi (5 klik) kişi burdaydı!

İp'iniz: 98.153.196.114
Online:
Kişi: 457
Klik: 1492
Kodlarex: Kodlarex

Kodlarex İşimiz Gücümüz Kodlamak:)!

Foruma Üye Olmak İçin Tıklayın