Giriş Yap
x
Güncel Scriptler ve Programlar, Warez, Php Script ve Asp Script, Tema, indir. Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
[-]

SPONSOR REKLAM


VbPro avatar
Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5

Tema yapımı - üst kısım css kodu yazımı


Çevrimdışı VbPro
#1
Bir önceki derste üst bölüm için XHTML kodlamasını yapmıştık. Şimdi orada tanımladığımız sınıfları tanımlayacağız. Buradaki css kodlarını yazarken XHTML kodlamaması yaptığım sırayla gidiyorum ve en dış çerçevem için css tanımlamasını yaparak kodlamaya başlıyoruz. Css kodlamasının nasıl bir düzende yapıldığını detaylı incelemek için bu adresi ziyaret edebilirsiniz.

PHP Kod:
#anagovde{width: 100%;} 

Ardından üstmenü için yazdığım cssleri tanımlamaya başlıyorum. float:left ile menüyü sola yapıştırıyorum. Arkaplan tanımlamasını yapıyorum ve arkaplanın ekranı yatay şekilde kaplaması için repeat-x komutunu yazıyorum.
Burada width değerimi 100% olarak tanımlıyorum ve sabit yükseklikte olan menüm için height:30px değerini veriyorum.
Tabi bu durumda burada çıkacak menü öğeleri ekranın sol köşesine yapışacaktır. Halbuki ben sitemin genişliğinin 930px olmasını istiyorum. Bu yüzdenikinci olarak yazdığım divin tanımlamasına width değerini 930 olarak belirtiyorum ve ekranı ortalaması için margin:0 auto kodunu yazıyorum.

PHP Kod:
02.
float
left;
03.
width
100%;
04.
height
30px;
05.
background
url(../images/ust-bg-orta.pngrepeat-x;
06.
}
07.
.ustmenu{
08.
width
930px;
09.
height
30px;
10.
margin
0 auto;
11.


Üstmenünün tanımlamasının ardından hemen o bölümün altındaki logo bölümünü tanımlıyorum. Bunun içinde 2 div tanımlaması yapmıştık.
Yine ekranı ortalaması için width ve margin değerlerini yazıyorum. Logo alanı için yüksekliğimi 61px yazdım, ardından margin-top ve margin-bottom komutları ile yukarıdan ve aşağıdan 20şer piksellik boşluk bıraktım.
Logomu img olarak gösterdiğim için .logo img şeklinde bir tanımlama yapıyorum ve logomun çıkması gereken boyutları tanımlıyorum.
Farklı boyutta bir logo resmi yüklesem bile burada belirttiğim boyutlarda çıkacaktır.

PHP Kod:
01.
.logo-dis{
02.
width
930px;
03.
height
61px;
04.
margin
0 auto;
05.
margin
-top20px;
06.
margin
-bottom20px;
07.
}
08.
.logo img{
09.
float
left;
10.
width
354px;
11.
height
61px;
12.


Logomun hemen altında yine arkaplan olarak ekranı kaplayan bir arkaplan resmi var ve onun üzerinde üstmenüm hizalanmış durumda. Arkaplanın ekranı kaplaması için width değerini 100% veriyorum. Ardından sabit olan yüksekliği belirtiyorum, arkaplan resmimin yolunu yazarak repeat-x ile yatay olarak tekrarlattırıyorum. Burada dikkat edilecek husus üst menüde yaptığımız gibi menünün çıkacağı alanı 930px olarak belirlemek ve ortalamaktır. Bu yüzden .anamenu tanımlaması içerisine width değerini 930 olarak yazıyoruz ve ortalama kodumuz olan margin:0 auto'yu yazıyoruz.

PHP Kod:
01.
.anamenu-orta{
02.
float
left;
03.
width
100%;
04.
height
46px;
05.
background
url(../images/anamenu-orta.pngrepeat-x;
06.
}
07.
.anamenu{
08.
width
930px;
09.
height
46px;
10.
margin
0 auto;
11.


Burada kadar yaptığımız şeyleri görebilmek için index.php ve template.css dosyalarındaki değişiklikleri kaydederek sitemizi önizlemek için tarayıcı sayfasını yeniliyoruz.
Buraya kadar yazdığımız kodların bütünü bu şekilde olmalı.

PHP Kod:
01.
/* Tarayıcılar için ortak css sıfırlama */
02.
html
bodydivspanappletobjectiframeh1h2h3h4h5h6pblockquotepreaabbracronymaddressbigcitecodedeldfnemfontimginskbdqssampsmallstrikestrongsubsuptt, var, buicenterdldtddolullifieldsetformlabellegendtablecaptiontbodytfoottheadtrthtd {margin0padding0border0outline0font-size100%; text-decoration:none;}
03.
body 
line-height1; }
04.
ol
ul { list-stylenone; }
05.
blockquote
quotesnone; }
06.
:focusa:focusa:activeoutline0; }
07.
ins
text-decorationnone; }
08.
del
text-decorationline-through; }
09.
table
{border-collapsecollapseborder-spacing0;}
10.
.soruncoz:after {content"."displayblockheight0clearbothvisibilityhidden;}
11.
.soruncoz {displayinline-block;}
12.
html .soruncoz {height1%;}
13.
.soruncoz {displayblock;}
14.
a img 
bordernone; }
15.
color#000; text-decoration: none;}
16.
a
:hovera:activea:focus color#000; text-decoration: underline;}
17.
/* Sıfırlama Son */
18.
/* Anasayfa Genel Kodlar*/
19.
body
{
20.
margin
:0;
21.
background
-color:#fff;
22.
font
:normal 12px/18px ArialHelveticasans-serif;
23.
color
:#000;
24.
}
25.
#anagovde{width: 100%;}
26.
.ust-bg-orta{
27.
float
left;
28.
width
100%;
29.
height
30px;
30.
background
url(../images/ust-bg-orta.pngrepeat-x;
31.
}
32.
.ustmenu{
33.
width
930px;
34.
height
30px;
35.
margin
0 auto;
36.
}
37.
 
38.
.logo-dis{
39.
width
930px;
40.
height
61px;
41.
margin
0 auto;
42.
margin
-top20px;
43.
margin
-bottom20px;
44.
}
45.
.logo img{
46.
float
left;
47.
width
354px;
48.
height
61px;
49.
}
50.
 
51.
.anamenu-orta{
52.
float
left;
53.
width
100%;
54.
height
46px;
55.
background
url(../images/anamenu-orta.pngrepeat-x;
56.
z
-index3;
57.
position
relative;
58.
}
59.
.anamenu{
60.
width
930px;
61.
height
46px;
62.
margin
0 auto;
63.


Eğer kodlarda bir yanlışlık yapmadıysanız resimdeki gibi bir görüntü elde etmiş olmalısınız.

Resim

Yalnız üstteki resimde dikkat ederseniz joomlaya dair hiçbir şey sitede görünmedi. Çünkü yazmış olduğumuz modül pozisyonlarında herhangi bir modül yayınlamadık. İsterseniz ustmenu ve anamenu pozisyonlarına birer menü atayarak sayfada görünüp görünmeyeceğini kontrol edebilirsiniz.

Resim

Modül pozisyonlarında modül yayınlamamızın ardından bu şekilde bir görüntü ortaya çıkmış olması lazım. Menülerin yatay çıkması için herhangi bir tanımlama yapmadık. Bu yüzden iki menüde alta sıralı şekilde gözüktü. Bunuda ilerleyen adımlarda ayarlayacağız.
Sitemizin üst bölümünü tamamladık. Şimdi orta bölüm olarak isimlendirdiğimiz içerik alanı ve sağ sütunu ayarlayacağız. >>
Ara
Cevapla
 


Anahtar Kelimeler

Tema yapımı - üst kısım css kodu yazımı indir, Tema yapımı - üst kısım css kodu yazımı Videosu, Tema yapımı - üst kısım css kodu yazımı online izle, Tema yapımı - üst kısım css kodu yazımı Bedava indir, Tema yapımı - üst kısım css kodu yazımı Yükle, Tema yapımı - üst kısım css kodu yazımı Hakkında, Tema yapımı - üst kısım css kodu yazımı nedir, Tema yapımı - üst kısım css kodu yazımı Free indir, Tema yapımı - üst kısım css kodu yazımı oyunu, Tema yapımı - üst kısım css kodu yazımı download


Tema yapımı - üst kısım css kodu yazımı konusu
Tema yapımı - üst kısım css kodu yazımı Konusunun Etiketleri Etiketler Tema yapımı - üst kısım css kodu yazımı indir, Tema yapımı - üst kısım css kodu yazımı download, Tema yapımı - üst kısım css kodu yazımı script indir, Tema yapımı - üst kısım css kodu yazımıwarez script, Tema yapımı - üst kısım css kodu yazımı hakkinda, Tema yapımı - üst kısım css kodu yazımı teması, Tema yapımı - üst kısım css kodu yazımı ücretsiz indir, Tema yapımı - üst kısım css kodu yazımı full indir,Tema yapımı - üst kısım css kodu yazımı temasi indir,Tema yapımı - üst kısım css kodu yazımı full warez,Tema yapımı - üst kısım css kodu yazımı php script indir,Tema yapımı - üst kısım css kodu yazımı free download,Tema yapımı - üst kısım css kodu yazımı çözümü,Tema yapımı - üst kısım css kodu yazımı hatası,Tema yapımı - üst kısım css kodu yazımı programını indir,Tema yapımı - üst kısım css kodu yazımı kurulumu,Tema yapımı - üst kısım css kodu yazımı crack,Tema yapımı - üst kısım css kodu yazımı serial,Tema yapımı - üst kısım css kodu yazımı asp indir,Tema yapımı - üst kısım css kodu yazımı tasarim indir,Tema yapımı - üst kısım css kodu yazımı script arşivi,Tema yapımı - üst kısım css kodu yazımı resimli anlatım,Tema yapımı - üst kısım css kodu yazımı videolu anlatım,Tema yapımı - üst kısım css kodu yazımı html tema
Tema yapımı - üst kısım css kodu yazımı Konusunun Linki Direk Link
Tema yapımı - üst kısım css kodu yazımı Konusunun HTML Kodu HTML Link
Tema yapımı - üst kısım css kodu yazımı Konusu BBCode Linki BBCode Link
Tema yapımı - üst kısım css kodu yazımı Konusunu Paylaş Sosyal Paylaş


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Tema yapımı - orta bölüm css kodu yazımı VbPro 0 958 20.08.2014, Saat:10:38
Son Yorum: VbPro
  Tema yapımı - orta kısım xhtml kodu yazımı VbPro 0 994 20.08.2014, Saat:10:36
Son Yorum: VbPro
  Tema yapımı - üst kısım xhtml kodu yazımı VbPro 0 1,045 20.08.2014, Saat:10:30
Son Yorum: VbPro
  Tema yapımı - template dosyasını tanıma VbPro 0 1,037 20.08.2014, Saat:10:29
Son Yorum: VbPro
  Tema yapımı - Boş şablon kurulumu ve index.php dosyasını tanıma VbPro 0 1,400 20.08.2014, Saat:10:18
Son Yorum: VbPro



Konuyu Okuyanlar: 1 Ziyaretçi
istanbul escort bayan travesti travestiler
ankara escort kayseri escort antalya escort pornolar konya escort