» » » » » » » » » » » » Css'de Div ve Açılır Menü Örneği
11 Ocak 2016 Pazartesi

12:34:00
Örnek:Aşağıdaki sayfada div ve açılır menü kullanılmıştır.
Tasarımın genel görünümü
Yukarıdaki sayfayı oluşturmak için aynı klasörde bir css dosyası bir de html dosyası oluşturuyoruz. Css sayfasındaki kodları html sayfasında çağırıyoruz.

 index.html kodları:

 <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>

 <body>
<div id="kapsayici">
  <div id="ust"></div>
<div id="logo"></div>
<div id="menu">
 <ul>
   <li><a href="anasayfa.html">ANASAYFA </a></li>
   <li><a href="ürünlerimiz.html">ÜRÜNLERİMİZ</a>
     <ul>
       <li><a href="A">Yağlar</a></li>
            <li><a href="A">Ballar</a></li>
       <li><a href="A">Macun</a></li>
       <li><a href="A">Kremler</a></li>
       <li><a href="A">Baharatlar</a></li>
       <li><a href="A">Çaylar</a></li>
     </ul>
   </li>
   <li><a href="hakkimizda.html">HAKKIMIZDA</a></li>
   <li><a href="iletisim.html">İLETİŞİM</a></li>
   <li><a href="mesaj.html">MESAJ GÖNDER</a></li>
      </ul>
    </div>
<div id="ortasol"><p class="yazi1">ŞİFALI BİTKİLER</p>
    <p class="yazi2"><a href="bkullanımı.html">& Baharat Kullanımı</a></p>
    <p class="yazi2"><a href="bgücü.html">& Baharatın Gücü</a></p>
    <p class="yazi2"><a href="bbakım.html">& Bitkilerle Bakım</a></p>
    <p class="yazi2"><a href="btarihi.html">& Bitkilerin Tarihi</a></p>
    <p class="yazi2"><a href="böyküsü.html">& Baharatın Öyküsü</a></p>
    
    </div>

 <div id="ortasag"></div>

 </div>
</body>

</html>

 stil.css kodları:

 @charset "utf-8";
/* CSS Document */

 #kapsayici
{border:2px solid #000000;
width:850px;
height:900px;
background-color:#006666;
margin-left:auto;
margin-right:auto;
}

 #ust
{background-color:#008357;
height:50px;
border:2px solid #000000;
}

 #logo
{background-image:url(14vk26w.png);
height:200px;
}

 #menu
{height:60px;
border:2px solid #000000;
}

 #kapsayici ul
{margin: 0px;
padding: 0px;
list-style-type: none;
border:2px solid #000000;
}

 #kapsayici li
{position: relative;
float: left;
border:4px solid #000000;
}

 #kapsayici li:hover ul
{display: block;
}
#kapsayici ul li ul
{display: none;
position: absolute;
}

 #kapsayici a
{width:130px;
display: block;
background-color:#005200;
padding: 10px;
margin: 5px;
text-decoration: none;
color:#FFFFFF;
}

 #ortasol
{background-color:#009966;
height:555px;
width:250px;
float:left;
margin-top:30px;
}

 .yazi1
{font-size:24px;
color:#FFFFFF;
padding-left:30px;
}

 .yazi2
{font-size:18px;
color:#FFFFFF;
}

 #ortasol ul
{margin: 0px;
padding: 0px;
list-style-type: none;
border:2px solid #000000;
}

 #ortasol li
{position: relative;f
loat: left;
border:4px solid #000000;
}

 #ortasol ul li ul
{display: none;
position: absolute;
}

 #ortasol a
{width:160px;
display: block;
background-color:#009966;
padding: 10px;
margin: 5px;
text-decoration: none;
color:#FFFFFF;
}

 #ortasag
{background-color:#006666;
height:555px;
width:590px;
float:right;
margin-top:30px;
}

Linkler için diğer sayfaları da oluşturalım.
bkullanımı.html kodları:

 <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="stil.css">

 </head>

 <body>
<div id="kapsayici">
  <div id="ust"></div>
