Forum Oluşturma

Dreamweaver - Forum Oluşturma Sponsorlu Bağlantılar yeni başladım ama açıkcası hiç bişey üstün körü olsun istemiyorum.oyüzden okumuşsanız amacım aldığım dersleri öncelikle geliştirmek ardından oturup php dilini kitaplardan anlamak ve çalışmak.oyüzden şimdilik form konusunu erteledim.zamanı ...

Cevapla
Forum Oluşturma
aysegüül isimli Üye şimdilik offline konumundadır

aysegüül(29)

Öğrenci (Diğer) / Ankara

Standart
Alt 23-04-2010 #11
Sponsorlu Bağlantılar

yeni başladım ama açıkcası hiç bişey üstün körü olsun istemiyorum.oyüzden okumuşsanız amacım aldığım dersleri öncelikle geliştirmek ardından oturup php dilini kitaplardan anlamak ve çalışmak.oyüzden şimdilik form konusunu erteledim.zamanı gelince oda olur.
ama sizi bulmuşken az öncede yazdığım gibi açılır menü hakkında yardımcı olabilirmisiniz?
Bu mesajdan alıntı yap
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart
Alt 24-04-2010 #12
                             Sponsorlu Bağlantılar
Html ve CSS ile bunu yapabilirsin.

İlk önce menüleri ve alt başlıkları hazırlayalım:
[HTML]
<ul id="menu" >
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Haberler</a>
<ul>
<li><a href="#">şžirket Haberleri </a></li>
<li><a href="#">Yurt içi Haberleri </a></li>
<li><a href="#">Yurt dışı Haberleri</a></li>
</ul>
</li>
<li><a href="#">Ürünler</a>
<ul>
<li><a href="#">Tencere</a></li>
<li><a href="#">Tava</a></li>
<li><a href="#">Ütü</a></li>
<li><a href="#">Tost Makinesi </a></li>
<li><a href="#">El Süpürgesi </a></li>
</ul>
</li>
</ul>
[/HTML]

İlk olarak satır başı boşluklarını ve imgeleri kaldıralım.

ul#menu, ul#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
Daha sonra menümüzü yatay hale getirmek için float özelliğini kullanalım. Normalde bunun için display:inline kodunu da kullanabiliriz.Sonra ilk linkleri göreceli olarak konumlandırmalıyız. Bu konumlandırma aslında ikinci kademe açılacak menüye mutlak konumlandırma yapılması için kullanılır.
ul#menu li {
    float: left;
    position: relative;
    width: 150px;
}
Göreceli olarak konumlandırılmış(postion:relative) bir elementin içindeki Mutlak Konumlandırılmış(position:absolute) bir element içerik blokunun(burada menünün ilk linkleri) üst,sağ,sol ve alttından hizalandıralabilir.
ul#menu li {
    float: left;
    position: relative;
    width: 150px;
}
Sonra ikincil linkleri sayfaya ilk açıldığında görünmez(display:none) yapalım. Birincil linklere göre konumlandırmak için postion:absolute özelliği ve top:19px (satır yüksekliği 15px + 2px alttan(sonra ekleyeceğiz) + 2px üstten(sonra ekleyeceğiz)) özelliğini kullanalım.

ul#menu li ul {
    display: none;
    position: absolute;
    top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */
    left: 0;
}
Yalnız burada IE sorun çıkaracaktır. IE ve Opera ikincil menüleri konumlandırmasında sorun çıkarır, bunu engellemek için:
ul#menu li > ul {
    top: auto;
    left: auto;
}
Görünümü biraz güzelleştirelim:
ul#menu li a {
    font: bold 11px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    color: #000;
    background: #efefef;
    text-decoration: none;
}
ve Rollover(üstüne gelinceki) hali için:
ul#menu li a:hover {
    color: #a00;
    background: #fff;
}
Sonra birincil linklerin üzerine gelince ikincil linklerin görünmesi için:
ul#menu li:hover ul {
	display: block;
}
Bu kod IE’de çalışmayacaktır. IE’de çalışması için aşağıdaki javascript kodlarını sayfaya entegre etmeliyiz:
[HTML]
<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
[/HTML]

Ayrıca aşağıdaki kodu da eklemeliyiz.
ul#menu li:hover ul, ul#menu li.over ul{
	display: block;
}

Kaynak Dosyalar...


Kaynak:fatihayiroglu.com
Bu mesajdan alıntı yap
ankaragrafik isimli Üye şimdilik offline konumundadır

ankaragrafik

Webmaster / Ankara

Standart
Alt 13-05-2010 #13
arkadaşım aslında kafanda oluşturmak istediğin forumu anlamış gibiyim photoshopta yatıgın çalışmayı png yapıp dw nin içine atacaksın daha sonrada resmin üzerine form kutucukları koyup html kodları kullanıp php dosyasına göndermeyi saglayacaksın bu olay gerçekten çok basit hemen pes etme ve erteleme bence Forum Oluşturma dw forum oluşturmayı çalış ve dene başarırsın
Bu mesajdan alıntı yap
ankaragrafik isimli Üye şimdilik offline konumundadır

ankaragrafik

Webmaster / Ankara

Standart
Alt 13-05-2010 #14
arkadaşımızın yazdığı kodlar çok güzel buna benzer bir çok kod bulup yapısını incelemeni tavsiye ederim...
Bu mesajdan alıntı yap
Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
Forum kurmak isteyen arkdaslar iiçin ders 1=veri tabanı oluşturma(resimli anlatım) el_chancho Web Tasarımı 3 10-05-2009 22:06:50
action oluşturma semadedim Photoshop Soru ve Sorunlarınız 6 10-04-2009 21:30:26
Portakal Forumları(Forum giriş)(Böyle bir forum varmı bilmiyorum) HipnetiC Deneme Çalışmalar 7 18-12-2008 23:42:05
Marka oluşturma. Cahit GÜLDEN Temel Tasarım İlkeleri 25 06-10-2008 07:55:41
Çeviri+PDF oluşturma rndmn Temel Tasarım İlkeleri 1 18-07-2008 12:13:31

Kapat
Şifremi Unuttum?