Forum'da ara:
Ara


Yazar Mesaj
Mesaj30.10.2008, 21:30 (UTC)    
Mesaj konusu: Organic Beauty CSS Tasarim
Alıntıyla Cevap Gönder
Tasarım Önizleme ; http://csscreme.com/freetemplates/organic_beauty/

Tasarım'ın üstüne ;


Kod:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Organic Beauty</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>


<div id="header">
        <div id="menu_tab">
                <ul class="menu">
                     <li><a href="index.html" class="nav_selected"> home </a></li>
                     <li><a href="products.html" class="nav"> about us</a></li>
                     <li><a href="products.html" class="nav"> services</a></li>
                     <li><a href="products.html" class="nav"> products</a></li>
                     <li><a href="contact.html" class="nav"> order online </a></li>

                </ul>
        </div>
</div>
   
<div id="main_container">
   
   <div id="main_content">


______________________________________________

Tasarım'ın altına ;

Kod:
 </div>

           
       <div class="center_content">
                   
            <div class="left_content">
            <div class="left_box">
                <p class="left_text">
                <img src="images/lime.jpg" width="138" height="166" border="0" alt="" title="" class="right_img" />
               
                <img src="images/title1.gif" width="213" height="24" border="0" alt="" title="" /><br /><br />
               
               
                 
                </p>               
                </div>
               
               
                <h2>About <span style="color:#56644b;font-weight: normal;">our products</span></h2>
                   
                         <p class="right_box">
                       
                                             
                        </p>
                                       
                        </p>                     

                         <p class="right_box">
                          <img src="images/p2.jpg" width="60" height="89" border="0" class="img_left" />
                                             
                        </p> 


                         <p class="right_box">
                          <img src="images/p1.jpg" width="62" height="62" border="0" class="img_left" />
                                             
                        </p> 

                   
           </div> <!-- end of left_content -->
           
 
 
                <div class="right_content">
               <h1>Darkvadi.tr.gg</h1>
                   
                    <div class="right_box">
                       <div class="box_title">"Darkvadi Tasarm "</div>
                        <p class="right_box">
                                               
                        </p>                   
                    </div>
                     <div class="right_box">
                       <div class="box_title">"Lorem ipsum dolor sit amet, consectetur"</div>
                        <p class="right_box">
                       "                         
                        </p>                   
                    </div>                   
 
 
 
                     <div class="right_box">
                       <div class="box_title">"Lorem ipsum dolor sit amet, consectetur"</div>
                                               
                        </p>                   
                    </div>

 
                     <div class="right_box">
                       <div class="box_title">"Lorem ipsum dolor sit amet, consectetur"</div>
                                               
                        </p>                   
                    </div>
                   
                  <div class="right_bottom">
                  <img src="images/flowers.jpg" width="150" height="130" alt="" title="" />
                 
                  </div> 
                   
                   
                </div> <!-- end of right_content -->
               
         </div><!-- end of center_content -->       

   </div>
    <!-- end of main_content -->
   
<div id="footer">

   <div id="copyright">
    <div style="float:left; padding:3px;"><a href="#"><img src="images/footer_logo.gif" width="38" height="36" alt="" title="" border="0" /></a></div>
    <div style="float:left; padding:14px 10px 10px 10px;"> Company name.&copy; All Rights Reserved 2008 - By <a href="http://csscreme.com" style="color:#772c17;">csscreme</a></div>
    </div>
   
   
    <ul class="footer_menu">
       <li><a href="index.html" class="nav_footer">  home </a></li>
        <li><a href="products.html" class="nav_footer">  about </a></li>
        <li><a href="products.html" class="nav_footer">  sitemap </a></li>
        <li><a href="contact.html" class="nav_footer">  contact </a></li>
    </ul>

</div>


</div>
<!-- end of main_container -->

</body>
</html>


_____________________________________________

CSS Koduna ;


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


body
{
background-color:#fff;
padding:0; font-family: Arial, Helvetica, sans-serif;
margin:0px auto auto auto;
color:#424849;
font-size:12px;
}
h1{
font-size:16px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#1a5114;
width:180px;
padding:15px 5px 2px 5px;
margin: auto;
text-decoration:none;
border-bottom:1px #CCCCCC dashed;
}
h2{
font-size:18px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#63a130;
width: auto;
padding:15px 5px 2px 10px;
margin: auto;
font-style:italic;
text-decoration:none;
}
img.img_left{
float:left;
padding:0px 8px 8px 0px;
}
#header{
width:100%;
height:97px;
background:url(http://img.webme.com/pic/d/darkvadi/top_bg.jpg) repeat-x top;
margin:0px;
}
#main_container{
width:780px;
height:auto;
margin:auto;
padding:0px;
}
#logo{
width:164px;
height:49px;
float:left;
padding:10px 0 0 5px;
}
/*------------------------------main content-----------------------*/
#main_content{
width:780px;
margin:auto;
clear:both;
background-color:#FFFFFF;
}

/*---------------- menu tab----------------------*/
#menu_tab{
width: auto;
text-align:center;
height:34px;
margin:auto;
padding-top:50px;
}

ul.menu {
list-style-type:none; display:block; width:475px;
 margin: auto; padding:0px; background:none;}

ul.menu li {
display:inline;
font-size:14px;
font-weight:bold;
line-height:34px;}

a.nav:link, a.nav:visited {
display:block; float:left; padding:0px 15px 0px 15px; margin:0;height:34px;
text-decoration:none; background:none; color:#FFFFFF;}

a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px 15px 0px 15px; margin:0; height:34px;
text-decoration:none;background:none; color: #009900;}

a.nav:hover {
color:#009900;}



/*------------------------middle_content-----------*/
.center_content{
width:780px;
height:auto;
clear:both;
}
.left_content{
width:410px;
float:left;
margin-right:5px;

}
.left_box{
background:url(http://img.webme.com/pic/d/darkvadi/center_box_bg.jpg) no-repeat center;
width:409px;
height:213px;
}
p.left_text{
padding:25px 20px 20px 20px;
font-size:11px;
text-align:justify;
}
img.right_img{
float:right;
padding:17px 0 10px 10px;
}

.right_content{
width:321px;
height: auto;
border:1px #f6f5f5 solid;
border-left-width:3px;
border-left-color:#E8E8E8;
float:left;
margin-top:18px;
background:url(http://img.webme.com/pic/d/darkvadi/right_tab_bg.jpg) no-repeat top center;
}
.right_box{
padding:10px 10px 0px 10px;
margin:auto;
}
.box_title{
background:url(images/leaf.gif) no-repeat left;
background-position:0px 0px;
padding-left:25px;
font-size:11px;
font-weight:bold;
padding-bottom:10px;
padding-top:5px;
}
p.right_box{
padding:5px;
text-align:justify;
font-size:11px;
clear:both;
}
.right_bottom{
padding:10px 5px 0 0;
text-align:right;
}

.prod_box{
padding:5px;
border:1px #C2CA91 solid;
float:left;
text-align:center;
font-size:11px;
margin:10px;
}
div.pagination {
   padding:5px;
   margin:5px;
   text-align:center;
   float:left;
   font-size:10px;
}

div.pagination a {
   padding: 2px 5px 2px 5px;
   margin-right: 2px;
   border: 1px solid #ddd;
   
   text-decoration: none;
   color: #88AF3F;
}
div.pagination a:hover, div.pagination a:active {
   border:1px solid #85BD1E;
   color: #fff;
   background-color: #519F31;
}
div.pagination span.current {
   padding: 2px 5px 2px 5px;
   margin-right: 2px;
   border: 1px solid #B2E05D;
   font-weight: bold;
   background-color: #519F31;
   color: #FFF;
}
div.pagination span.disabled {
   padding: 2px 5px 2px 5px;
   margin-right: 2px;
   border: 1px solid #f3f3f3;
   color: #ccc;
}
/*-----------------------------------------------*/
.contact_tab{
width:270px;
height:auto;
padding:30px;
background-color:#f4f6f9;
margin:5px auto 5px auto;
}
#fields label {
   width: 260px;
   display: block;
   padding: 0px;
}
#fields input {
   border: 1px solid #C8D2D9;
   margin: 0 0 3px 0;
   width: 260px;
}
#fields textarea {
   border: 1px solid #C8D2D9;
   margin: 0 0 3px 0;
   width: 260px;
   height: 63px;
}
#send input {
   width: 80px;
   height: 25px;
   margin: 0px;
}


/*-------------------footer------------------------*/
#footer{
width:780px;
height:41px;
clear:both;
font-size:11px;
background:url(http://img.webme.com/pic/d/darkvadi/footer_bg.gif) repeat-x;
}
ul.footer_menu {
list-style:none; float:right; display:block; width:520;
margin:0px; padding:9px 20px 0 0px;
}

ul.footer_menu li {
display:inline; font-size:11px;}

a.nav_footer:link, a.nav_footer:visited {
display:block; float:left; padding:5px 6px 5px 10px; margin:0;
text-decoration:none; color:#2F2626;}

a.nav_footer:hover {
display:block; float:left; padding:5px 6px 5px 10px; margin:0;
text-decoration:underline; color:#2F2626;}

a.nav_footer:active {
display:block; float:left; padding:5px 6px 5px 10px; margin:0;
text-decoration:none;  color:#2F2626;}

#copyright{
float:left;
padding:0px;
}


Not ; Tasarım'daki gerekli yazı ve link'leri kendi sitenize göre ayarlayın , Teşekkür edin benm için yeterlidir Smile
______________
↑
Mesaj30.10.2008, 21:39 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
sabit başlıkta paylaş lütfen
______________
↑
Önceki mesajları göster:   
  • 1. sayfa (Toplam 1 sayfa)

  •  
    • Geçiş Yap:  


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu

© 2024 webme GmbH, Almanya, Tüm hakları saklıdır.