http://www.netgazi.tr.gg/

Açılış Sayfası Yapın Sık Kullanılanlara Ekleyin E-Mail Yollayın

www.netgazi.tr.gg ANASAYFAMIZA GİTMEK İÇİN TIKLA             İLETİŞİM           Z.DEFTERİ          SOHBET ODAM          CSS KODLARI           TÜM KODLARIMIZ



HAZIR CSS TASARIM ÜZERİNDE DEĞİŞİKLİK YAP

HAZIR CSS TASARIM ÜZERİNDE DEĞİŞİKLİK YAP

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>

 

 







http://KENDİ Tiklayinoyun komedi sohbet sitelerirehber.gen.trWebmasterim.Com
PageRank Checker netgazi.tr.gg

Bilgisayar ve İnternet İnternet-Tr Msn bot last visit powered by  Bots Visit Google bot last visit powered by Bots Visit Yahoo bot last visit powered by  Bots Visit


Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol