CSS Yardım İhtiyacı

Merhaba arkadaşlar,

CSS'de bir konuda yardıma ihtiyacım var. www.polikrami.com web sayfasında yer alan ana sayfada ürünler belli bir düzende çıkmıyor. Örnek ;

https://www.polikrami.com/image/problem.jpg

Bir diğer konu ise o bölümde yer alan ürünlerin üzerine gelindiğinde hover çıkıyor ancak üzerine gelmeden nasıl border verebilirim?

Aslında border verebiliyorum ancak benim verdiğim hover ile üzerine geldiğindeki border birbirini karşılamıyor.

@Trends; 1. madde de sorun yaşamanızın sebebi css in eski versiyonundan gelen float:left kullanımı... Eskiden ürünleri belirli bir düzende yanyana getirmek sığmayınca alta almak için float:left kullanılırdı ancak artık bu özelliğin kullanımına gerek yok.

Css3 ile gelen flex yapısını inceleyip uygularsanız sorununuz düzelir. 2. maddeuyi ise pek anlayamadım şahsen..

@mustafasatirogl; hocam doğru bir tespite bulunmuş. Ayrıca bu sorun genelde yükseklik sorunlarından kaynaklı oluyor, ürün başıklarının bazıları 3 satır gorunurken bazıları 2 satır şeklinde buna sabit bir yükseklik vererek sorunu hızlı bir şekilde çözebeilirsiniz. Aşağıda yazdığım kod işinizi görür ama mantıklı olan flex veya grid kullanmak

.product-grid .product .name {height: 70px; overflow: hidden;}

Öncelikle yanıtınız için teşekkür ederim. CSS konusunda şu an için sığ bir bilgiye sahip olduğum için yapıyı değiştirmeye açıkçası gözüm kesmiyor.

Size ayrıca teşekkür ederim, söylediğiniz şekilde tarayıcı üzerinde uyguladığımda sorun çözüldü. Şimdi normal uygulama yapacağım.

Yanıt veren arkadaşlara teşekkür ederim. Bir de hover'da yeşil olan kısmın hover olmadan da border'lı olmasını istiyorum bu konuda da yardımcı olursanız çok memnun olurum

@Trends; css ile border vermen gerekiyor hover olmadan. inceledim kadarıyla .product-grid .product:before ' a border verilmekte hover olunca. sen bunu hover olmayınca da yapacaksın

1. maddede ki sorun geçici çözüm. Responsive de vs daima patlar. Flex yapısını öğrenmeniz iyi olacaktır.

Yakın zamanda olmasa da önerinizi dikkate alacağım. Söylediğiniz gibi border veriyorum ancak hover'daki border ile hover olmadan ki border birbirini tutmuyor. Standart border küçük kalıyor, acaba ne gibi ekstra işlem yapmam gerekiyor. Bilgi verebilirseniz memnun olurum.

Ayrıca, destekleriniz için teşekkür ederim.

Düzenleme : Buldum galiba, tekrar teşekkür ederim.

Rica ederim. css ve javascript problemleriniz kısaca yazılımsal problemleriniz için profilimdeki numaram üzerinden benimle iletişime geçebilirsiniz