Kategoriler
Css yazıları

Varsayılan metin seçimi rengini değiştirme [css]

Sitenizdeki yazilari secmek istediginizde arkaplani mavi gorunur. Bu varsayilan rengidir. Ancak css de bunun degistirilebilmesi icin uygun etiketler mevcutdur. Basit iki kod ile bunu kolayca yapabilirsiniz. Bunun icin asagidaki kodlari css dosyanizda bir yere eklemeniz yeterli olacaktir.

::selection {
    background: #FF0000;
    color: #FFFFFF;
}
::-moz-selection {
    background: #FF0000;
    color: #FFFFFF;
}

background: Bu kisim arkaplan rengini belirler.
color: Bu kisimda secim yapildigindaki yazi rengini belirler.

Kategoriler
Amo-Seo-PR Html yazıları tagları İnternet Dünyası Webmaster yardım

Açık Grafik Protokolü – Sitenizin Sosyal medya ile etkileşimini artırın.

Açık Grafik Protokolü Nedir?
Benim anladigim tabirle anlatmak istiyorum bunu: Sitenizin sosyal medaya ile etkilesimini artirmaya yonelik gelistirilen bir yapidir. Bunun icerisinde iceriginizin tam anlamiyla paylasilan yerlerde daha fazla bilgi gostermeside vardir. Ornek vermek gerekirse, sitenizin bir bolumunu facebook, google buzz, yahoo buzz v.S gibi sitelerde paylastiginizda, paylasilan sayfaya ait bilgileride burada yayinlamis olursunuz. Ancak bu kisitli bilgiler cogu zaman yardimci olmaz. Ornegin site iceriginiz video yada ses paylasimlari iceriyorsa. Burada Açık Grafik Protokolü altinda gelistirilen bir yapinin aciklamasini ve kullanimini anlatmaya calisacagim. Umarim webmaster arkadaslar yardimci olur. Websitenizin etkilesimini artirmaniz icin bu protokolu uygulamaniz kesinlikle yarariniza olacaktir.

Facebook ve google buzz gibi yerlerde sayfanizin linklerini paylasirken cogu zaman resim ve aciklama kismi gorunmez. Bunun sebebi meta taglarimizin eksik olusudur. Simdi konuya kisaca deginip sizelere gerekli olan taglar ve yerlestirme sekli hakkinda bilgi verecegim..

Linklerimizi paylastigimizda, yada baskalarinin linklerimizi paylastiginda konuya ait resim ve aciklama kisimlarininda cikmasini saglamak icin asagidaki etiketler yeterli olacaktir bize:




Yukarida goreceginiz meta etiketlerini sayfanizin

...

etiketlerinin icinde bir yere eklenmesi gerek. Boylece linklerimiz paylasildiginda ilgili sayfadaki bu etiketlerden konu ve sayfaya ait bilgileri alacak, gosterecektir.

Yukaridaki etiketler kismini kisaca aciklayalim islevleri ve nasil kullanilacaklari bakimindan:

Bu kod sayfanin basligini gostermek icin gereklidir. content kismina gereken bilgileri girmeniz gerek.

Burasida sayfanin ve sitenizin icerigi hakkinda bilgi vermeniz gereken bolumdur, doldurmanizda yarar vardir. ICERIK yazisinin yerine gelebilecek etiketleride asagida listeliyorum:

Icerik Turleri

Etkinlikler

* activity
* sport

Işletmeler

* bar
* company
* cafe
* hotel
* restaurant

Gruplar

* cause
* sports_league
* sports_team

Kuruluşlar

* band
* government
* non_profit
* school
* university

Insanlar

* actor
* athlete
* author
* director
* musician
* politician
* public_figure

Yerler

* city
* country
* landmark
* state_province

Ürünleri ve Eğlenceler

* album
* book
* drink
* food
* game
* product
* song
* movie
* tv_show

Bu listeden sonra diger kisimlarin aciklamasina geciyorum.

Paylasilmasini sagladiginiz konunun, sayfanin tam linkini buraya verebilirsiniz.

Burasi onemli, cunku paylasilan sayfanin bir resme ihtiyaci var, eger sayfada hic resim yoksa resimsiz paylasilmasina neden olur, bu yuzden bu kisim onem icap eder. Sayfaya ait bir resmide burada belirtmeniz gerekli.

Site ismini kisaca burda belirtin, ilgili paylasimlarda gorunmektedir.

Burasida resim kismi kadar onemlidir, cunku paylasimlarda, paylasimin bir aciklama kismi olmasi gerek, cogu zaman bu kisim cikmaz, yada bazen sansliysak cikar. Ancak isinizi sansa birakmayin arkadaslar, bu aciklama etiketini kesinlikle kullanin.

Video Icerikler icin

