PDA

Orijinalini görmek için tıklayınız : Css Kodlarını Değiştirme Yardım



ucarwebnet
01-01-2014, 23:21
Selâmün aleyküm Dostlar size çok kısa bir sorum olacak esasında zor olmasa gerek ben genellikle kurmuş olduğum eklenti ve temalar üzerinde %90 hatta bazen %99 oynama yapıyorum ama bir medya paylaşım bileşeni kurdum ve bazı oynamalar yaptım ama tek bir sorunum kaldı onuda görseller ile anlatacağım.

Çözemediğim problem şudur ben ileri-geri oklarının yerini değiştirmek istediğimde bulundukları alanda aynı şekilde genişlemekte ama sadece ileri okunu baz alarak söyliyeyim sadece ok simgesinin margin-top +- yüzde yaptığımda kendi alanında ona kayıp oluyor atıyorum height: 25px bu pozisyon içerisinde kayıp oluyor kayıp derken o alan içerisinde kayıp oluyor mevcut bileşen css görüntüsü burada (http://www.onnumarareklam.com/1010.png) benim yapmak istediğim şey ise bu (http://www.onnumarareklam.com/2020.png).
CSS KOD YAPISINI GÖRMEK İSTERSENİZ ODA BURADA (http://fotoizleri.com/96-tum-kus-turleri-017.html)
Bana bu konuda yardımcı olacak olan kardeşimden yada kardeşlerimden Allah Razı olsun.

omerax
02-01-2014, 00:21
Sorununu tam olarak anlamadım ama CSS düzenlemesi yapacaksan, ul classı için değişiklik yap. Hatta senin sitende hwd.css içerisindeki #hwd-container ul.media-nav satırının altına... Daha net anlatabilirsen yardımcı olurum.

ucarwebnet
02-01-2014, 00:29
usta cevabın için sağolasın esasında detaylı bir açıklama ama kısa öz olsun istiyorsan bunu (http://www.onnumarareklam.com/1010.png) bu şekilde (http://www.onnumarareklam.com/2020.png) yapmak istiyorum. yani sadece sıkıntım onları şuan için oraya oturtmak. ustam

omerax
02-01-2014, 00:49
Öncelikle ilgili eklentinin tmpl/default.php dosyasında (genelde böyle olur.)


<ul class="media-nav">...</ul>

kısmını bulup


<div id="media-item-container" class="media-item-container">

satırından hemen sonrasına yapıştır. İstediğini gerçekleştirebilmen için resim kısmını içeren ana dive okların bulunduğu kodu yerleştirmen lazım.

Daha sonra da ul classına


#hwd-container ul.media-nav{
position: absolute;
top: 50%; /* pixel de kullanabilirsin
}

değerlerini ekle.

Yine yerleşim için right, bottom ve left değerlerini de kullanabilirsin.

ucarwebnet
02-01-2014, 00:52
tamam usta çok sağol Allah razı olsun bu dediklerini yaptıktan sonra aynı şekilde forumda paylaşacağım.

ucarwebnet
02-01-2014, 12:53
Yapmak istediğim şey oldu biraz zahmetli bir çalışma oldu omerax Hocamdan çok ama çok teşekkür ederim.

izlenecek yol.

1. com_hwdmediashare/views/mediaitem/tmpl/default.php içindeki şu satırı
<ul class="media-nav">
Boşluk bırakmadan yapıştırıyoruz
<div id="media-item-container" class="media-item-container">
yani en son alacağı şekil şu olacaktır.
<ul class="media-nav"><div id="media-item-container" class="media-item-container"> biraz detaylı anlatıyorum çünkü benim gibi bu konularda acemi bir sürü kişi vardır.
Düzenlemeyi bitirdikten sonra aşağıdaki adrese postalıyoruz.

2. /public_html/components/com_hwdmediashare/views/mediaitem/tmpl ve tabi bununla iş bitmiyor. css dosyalarıyla oynamanız lazım. yinede kendi yaptığım düzenlemelerden örnek vereceğim siz kendinize göre düzenlersiniz.

SAĞ OK / Left şu satırı görün #hwd-container ul.media-nav li a.pagenav-prev


padding-left: 20px;
padding-right: 3px;
width: 58px;
height: 73px;
background: url(../images/icons/16/prev.png) no-repeat 0 50%;
margin-left: -77px;
line-height: auto;
font-size: 100%;
position: absolute;
top: 630%;
}


SOL OK / Right şu satırı görün #hwd-container ul.media-nav li a.pagenav-next


padding-right: 20px;
padding-left: 3px;
width: 58px;
height: 78px;
background: url(../images/icons/16/next.png) no-repeat 100% 50%;
margin-left: 653px;
line-height: auto;
font-size: 100%;
position: absolute;
top: 630%;

Yakınlaştır simgesi / zoom şu satırı görün #hwd-container ul.media-nav li a.pagenav-zoom


text-indent: -9999px;
width: 670px;
height: 550px;
background: url(../images/icons/20/zoom.png) repeat 50% 50%;
position: absolute;
top: -433%;

ve diğer ayarlar şu satırı görün #hwd-container ul.media-nav


z-index: 1;
siliyoruz. border: 1px solid #ddd;
siliyoruz. border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
siliyoruz. background: #eeeeee;
siliyoruz. background: -moz-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
siliyoruz. background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#eeeeee));
siliyoruz. background: -webkit-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
siliyoruz. background: -o-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
siliyoruz. background: -ms-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
siliyoruz. background: linear-gradient(top,#ffffff 0%,#eeeeee 100%);
siliyoruz. filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#ffffff',endColorstr='#eeeeee',GradientTyp e=0);
position: absolute;
top: 500%;

yani son hali şu olması gerekiyor.


z-index: 1;
position: absolute;
top: 500%;


bu kadar ama tek bir problem var örnek veriyorum fotoğrafın mevcut genişliği 732px yüksekliği otomatik ayarlı şimdi biz yukarıdaki tüm ayarları en-732px yük-560px baz alarak yaptık ama bazı resimler var en-732px yük-800px bu durumda soruyorum değerli okuyan biz bu okları nasıl ayarlıyacağız resim büyüdüğünde oda resmin boyutuna göre şekil alsın? yani okları resmin yüksekliğine göre ortalasın.