KODSİSTEMİ - CSS anlatım

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:

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:

menü bu bölüme

TASARIM ALTINa

Kod: