»Menü Arşivi İçin Tıklayın.03/12/2010
»Eglence Bölümü İçin Tıklayın.03/12/2010
»Blogum İçin Tıklayın.03/12/2010
»Css Tasarımlar Tıklayın.03/12/2010

»Messenger İle İlgili Herşey İçin Tıklayın.03/12/2010
»Adobe Dersleri için Tıklayınız.03/12/2010
»Kod Arşivi Güncellendi Tıklayın.03/12/2010

CssPanel

Dark City




Tasarım Üzeri



Kod:
<div id="wrap">
  <div id="header"><br />
    <h3>Css Kod Arşivi</h3>
    <p><strong>"CssPanel.tr.gg"</strong><br />
      (ELAN)</p>
  </div>
  <div id="nav">
    <ul>
      <li><a href="http://www.free-css.com/">.: index :. </a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Gallery</a></li>
      <li><a href="http://www.free-css.com/">Forum</a></li>
      <li><a href="http://www.free-css.com/">New</a></li>
      <li class="last"><a href="http://www.free-css.com/">contact</a></li>
    </ul>
  </div>
  <div id="left">
    <p class="title_left"><img src="http://img200.imageshack.us/img200/1930/arrowg2.gif" alt="" width="9" height="5" /> 
  information</p>
    <div class="news">
      <h3><img src="https://img.webme.com/pic/p/poniex/titre2.jpg" alt="" width="12" height="9" /> Gallery </h3>
      <ul>
        <li><a href="http://www.free-css.com/">Gallery 1</a></li>
        <li><a href="http://www.free-css.com/">Gallery 2</a></li>
        <li><a href="http://www.free-css.com/">Gallery 3</a></li>
        <li><a href="http://www.free-css.com/">Gallery 4</a></li>
        <li><a href="http://www.free-css.com/">Gallery 5</a></li>
        <li class="last"><a href="http://www.free-css.com/">Gallery 6</a></li>
      </ul>
      <p class="comment"><img src="https://img.webme.com/pic/p/poniex/arrow_or.gif" alt="" width="9" height="5" /> 
      Selection of march ... </p>
      <p class="comment"><img src="https://img.webme.com/pic/p/poniex/arrow_or.gif" alt="" width="9" height="5" /> 
      Selection of april ... </p>
      <p class="comment"><img src="https://img.webme.com/pic/p/poniex/arrow_or.gif" alt="" width="9" height="5" /> 
      Selection of may ... </p>
      <p class="comment">Reprehenderit in voluptate velit esse cillum dolore eu 
      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
      sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
      <a href="http://www.free-css.com/">More Info...</a><br />
      <br />
    </div>
    <p class="text_left">Reprehenderit in voluptate velit esse cillum dolore eu 
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
  in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p><a href="http://www.free-css.com/"><img  class="img" src="https://img.webme.com/pic/p/poniex/mail.jpg" alt="mail" width="64" height="52" /><br />
      </a><a href="http://validator.w3.org/check/referer"> Validate XHTML 1.0 
  Strict</a><br />
      and Css <br />
    </p>
  </div>
  <div id="right">
    <p class="title_right"><img src="http://img200.imageshack.us/img200/1930/arrowg2.gif" alt="" width="9" height="5" /> 
  Some news</p>
    <h3 class="right_titre"> <img src="https://img.webme.com/pic/p/poniex/titre2.jpg" alt="" width="12" height="9" /> 
  About</h3>
    <div id="info">
      <h3> Minim veniam:</h3>
      <p> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
      exercitation ullamco laboris nisi ut<br />
      </p>
      <h3> Archives:</h3>
      <p><img src="https://img.webme.com/pic/p/poniex/arrow_or.gif" alt="" width="9" height="5" /> last news 
      ( juin 2007)<br />
        <img src="https://img.webme.com/pic/p/poniex/arrow_or.gif" alt="" width="9" height="5" /> last news 
      ( juillet 2007)<br />
        <img src="https://img.webme.com/pic/p/poniex/arrow_or.gif" alt="" width="9" height="5" /> last news 
      (aout 2007)<br />
      </p>
    </div>
    <p > </p>
    <h3 class="right_titre"> <img src="https://img.webme.com/pic/p/poniex/titre2.jpg" alt="" width="12" height="9" /> 
  Minim veniam:</h3>
    <p > </p>
    <p class="right_texte" >"Lorem ipsum dolor sit amet, consectetur adipisicing 
  elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
  enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br />
      <a href="http://www.free-css.com/">More Info...</a></p>
    <p > </p>
    <p class="right_texte" ><img src="https://img.webme.com/pic/p/poniex/feed.png" alt="feed" width="16" height="16" /> 
  Rss </p>
    <p class="small2" >"Lorem ipsum<a href="http://www.free-css.com/"> dolor sit 
  amet</a>, consectetur " <br />
      quis nostrud exerci tation ullamcorper suscipit lobortis </p>
  </div>



Tasarım altına



Kod:
<div id="footer">
    <p class="text_footer">Copyright © 2008 ("your sitename"). Design by kty <a href=http://csspanel.tr.gg>
  Css Paneli</a>.</p>
  </div>
</div>


Css Bölümü




Kod:
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;}


/* city - an open source xhtml/css website layout by Studio-plume.org kty 
(aug 6, 2008)
 */

body {
margin: 0 auto;
padding: 0;
font: 0.7em "trebuchet ms",arial,sans-serif;
background: #000}

#wrap {
background: #000 url(https://img.webme.com/pic/p/poniex/deg_wrap.jpg) repeat-x center bottom ;
color: #aaa9a9;
border:  none;
margin: 0 auto;
width: 920px;
border-left: 1px #000 solid;
border-right: 1px #000 solid;}


/* header  */
#header {
clear: both;
padding: 0;
height: 260px;background-image: url(https://img.webme.com/pic/p/poniex/920.jpg);
background-repeat: no-repeat;}

#header h3 {
width: 350px;
margin: 0px 0px 0px 25px;
float: left;
font-family: "trebuchet ms",arial,sans-serif;font-size: 0.9em;}

#header p {
width: 400px;
float: left;
text-align: left;
color: #fff;
margin: 70px 0px 0px 350px;
font-size: 0.9em;
line-height: 1.2em;height: 35px;background-color: inherit;}





/*  navigation  */

#nav {
font-size: 1.2em;font-weight: bold;margin-top: -42px;width: 600px;height: 25px;margin-left: 180px;}

#nav ul {
  margin : 0;
  padding : 0;
  list-style : none;
  text-align: center;font-variant: small-caps;
font-weight: bold;}


#nav li {
  float : left;
  font-family: "trebuchet ms",arial,sans-serif;
 }

#nav a {
  display : block;
  padding :  10px;
  color : #FFF;
  text-decoration : none;width: 75px;background-color: inherit;color: #000;
padding: 0px 10px 0px 10px;}

#nav a:hover {
  color : #8E8E6A;background-color: inherit;color: #fff;}
  
  

/* content  */



#content {

padding: 0 10px 0 10px;
line-height: 1.4em;
text-align: left;background-color: #161616;width: 470px;margin-top: 7px;float: left;background-image: url(https://img.webme.com/pic/p/poniex/ht_center2.jpg);background-repeat: no-repeat;background-position: center top;
margin-left: 15px;}


#content h2 {
font-size: 1.2em;
margin: 20px 0em 0em 0em;
font-family: "trebuchet ms",arial,sans-serif;
height: 21px;}

#content img {
padding: 0px;
display:inline;
padding-right: 3px;
margin-left: 8px;}

  .left_articles {
      margin: 15px 15px 0px 0em;
      color: #fff;
      padding: 15px 0px 10px;text-align: justify;background-color: inherit;}.comment {  padding: 0 0 0 12px;
line-height: 1.4em;}
      
      .bigimage {
        float: left;
        clear: left;
        margin: 8px;border: none;}





h3 {
font-size: 1.1em;
margin: 0em 0em 25px;
font-family: "trebuchet ms",arial,sans-serif;text-transform: uppercase;width: 196px;
color: #fff;}




a {
text-decoration: none;
color: #657536;background-color: inherit;}

a:hover {
text-decoration: underline;
color: #819545;background-color: inherit;}




/* left side  */


#left {

float: left;
margin: 12px 0em 20px 10px;
list-style: none;background-position: left top;background-color: #161616;background-image: url(https://img.webme.com/pic/p/poniex/ht_menu2.jpg);background-repeat: no-repeat;height: auto;
width: 185px;}





.text_left{margin: 35px 0em 10px;width: 175px;
color: #aaa9a9;line-height: 1.2em;padding-left: 2px;background-repeat: no-repeat;background-position: top center;background-color: #232325;border: 1px #2e2e2e dashed;}



.news {
margin: 35px 0em 10px 0px;width: 175px;
color: #fff;line-height: 1.2em;background-repeat: no-repeat;background-position: top center;background-color: #232325;border: 1px #2e2e2e dashed;}





/* right side  */

#right {

float: right;
width: 206px;
margin: 10px 0em;
padding: 0;
font-size: 1em;list-style: none;background-position: left top;background-color: #161616;background-image: url(https://img.webme.com/pic/p/poniex/ht_right2.jpg);background-repeat: no-repeat;}

.right_titre{
margin: 0em 0em 0em 30px;
text-align: center;width: 150px;}

.right_texte{
margin: 0em 0em 0em 5px;
text-align: left;width: 150px;

}

#info {
float: right;
width: 170px;
margin: 18px 15px 10px 5px;
padding: 3px;
line-height: 1.5em;
text-align: left;background-color: #667731;}

#info p {
margin: 0em 0em 0em 2px;
font-style: italic;
color: #fff;
background-color: #566529;
padding: 3px;}


#info h3 {
margin: 0em 0em 0em 5px;
text-align: center;width: 150px;
font-size: 0.9em;
font-style: italic;
color: #fff;}




/* footer part  */

#footer {
clear: both;
margin: auto 0em auto;
padding: 0;
width: 920px;
text-align: center;
color: #a5a5a5;
font-size: 0.9em;background: #000 url(https://img.webme.com/pic/p/poniex/bg_footer.jpg) no-repeat left center ;border: none;height: 36px;
}

#footer a {
color: #ccc;
text-decoration: none;background-color: inherit;}

#footer a:hover {
text-decoration: underline;
}
.text_footer {
font-size: 0.9em;
padding-top: 10px;}



/* others  */

.title_left {
font-size: 0.9em;
margin: 15px 0em 25px 10px;
font-family: "trebuchet ms",arial,sans-serif;text-transform: uppercase;color: #7e9144;padding-left: 30px;}

.title_right {
font-size: 0.8em;
margin: 24px 0em 25px 10px;
font-family: "trebuchet ms",arial,sans-serif;text-transform: uppercase;color: #7e9144;padding-left: 30px;}


.left {
margin: 0px 7px 0px;
float: left;
}

.right {
margin: 0px 7px 0px 5px;
float: right;
}



.small {
font-size: 0.85em;
padding-top: 10px;
color: #4f4f53;
text-align: center;}


.small2 {
font-size: 0.85em;
padding-top: 10px;
color: #aaa9a9;
text-align: left;}

.bold {
font-weight: bold;
}

.img {border: none;}

Paylaşan.NET Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol