Forum
Aktif konular
Üyeler
Kurallar
Arama
Tahribat.com Forumları 
Genel 
CSS Menü Kodladım, Herşey Tamamen Hazır Ama Bir Rütuj Kaldı Yapamıyorum (Yardım) CSS Menü Kodladım, Herşey Tamamen Hazır Ama Bir Rütuj Kaldı Yapamıyorum (Yardım)
-
Arkadaşlar,
Facebook'taki grubum için bi tane css menü kodladım vertical düzende bir menü.
Aslında hazır bir menüyü editledim. Ama şöyle bir durum var. Kodlar .CSS ve html olarak ayrılmış.
Serverim yada ftp hesabım olmadığı için bu iki dosyayı bir arada atıp menüyü kullanamıyorum.
Dosya içerisindeki bütün resim dosyalarını bir resim upload sitesine yükledim kaynakları aldım, css belgesinin içindeki kaynağına yapıştırdım. Şöyle bir sorun var...
========>>>HTML belgesinin içindeki kodlar <<<========
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="menu_style.css" />
</head>
<body>
<!-- AVAILABLE COLORS -->
<!-- aqua, blue, gray, lime, orange, pink, purple, red -->
<!-- TO APPLY A COLOR CHOICE -->
<!-- Change the color class on the first div to one of the above mentioned colors -->
<div class="menu bubplastic vertical orange">
<ul>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz"><span class="menu_ar">Ana Sayfa</span></a></span></li>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz#/turkcemiz?v=box_3&viewas=1131576850"><span
class="menu_ar">Kutular</span></a></span></li>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz#/turkcemiz?v=app_2392950137&viewas=1131576850"><span
class="menu_ar">Videolar</span></a></span></li>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz#/turkcemiz?v=photos&viewas=1131576850"><span
class="menu_ar">Fotograflar</span></a></span></li>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz#/turkcemiz?v=app_10531514314&viewas=1131576850"><span
class="menu_ar">KURALLARIMIZ</span></a></span></li>
</ul>
<br class="clearit" />
</div>
</body>
</html>=========>>> CSS BELGESİNİN İÇİNDEKİ KODLAR. <<=================
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
/* BUBBLE PLASTIC HORIZONTAL MENU */
.bubplastic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: #000000 url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 35px;
float: left;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
}
.bubplastic.horizontal ul li a span.menu_ar {
display: block;
float: left;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */
/* BUBBLE PLASTIC VERTICAL MENU */
.bubplastic.vertical {
width: 125px;
margin: 0px;
padding: 0px;
display: block;
}
.bubplastic.vertical ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.vertical ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.vertical ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.vertical ul li a span.menu_ar {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */
/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-aqua.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-aqua.gif) top right no-repeat;
}
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-blue.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-blue.gif) top right no-repeat;
}
/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-gray.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-gray.gif) top right no-repeat;
}
/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-lime.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-lime.gif) top right no-repeat;
}
/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-orange.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-orange.gif) top right no-repeat;
}
/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-pink.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-pink.gif) top right no-repeat;
}
/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-purple.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-purple.gif) top right no-repeat;
}
/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-red.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-red.gif) top right no-repeat;
}İŞTE YAPAMADIĞIM YER ŞURASI ===
<link rel="stylesheet" media="all" type="text/css" href="menu_style.css" />
menu_style.css aslında klasörün içindeki diğer bir belge. ftp hesabım olmadığı için bu iki belgeyi birlikte atıp menüyü kullanamıyorum. CSS kodlarıyla HTML kodlarını birleştirerek bu menüyü kullanabileceğim hale getirebilecek babayiğit var mı? :D
Konu biraz uzun oldu kusura bakmayın...
Dediğimi anladınız heralde :))
-
css lpdunun başlangıcına <style> bitrişine </style> koy
<link rel="stylesheet" media="all" type="text/css" href="menu_style.css" /> kısmını sil ve o kodu bunun olduğu yere yapıştır kaydet
-
<link rel="stylesheet" media="all" type="text/css" href="http://www.baskasite.com/menu_style.css" />
-
o ne lan yazım nasıl çıkmış öyle :|
neyse kısaca sen al bunu http://uploaded.to/file/amkvoo
linkin uzantısı da denk gelmiş :D
-
Pesimistin dediği de doğru.Ama index.html yi editleme yetkin varsa yukarda bahsettiğim baskasite.com neden senin siten değil ki.Sonucta dizine yazma iznin var...
neyse.
pesimistin kastı :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}/* BUBBLE PLASTIC HORIZONTAL MENU */
.bubplastic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: #000000 url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top left no-repeat;
}.bubplastic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 35px;
float: left;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
}.bubplastic.horizontal ul li a span.menu_ar {
display: block;
float: left;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU *//* BUBBLE PLASTIC VERTICAL MENU */
.bubplastic.vertical {
width: 125px;
margin: 0px;
padding: 0px;
display: block;
}
.bubplastic.vertical ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.vertical ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top left no-repeat;
}.bubplastic.vertical ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top left no-repeat;
}.bubplastic.vertical ul li a span.menu_ar {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU *//* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-aqua.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-aqua.gif) top right no-repeat;
}
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-blue.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-blue.gif) top right no-repeat;
}
/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-gray.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-gray.gif) top right no-repeat;
}
/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-lime.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-lime.gif) top right no-repeat;
}
/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-orange.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-orange.gif) top right no-repeat;
}
/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-pink.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-pink.gif) top right no-repeat;
}
/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-purple.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-purple.gif) top right no-repeat;
}
/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-red.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
background: transparent url(http://img.webme.com/pic/k/kraliyetailesi/bg-bubplastic-h-red.gif) top right no-repeat;
}</style>
</head>
<body>
<!-- AVAILABLE COLORS -->
<!-- aqua, blue, gray, lime, orange, pink, purple, red --><!-- TO APPLY A COLOR CHOICE -->
<!-- Change the color class on the first div to one of the above mentioned colors -->
<div class="menu bubplastic vertical orange">
<ul>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz"><span class="menu_ar">Ana Sayfa</span></a></span></li>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz#/turkcemiz?v=box_3&viewas=1131576850"><spanclass="menu_ar">Kutular</span></a></span></li>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz#/turkcemiz?v=app_2392950137&viewas=1131576850"><spanclass="menu_ar">Videolar</span></a></span></li>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz#/turkcemiz?v=photos&viewas=1131576850"><spanclass="menu_ar">Fotograflar</span></a></span></li>
<li><span class="menu_r"><a href="http://www.facebook.com/turkcemiz#/turkcemiz?v=app_10531514314&viewas=1131576850"><spanclass="menu_ar">KURALLARIMIZ</span></a></span></li>
</ul>
<br class="clearit" />
</div>
</body>
</html> -
Sağolun arkadaşlar,
Ben biraz daha kurcalayım sizin dediklerinizle, yapamazsam tekrar döneyim size
-
<style type="text/css">
TÜM CSS KODLARIN
bu style tagları head tagının içinde olmak zorunda.. bu style aç kapat tagları arasına css dosyandaki tüm kodları koy..
yapmak istediğin tam olarak bu
-
pesimistzombie bunu yazdı:
-----------------------------o ne lan yazım nasıl çıkmış öyle :|
neyse kısaca sen al bunu http://uploaded.to/file/amkvoo
linkin uzantısı da denk gelmiş :D
-----------------------------Tamam gayet güzel çalışıyo menü Allah razı olsun krdeşim
-
RootB bunu yazdı:
-----------------------------<style type="text/css">
TÜM CSS KODLARIN
bu style tagları head tagının içinde olmak zorunda..
bu style aç kapat tagları arasına css dosyandaki tüm kodları koy.. yapmak istediğin tam olarak bu
-----------------------------Tamam ortak sağolasın,
mesajı editlersen sayfa yana kayıyo düzen bozulmasın.
Allah razı olsn
-
FAYDALI bunu yazdı:
-----------------------------RootB bunu yazdı:
-----------------------------<style type="text/css">
TÜM CSS KODLARIN
bu style tagları head tagının içinde olmak zorunda..
bu style aç kapat tagları arasına css dosyandaki tüm kodları koy.. yapmak istediğin tam olarak bu
-----------------------------Tamam ortak sağolasın,
mesajı editlersen sayfa yana kayıyo düzen bozulmasın.
Allah razı olsn
-----------------------------sen sorununu hallettin mi şuan?
-
@RootB
Menü ile ilgili sorun halledildi arkadaşlar sağolsunlar bende nerde eksik yaptığımı gördüm onların sayesinde,
ama şu an sorunu facebook çıkarıyo.
HTML kodlarını FBML adlı bir uygulamanın içerisine yapıştırıyorum ama kutucuğun içinde menü gözükmüyor. Çok uyduruk yav kodları kabul etmiyo alçak!
Ama galatasaray sayfasında felan bu butonlardan kullanıyorlar.!
Zaten aksilik hiç gitmiyorki
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla