Forum
Aktif konular
Üyeler
Kurallar
Arama
Tahribat.com Forumları 
Html - CSS - XML - JavaScript - Ajax 
Menü Seçili İken Arka Plan Değişmesi Hkn. Menü Seçili İken Arka Plan Değişmesi Hkn.
-
Merhaba beyler,
Tasarımda menüyü böyle yaptım;
Ama css e dökerken hata yapıyorum. Herşeyde acemiyim ama böyle psd den css e dökmekde acemiden daha acemiyimdir.
Amacım seçili olan menüye arka plan atamak. Atadığım zaman;
Böyle oluyor.
Css kodlarım;
.anamenu
{
float:right;
margin:50px 200px 0px 10px;
font-family:"Swis721 LtCn BT";
font-size:15pt;
font:#f3b9ac;
}
.anamenu ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
.anamenu li
{
display:inline;
}
.anamenu a
{
text-decoration:none;
font-size:13pt;
font-family:"Swis721 LtCn BT";
color:#ffffff;
padding:25px;
}
.secili
{
background:url(’../images/menu.png’) no-repeat;
background-size:100%;
}Şimdiden teşekkür ederim.
-
sorununu tam anlamadım dostum, anlasam çözücemde
-
lalada bunu yazdı
sorununu tam anlamadım dostum, anlasam çözücemde
Amacım aynı psd tasarımdaki gibi olması ama siteyi çalıştırdığımda arka plandaki resmin sadece üst tarafları görünüyor alt tarafı kayboluyor. Height verip align bottom verdim oda olmadı başka bir yerde hata yapıyorum ama nerde ?
-
Anlatimindan bir sey anlamadim ama senin isini ya active ya da hover halleder.
Active
Hover
Visited
Link
bunlara bir bak bakalım.
-
imlegend bunu yazdı
Anlatimindan bir sey anlamadim ama senin isini ya active ya da hover halleder.
Active
Hover
Visited
Link
bunlara bir bak bakalım.
Hover ilede aynı sorun oluyor. Li ye ayrı class atıyorum secili olarak resmi öle getiriyorum. Amacım su ilk tasarım gibi gösterilmesi işte anasayfada gösterilen arka planı getittiremiyorum :s
-
anasayfa:actived midir nedir böyle oluyordu sanırım o olay olmuyorsada internetten menü örneklerinin hepsinde var
hover değil hover mouse üstüne gelince oluyoractive olması gerek hatta eminim
ekleme: menu.png de sadece 1x1 px resim alıp repeat-x yaparsan sayfanın yüklenmesi daha kısa sürer benden demesi
ekleme2:menu ul li:active şeklinde olucak öyle hatırlıyorum
0x656e tarafından 09/Şub/13 23:46 tarihinde düzenlenmiştir -
ilk ve son halin resimleri yolla anlalr derdin
-
Hocam psd'yi yollayabilirsen css konusunda yardımcı olabilirim.Seçili hale getirmek için js ile yazarsan daha iyi olur.Örnek olarak vereyim ben;
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">$(document).ready(function() {
$("ul li a:first").addClass("Aktif");
$("ul li a").click(function(e){
e.preventDefault();
$("ul li a").removeClass();
$(this).addClass("Aktif");});
});
</script>
$("ul li a") -> ul li a yerine sen kendi link yolunu yazacaksın.Başlanğıçta ilk link aktif gelir.
-
onparlak bunu yazdı
Hocam psd'yi yollayabilirsen css konusunda yardımcı olabilirim.Seçili hale getirmek için js ile yazarsan daha iyi olur.Örnek olarak vereyim ben;
< ="text/" ="http://code.jquery.com/jquery-1.9.1.min.js">
//$(document).ready(function() {
$("ul li a:first").addClass("Aktif");
$("ul li a").click(function(e){
e.preventDefault();
$("ul li a").removeClass();
$(this).addClass("Aktif");});
});
// ]]>
$("ul li a") -> ul li a yerine sen kendi link yolunu yazacaksın.Başlanğıçta ilk link aktif gelir.
Hocam teşekkür ederim ilgilendiğin için ama bunu css de yapıyorlar ben yapamıyorum. Current olayı var ona benzer bişi istediğim.
Psd formatı böyle menünün:
Ben yukardaki menü gibi olmasını isterken menü böyle oluyor; (Anasayfa bölümünün arka plandaki resmi getirmek istiyorum ama gelmiyor yarıda kesiliyor)
-
en olmadı classları ayrı ayrı ver menu_1 menu_2 diye gittigin sayfada da style açıp o clasa img ver :D biraz amele işi olacak ama sorunun nerde oldugunu bilmiyosan böyle yap sağlıklı değil pek :D:D
üste yapmışsın zaten resim yarıda kesilmeside senin li lerin boyutundan biraz büyütürsen tam gelir
sahinka tarafından 10/Şub/13 14:01 tarihinde düzenlenmiştir -
merhaba hocam bu kodları hiç kulanma tarayıcı konusunda sıkıntı yaşarsın fontuda sistem fontu dışında bir font kulanmışsın bununda hala tarayıcı desteği malesef bulunmuyor bu satırda .anamenu li {display:inline;} demişsin bunun i7 desteği kısmen mevcut ben bitane hazırladım güncel tüm tarayıcılarda sorunsuz çalışabilkcek ie7+ ve diğerleri.
<style type="text/css">
#menu {width:600px; height:42px; overflow:hidden; background:#e64906;margin:0px; padding:0px; list-style-type:none; border:1px dashed #000}
#menu li{float:left; text-align:center; width:120px}
#menu li a{display:block; font:12px arial; color:#fff; text-decoration:none; padding:14px 0px 14px 0px;}
#menu li.active a{background:url(jy15f.jpg) 0 4px no-repeat}
</style>
<ul id="menu">
<li class="active"><a href="javascript:;">Anasayfa</a></li>
<li><a href="javascript:;">Çalışmalarımız</a></li>
<li><a href="javascript:;">Hizmetlerimiz</a></li>
<li><a href="javascript:;">Hakkımızda</a></li>
<li><a href="javascript:;">İletişim</a></li>
</ul>
li.active satırındaki background kısmındaki görsel senin psd ki anasayfanın seçini hali onu transparan bir biçimde siyah borderleri olmadan kesersen css yi güncellemeden istediğin görüntüyü elde edersin örnek olması açısından ekteki resmi paylaştım.
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla