KODSİSTEMİ

CSS anlatım

fenercafe anlatımıdır.

arkadaşlar bu konuda sizlere birbirinden farklı tasarım örnekleri göstereceğim... sizlerde anlattıklarımı kavradığınız zaman aşağıdaki örnek tasarımları bozup yeni türler ortaya çıkarabileceksiniz...
ayrıca bu tasarımlarda boyut sınırı yok isteyen istediği boyutu uygulayacak...
öncelikle şunları bilin

KODLARI TASARIM AYARLARI / GELİŞMİŞ / TASARIM ÜSTÜ-ALTI ve CSS KODU BÖLÜMLERİNE KOYUYORUZ...



content ==> sayfa altı demek (içerik altı )

header
==> başlık resmi demek

container ==> bazı bölümlerde göreceksiniz alt arkaplan demek örneği bir altta

nav container ==> menülerin alt fonu

nav ==> menü yani navigasyon

widht ==> genişlik

height ==>yükseklik

color==> renk

border / border color ==> kenar kalınlığı / kenar rengi

background color ==> arkaplan rengi

NOT : ARKADAŞLAR background image() yazan yerlere resim koyabilirsiniz..özelliklede header bölümünde işinize yarar

şidmi arkadaşlar aşağıdaki örnek tasarımları yavaş yavaş koymaya başlayacağım öncelikle bir tür üstünde çalışacağız ...bu türün adını ben A1 koydum...

A1 TASARIMI

şunu unutmayın margin ve padding değerleri ile şimdilik oynamayın



Bölgeler ve açıklamaları :
A BÖLGESİ ==> HEADER_Oben
B BÖLGESİ ==> Streifen_oben
C BÖLGESİ ==>CONTENT
D BÖLGESİ==>Streifen_unten
NAV==> MENÜLER

kodlara başlayalım...

öncelikle bu kodlar css kodlarına verilen komuttur yani onların biçimlenmesi için gereklidir..

CSS KODU BÖLÜMÜNE (Style tagları olmadan) koyunuz


Kod:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}


--------------------------------------------------------------------------------------------

bu kod link içindir...
açıklamaları :
color : normal rengidir
a hover: üstüne gelince değişecek renktir
a active : tıklanırkenki renktir
a visited : tıklandıktan sonraki renktir..
CSS KODU BÖLÜMÜNE(Style tagları olmadan)koyunuz..

Kod:
body {background-color:#F2F2F2;}
a{color:#000080; font-size: 14px; text-decoration: none;}
a:hover {color: #000080; font-size: 14px; text-decoration: none;}
a:link {color: #000080; font-size: 14px; text-decoration: none;}
a:active {color: #000080; font-size: 14px; text-decoration: none;}
a:visited {color: #000080; font-size: 14px; text-decoration: none;}


------------------------------------------------------------------------------------------------

Bu kodlar nav kodlarıdır yani menü içindir...
-bacground image() ==> buraya widht height boyutlarına uygun menü resmi koyabilirsiniz..
CSS KODU BÖLÜMÜNE koyunuz...

Kod:
li.nav_element a{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image: none;
background-color:#000000;}

li.nav_element a:hover{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image: none;
background-color:#000000;}


---------------------------------------------------------------------------------------------

BU kodlarda en başta anlattığım bölüm kodları...
CSS KODU BÖLÜMÜNE koyunuz..
Kod:

* { padding: 0; margin: 0; }

#Testdesign2 {
margin: 0 auto;
width: 922px;}

#Header_oben {
color: #333;
width: 900px;
height: 60px;
float: left;
padding: 10px;
border: 1px solid #80807F;
margin: 10px 0px 0px 0px;
background-image: none;
background: #000000;}

#Streifen_oben {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
background: #4E4848;}


#content {
color: #333;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 738px;
float: left;
background: #000000;
overflow:auto;}


#nav_container {
float: right;
color: #333;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 140px;
display: inline;
background: #FDF6Da;}

#Streifen_unten {
width: 900px;
clear: both;
color: #333;
border: 1px solid #80807F;
background: #000000;
margin: 0px 0px 10px 0px;
padding: 10px;}

#counter{text-align:center;}


NOT: #counter sayaç için olan koddur...bunuda ilerleyen bölümlerde daha detaylı anlatacağım..

-----------------------------------------------------------------------------------------------
TASARIM ÜSTÜNE

Kod:
<div id="Testdesign2">
<div id="Header_oben">text</div>
<div id="Streifen_oben">text</div>


text yazan yerlere yazı yazabilirsiniz...texti silip boş bırakırsanız başlık resmi üstü boş kalır...

----------------------------------------------------------------------------------------------------
TASARIM ALTINA
Kod:
<div id="Streifen_unten">WWW.SİTENİZİN ADI.TR.GG</div></div>


sitenizin adı .tr.gg yazan yere copyright yazısı yazabilirsiniz...

_____________________________________________________________

A2 TASARIMI

Arkadaşlar üstteki örnekteki gibi bir tasarım ancak bu tasarımda menüyü biz yapıyoruz yani bize bir boşluk kalıyor ve o boşluğa menüyü biz koyuyoruz...

menüyü nasıl koyuyoruz? forumda hazır css menüler var onlardan birini alıp düzenleyin ve aşağıda belirtiiğim yere koyun...
şimdi basamakları inceleyin yine



CSS KODU BÖLÜMÜNE

Kod:
div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}


Kod:
a{color:#800000; font-size: 15px; text-decoration: none;}
a:hover {color: #800000; font-size: 15px; text-decoration: none;}
a:link {color: #800000; font-size: 15px; text-decoration: none;}
a:active {color: #800000; font-size: 15px; text-decoration: none;}
a:visited {color: #800000; font-size: 15px; text-decoration: none;}


Kod:
body {background-color:#F2F2F2;}


BU kod arkaplan rengi kodudur... background-color yerine background-image yazarsanız ve resim urlsi eklerseniz arkaplan resimden oluşur...


Kod:
* { padding: 0; margin: 0; }

#Testdesign3 {
margin: 0 auto;
width: 922px;}

#Header_oben {
color: #FFFFFF;
width: 900px;
height: 80px;
background-image: none;
background: #800000;
float: left;
padding: 10px;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;}

#Navi_Feld {
width: 900px;
background: #DAC9CB;
color: #4A0000;
padding: 10px;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;}


#content {
height: 300px;
width: 900px;
background: #F2F2E6;
color: #000000;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;
padding: 10px;
overflow:auto;}


#Feld_unten {
width: 900px;
color: #FFFFFF;
border: 1px solid #CCCCCC;
background: #800000;
margin: 0px 0px 10px 0px;
padding: 10px;}

#counter{text-align:center;}


----------------------------------------------------------------------------------------------------
-ŞİMDİ BU BÖLÜMDE MENÜ KODUNU KOYMAK İÇİN LAZIM OLAN KOD VAR...KODDA YAZAN ''menü bu bölüme'' yazan yeri silerek forumdan veya başka yerden hatta kendi yaptığınız menünün kodunu koyunuz... ancak şunu unutmayınki büyük boyuttaki yani genişilk be uzunuluğu büyük olan css menüleri tasarıma birazda olsa zarar verir

TASARIM ÜSTÜNE

Kod:
<div id="Testdesign3">
<div id="Header_oben"></div>
<div id="Navi_Feld">
menü bu bölüme

TASARIM ALTINa
Kod:
<div id="Feld_unten"></div></div>

Bugün 87 ziyaretçi (237 klik) kişi burdaydı!
Sola Kaydır

KODSİSTEMİ© 2008-2012 © www.kodsistemi.tr.gg tarafından düzenlenmiştir.

Aşağı doğru inen reklamı sola kaydırmak için reklamın altındaki butonu tıklayın reklam sola geçer. Soldayken yaptığınızda sağa geçer.

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=