14 Adet Genis Menüler !

**Emexci** 25.04.2006, 22:11

CSS ile Yapılan 14 Genis Menü sunuyorum

:flame:

Menu Demolar: http://exploding-boy.com/images/cssmenus/menus.html
:flame:

Menu Download: http://exploding-boy.com/images/CSSmenus.zip

Kullanımı
[hr]

tabs

[syntax="css"]
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}
#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
</style>[/syntax]

[syntax="html"]
<div id="tabs">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>

<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
[/syntax]

Düzenleyen: Emexci
Tasarim CSS Tamamen: - http://www.exploding-boy.com

**MatrixNeo** 26.04.2006, 11:08

teşekkürler.

**deep_turtle** 26.04.2006, 22:56

teşekürler emexci

**Diyalektik** 10.05.2006, 13:43

emexci, çok güzel ama, IE ve Opera'da çalışmasına karşın, firefox'da (butonlar görüntülenirken) konumlandırmada sorun oluyor. Forumu sağa doğru kaydırıyor.
Forumun en üstüne eklemek istiyorum. Bunun için overall_header.tpl dosyasını düzenliyorum.
Var mıdır bunun bir çözümü?

Manü sol üstte kaldı:

Firefox kullanıyorsan, buradan test edebilirsin

**Sibel** 10.05.2006, 14:41

Öncelikle, kullandığımız sistemde zaten bir body kodu olduğundan o kısmı iptal ediyos:

[syntax="css"] body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
[/syntax]
değiştir

[syntax="css"]/*
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
*/[/syntax]
sonra da:

[syntax="css"] #tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}[/syntax]
bununla değiştiryos:

[syntax="css"] #tabs {
/* float:left;*/
width:100%;
/* background:#BBD9EE;*/
font-size:93%;
line-height:normal;
font: bold 11px/1.5em Verdana; /* bunu sildiğimiz bodyden aldık */
}[/syntax]

Ben ilk menüyü yaptım ondan #tabs kullandım, siz kendi menünüz üzerinde deneyin.

**Diyalektik** 10.05.2006, 15:29

Yok, olmadı. Belki de ben bir yerde hata yapıyuorum, ama anlamadım...
Hala firefox'da forumu sağa kaydırıyor.

Ekte overall_header.tpl dosyamı yolluyorum. Dosyaya html'leri ekledim (dosya içinde <div id="tabsI"> aratarak kodlara erişebilirsiniz), ama css'yi eklemedim. Eğer zamanınız varsa, bu dosyaya doğru şekilde css kodlarını ekler misiniz?

Güzel günler...

Kullanmak istediğim dizayn için verilen css:

[syntax="css"]<!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=iso-8859-9" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

/*- Menu Tabs I--------------------------- */

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}

</style>
</head>
[/syntax]

**Sibel** 10.05.2006, 16:19

Resim yollarını kendine göre ayarla, üstte boşluk kalıyo, reklam şeyinin tablosu waa.

**Diyalektik** 10.05.2006, 16:32

Bitanesin sen

Çok teşekkür ederim

**Sibel** 10.05.2006, 19:53

çok kolay be 2 satır html

**Diyalektik** 10.05.2006, 20:19

Sayfayı en üste nasıl yaslarım? Şu anda bir santimlik boşluk var üstte.
Nereye ne eklemeliyim?

**Sibel** 10.05.2006, 20:39

reklam tablosunu sil, yine de boşluk olursa, css deki body{} ye bunu ekle "margin-top:-10px;" sayıyı büyüt ekranın dışına bile gider onlar :roll:

**Pluton** 11.05.2006, 10:24

ya bu çok karışık geldi nasıl ekliyıruz anlamadım daha açıklayıcı bi şekilde anlatabilcek var mı

**Diyalektik** 11.05.2006, 12:44

Sibel, css deki body{} 'yi iptal etmedik mi? Hangi body'ye eklemeliyim "margin-top:-10px;" i?

**tankaya61** 07.07.2006, 20:04

bunlara nasıl alt kategori açarım

**ozgurboard** 07.07.2006, 21:52

güzeller teskkurler..

14 Adet Genis Menüler !

14 Adet Genis Menüler !

Cvp: 14 Adet Genis Menüler !

Cvp: 14 Adet Genis Menüler !

Cvp: 14 Adet Genis Menüler !

Kimler çevrimiçi