Yukaridakiler standart etiketlerdir, sitenin icerigine gore bunlar artirilabilir. Ornegin site iceriginiz video ile ilgili ise bir kac ozel etiket daha eklemek isimizi kolaylastirir. Cogu video sitesinin facebook paylasimlarinda videolari oynatma ozelligi olmaz, resim cikar yerine, tiklayincada ilgili sayfaya gider, yani normal bir konu paylasimindan farksiz olur. Ancak cogu zaman paylasilan videonun da facebook icerisinde oynatilip izlenebilmesi kullanici etkilesimi acisindan onemlidir. Bu sebeple asagidaki meta taglar video turunce icerigi olan siteler icin olacaktir. Kullanmalarini tavsiye ederim.

Video icerikli sitelerin eklemesi gerekenler:




Tek tek etikleri aciklayalim, boylece mantigini anlamaniz daha kolay olacaktir.

Bu kisimda videolarinizi flash dosyasi uzerinden gosteriyorsaniz tam linkini belirtmeniz gerek ornegin: SiteADresiniz.com/2145.swf


Bu iki kisimda da videonuzun genislik ve yukseklik degerlerini ayarlamaniz gerekli, boylece facebookda izlerken acilan ekran buyuklugu ona gore ayarlanir.

Bu kisimda oynaticinin turunu belirtecegiz. flash ile video oynaticili bir siteniz varsa yukaridaki ornek uygulamayi kullanmaniz gerek. bunun birde ses dosyalari icin olani var, birazdan da ona deginecegim.

Ses Dosyasi icerikleri icin

Normal taglari ve video taglarini acikladim, simdi bunlarin birde ses dosyasi icin olanlari var. Yani sitenizde ses dosyalari dinletiyorsaniz, mp3 gibi v.s facebook paylasimlarinda bu ses dosyasinin dinlenebilmesini saglayabilirsiniz. Boylece kullanici etkilesimi iyi derecede saglanmis olur. Bunun icin yapmaniz gerekenler asagidaki tagleri kendinize gore uyarlayip sayfaniza eklemek:





Tek tek aciklamak gerekecek, anlamak icin iyi olacaktir.

Sitenizde dinlenmesine olanak verdiginiz ses dosyasinin tam yolunu belirtmeniz gerekli, aksi halde ses dosyasi facebook da calismayacaktir.

Ses dosyasinin tam ismi yani basligi gerekli. Facebookda gorunecek isimde diyebiliriz.

Ses dosyasindaki seslendirmeyi yapan kisinin ismi yani sanatcini adi.

sarkinin seslendirildigi albumun ismi. belirtilmesede, yada eklenmesede olur.

Ses dosyasinin turunude burada belirtmeniz gerekli, bunun bir cok turu var arkadaslar, mp3, wma, v.s v.s

Iletisim belirtme

Yukaridakiler haricinde birde sayfalariniza iletisim, email gibi bilgilerinizi iceren taglar ekleyebilirsiniz, bunlar herhangi bir sorunda size ulasilmasina imkan taniyacaktir. En az birini kullanmaniz tavsiye edilir.



Iletisim icin email adresinizin belirtilecegi bolum.

Telefon numaranizin belirtilecegi bolum.

fax numaranizin belirtilecegi bolum.

Konum belirtme

Birde konumunuzu belirtebileceginiz etiketler mevcut. Sayfalarinizdaki konulari paylasan kullanicilarin konumlarini alarak etiketlere ekleyebilir, paylasimlarinda belirtebilirsiniz. boylece hanki paylasimin nerden yapildigini gormus olurlar. Buda kisilerin kullanicilarinizla olan etkilesiminizi artiracaktir.







Bulundugunuz konumun enlem bilgilerinin belirtilecegi kisim.

Bulundugunuz konumun boylam bilgilerinin belirtilecegi kisim.

Bulundugunuz konumun adresinin belirtilecegi kisim.

Bulundugunuz bolgenin semt, ilce gibi yerlerini belirtieceginiz kisim.

Bulundugunuz bolgeye ait kisaltma kodunun belirtilecegi kisim.

Bulundugunuz yerin posta kodunun belirtilecegi kisim.

Bulundugunuz ulkenin isminin belirtilecegi kisim.

Bu meta etiketlerinde kullanimi konusunda aciklamamiz bitti. Yapacaginiz uygulamaya yada site icerigine gore istediginiz kisimlari kullanabilirsiniz. Ancak bunlarin kullanici ve sosyal websiteleri ile olan etkilesiminizi artiracagini sakin unutmayin. Kullanmaktan cekinmeyin.

Kategoriler
Html yazıları tagları İnternet Dünyası Ivır Zıvır Javascript Makale Webmaster yardım

Saniyeli link aktif etme javascript kodu

Evet arkadaslar arsivlerimden cok guzel bir uygulama daha paylasiyorum. Basit, kullanisli ve kullanim alani cok olabilecek bir kod yapisi. Javascript ile yapilmis, maus ile link’in uzerine gelindiginde belli bir sure sonra link’i aktif ediyor. Belli sure dolmadan link’e basildiginda uyari cikarak kullaniciyi beklemesini isaret ediyor. Benim cok sevdigim ve ilerde birgun calismalarimda kullanirim umidiyle arsivimde sakladigim bir uygulamadir. Farkli calismalar ve ivir zivir kategorisi altinda yerini aliyor. Asagidan kodun tamamini alabilir uygulamaya koyabilirsiniz. Ondan once Demo yani ornek sayfa kismindan uygulamayi online olarak test edebilirsiniz..

Kategoriler
Css ve Div Tasarımlar Deneme Yazıları Günlük hayat Html yazıları tagları İnternet Dünyası Webmaster yardım

css + div oval kenarli profesyonel html tema – 2544512

Merhaba arkadaslar bugun sizlere kendi hazirladigim bir css + div ile kodlanmis harika bir tasarimi paylasacagim. Ornek demo sayfasina buradan bakabilirsiniz. Bu tasarimi orjinal bir css layout u kullanarak gelistirdim. Emege saygi adina onunda orjinal adresini ve demo sayfasini verelim. Orjinal yani ilk haline buradan bakabilirsiniz. Simdi demo adrese bakmayan arkadaslar icin birde resim ekleyelim konumuz hareketlensin :)

Kategoriler
Html yazıları tagları Webmaster yardım

W3C target etiketi Sorunu, XHTML Strict target sorunu

W3C
W3C

Arkadaslar bu target sorunu arastirirken google amca beni bu siteye goturdu, guzel de bir makale olmus, benim gibi arayanlar icin ekleme ihtiyaci duydum:=)

Benim gorusum: w3c’nin dogru bir karar aldigidir. baska bir siteye gecen kisi isterse tarayicisinin geri butonunu kullanarak tekrardan geldigi siteye donebilir..

MAKALEYE GECIS ***

Daha çok herhangi bir linki yeni bir pencerede açmak amacıyla kullandığımız “target” özelliği, W3C’un HTML / XHTML dilinin Strict formunda çoktan kaldırıldı. Bugün için tarayıcılarda Strict DTD formatında sorun çıkarmıyor. Tabi bu durum ileride çıkarmayacağı anlamına da gelmiyor. Uygulamalarınızda target özelliğini Strict formunda bir DTD’yle kullanıyosanız emin olun, W3C Standartlarından geçemiyorsunuz.

Yıllardan Sonra Gelen Ayrılık

W3C’un, target özelliğini, web uygulamalarındaki yoğun kullanımına ve gözünün yaşına bakmayarak HTML / XHTML Strict DTD formundan kaldırması, biz standartları seven web geliştiricilerin işlerini kısmen zorlaştırdı. “Peki, yerine ne koydu?” diye sorarsanız, W3C henüz bu konuda target’in yeri dolduramadı.

Devami bu sitede: http://www.oztecnic.com/xhtml-strict-target-sorunu/

konu makale yazarinin istegi uzerine bu sekilde duzenlenmistir: oztecnic.com

Kategoriler
Css yazıları

Ardaşık Stil Sayfaları (CSS) hakkinda herşey

css10-genieHTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.

CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.

Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browserın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.

Sınır (border) Özelliği

CSS sınır özelliği bir öğenin sınırına ilişkin stil ve renk tanımlamada kullanılır. HTML içinde yazıların çevresine sınır koymak tablolarla yapılır. Fakat CSS sınır özelliği güzel etkileriyle yazıların çevresini sınırlama olanağı oluşturur ve her öğeye uyarlanabilir.

Özellik Açıklama Değerler IE F N W3C
border Bir tanımda her dört yöndeki sınırları belirlemeye yarayan kısaltılmış bir özelliktir. sınır-eni
sınır-stili
sınır-rengi
4 1 4 1
border-bottom Bir tanımda alt sınırın tüm özelliklerini bir arada tanımlamaya yarayan kısaltılmış tanımdır. sınır-alt-eni
sınır-stili
sınır-rengi
4 1 6 1
border-bottom-color Alt sınırın rengini belirler sınır-rengi 4 1 6 2
border-bottom-style Alt sınırın stilini tanımlar sınır-stili 4 1 6 2
border-bottom-width Alt sınırın enini tanımlar thin
medium
thick
uzunluk
4 1 4 1
border-color Dört sınır için renk belirten değerlerdir. Tek ya da dört renge kadar tanım yapılabilir. renk 4 1 6 1
border-left sol sınır için tüm değerleri tanımlamaya yarayan bir kısaltmadır sol-sınır-eni
sınır-stili
sınır-rengi
4 1 6 1
border-left-color Sol sınırın rengini tanımlar sınır-rengi 4 1 6 2
border-left-style Sol sınırın stilini tanımlar sınır-stili 4 1 6 2
border-left-width Sol sınırın enini tanımlar thin
medium
thick
uzunluk
4 1 4 1
border-right Sağ sınır için tüm değerlerin tanımlanabildiği bir kısaltmadır. sağ-sınır-eni
sınır-stili
sınır-rengi
4 1 6 1
border-right-color Sağ sınırın rengini tanımlar sınır-rengi 4 1 6 2
border-right-style Sağ sınırın stilini tanımlar sınır-stil 4 1 6 2
border-right-width Sağ sınırın enini tanımlar thin
medium
thick
uzunluk
4 1 4 1
border-style Dört sınırın stillerini tanımlar. birden dörde kadar stil tanımı yapılabilir. none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4 1 6 1
border-top Üst sınırın tüm özelliklerini tanımlamak için kullanılan bir kısaltmadır. üst-sınır-eni
sınır-stili
sınır-rengi
4 1 6 1
border-top-color Üst sınırın rengini tanımlar sınır-rengi 4 1 6 2
border-top-style Üst sınırın stilini tanımlar sınır-stili 4 1 6 2
border-top-width Üst sınırın enini tanımlar thin
medium
thick
uzunluk
4 1 4 1
border-width Bir tanımdaki dört sınırın özelliklerinin belirtildiği kısaltılmış özelliktir. Birden dörde kadar tüm değerler yazılabilir thin
medium
thick
uzunluk
4 1 4 1

Sınır (border) Özelliği

Bir tanımlamada dört sınır için ayarları atamakda kullanılan bir kısaltmadır.
Yalnız ‘border’ özelliğini kullanarak dört değeri de ayrı biçimde ayarlamak oalanağı yoktur. Eğer bu özellik istenizse, ayrı ayrı tanımlanmalıdır.

p
{
border: thin dotted #00FF00
}

span
{
border: solid #0000FF
}

Olası değerler:
sınır-eni: Dört sınır için bu değer atanır
sınır-stili: Dört sınır için bu değer atanır
sınır-rengi: Dört sınır için bu değer atanır

Alt Sınır (border-bottom) Özelliği

Bir tanımlama öğenin alt-sınır özelliklerini atamak için kullanılan kıslatmadır.
table
{
border-bottom: thin dotted #00FF00
}

span
{
border-bottom: solid #0000FF
}

Olası değerler:
alt-sınır-eni sınır-stili sınır-rengi: alt sınır için bu değerleri atar.

Alt Sınır Renk (border-bottom-color) Özelliği

Bir öğenin alt sınırının rengini atamak için kullanılır.

Not: Her zaman border-style özelliğini border-color özelliğinden önce tanımlayın. Bir öğenin önce sınırları olmalı ki siz o sınırın rengini değiştirebilesiniz.

p
{
border-style: solid;
border-bottom-color: #ff0000
}

p
{
border-style: solid;
border-bottom-color: rgb(255,0,0)
}

Olası değerler:
renk: Renk değer renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000) olabilir.
transparent: Sınır renksizdir.

Alt Sınır Stil (border-bottom-style) Özelliği

Bir ögenin alt sınır stilini tanımlamakta kullanılır.

table
{
border-bottom-style: solid
}

Olası değerler:
none: sınır olmadığını anlatır.
hidden: tablo öğeleri için sınır karışmasını önlemekte kullanılır “none” gibidir.
dotted: Noktalı sınır tanımlamak için kullanılır. Pekçok tarayıcıda düz çizgi olarak görüntülenebilir.
dashed: Kesik çizgili sınırı tanımlar. Pekçok tarayıcıda düz çizgi olarak görüntülenir.
solid: Düz çizgi
double: İkili sınırı tanımlar. İkili sınırın eni sınır-eni değeri gibidir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.
vascript

Alt Sınır En (border-bottom-width) Özelliği

Alt sınır eni bir öğenin alt sınır enini belirlemekte kullanılır.

table
{
border-style: solid;
border-bottom-width: thin
}

table
{
border-style: solid;
border-bottom-width: 0.5px
}

Olası değerler:
thin: İnce alt sınırı tanımlar
medium: Varsayılan değer. Orta kalınlıkta sınırı tanımlar.
thick: Kalın alt sınırı tanımlar
uzunluk: Alt sınırın kalınlığını belirlemekte kullanılır.

Sınır rengi (border-color) Özelliği

The border-color property sets the color of the four borders. This property can take one to four colors.

table {border-color: red}
dört sınırın rengi kırmızıdır

table {border-color: red green}
üst ve alt sınır kırmızı,
sol ve sağ sınırlarsa yeşil…

table {border-color: red green blue}
üst sınır kırmızı, sol ve sağ sınır yeşil,
alt sınır mavidir.

table {border-color: red green blue yellow}
üst sınır kırmızı, sağ sınır yeşil,
alt sınır mavi, sol sınır sarıdır

Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)),
ya da hex sayı (#FF0000) olabilir.
transparent: Sınır renksizdir

Sol sınır (border-left) Özellikleri

Sol sınır özelliği bir tanımlamayla sol sınırın tüm özelliklerini birden atamaya yarar.

table
{
border-left: thin dotted #00FF00
}

table
{
border-left: thick #0000FF
}

Olası değerler: Sol-sınır-eni Sınır-stili sınır-rengi: Sol sınırın özelliklerini atar.

Sol Sınır Renk (border-left-color) Özelliği

Sol sınır renk özelliği öğenin sol sınırının rengini saptar.

p
{
border-style: solid;
border-left-color: #ff0000
}

p
{
border-style: solid;
border-left-color: rgb(255,0,0)
}

Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000)
transparent: Sınır değeri renksizdir.

Sol sınır stil (border-left-style) Özelliği

Sol sınır stil tanımı öğenin sol sınırını tanır.

table
{
border-left-style: solid
}

Olası değerler:
none: Hiç sınır olmadığı belirtir hidden: “none” ile aynı, yalnız tablo öğeleriyle doğacak görüntüleme sorunu doğar. dotted: noktalı çizgiyi tanımlar ama birçok tarayıcıda düz çizgi olur. dashed: kesik çizgili sınır çizgisini tanımlar ama birçok tarayıcıda düz çizgi olur. solid: Düz çizgiyi tanımlar double: İkili sınır çizgisini tanımlar. İkili sınır çizgisinin eni border-width tanımındaki değere eşittir. groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Sol sınır eni (border-left-width) Özelliği

The border-left-width property sets the width of an element’s left border.

table
{
border-style: solid;
border-left-width: thin
}

table
{
border-style: solid;
border-left-width: 0.5cm
}

Olası değerler:
thin: Sol sınırın ince olduğunu tanımlar
medium: Varsayılan değer. sol sınırın değeri medium olur.
thick: Sol sınır kalındır tanımı.
uzunluk: Sol sınırın kalınlığını belirlemenizi sağlar

Sağ sınır (border-right) Özelliği

Sağ sınır özelliği sağ sınırın enini, stilini ve rengini tanımlamak için kullanılan kısaltılmış bir tanımlamadır.

table
{
border-right: thin dotted #00FF00
}

table
{
border-right: thick #0000FF
}

Olası değerler:
sağ-sınır-eni sınır-stili sınır-rengi: Sağ sınırın özelliklerini atar.

Sağ sınır renk (border-right-color) özelliği

Sağ sınır rengi özelliği bir öğenin sağ sınırının rengini tanımlar.

p
{
border-style: solid;
border-right-color: #ff0000
}

p
{
border-style: solid;
border-right-color: rgb(255,0,0)
}

Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000)
transparent: Sınır değeri renksizdir.

Sağ sınır stil (border-right-style) Özelliği

Sağ sınır stil özelliği bir öğenin sağ sınırının stilini tanımlar.

table
{
border-right-style: solid
}

Olası değerler:
none: Hiç sınır olmadığı belirtir
hidden: “none” ile aynı, yalnız tablo öğeleriyle doğacak görüntüleme sorunu doğar.
dotted: Noktalı çizgiyi tanımlar ama birçok tarayıcıda düz çizgi olur.
dashed: Kesik çizgili sınır çizgisini tanımlar ama birçok tarayıcıda düz çizgi olur.
solid: Düz çizgiyi tanımlar
double: İkili sınır çizgisini tanımlar. İkili sınır çizgisinin eni border-width tanımındaki değere eşittir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Sağ Sınır eni (border-right-width) Özelliği

Sağ sınır eni öğenin sağ sınırındaki eni tanımlar.

table
{
border-style: solid;
border-right-width: thin
}

table
{
border-style: solid;
border-right-width: 0.5cm
}

Olası değerler:
thin: Sağ sınırın ince olduğunu tanımlar
medium: Varsayılan değer. sağ sınırın değeri medium olur.
thick: Sağ sınır kalındır tanımı.
uzunluk: Sağ sınırın kalınlığını belirlemenizi sağlar

Sınır stili (border-style) Özelliği

Sınır-stili özelliği, dört sınır için stil tanımlar.

table {border-style: dotted}
her dört sınır noktalıdır

table {border-style: dotted dashed}
üst ve alt sınırlar noktalıdır,
sol ve sağ sınır kesik çizgisidir

table {border-style: dotted dashed solid}
üst sınır noktalı,
sol ve sağ sınır kesik çizgisidir,
alt sınır kesintisiz çizgidir.

table {border-style: dotted dashed solid double}
üst sınır noktalı,
sağ sınır kesik çizgili,
alt sınır kesintisiz çizgi,
sol sınır ise çift çizgidir.

