Blog-Comic // Alper KOCAAĞAÇ

Css'ye Balıklama

Css'ye Balıklama Giriş

  24 Mart Cumar  - Kategori: CSS

Belki çok zor olduğunu düşündüğümüz için belki beceremem diye düşündüğümüzden ya da tembelliğimizden, öğrenmeyi çok istediğimiz CSS konusuna mesafeli yaklaşıyoruz. Subcide.com adresinde rastladığım Creating a CSS layout from scratch yazısında konu gayet iyi anlatılmış, ders ve rehber niteliğindeki bu yazıyı CSS öğrenmek isteyenler için biraz ekleme, çıkartma ile özetleyerek, kafasını gözünü yararak da diyebiliriz çevirmeye çalıştım. Umarım işinize yarar, benim yaradı..

Bu rehberde adım adım CSS in genel fonksiyonlarını ve işleyişini anlamaya çalışacağız. Testleri yaparken Firefox, Opera veya Safari gibi modern browserlar kullanmanızı tavsiye ederiz.. Gerçi daha önce CSS kullanmayanlar için giriş olarak bu yazının okunması iyi olacaktır w3schools introduction to CSS ama bence bu yazıyla da konuya balıklama dalabilirsiniz.

Görevimiz; aşağıdaki görünen siteyi CSS kullanarak dizayn etmek.

Web Sitemizin görünümü

İlk ihtiyacımız olan dizaynı oluşturan yapısal elemanları tanımlamak. Dizaynımızın temeli div tagı ile tanımlanan dikdörtgenler tarafından oluşturulur. Aşağıdaki resimde kullanacağımız dikdörtgenlerin yerleşimi görülmektedir;
Web Sitemizin yapısal görünümü

Burada görüldüğü gibi 5 adet temel dikdörtgeni tanımlamamız gerekiyor, bunlar;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Main Menu
Width: 760px
Height: 50px
 
# Header
Width: 760px
Height: 150px
 
# Content
Width: 480px
Height: içeriğe göre değişecek.
 
# Sidebar
Width: 280px
Height: içeriğe göre değişecek.
 
# Footer
Width: 760px
Height: 66px

Ayrıca sitemizin browserda ortalanmış olarak görünmesini istiyoruz, şimdi başlayabiliriz. Herhangi bir web sitesine başlarken temel HTML sayfası olarak aşağıdaki kodu kullanabiliriz. Bunu HTML programları yardımıyla yada notepad ile yapabilirsiniz (ben notepad2 ‘yi kullanıyorum.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Web Sayfası Adı</title>
<meta http-equiv="Content-Language" content="tr, en" />
 
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="HC" />
 
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
 
<body>
 
</body>
</html>

Bu dosyayı index.html olarak kaydedin ve web sitenizin kök dizinine (root) kopyalayın. Ek olarak yine root altında css ve images olarak iki tane klasör oluşturun.

İlk yapmamız gereken tüm sayfanın genişliğini ayarlamak. Bizim sitemizin genişliği sabit 760px olacak. Daha önce bahsettiğimiz beş tane dikdörtgen bu tanımlayacağımız genişliğin içersinde kalacak. Bunun için body tagının içersine id=”page-container” olarak bir div tanımlıyoruz. Sayfamızda şu şekilde yer alacak:

1
2
3
4
5
6
7

<body>
 
<div id="page-container">
Merhaba Dünya.
</div>
 
</body>

Bu tanımladığımız dikdörtgenin özelliklerini CSS dosyamızda saklayacağız, bunun için master.css adında boş bir bir text dosyası oluşturup bunu daha önce root altında oluşturduğumuz /css/ klasörüne atıyoruz.

HTML dosyamızdaki id=… şeklindeki adlandırmalar CSS dosyasında # ile başlayarak tanımlanırlar, HTML dosyamızda class=… şeklindeki sınıflandırmalar ise CSS dosyamızda . ile başlayarak tanımlanır. Aralarındaki temel fark bir id özel bir tanımlamadır ve HMTL dosyasında o id ‘den yalnızca bir tane bulunmalıdır, class ise genel bir sınıflandırmadır ve hemen hemen her tag için kullanılabilir. Şimdi, bizim sayfamızda id=”page-container” olarak belirtilen özel diktörkgen için CSS dosyasına yazmamız gereken kod #page-container { } şeklinde olacaktır. { } arasına tanımlamalarımızı yazacağız ve birbirinden ; ile ayıracağız. Şu şekilde;

1
2
3
4

#page-container {
  width: 760px;
  background: red;
}

Genişliği 760px olarak belirttik ve arkaplanı kırmızı yaptık, height tanımını sabit olarak yapmıyoruz çünkü bu değer içeriğe göre değişecek.

Browserlarda html ve body taglarının varsayılan margin ve/veya padding değeri 8px olarak belirlenir, bu da ilk yazımızın tepeden 8px aşağıda görünmesine yol açar. Bunun için html ve body taglarının margin ve padding değerlerini “0″ olarak CSS dosyasında tanımlıyoruz;

1
2
3
4

html, body {
  margin: 0;
  padding: 0;
}

Burada teker teker yazmak yerine “,” kullanarak aynı tanımı iki değişik tag için yapmış olduk.
HTML dosyamıza dönerek 5 temel dikdörtgenimizi temel dikdörtgenimizin içersine yerleştirecek olursak;

1
2
3
4
5
6
7

<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>

Şimdilik sayfamızın görünümü şu şekilde olacak;
div görünümü
CSS olmadan görünüm dikdörtgenlerin yukarıdan aşağıya doğru dizilmesinden ibaret ve kırmızı olmasının sebebi de css dosyasında page-container ile tanımladığımız dikdörtgenden geliyor, şimdi diğer dikdörtgenleri de tanımlamak gerekiyor; kırmızı rengin tüm sayfaya hakim olmasını kaldırıyoruz ve bunu sadece Main Nav içersine alıyoruz, aynı zamanda diğerlerine de renk atayıp boyutlarını tanımlıyoruz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#page-container {
  width: 760px;
}
 
#main-nav {
  background: red;
  height: 50px;
}
 
#header {
  background: blue;
  height: 150px;
}
 
#sidebar-a {
  background: darkgreen;
}
 
#content {
  background: green;
}
 
#footer {
  background: orange;
  height: 66px;
}

CSS dosyasını bu şekilde düzenleyip kayıt ettikten sonra sitemizin görünümü şu şekli alır:
div görünümü
Sidebar ve Content kısımlarının istediğimiz gibi olması amacıyla float özelliğinden yararlanıyoruz. Float ile dikdörtgenlerimizi sağa yada sola kaydırarak bir sonraki dikdörtgenin aşağıdaki satırda değilde hemen yanında yeralmasını sağlayabiliriz. Bunun için CSS dosyasında şu şekilde bir değişiklik yapalım:

1
2
3
4
5

#sidebar-a {
  float: right;
  width: 280px;
  background: darkgreen;
}

div görünümü
Şimdi content kısmına metin girişi yapalım, HTML dosyamızdaki satırlar şu şekilde olacak;

1
2
3
4
5
6
7
8
9
10

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac,
suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum
gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod
vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate
aliquam odio. Duis scelerisque justo a pede. Nam augue lorem,
semper at, porta eget, placerat eget, purus. Suspendisse mattis
nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

div görünümü
Fakat content kısmımız istediğimiz şekilde durmuyor, ikinci satırdan itibaren SidebarA kısmının altından devam ediyor, bu yüzden onu solda sabit bir genişlikte tutmak istiyoruz. SidebarA nın genişliği 280px olarak ayarlanmıştı, o zaman content dikdörtgeninin sağ tarafından 280px lik çıkıntı verebiliriz, şöyleki;

1
2
3
4

#content {
  margin-right: 280px;
  background: green;
}

HTML dosyamızda SidebarA dikdörtgenine de birşeyler karalayıp;

1
2
3
4
5
6
7
8
9
10

<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac,
suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum
gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod
vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate
aliquam odio. Duis scelerisque justo a pede. Nam augue lorem,
semper at, porta eget, placerat eget, purus. Suspendisse mattis
nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

Son durumda sitemizin görünümüne bakacak olursak şu şekilde olacak;
div görünümü
Burada SidebarA ‘nın uzayarak aşağıya doğru indiği halde Footer kısmının Content’in hemen altına yerleşmiş olması ve dolayısıyla SidebarA nın Footer kısmını bölmesi istemediğimiz bir durum. Bizim istediğimiz Footer kısmının en altta, altı kaplayacak şekilde durmasıydı. Bu durumu düzeltmek için Footer tanımlamasında clear özelliğini kullanacağız, CSS de şu şekile düzeltme yapıyoruz;

1
2
3
4
5

#footer {
  clear: both;
  background: orange;
  height: 66px;
}

Şimdi diğer ekstra biçimlendirmelere ve makyaj işlerine başlayabiliriz. Sayfa düzenini bozmadan bazı dikdörtgenleri gizlemek, göstermemek isteyebiliriz. Bunun için bir yeni bir sınıflandırma yapmamız gerekir. CSS dosyamıza ekleyeceğimiz satırlar şu şekilde olmalı;

1
2
3

.hidden {
  display: none;
}

HTML dosyamızda başlıklar için h1 den h6 kadar olan varsayılan biçimlendirmeleri kullanırız. Örneğin h1 biçimlendirmesini site başlığın için h2 biçimlendirmesini konu başlıkları için h3 ü ise altbaşlıklar vs için kullanabiliriz. Site başlığını düzenlersek HTML dosyamıza şu şekilde giriş yaparız.

1
2
3

<div id="header">
<h1>Enlighten Designs</h1>
</div>

Artık Ana Menümüzü oluşturabiliriz, ana menumuzu main-nav dikdörtgeni olarak tanımlamıştık. Ana menümüzü HTML kodlarından dl (definition list/tanımlama listesi) ile yazacağız. Herbir menü dt ile başlayacak şekilde ve yine herbirine farklı bir id vererek HTML dosyamızı düzenlersek;

1
2
3
4
5
6
7
8

<div id="main-nav">
    <dl>
        <dt id="about"><a href="#">About</a></dt>
        <dt id="services"><a href="#">Services</a></dt>
        <dt id="portfolio"><a href="#">Portfolio</a></dt>
        <dt id="contact"><a href="#">Contact Us</a></dt>
    </dl>
</div>

Navigasyon için genellikle unordered list kullanılır fakat yazarımız burada kişisel bir tercih yaparak definition list kullanıyor, bunun IE ile çalışırken işleri kolaylaştıracağını ve bazı css buglarının üstesinden geleceğini belirtiyor. Sonuçta kişisel bir tercih durumu. Her menu için id tanımlaması yapmamızın sebebi ise sonradan bunlara değişken resimler ekleyerek menü görünümünü zenginleştirmek istememiz. Şu an için header da navigasyonumuzu göstermek istemiyoruz ve daha önce hazırladigimiz .hidden sınıflandırması ile gizliyoruz;

1
2
3
4
5
6
7
8

<div id="main-nav">
    <dl class="hidden">
        <dt id="about"><a href="#">About</a></dt>
        <dt id="services"><a href="#">Services</a></dt>
        <dt id="portfolio"><a href="#">Portfolio</a></dt>
        <dt id="contact"><a href="#">Contact Us</a></dt>
    </dl>
</div>

Aynı zamanda footer a da navigasyon, copyright ve credits bilgilerini eklemek istiyoruz, bunun için aşağıdaki düzenlemeleri yapıyoruz;

1
2
3
4
5
6
7
8
9
10
11
12

<div id="footer">
    <div id="altnav">
        <a href="#">About</a> -
        <a href="#">Services</a> -
        <a href="#">Portfolio</a> -
        <a href="#">Contact Us</a> -
        <a href="#">Terms of Trade</a>
    </div>
    Copyright &copy; Enlighten Designs Powered by
    <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a>
    and <a href="http://www.vadmin.co.nz/"> Vadmin 3.0 CMS</a>
</div>

Son olarak yaptığımız değişikliklerle sitemizin görünümü şu şekli alıyor:
div görünümü
İçerik için content ile tanımladığımız dikdörtgenimize birşeyler yazalım;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="content">
    <h2>About</h2>
    <p><strong>Enlighten Designs</strong> is an Internet solutions provider
    that specialises in front and back end development. To view some of the
    web sites we have created view our portfolio.</p>
    <p>We are currently undergoing a 'face lift', so if you have any
    questions or would like more information about the services we provide
    please feel free to contact us.</p>
 
    <h2>Contact Us</h2>
    <p>Phone: (07) 853 6060<br />
    Fax: (07) 853 6060<br />
    Email: <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a>
    <br />
    P.O Box: 14159, Hamilton, New Zealand</p>
    <p><a href="#">More contact information...</a></p>
</div>

Burada da önceki biçimlendirmelerden gelecek etkileri sıfırlamak için, h1 için yaptığımız ayarlamaları yapıyoruz, aşağıdaki h2 ve p tanımlamalarında dikkatinizi çekmek istediğim bu tanımlamalarının #content ‘in alt tanımı olarak yapılmış olması. Bunun bize sağladığı yarar; bu tanımların HTML dosyamızda sadece div id=”content” olarak tanımladığımız dikdörtgen içersinde geçerli olmasıdır.

1
2
3
4
5
6
7
8
9

#content h2 {
  margin: 0;
  padding: 0;
}
 
#content p {
  margin: 0;
  padding: 0;
}

Bazı genel metin biçimlendirmelerini de yaparsak, font biçimi büyüklüğü vs.. gibi, CSS dosyamıza aşağıdakileri eklememiz gerekecek;

1
2
3
4
5
6

body {
  font-family: Arial, Helvetica, Verdana, Sans-serif;
  font-size: 12px;
  color: #666666;
  background: #ffffff;
}

Bunları ekledikten sonra sitemizin görünümü şu şekilde olacaktır;
genel görünümü
Devam edelim, content dikdörtgeninin içerisinde paragaraflardan ve başlıklardan sonra bir miktar (15px) boşluk bırakalım; bunun için az önceki kodlara aşağıdaki şekilde ekleme yapalım;

1
2
3
4
5
6
7
8
9
10
11

#content h2 {
  margin: 0;
  padding: 0;
  padding-bottom: 15px;
}
 
#content p {
  margin: 0;
  padding: 0;
  padding-bottom: 15px;
}

sidebar ve content kısımlarını birbirinden ve kenarlardan biraz ayırarak (25px) nefes aldırmak için ikisine de alt tanım olarak .padding adında bir sınıf tanımlıyoruz;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#sidebar-a {
  float: right;
  width: 280px;
}
 
#sidebar-a .padding {
  padding: 25px;
}
 
#content {
  margin-right: 280px;
}
 
#content .padding {
  padding: 25px;
}

ve bu sınıfları HTML sayfamızda göstermek için aşağıdaki şekilde ekleme yapıyoruz;

1
2
3
4
5
6
7
8
9
10
11
12

<div id="sidebar-a">
    <div class="padding">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
    gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac,
    suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum
    gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod
    vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate
    aliquam odio. Duis scelerisque justo a pede. Nam augue lorem,
    semper at, porta eget, placerat eget, purus. Suspendisse mattis
    nunc vestibulum ligula. In hac habitasse platea dictumst.
    </div>
</div>

Yine content ve sidebar ‘da satırların arasını biraz açmak ve rahat okunur hale getirebilmek için satırlar arası varsayılan dikey mesafeyi biraz değiştiriyoruz, bunun için CSS dosyamızı şu şekilde düzeltiyoruz;

1
2
3
4
5
6
7
8
9
10

#sidebar-a {
  float: right;
  width: 280px;
  line-height: 18px;
}
 
#content {
  margin-right: 280px;
  line-height: 18px;
}

h2 olarak taımlanan başlığın biçimlendirmesi bizi tatmin etmedi, biz de başlıklar için iki tane resim dosyası hazırladık ve bunları kullanmaya karar verdik. Bunları /images/headings/ klasörünün altına kopyaladık;

about

contact

Bunları HTML sayfamızda göstermek için HTML sayfamızda aşağıdaki şekilde değişiklik yaptık;

1
2
3
4
5

<h2><img src="images/headings/about.gif"
width="54" height="14" alt="About" /></h2>
 
<h2><img src="images/headings/contact.gif"
width="98" height="14" alt="Contact Us" /></h2>

Header için bir logo hazırlayarak bunu /images/general/logo_enlighten.gif olarak kaydettik.
contact
Aynı zamanda arkaplan için 760px lik bir resim hazırlayarak bunu da /images/headers/about.jpg olarak kaydettik.
about
header arkaplanına bu resmi atamak için CSS de aşağıdaki değişikliği yapıyoruz;

1
2
3
4

#header {
  height: 150px;
  background: #db6d16 url(../images/headers/about.jpg);
}

url() içerisine tam yolu yazacağınız gibi buradaki gibi göreceli yolu da yazmanız mümkün. Hiç bir klasör adı belirtmemiş olsaydık resmi CSS dosyasının bulunduğu klasörde arayacaktı. Burada .. kullanarak bir üst klasöre çıktık ve oradan devam eden yolu yazdık. Logomuzu HTML dosyamızdaki header dikdörtgenine yerleştiriyoruz;

1
2
3
4
5
6

<div id="header">
    <h1>
        <img src="images/general/logo_enlighten.gif"
    width="236" height="36" alt="Enlighten Designs" border="0" />
    </h1>
</div>

about
Fakat istediğimiz yerde durmuyor bunun için h1 tagının tanımıyla oynamamız gerekiyor, CSS dosyasına h1 için şunları yazıyoruz;

1
2
3
4
5
6
7

h1 {
  margin: 0;
  padding: 0;
  float: right;
  margin-top: 57px;
  padding-right: 31px;
}

about
Şimdi oldu gibi, burada margin-right yerine padding-right kullanmamızın sebebi IE nin margin tanımlarında garip davranışlar sergilemesi.

Hedef dizaynımıza ulaşmamıza çok az kaldı, şimdi footer için biçimlendirmeleri yapıyoruz. Dizayn da görünen font çok açık bir gri (#c9c9c9), Tahoma ve 10px boyutlarında.

1
2
3
4
5
6
7

#footer {
  clear: both;
  height: 66px;
  font-family: Tahoma, Arial, Helvetica, Sans-serif;
  font-size: 10px;
  color: #c9c9c9;
}

Link rengini değişitip alt çizgiyi yokediyoruz;

1
2
3
4

#footer a {
  color: #c9c9c9;
  text-decoration: none;
}

Fare ile üzerine gelindiğinde değişecek rengi de orange olarak ayarlıyoruz;

1
2
3

#footer a:hover {
  color: #db6d16;
}

Son olarak dikdörtgene 1 piksellik üst çerçeve ekliyoruz, satır aralarını öncekiler gibi 18 piksel yapıyoruz ve bir miktar padding ekliyoruz;

1
2
3
4
5
6
7
8
9

#footer {
  clear: both;
  font-family: Tahoma, Arial, Helvetica, Sans-serif;
  font-size: 10px;
  color: #c9c9c9;
  border-top: 1px solid #efefef;
  padding: 13px 25px;
  line-height: 18px;
}

Son ayarlamaları da yaparak, navigasyonumuzu sağa yanaşık hale getirip, genişliğini sabitlersek, footer kısmımız tamamlanmış olur;

1
2
3
4
5

#footer #altnav {
  width: 350px;
  float: right;
  text-align: right;
}

Şimdi ana menüyü ve navigasyon buttonlarını oluşturma vakti geldi. Bunu birkaç şeklde yapmamız mümkün, burada biraz daha görsellik önplana alınarak farklı bir yaklaşım sergilenecek. Böylelikle CSS konusunda öğreneceklerimiz de gelişecek.. İlk olarak HTML dosyamızda menümüzün yeraldığı kısımdaki .hidden sınıflandırmasını kaldırıyoruz ve menümüzü görünür yapıyoruz. main-nav tanımındaki arkaplanın rengini kırmızı olarak ayrlamıştık bunu da kaldırıyoruz. Menüler için rollover image kullanacağız, bu birkeç şekilde yapılabilir, burada tamamen CSS tabanlı bir dizayn anlatılacak. Bu buttonlar için üç durum söz konusu: (rollover, normal, selected) Buttonların görünümü ve kullanımı aşağıdaki şekilde olacak;
about
Tüm menüler için, ki bu 4 tane demek, ayrı ayrı aşağıdaki şekilde resim dosyalarını oluşturmamız gerekiyor. Bunları oluşturup /images/nav/ altına kaydediyoruz.
aboutservicesportfoliocontact
Şimdi bu menüleri CSS dosyasında tanımlamaya başlayalım, öncelikle aşaıdaki kodu CSS dosyamızdaki #main-nav kısmıyla değiştiriyoruz;

1
2
3
4

/* Main Navigation */
#main-nav { height: 50px; }
#main-nav dl { margin: 0; padding: 0;
}

