Forum'da ara:
Ara


Yazar Mesaj
Mesaj19.06.2009, 18:25 (UTC)    
Mesaj konusu: Css Resimli Açıklamalı Menu Yapımı







Şeklinde bir açıklamalı menünüz olsun ister misiniz?

Menü yapımında kullanacağımız CSS kodlarımız;
DÜZ YAZI
CSS:

Kod:

      dl {

          float:left; 

          color:#525252;
         width:300px

      }
 

      dt {

          padding-left:40px;

          padding-top:9px;

          padding-bottom:4px;

          color:#666666;

          font-weight:bold;

          background-image:url('30j78d2.gif');

          background-repeat:no-repeat

      }   

       

      dt span {

          border-bottom:1px solid #cccccc

      }

       

      dt.home {

          background-position:0 0

      }


      dt.preferences {

          background-position:0 -33px

      }

       

      dt.web {

          background-position:0 -66px

      }   

       

      dt.users {

          background-position:0 -98px

      }

       

      dt.chart {

          background-position:0 -131px

      }
       

      dt.trash {

          background-position:0 -164px

      }


Resim dosyamız (Sağ tıklayıp kaydedin);








HTML kodlarımız ise şöyle;
DÜZ YAZI
HTML:


Kod:
      <dl>

              <dt class="home">

                  <span>Lorem ipsum dolor</span>

              </dt>

              <dd>

                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />

                  <a href="http://www.cssimbenim.com" title="Detail about Lorem ipsum dolor">more &raquo;</a>

              </dd>

              <dt class="preferences">

                  <span>Donec consectetuer</span>

              </dt>

              <dd>

                  Morbi bibendum lectus vitae lectus bibendum tellus.<br />

                  <a href="http://www.cssimbenim.com" title="Detail about Donec consectetuer">more &raquo;</a>

              </dd>

              <dt class="web">

                  <span>Phasellus semper</span>

              </dt>

              <dd>

                  Nunc non ligula vitae ligula facilisis elementum ligula.<br />

                  <a href="http://www.cssimbenim.com" title="Detail about Phasellus semper">more &raquo;</a>

              </dd>

          </dl>

          <dl>   

              <dt class="users">

                  <span>Cras sit amet</span>

              </dt>

              <dd>

                  Web lapu izstrāde, optimizācija, kā arÄ« korporatÄ«vā stila izstrāde.<br />

                  <a href="http://www.cssimbenim.com" title="Detail about Cras sit amet">more &raquo;</a>

              </dd>

              <dt class="chart">

                  <span>Suspendisse</span>

              </dt>

              <dd>

                  Sed euismod, sapien in imperdiet feugiat, erat purus fringilla mauris.<br />

                  <a href="http://www.cssimbenim.com" title="Detail about Suspendisse">more &raquo;</a>

              </dd>

              <dt class="trash">

                  <span>Nunc dictum</span>

              </dt>

              <dd>

                  Maecenas sed pede eget nunc pellentesque convallis nunc feugiat ligu.<br />

                  <a href="http://www.cssimbenim.com" title="Detail about Nunc dictum">more &raquo;</a>

              </dd>

          </dl>



NOT: ALINTIDIR ALINTIDIR ALINTIDIR ALINTIDIR ALINTIDIR
______________
Forum'da yetkiniz olmadığından dolayı imzanızı değiştirmek durumdayım.
Mesaj19.06.2009, 18:46 (UTC)    
Mesaj konusu:

Yorumlarınızı bekliyorum arkadaşlar
______________
Forum'da yetkiniz olmadığından dolayı imzanızı değiştirmek durumdayım.
Önceki mesajları göster:   


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