<div id="logo"></div>
<div id="menu">
 <ul>
   <li><a href="anasayfa.html">ANASAYFA </a></li>
   <li><a href="ürünlerimiz.html">ÜRÜNLERİMİZ</a>
     <ul>
       <li><a href="A">Yağlar</a></li>
            <li><a href="A">Ballar</a></li>
       <li><a href="A">Macun</a></li>
       <li><a href="A">Kremler</a></li>
       <li><a href="A">Baharatlar</a></li>
       <li><a href="A">Çaylar</a></li>
     </ul>
   </li>
   <li><a href="hakkimizda.html">HAKKIMIZDA</a></li>
   <li><a href="iletisim.html">İLETİŞİM</a></li>
   <li><a href="mesaj.html">MESAJ GÖNDER</a></li>
      </ul>
    </div>
<div id="ortasol"><p class="yazi1">ŞİFALI BİTKİLER</p>
    <p class="yazi2"><a href="bkullanımı.html">& Baharat Kullanımı</a></p>
    <p class="yazi2"><a href="bgücü.html">& Baharatın Gücü</a></p>
    <p class="yazi2"><a href="bbakım.html">& Bitkilerle Bakım</a></p>
    <p class="yazi2"><a href="btarihi.html">& Bitkilerin Tarihi</a></p>
    <p class="yazi2"><a href="böyküsü.html">& Baharatın Öyküsü</a></p>
    </div>

 <div id="ortasag"><center class="stil7">Baharat Kullanımı</center>
      
</div>
</div>
</body>

</html>

bgücü.html kodları:

 <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="stil.css">
<style type="text/css">
<!--
.stil1 {
font-size: 36px;
color: #FFFFFF;
}
-->
</style>
</head>

 <body>
<div id="kapsayici">
  <div id="ust"></div>
<div id="logo"></div>
<div id="menu">
 <ul>
   <li><a href="anasayfa.html">ANASAYFA </a></li>
   <li><a href="ürünlerimiz.html">ÜRÜNLERİMİZ</a>
     <ul>
       <li><a href="A">Yağlar</a></li>
            <li><a href="A">Ballar</a></li>
       <li><a href="A">Macun</a></li>
       <li><a href="A">Kremler</a></li>
       <li><a href="A">Baharatlar</a></li>
       <li><a href="A">Çaylar</a></li>
     </ul>
   </li>
   <li><a href="hakkimizda.html">HAKKIMIZDA</a></li>
   <li><a href="iletisim.html">İLETİŞİM</a></li>
   <li><a href="mesaj.html">MESAJ GÖNDER</a></li>
      </ul>
    </div>
<div id="ortasol"><p class="yazi1">ŞİFALI BİTKİLER</p>
    <p class="yazi2"><a href="bkullanımı.html">& Baharat Kullanımı</a></p>
    <p class="yazi2"><a href="bgücü.html">& Baharatın Gücü</a></p>
    <p class="yazi2"><a href="bbakım.html">& Bitkilerle Bakım</a></p>
    <p class="yazi2"><a href="btarihi.html">& Bitkilerin Tarihi</a></p>
    <p class="yazi2"><a href="böyküsü.html">& Baharatın Öyküsü</a></p>
    </div>

 <div class="stil1" id="ortasag"><center>BAHARATIN GÜCÜ</center></div>
</div>
</body>

</html>
bbakım.html kodları:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="stil.css">
<style type="text/css">
<!--
.stil1 {
font-size: 36px;
color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="kapsayici">
  <div id="ust"></div>
<div id="logo"></div>
<div id="menu">
 <ul>
   <li><a href="anasayfa.html">ANASAYFA </a></li>
   <li><a href="ürünlerimiz.html">ÜRÜNLERİMİZ</a>
     <ul>
       <li><a href="A">Yağlar</a></li>
            <li><a href="A">Ballar</a></li>
       <li><a href="A">Macun</a></li>
       <li><a href="A">Kremler</a></li>
       <li><a href="A">Baharatlar</a></li>
       <li><a href="A">Çaylar</a></li>
     </ul>
   </li>
   <li><a href="hakkimizda.html">HAKKIMIZDA</a></li>
   <li><a href="iletisim.html">İLETİŞİM</a></li>
   <li><a href="mesaj.html">MESAJ GÖNDER</a></li>
      </ul>
    </div>
<div id="ortasol"><p class="yazi1">ŞİFALI BİTKİLER</p>
    <p class="yazi2"><a href="bkullanımı.html">& Baharat Kullanımı</a></p>
    <p class="yazi2"><a href="bgücü.html">& Baharatın Gücü</a></p>
    <p class="yazi2"><a href="bbakım.html">& Bitkilerle Bakım</a></p>
    <p class="yazi2"><a href="btarihi.html">& Bitkilerin Tarihi</a></p>
    <p class="yazi2"><a href="böyküsü.html">& Baharatın Öyküsü</a></p>
    </div>

<div class="stil1" id="ortasag"><center>BİTKİLERLE BAKIM</center></div>
</div>
</body>
</html>

btarihi.html kodları:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="stil.css">
<style type="text/css">
<!--
.stil1 {
font-size: 36px;
color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="kapsayici">
  <div id="ust"></div>
<div id="logo"></div>
<div id="menu">
 <ul>
   <li><a href="anasayfa.html">ANASAYFA </a></li>
   <li><a href="ürünlerimiz.html">ÜRÜNLERİMİZ</a>
     <ul>
       <li><a href="A">Yağlar</a></li>
            <li><a href="A">Ballar</a></li>
       <li><a href="A">Macun</a></li>
       <li><a href="A">Kremler</a></li>
       <li><a href="A">Baharatlar</a></li>
       <li><a href="A">Çaylar</a></li>
     </ul>
   </li>
   <li><a href="hakkimizda.html">HAKKIMIZDA</a></li>
   <li><a href="iletisim.html">İLETİŞİM</a></li>
   <li><a href="mesaj.html">MESAJ GÖNDER</a></li>
      </ul>
    </div>
<div id="ortasol"><p class="yazi1">ŞİFALI BİTKİLER</p>
    <p class="yazi2"><a href="bkullanımı.html">& Baharat Kullanımı</a></p>
    <p class="yazi2"><a href="bgücü.html">& Baharatın Gücü</a></p>
    <p class="yazi2"><a href="bbakım.html">& Bitkilerle Bakım</a></p>
    <p class="yazi2"><a href="btarihi.html">& Bitkilerin Tarihi</a></p>
    <p class="yazi2"><a href="böyküsü.html">& Baharatın Öyküsü</a></p>
    </div>

<div class="stil1" id="ortasag"><center>BİTKİLERİN TARİHİ</center></div>
</div>
</body>
</html>

böyküsü.html kodları:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="stil.css">
<style type="text/css">
<!--
.stil1 {
font-size: 36px;
color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="kapsayici">
  <div id="ust"></div>
<div id="logo"></div>
<div id="menu">
 <ul>
   <li><a href="anasayfa.html">ANASAYFA </a></li>
   <li><a href="ürünlerimiz.html">ÜRÜNLERİMİZ</a>
     <ul>
       <li><a href="A">Yağlar</a></li>
            <li><a href="A">Ballar</a></li>
       <li><a href="A">Macun</a></li>
       <li><a href="A">Kremler</a></li>
       <li><a href="A">Baharatlar</a></li>
       <li><a href="A">Çaylar</a></li>
     </ul>
   </li>
   <li><a href="hakkimizda.html">HAKKIMIZDA</a></li>
   <li><a href="iletisim.html">İLETİŞİM</a></li>
   <li><a href="mesaj.html">MESAJ GÖNDER</a></li>
      </ul>
    </div>
<div id="ortasol"><p class="yazi1">ŞİFALI BİTKİLER</p>
    <p class="yazi2"><a href="bkullanımı.html">& Baharat Kullanımı</a></p>
    <p class="yazi2"><a href="bgücü.html">& Baharatın Gücü</a></p>
    <p class="yazi2"><a href="bbakım.html">& Bitkilerle Bakım</a></p>
    <p class="yazi2"><a href="btarihi.html">& Bitkilerin Tarihi</a></p>
    <p class="yazi2"><a href="böyküsü.html">& Baharatın Öyküsü</a></p>
    </div>

<div class="stil1" id="ortasag"><center>BAHARATIN ÖYKÜSÜ</center></div>
</div>
</body>
</html>
Gönderen zaman: 12:34:00
Etiketler: , , , , , , , , , ,

0 yorum :

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )