css de ovallik vermek

10-11-2009, 20:23:03

#1

rTaner

css de oluşturdugumuz bir kutunun kenarlarını nasıl ovalleştiririz bir kaç yerde gördüm fakat anlatımını bulamadım.

11-11-2009, 10:19:14

#2

cocainer

"jquery corners" ile çözebilirsin.

11-11-2009, 11:08:11

#3

oracuLar

Alıntı

-moz-border-radius : 5px;

ile yapabilirsin ama IE'de çalışmaz

12-11-2009, 22:28:14

#4

arno

Kimlik doğrulama veya yönetimden onay bekliyor.

En garanti ve tarayıcı uyumlu olarak oval yapma işi oluşturduğun tablonun altına ve üstüne birer div tanımlayıp oralara css ile oval şekilde çizilmiş background değeri vermektir. Tabi bu yöntem sabit genişliğe ya da yüksekliğe sahip tablolar için geçerli.

Ya da 4 köşe için ayrı divler açıp 4 resim koyarsın bu sefer her şekilde oval olarak kullanabilirsin.

Bunların dışında çeşitli javascript kodları ile tüm tarayıcılarla uyumlu ovallik vermen mümkün. Yukarıda örnek olarak birisinin ismini yazmış zaten arkadaş.

Benim en çok kullandığım yöntem ise mozilla ve webkit tabanlı tarayıcılar için ayrı css değerleri verip tablonun kendi div ini direk ovalleştirmek. Ancak bu IE de köşeler oval gözükmeyecektir. Ama en mantıklı kodlama da budur...

12-11-2009, 22:57:18

#5

cocainer

Bence en mantıkllısı jquery dir her tarayıcıda sorunsuz ve div genıslıgı veya yukseklıgı ne olursa olsun sorun olmuyor cunku resım dosyası kullanılmıyor.
Tavsiyemdir.

12-11-2009, 23:07:58

#6

YouSuf

bende ie de çalışmıyor diye 4 tane div açıp uğraşacaktım jquery corners demiş arkadaş şimdi bi bakayım ona inş işimi görür

12-11-2009, 23:40:45

#7

cocainer

YouSuf arkadaşımız PM'den yardım istedi bende herkes görsün diye konuda paylaşayım dedim.

Öncelikle sayfanıza jquery'i ekleyin sonra bu adresten jquery corner plugin'i indirip bunuda sayfaya ekleyin.

Buda sayfamız;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
div#readyTest { float: left; width: 18em; padding: 20px; margin: 1em; background: #6af;  }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
    $('#readyTest').corner();
</script>

</head>
<body>
<div id="readyTest">Jquery Corner - R10</div>
</body>
</html>

12-11-2009, 23:49:51

#8

YouSuf

Teşekkür ederim, ben sadece jquery.corner i ekliyomuşum ondan olmuyomuş

13-11-2009, 00:12:16

#9

YouSuf

yinede width değeri vermek gerekiyor sanırım yoksa ie de sorun çıkartıyor