Yukarıda yaptığımız yüksekliği 50 piksel olarak ayarlamak ve tüm şeritler için margin tanımını sıfırlamak. Sonra da IE5/mac taki bug için bazı düzenlemeler yapıyoruz.

1
2
3
4

/* IE5 Mac Hack */
#main-nav { padding-left: 11px; }
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */

Menulerimizin soldan sağa doğru sıralanmasını sağlamak için;

1

   #main-nav dt { float: left; }

Resimlerimiz 150 piksel yüksekliğinde fakat bizim görünmesini istediğimiz alanlar sadece 50 piksel, buna göre link verilmiş olan menuler için biçimlendirmeleri yapıyoruz.

1
2
3
4
5
6
7
8

#main-nav dt a {
  display: block;
  height: 0px !important;
  height /**/:50px; /* IE 5/Win hack */
  padding: 50px 0 0 0;
  overflow: hidden;
  background-repeat: no-repeat;
}

Yine bu linklerde farenin üzerine gelmesi durumunda nasıl davranacağını belirliyoruz, menü için kullandığımız resmi 50 piksel yukarıya kaydırıyoruz.

1
2
3

#main-nav dt a:hover {
  background-position: 0 -50px;
}

Tüm menümüz için resimlerimizi tanımlıyoruz ve ait oldukları yolları yazıyoruz. Eğer buradaki resimlere ait dosya adları ve yollar doğru yazılmışsa sorunsuz çalışacaktır.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#main-nav dt#about,
#main-nav dt#about a {
 width: 71px; background-image: url(../images/nav/about.gif);
}
#main-nav dt#services,
#main-nav dt#services a {
 width: 84px; background-image: url(../images/nav/services.gif);
}
#main-nav dt#portfolio,
#main-nav dt#portfolio a {
 width: 95px; background-image: url(../images/nav/portfolio.gif);
}
#main-nav dt#contact,
#main-nav dt#contact a {
 width: 106px; background-image: url(../images/nav/contact.gif);
}

Son olarak CSS dosyamıza bazı eklemeler yaparak tamamlıyoruz.

1
2
3
4
5
6
7
8
9
10

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
  background-position: 0 -100px;
}

HTML dosyamızda bu sınıflandırmayı şu şekilde kullanmamız gerekecek;

1

&lt;body class=&quot;about&quot;&gt;

Headerda resmi göstermekle ilgili bir problemimiz var gibi görünüyor, bunun için CSS dosyamıza aşağıdaki kodu ekliyoruz;

1
2
3
4
5

body.about #header {
  height: 150px;
  background: #db6d16
     url(../images/headers/about.jpg);
}

Önceki IE versiyonlarında CSS biçimlendirmelerimiz tam olarak istediğimiz gibi görünmeyecektir. Bunun için birkaç ekleme daha yapıyoruz;

1
2
3
4
5
6

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	text-align: center;
}

Merkezde container div bulunuyor fakat bu div içerisindeki textler de o şekilde görünüyor, biz bunu istemiyoruz ve bu yüzden container div için “text-align:left” eklemesi yapıyoruz.

1
2
3
4
5

#page-container {
	width: 760px;
	margin: auto;
	text-align: left;
}

HTML sayfamız için copyright kısmını dolduruyoruz;

1
2
3
4
5

<div id="copyright">
Copyright © Enlighten Designs<br />
Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

copyright ve altnav için padding düzenlemesi yapıyoruz;

1
2
3
4
5
6
7
8
9
10
11

#footer #altnav {
	clear: both;
	width: 350px;
	float: right;
	text-align: right;
	padding-top: 13px;
}
 
#footer #copyright {
	padding-top: 13px;
}

son olarak ta menülerin hover düzenlemelerini ekliyoruz;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

body.about dt#about,
body.about dt#about a,
body.about dt#about a:hover,
body.services dt#services,
body.services dt#services a,
body.services dt#services a:hover,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.portfolio dt#portfolio a:hover,
body.contact dt#contact,
body.contact dt#contact a,
body.contact dt#contact a:hover {
	background-position: 0 -100px;
}

Sanırım bu kadar yeter..

 



Bugün Siteme Giriş Yapan 25241 ziyaretçi'ye Teşekkür Ederim














► © Copyright - Tasarim Kodlayan : Raddizayn - Design : Cengizhan Serdar - Tum Hakları Saklıdır...◄
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol