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
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..