Olası değerler:
none: Hiç sınır olmadığı belirtir
hidden: “none” ile aynı, yalnız tablo öğeleriyle doğacak görüntüleme sorunu doğar.
dotted: Noktalı çizgiyi tanımlar ama birçok tarayıcıda düz çizgi olur.
dashed: Kesik çizgili sınır çizgisini tanımlar ama birçok tarayıcıda düz çizgi olur.
solid: Düz çizgiyi tanımlar
double: İkili sınır çizgisini tanımlar. İkili sınır çizgisinin eni border-width tanımındaki değere eşittir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Üst Sınır (border-top) özelliği

Üst sınır özelliği bir tanım için kısaltılmış olarak tüm üst sınır özelliklerinin değerinin belirtilmesi istemidir.

table
{
border-top: thin dotted #00FF00
}

table
{
border-top: solid #0000FF
}

Olası değerler:
üst-sınır-eni sınır-stili sınır-rengi: üst sınırın özellikleridir.

Üst Sınır Renk (border-top-color) Özelliği

Öğenin üst sınır rengini tanımlamakta kullanılır.

p
{
border-style: solid;
border-top-color: #ff0000
}

p
{
border-style: solid;
border-top-color: rgb(255,0,0)
}

Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000)
transparent: Sınır değeri renksizdir.

Üst Sınır Stil (border-top-style) Özelliği

Bir öğenin üst sınırının stilini tanımlamakta kullanılır.

table
{
border-top-style: solid
}

Olası değerler:
none: Hiç sınır olmadığı belirtir
hidden: “none” ile aynı, yalnız tablo öğeleriyle doğacak görüntüleme sorunu doğar.
dotted: Noktalı çizgiyi tanımlar ama birçok tarayıcıda düz çizgi olur.
dashed: Kesik çizgili sınır çizgisini tanımlar ama birçok tarayıcıda düz çizgi olur.
solid: Düz çizgiyi tanımlar
double: İkili sınır çizgisini tanımlar. İkili sınır çizgisinin eni border-width tanımındaki değere eşittir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Üst Sınır (border-top) özelliği

Üst sınır özelliği bir tanım için kısaltılmış olarak tüm üst sınır özelliklerinin değerinin belirtilmesi istemidir.

Üst Sınır Eni (border-top-width) Özelliği

Üst Sınır eni özelliği bir öğenin üst sınırının enini belirtir.

table
{
border-style: solid;
border-top-width: thin
}

table
{
border-style: solid;
border-top-width: 0.5cm
}

Olası değerler:
thin: Üst sınırın ince olduğunu tanımlar
medium: Varsayılan değer. üst sınırın değeri medium olur.
thick: Üst sınır kalındır tanımı.
uzunluk: Üst sınırın kalınlığını belirlemenizi sağlar

Sınır Eni (border-width) Özelliği

Sınır-eni özelliği, bir tanımda dört sınırın enini tanımlamaya yarayan kısaltmadır.

table {border-width: thin}
dört sınır da incedir.

table {border-width: thin medium}
üst ve alt sınır incedir,
sol ve sağ sınırlar orta kalınlıktadır.

table {border-width: thin medium thick}
üst sınır incedir,
sol ve sağ sınır orta kalınlıktadır,
alt sınır ise kalındır.

table {border-width: thin medium thick none}
Üst sınır ince,
sağ sınır orta kalınlıkta,
alt sınır kalın ve
sol kenarda sınır yoktur.

Olası değerler:
thin: Sınırın ince olduğunu tanımlar
medium: Varsayılan değer. sınırın değeri medium olur.
thick: Sınır kalındır tanımı.
uzunluk: Sınırın kalınlığını belirlemenizi sağlar

Kaynak : aybim.com.tr/progs/csstxt5.html

Kategoriler
Css yazıları

CSS kullanarak güzel ve sade menüler yapmak

css-miniMerhaba arkadaslar, bugun css kullanarak cok basit bir sekilde hos menuler yapmak nasil oluyor, kodlar ne ise yariyor, ne nerde kullanilmali hepsini anlatacagim..

ornek bir kac sayfa hazirliyorum arkadaslar, genelde her yazimi yazarken mutlaka ornek bir sayfa yada resim kullanirim, buda kullaniciya daha guzel gorsel bir gozlem secenegi sunar ki cogu site buna dikkat etmez :) kuru kuru yazilan anlatimlar genelde bir sey anlasilmaz, ornek yada demo yoktur, olan demolarda ya sayfa silinmistir yada link sorunludur.. iste kaliteli bir menu yapmak icin bize gerekenler..

  1. Bilgisayar :)

bildiginiz gibi html calistirmak icin illa bir hosta gerek yoktur, ama ilerde tum dunyada gosterilmesi icin bir site yaparsaniz, bunun icin araci bir firma ile dosyalarinizi host etmeli, domain ile isim vererek internete sitenizi kazandirabilirsiniz :)

Baslamadan once kendimize 2 tane dosya hazirlayalim bunlarin birisinin uzantisi .html olsun, digerisnin ise .css

ben ornek 2 dosya hazirladim bunlarin ismi :

  1. cssmenu.html
  2. css.css

css dosyasini ayri olarak vermemizin sebebi ilerleyen zamanlarda, artan css dosyalarini kullandigimiz kodlama ekranina yazarsak bu buyuk dosyalarda sorun cikartabilir, ayrica daha pratik olmasi ve istedigimiz zaman kodlarla oynama sansi veriri..

oncelikle cssmenu.html dosyamizi olusturalim ve aciklayalim, ne nedir, ne degildir..

cssmenu.html

<HTML>
<HEAD>
<TITLE>Makaleci.com css menu ornegi..</TITLE>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-9″>
<META name=”description” content=””>
<META name=”keywords” content=””>
<META name=”generator” content=”CuteHTML”>
<link rel=”stylesheet” href=”./css.css” type=”text/css” />

</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<div><ul id=”menu”>
<li><a href=”http://www.makaleci.com/”>Ana Sayfa</a></li>
<li><a href=”http://www.makaleci.com/iletisim”>iletiþim</a></li>
<li><a href=”http://www.makaleci.com/makale-nasil-eklenir/makale-nedir”>Makale Nedir?</a></li>
<li><a href=”http://www.kuaza.com/”>Resim Yükle</a></li>
<li><a href=”http://www.kuaza.com/”>Kuaza La</a></li>
</ul></div><br /><br />
</BODY>
</HTML>

Not: konumuz css ancak arada kullandigim kodlarinda ne ise yaradigini yazacagim..

bu kod ile css dosyamizi  sayfa daki css class larini alacagi dosyayi ekliyoruz..

<link rel=”stylesheet” href=”./css.css” type=”text/css” />

yukaridaki kodlardan :

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-9″>

kodlarindaki ISO-8859-9 bolumu kullanacagimiz menudeki turkce karakterlerin duzgun sekilde gorunmesini saglayacak..

yukaridaki kodlardan

<ul id=”menu”>
<li><a href=”http://www.makaleci.com/”>Ana Sayfa</a></li>
<li><a href=”http://www.makaleci.com/iletisim”>iletiþim</a></li>
<li><a href=”http://www.makaleci.com/makale-nasil-eklenir/makale-nedir”>Makale Nedir?</a></li>
<li><a href=”http://www.kuaza.com/”>Resim Yükle</a></li>
<li><a href=”http://www.kuaza.com/”>Kuaza La</a></li>
</ul>

<ul id=”nav”> kodu ile css de tanimlayacagimiz menu ozelliginin ve siralama icin gerekli olan kod bolumu

<li><a href=”http://www.makaleci.com/”>Ana Sayfa</a></li> seklinde de linklerimizi siralayarak menumuzu olusturmak icin gerek olan bolum

sonraki bolumlerdede acilan tag lari kapatiyoruz :)

Sira geldi css kodumuzu olusturmaya: css.css

css.css dosyasmi da asagidaki gibi olmali :

/* makaleci menu css alani*/
#menu {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
z-index:130;
}
#menu li {
display:block;
margin: 0 0 0 4px;
padding:0;
float:left;
}
#menu li a{
text-decoration:none;
text-align:center;
font-size:13px;
color:#CBE1ED;
display:block;
width:96px;
height:21px;
background: #383840;
border:0;
padding:5px 0 0 0;
font-weight:bold;
line-height:21px;
margin-top:-5px;
}
#menu li a:hover{
text-decoration:none;
color:#0099CC;
width:96px;
height:26px;
border:0;
}

html dosyasinda actigimiz menu clasinin icerigini buradaki css dosyasinda veriyoruz..

#menu {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
z-index:130;
}

yukaridaki kod ile menu bolumunun nerelerde ve pozisyonlarini belirtiyoruz

#menu li {
display:block;
margin: 0 0 0 4px;
padding:0;
float:left;
}

yukaridaki css kodlari ilede menumuzu siraliyoruz ve maus ile uzerine geldigimiz <li> ekiti ile belirttigimiz linklerin seklini ve semalini ayarliyoruz..

asagidaki kod ile menunun duragan halini yansitiyoruz, yani maus ile menunun uzerine gelmeden default hali..

#menu li a{

bu alandaki ayarlarla oynayarak menunuzu istediginiz sekilde degistirebilirsiniz..

sira geldi menumuze biraz gorsellik katmaya, maus ile menude bir linkin uzerine geldigimizde bulundugu alan birazcik asagi dogru uzasin, bunun icinde bu alani kullanacagiz..

#menu li a:hover{

bildiginiz gibi a:hover etiketi linkler icin kullanir burada da listeledigimiz menuye maus ile geldigimizde yazi rengini degistirecegiz ve menunun biraz asagi dogru uzanmasini saglayacagiz..

DEMO bakabilirsiniz : http://www.makaleci.com/dersler/css-menu/cssmenu.html

arkadaslar ben aciklamalari ile anlattim, direkt aciklamalari gecip kaynak kodlarini isteyen arkadaslar asagidaki alandan 2 dosyanin kodlarini alabilirler..

cssmenu.html

<HTML>
<HEAD>
<TITLE>Makaleci.com css menu ornegi..</TITLE>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-9″>
<META name=”description” content=””>
<META name=”keywords” content=””>
<META name=”generator” content=”CuteHTML”>
<link rel=”stylesheet” href=”./css.css” type=”text/css” />

</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<div><ul id=”menu”>
<li><a href=”http://www.makaleci.com/”>Ana Sayfa</a></li>
<li><a href=”http://www.makaleci.com/iletisim”>iletiþim</a></li>
<li><a href=”http://www.makaleci.com/makale-nasil-eklenir/makale-nedir”>Makale Nedir?</a></li>
<li><a href=”http://www.kuaza.com/”>Resim Yükle</a></li>
<li><a href=”http://www.kuaza.com/”>Kuaza La</a></li>
</ul></div><br /><br />
</BODY>
</HTML>

css.css

/* makaleci menu css alani*/
#menu {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
z-index:130;
}
#menu li {
display:block;
margin: 0 0 0 4px;
padding:0;
float:left;
}
#menu li a{
text-decoration:none;
text-align:center;
font-size:13px;
color:#CBE1ED;
display:block;
width:96px;
height:21px;
background: #383840;
border:0;
padding:5px 0 0 0;
font-weight:bold;
line-height:21px;
margin-top:-5px;
}
#menu li a:hover{
text-decoration:none;
color:#0099CC;
width:96px;
height:26px;
border:0;
}

arkadaslar biraz olsun aciklamaya calistim, anlasilir degilse ve eksiklikleri varsa yorumlarla belirtin dokumani en kisa zamanda guncelleyecegim..

Kategoriler
Html yazıları tagları

DIV yerleşimleri hakkinda detayli anlatim, örnekler, resimler

layout-general-overviewYıllardır TABLE kullanımına alıştıktan sonra DIV ile karşımıza çıkan yeni yapıya önce yabancılık çeksek de biraz ciddi bir çabayla tarayıcımız tarafından nasıl yorumlanacağını anlayama başlıyoruz. Şimdi birkaç değişik örnekle, basit yapılardan başlayarak daha karmaşık yapılara doğru DIV’lerimizin farklı yerleştirme şekillerini örneklerle inceleyelim. Burada her ihtimali örnekleyerek anlatmam mümkün olmadığı için aklıma gelenleri paylaşmakla yetineceğim. Farklı yerleşimler yapmak istiyorsanız ve sorunla karşılaşıyorsanız lütfen bana ulaşın. Bu çalışmayı yaparken DIV’lerimizi birbirinden ayırabilmek için artalan renkleri ve numaralandırma kullanacağız.

* YAN YANA YERLEŞİM

DIV’lerimizi sola ya da sağa yaslı halde sıralamamızda çok fazla fark yoktur. Dikkat etmemiz gereken en önemli konu sıralama olacaktır.

1.a – SOLA YASLI

sola_yasli_div 

1.b – SAĞA YASLI

DIV’lerimizin yerleşiminde bazı senaryolarda kodlama sıralaması ile ekrana yansıyan görüntü arasında farklılıklarla karşılaşacağız. Bunun ilk örneğini sağa yaslı kullanımda görebilirsiniz. Ekrandaki yerleşim DIV1, DIV2, DIV3 sıralamasıyla olduğu halde kodlamada tam ters bir sıralama yapacağız. saga_yasli_div 

* ALT ALTA YERLEŞİM

Yan yana yerleşimi son derece rahat bir şekilde uyguladıktan sonra alt alta yerleşime geçebiliriz. Burada üç durum söz konusu olabilir. Uygulamasında sorun çıkabileceği için bu üç durumu da örnek olarak göstereceğiz.

2.a – SOLA YASLI

alt-alta-sola-yasli-div

2.b – ORTALI

alt-alta-ortali-div

 

2.c – SAĞA YASLI

alt-alta-saga-yasli-div

Dikkat ettiyseniz burada sadece MARGIN özelliğinin değerlerini değiştirerek DIV’lerimizi istediğimiz şekilde yerleştirmeyi başardık.

Aynı sonuca CLEAR özelliğini kullanarak şu şekilde ulaşabiliriz

Arkadaslar konunun tam anlatimi buradadir: Kaynak: Ali Çınkı, cinki.com

yukaridaki linke giderek resimlerde gordugunuz yerlesimler icin gerekli olan kodlari alabilirsiniz..