Merhaba,

Yapmış olduğum projede css breadcrumb tarzında birşey kullanmak istiyorum. Kayıdın hangi aşamada olduğunu göstermek için bu şekilde bir kullanım düşümdüm fakat bir türlü yapamadım. Bunun sebebi ne olabilir acaba?

Buradaki örneği baz alarak aynısını yapmaya çalıştım fakat farklı sonuçlar veriyor. Olması gereken

alt text

fakat ben aynısı yaptığımda sonuç şu şekilde çıkıyor.

alt text

Bir türlü düzeltemedim. Yardımlarınız için şimdiden teşekkürler

soruldu: 27 Haz '14, 05:07

kurtomerfaruk's gravatar image

kurtomerfaruk
1.3k222940
cevap kabul oranı: 29%

3

Resimlerle, neyi anlamamızı bekliyorsunuz?

(27 Haz '14, 06:56) AliRıza Adıyahşi ♦ AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

Buradaki dediğim şeyin aynısını yazdım tekrarda yazmamı istiyorsun tek bir değişiklik bile yok Chromeda çalışyor fakat internet explorerda çalışmıyor

(27 Haz '14, 08:47) kurtomerfaruk kurtomerfaruk's gravatar image

Ayrıca, "Chromeda çalışyor fakat internet explorerda çalışmıyor" cümleside sorudan anlaşılmıyor malesef.

(27 Haz '14, 08:57) AliRıza Adıyahşi ♦ AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

Aynısını yazamamışsınızdır diye, kodlarınızı yazmanızı istedim çünkü karşılaştırmak için. Kodlar aşağıdaki gibi olursa çalışacaktır.

html

<div id="crumbs">
    <ul>
        <li><a href="#1">One</a>
        </li>
        <li><a href="#2">Two</a>
        </li>
        <li><a href="#3">Three</a>
        </li>
        <li><a href="#4">Four</a>
        </li>
        <li><a href="#5">Five</a>
        </li>
    </ul>
</div>

css

body {
font-family: Helvetica;
background: #d4f2ff;
}

#crumbs {
    text-align: center;
}
#crumbs ul {
    list-style: none;
    display: inline-table;
}
#crumbs ul li {
    display: inline;
}
#crumbs ul li a {
    display: block;
    float: left;
    height: 50px;
    background: #3498db;
    text-align: center;
    padding: 30px 40px 0 80px;
    position: relative;
    margin: 0 10px 0 0;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
}
#crumbs ul li a:after {
    content:"";
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #3498db;
    position: absolute;
    right: -40px;
    top: 0;
    z-index: 1;
}
#crumbs ul li a:before {
    content:"";
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #d4f2ff;
    position: absolute;
    left: 0;
    top: 0;
}
#crumbs ul li:first-child a {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
    display: none;
}
#crumbs ul li:last-child a {
    padding-right: 80px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
    display: none;
}
#crumbs ul li a:hover {
    background: #fa5ba5;
}
#crumbs ul li a:hover:after {
    border-left-color: #fa5ba5;
}

DEMO

Büyük ihtimalle de aşağıdaki css de z-index değerini unutmuş olabilirsiniz.

#crumbs ul li a:after {
    content: "";
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #3498db;
    position: absolute;
    right: -40px;
    top: 0;
    z-index: 1;
}
permanent link

cevaplandı: 27 Haz '14, 08:55

AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

AliRıza Adıyahşi ♦
7.9k146288
cevap kabul oranı: 44%

değiştirildi: 27 Haz '14, 09:04

Kusura bakma belirtmeyi unutmuşumm JSF Projesi ve PrimeFaces kullanıyorum. Belki onlardan kaynaklıdır diye fakat şöyle birşey var yazdığınız kodları da denedim aynı sonuç

(27 Haz '14, 09:06) kurtomerfaruk kurtomerfaruk's gravatar image

internet explorer versiyonu kaç? örneği açtınız mı? benim gonderdiğim demo çalışıyor mu sizin IE versiyonunda?

(27 Haz '14, 09:08) AliRıza Adıyahşi ♦ AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

Sürüm 9.0.8112. Evet sizin örneği açtım çalışıyor. Fakat ben projeye dahil etmek istediğimde çalışmmıyor iki gündür deniyorum ama olmuyor. Z-index i denemiştim. Benim atladığım bir durum mu var acaba?

(27 Haz '14, 09:11) kurtomerfaruk kurtomerfaruk's gravatar image

başka css varsa li elemanları için eziyor olabilir. z-index: 1 !important; denermisiniz?

(27 Haz '14, 09:13) AliRıza Adıyahşi ♦ AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

importantı denedim çünkü PrimeFaces te kendi css PrimeFaces.css i ezmesi için important kullanmak gerekiyor. Bundan dolayı onu da denedim ama sonuç aynı

(27 Haz '14, 09:16) kurtomerfaruk kurtomerfaruk's gravatar image

tarayıcının geliştirici araçlarını kullanarak, hatayı yakalamaya çalışın. css ler üzerinde gercek zamanlı oynama yapın, ancak boyle bulabilirsiniz hatayı.

(27 Haz '14, 09:41) AliRıza Adıyahşi ♦ AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

Teşekkürler

(27 Haz '14, 12:15) kurtomerfaruk kurtomerfaruk's gravatar image
7 yorumdan 5 tanesi gösteriliyor hepsini göster

Bootstrap Kullan en iyisi :)

http://codepen.io/social_quotient/pen/zwcIm

permanent link

cevaplandı: 27 Haz '14, 15:36

hasnhasan's gravatar image

hasnhasan
206131318
cevap kabul oranı: 50%

Cevabınız
toggle preview

Bu soruyu takip et

E-Posta üzerinden:

Üyelik girişi yaptıktan sonra abonelik işlemlerini yapabilirsiniz

RSS üzerinden:

Cevaplar

Cevaplar ve Yorumlar

Yazı Formatlama

  • *italic* ya da _italic_
  • **bold** ya da __bold__
  • link:[text](http://url.com/ "başlık")
  • resim?![alt text](/path/img.jpg "başlık")
  • liste: 1. Foo 2. Bar
  • temel HTML etiketleri de kullanılabilir

Bu sorunun etiketleri:

×30
×1

Soruldu: 27 Haz '14, 05:07

Görüntüleme: 684 kez

Son güncelleme: 27 Haz '14, 15:36

powered by BitNami OSQA