extradestek.org » CSS

Sitenizin sol üst köşesine Türk bayrağı koyalım

ByM — Fri, 20 Jul 2007 11:00:03 +0000

Güneydoğu’ da verilen şehitlerimiz yada Türklüğe hakaret gibi nedenlerle Web sitenizde bizim de yaptığımız gibi protesto etmek istiyorsunuz. Bir çok sitede olan bu uygulamayı sizde yapın istedim.

İlk adım olarak HTML sayfanızın;

etiketinden sonra aşağıdaki kodları sayfanıza ekleyin

http://www.extradestek.org yazan bölüme istediğiniz bir linki verin

Evet şimdi en önemli olan CSS kodunu style dosyanıza yada sayfanıza yapıştırın.
#trbayrak a {
background: url(“trbayrak.gif”) 0 0 no-repeat;
position: absolute;
top: 0px;
left: 0px;
text-indent: -1000px;
width: 100px;
height: 100px;
overflow: hidden;
position: fixed;
}

Aşağıdaki Türk bayrağını kaydedin.

Kodları aynen uyguladım ama halen bayrak görünmedi? Ne yapmam gerekiyor ?

trbayrak.gif dosyası ile style dosyanızın aynı dizinde olup olmadığını kontrol edin. Eğer bir üst klasörde ise “../trbayrak.gif” şeklinde düzeltme yapın.

Sayfanızı CSS kodları ile ortalamak

ByM — Fri, 20 Jul 2007 09:54:51 +0000

Bir web sitesi oluşturdunuz, diyelim ki tasarımınızı Photoshop’ta yaptınız. Doğru bir şekilde export edin, örneğin: .php, .html, .asp uzantılarına sahip.

Bir CSS oluşturun ve sayfanızdan buna link verin. Bunun için harici bir CSS olsun ve ismi de style.css olsun.

Aşağıdaki kodu web sayfanızda tagları arasına kopyalayıp yapıştırın.

CSS dosyanıza aşağıdaki CSS kodlarını ekleyin. Bu kodlar tarayıcınıza sayfanızı ortalamak için gerekli talimatı verecektir.

body
{
text-align: center; */ IE’de ortalama */
}
#container
{
margin: 0 auto; */Firefox’ta ortalama */
}

Şimdi de aşağıdaki kodu web sayfanıza eklemeniz gerekiyor. Varsa isimlerde gerekli değişiklikleri yapın.

Bu kadar. Bu tag içinde yer alan her şey tarayıcılarınızda ortalanmış bir halde görünecektir.

CSS ile Arkaplan Özellikleri

ByM — Fri, 20 Jul 2007 09:51:46 +0000

CSS özellikleri bir elementin arkaplanını belirlemenize imkan sağlar. Arkaplanlar renkler ya da resimler olabilir.

Arkaplan özellikleri şunlardır:
1. back-ground,
2. background-color,
3. background-image,
4. background-repeat,
5. back-ground-attachment,
6. background-position.

Şimdi bunları tek tek açıklayalım:

1. background

Değer: background-color, background-image, back ground-repeat, background-attachment, back-ground-position, inherit

Nelere uygulanır: Bütün unsurlara.

background özelliği kişisel arkaplan özelliklerini ayarlamak için pratik bir yoldur.

Örnek:

BODY { background: red }
P { background: url(“bg.png”) #cecece 50% repeat fixed }

2. background-color

Değer: color, transparent, inherit
Nelere uygulanır: Bütün unsurlara.

Örnek:

table { background-color: #cecece }

3. background-image

Değer: url, none, inherit
Nelere uygulanır: Bütün unsurlara.

Bir arkaplan resmi ayarladığınız zaman eğer resim mevcut değilse bir renk belirtmeniz gerekir.

Örnek:

.title { background-image: url(“images/title.gif”) }
div { background-image: none }

4. background-repeat

Değer: repeat, repeat-x, repeat-y, no-repeat, inherit
Nelere uygulanır: Bütün unsurlara.

Bu özellik arkaplan resminin x veya y pozisyonunda tekrarı istendiği zaman kullanılır.

Örnek:

.content {
background: white url(“bg.gif”);
background-repeat: repeat-x;
background-position: center;
}

5. background-attachment

Değer: scroll, fixed, inherit
Nelere uygulanır: Bütün unsurlara.

Örnek:

.content {
background: white url(“bg.gif”);
background-repeat: repeat-x;
background-attachment: fixed;
}

6. background-position

Değer: percentage, length, top center bottom left center right, inherit
Nelere uygulanır: block-level ve değiştirilen unsurlar.

Örnek:

BODY { background: url(“logo.jpeg”) right top } /* 100% 0% */