Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj25.08.2009, 15:35 (UTC)    
Mesaj konusu: <<-E-DaVuT DUYURU PANOLARI->>

EWT ARKADAŞLAR BU PANOLARI NASIL YAPTIĞIMI AÇIKLAYACAĞIM



ŞİMDİ 3 TANE AYRI RESİM VAR 3 AYRI RESMİ NASIL PANO YAPABİLİRM

ŞİMDİ DÜZ MANTIK GİDERSEK ÖRNEK 3 SÜTUNLU TABLO AÇARIZ HER SÜTÜNUN ARKAPALNINI BU RESİMLERİ KOYARIZ BÖLE YAPINCA RESİMLER İKİYE KATLANABİLİR BAZI TARAYICILARDA NORAMAL BAZILARINDA ANORMAL ÇIKABİLİR.

ASIL MANTIĞIMIZ İSE BU :

TASARIM KODLARKENKİ GİBİ ŞU KODLARI KULLANDIM

Kod:
#yesil{
background: url(http://img.webme.com/pic/e/e-davut/konuyesil.png);
width: 222px;
height: 222px;
}


#mavi{
background: url(http://img.webme.com/pic/e/e-davut/konumavi.png);
width: 222px;
height: 222px;
}


#sari{
background: url(http://img.webme.com/pic/e/e-davut/konusari.png);
width: 222px;
height: 222px;
}

Tabiki bu kodlar css bölümünde olacak



Şimdi tasarım kodlarken nasıl sa bundada göstereceğimiz yere başlamadan şu kodu kullanıyoruz

Kod:
<div id="yesil">yesil bölüm</div>



ŞİMDİ BUNLARI ŞÖLE YAPINCA

Kod:
<div id="yesil">yesil bölüm</div>

<div id="mavi">mavi bölüm</div>

<div id="sari">sari bölüm</div>


Böle yaparsak kesinlikle alt altta olacaktır bunu engellemek içinse düz mantıkta kullandığım gibi tablo açacağız

Kod:
<center>
<table width="222" border="0" cellpadding="1" cellspacing="1">
    <tbody>
        <tr>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                       
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                       
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>


Ama tablodada gördüğünüz gibi düzgün olması için ilk olarak 3 sütünlu tablo sonrada her sütünün içine 1satır 1 sütünlu tablo açıyoruz

Ve 1 sütün 1 tablo bölümünün içine şu kodu yazacağız

Mavi tablo için
Kod:
<div id="mavi">mavi<div>


Sari tablo İçin
Kod:
<div id="sari">sari<div>


Yeşil Tablo için
Kod:
<div id="yesil">yesil<div>]



Bunları yaptıktan sonra tam kod şu olacak

Kod:

<table width="222" border="0" cellpadding="1" cellspacing="1">
    <tbody>
        <tr>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                        <div id="yesil"><br /> YESİL BÖLÜM
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                        <div id="sari"><br /> SARI BÖLÜM
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                        <div id="mavi"><br />   MAVİ BÖLÜM
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>



EWT ŞİMDİ KODU VEREYİM

BUNU İLGİLİ SAYFAYA
Kod:
<center>
<table width="222" border="0" cellpadding="1" cellspacing="1">
    <tbody>
        <tr>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                        <div id="yesil"><br /> YESİL BÖLÜM
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                        <div id="sari"><br /> SARI BÖLÜM
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                        <div id="mavi"><br />   MAVİ BÖLÜM
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>


BUNUDA CSS TASARIM KULLANIYOSANIZ CSS BÖLÜMÜNE

Kod:
#yesil{
background: url(http://img.webme.com/pic/e/e-davut/konuyesil.png);
width: 222px;
height: 222px;
}


#mavi{
background: url(http://img.webme.com/pic/e/e-davut/konumavi.png);
width: 222px;
height: 222px;
}


#sari{
background: url(http://img.webme.com/pic/e/e-davut/konusari.png);
width: 222px;
height: 222px;
}



