Yazar |
Mesaj |
-
e-davut
Bedava-Sitem Bağımlısı
Konum: Napcan Bizemi Gelcen xD
|
25.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 |
|
↑
|
|
|
-
csstore
Bedava-Sitem Bağımlısı
|
25.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. ______________
|
|
↑
|
|
|
-
e-davut
Bedava-Sitem Bağımlısı
Konum: Napcan Bizemi Gelcen xD
|
25.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 |
|
↑
|
|
|
-
e-davut
Bedava-Sitem Bağımlısı
Konum: Napcan Bizemi Gelcen xD
|
25.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;
}
|
|
↑
|
|
|
-
e-davut
Bedava-Sitem Bağımlısı
Konum: Napcan Bizemi Gelcen xD
|
26.08.2009, 07:51 (UTC) Mesaj konusu: |
|
|
E ARKADAŞLAR O KADAR ANLTAMAK İÇİN UĞRAŞTIM YORUM YOKMU? |
|
↑
|
|
|
-
alperen-ocak
Uzman Üye
|
26.08.2009, 07:52 (UTC) Mesaj konusu: |
|
|
güzel anlatım ve paylasım ______________ |
|
↑
|
|
|
-
devkodservisi
Uzman Üye
Konum: [..:: İstanbul ::..] l Lütfen Sorularınızı Forumda Sorun !
|
26.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______________ |
|
↑
|
|
|
-
e-davut
Bedava-Sitem Bağımlısı
Konum: Napcan Bizemi Gelcen xD
|
26.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ı |
|
↑
|
|
|
-
onetake
Bedava-Sitem Bağımlısı
Konum: Durmaz
|
26.08.2009, 19:25 (UTC) Mesaj konusu: |
|
|
Çok Basit Çok SaDe Biraz ŞekillenDirSen Daha iYi Olur ______________ Click www.noktasoft.net |
|
↑
|
|
|
-
styletype
Acemi Üye
|
26.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 |
|
↑
|
|
|
-
net-uzman
Bedava-Sitem Bağımlısı
|
27.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 ?______________ |
|
↑
|
|
|
-
fikra-sel
Bedava-Sitem Bağımlısı
Konum: B-s Şehri
|
27.08.2009, 08:53 (UTC) Mesaj konusu: |
|
|
Bu pano her siteye lazım ______________
|
|
↑
|
|
|
-
dersim-online
Bedava-Sitem Bağımlısı
|
27.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! |
|
↑
|
|
|
-
e-davut
Bedava-Sitem Bağımlısı
Konum: Napcan Bizemi Gelcen xD
|
27.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 |
|
↑
|
|
|
-
dersim-online
Bedava-Sitem Bağımlısı
|
27.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! |
|
↑
|
|
|
|