EĞER CSS TASARIM KULLANMIOSANIZ

Kod:
<style type="text/css">

#yesil{
background: url(http://img.webme.com/pic/e/e-davut/konuyesil.png);
width: 222px;
height: 222px;
}


#mavi{
background: url(http://img.webme.com/pic/e/e-davut/konumavi.png);
width: 222px;
height: 222px;
}


#sari{
background: url(http://img.webme.com/pic/e/e-davut/konusari.png);
width: 222px;
height: 222px;
}

</style>

Hata yapmadıysam son hal böle olacak





Resimler görnmüyosa sitemdenbakabilirsiniz


ARKADAŞLAR HERKEZ BİŞEY ÖĞRENSİN DİYE ANLATTIM EMEĞE SAYGI LÜTFEN ALINTI YAPARSANIZ ALINTI DİYE YAZINIZ
Mesaj25.08.2009, 15:43 (UTC)    
Mesaj konusu:

Kod:
<div id="yesil">Yeşil</div>
<div id="sari">Sarı</div>
<div id="mavi">Mavi</div>


bu html kodu yukarda.
css kodu da şöyle:

Kod:
#yesil {
background: url(http://img.webme.com/pic/e/e-davut/konuyesil.png);
width: 222px;
height: 222px;
float: left
}
#sari {
background: url(http://img.webme.com/pic/e/e-davut/konusari.png);
width: 222px;
height: 222px;
float: left
}
#mavi {
background: url(http://img.webme.com/pic/e/e-davut/konumavi.png);
width: 222px;
height: 222px;
float: left
}


yukardaki css kodunu da ekleyince çok pratik şekilde çalışması lazım. bunları kontrol altında rahat tutabilmek için bi container katmanı atarsanız en dışa. ona göre üçünü birden ortalama gibi yeteneklere kavuşursunuz.
aralarına margin filan girmedim girerseniz daha iyi olur zannımca.
______________

Mesaj25.08.2009, 20:09 (UTC)    
Mesaj konusu:

ben yazdığım şekilde yaptım oldu eğer css kullanıyosanız css bölümünün oraya koyup kullanabilirsiniz sorunsuz oluyor fakat css kullanmayanlar için dediğiniz olabilir ben css kullandığım tasarımımda denemedim
Mesaj25.08.2009, 20:17 (UTC)    
Mesaj konusu:

csstore yazmış:
Kod:
<div id="yesil">Yeşil</div>
<div id="sari">Sarı</div>
<div id="mavi">Mavi</div>


bu html kodu yukarda.
css kodu da şöyle:

Kod:
#yesil {
background: url(http://img.webme.com/pic/e/e-davut/konuyesil.png);
width: 222px;
height: 222px;
float: left
}
#sari {
background: url(http://img.webme.com/pic/e/e-davut/konusari.png);
width: 222px;
height: 222px;
float: left
}
#mavi {
background: url(http://img.webme.com/pic/e/e-davut/konumavi.png);
width: 222px;
height: 222px;
float: left
}


yukardaki css kodunu da ekleyince çok pratik şekilde çalışması lazım. bunları kontrol altında rahat tutabilmek için bi container katmanı atarsanız en dışa. ona göre üçünü birden ortalama gibi yeteneklere kavuşursunuz.
aralarına margin filan girmedim girerseniz daha iyi olur zannımca.


Ayrıyetten bu şekilde tasarımda kullanılırsa panolar alt alta olacaktır bu yüzden tablo açıp tablonun içerik kısmında kodları kullanmalarını tavsiye ettim kullanıcılara

html kodu

Kod:

<center>
<table width="222" border="0" cellpadding="1" cellspacing="1">
    <tbody>
        <tr>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                        <div id="yesil"><br /> YESİL BÖLÜM
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                        <div id="sari"><br /> SARI BÖLÜM
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table width="222" border="0" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                        <div id="mavi"><br />   MAVİ BÖLÜM
                       
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>



Css kodu

Kod:

#yesil{
background: url(http://img.webme.com/pic/e/e-davut/konuyesil.png);
width: 222px;
height: 222px;
}


#mavi{
background: url(http://img.webme.com/pic/e/e-davut/konumavi.png);
width: 222px;
height: 222px;
}


#sari{
background: url(http://img.webme.com/pic/e/e-davut/konusari.png);
width: 222px;
height: 222px;
}



Gerçi belki daha basit yöntemi var belki ama ben mantıken yazdım kodları yani css olsun html olsun javascirpt OLSUN herhangi biri bana anlattamadı 3 senede anca öğrendim Very Happy Very Happy ilk sene html 2. sene javascript 3. sene da bu sene oluyor css öğrendim Very Happy Very Happy biraz geç oldu ama en azından bişeyler öğrendim hehe. Very Happy
Mesaj26.08.2009, 07:51 (UTC)    
Mesaj konusu:

E ARKADAŞLAR O KADAR ANLTAMAK İÇİN UĞRAŞTIM YORUM YOKMU?
Mesaj26.08.2009, 07:52 (UTC)    
Mesaj konusu:

güzel anlatım ve paylasım Wink
______________
Mesaj26.08.2009, 07:53 (UTC)    
Mesaj konusu:

OncelıkLE pAYlasım iCin teşekkürLer..
CubukLarı nasıL CizDin onunda anlatımını Yaparmısn

______________
Mesaj26.08.2009, 08:22 (UTC)    
Mesaj konusu:

devkodservisi yazmış:
OncelıkLE pAYlasım iCin teşekkürLer..
CubukLarı nasıL CizDin onunda anlatımını Yaparmısn



photoshoptan çizdim çubukları
Mesaj26.08.2009, 19:25 (UTC)    
Mesaj konusu:

Çok Basit Çok SaDe Biraz ŞekillenDirSen Daha iYi Olur Wink
______________
Click www.noktasoft.net
Mesaj26.08.2009, 19:51 (UTC)    
Mesaj konusu:

csstore nin kodu'nu tavsiye ederim eğer css tasarım kullanmıyorsanız

css kod kısmımnı
Kod:
<style type="text/css">
buraya
</style>

arasına ekleyip tasarım üstüne eklemeniz yeterli

html de tablo aslında tasarım için üretilen birşey değil ama css in uyumluluk sorunu ve html de tablo oluşturmanın kolay olması böyle bir duruma sürükledi herkezi
Mesaj27.08.2009, 08:39 (UTC)    
Mesaj konusu:

e-davut yazmış:
devkodservisi yazmış:
OncelıkLE pAYlasım iCin teşekkürLer..
CubukLarı nasıL CizDin onunda anlatımını Yaparmısn



photoshoptan çizdim çubukları


Ama nasıL ResimLi anLatım varsa Yaparmısnız Veya Başka yerde Varmı Link pm aTın ?
______________
Mesaj27.08.2009, 08:53 (UTC)    
Mesaj konusu:

Bu pano her siteye lazım Wink
______________


Mesaj27.08.2009, 09:01 (UTC)    
Mesaj konusu:

duyuru panosunun css bölümünde ne işi var?
______________


Dersim-Online Yeni Tasarımla Karşınızda!
Mesaj27.08.2009, 10:00 (UTC)    
Mesaj konusu:

dersim-online yazmış:
duyuru panosunun css bölümünde ne işi var?



KODLARI CSS İLE KULLANDIM O İŞİ VAR
Mesaj27.08.2009, 13:21 (UTC)    
Mesaj konusu:

e-davut yazmış:
dersim-online yazmış:
duyuru panosunun css bölümünde ne işi var?



KODLARI CSS İLE KULLANDIM O İŞİ VAR


iyi o zaman beyfendi biz css kodu olan herşeyi forumda paylaşalım!
______________


Dersim-Online Yeni Tasarımla Karşınızda!
Önceki mesajları göster:   


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