HTML KOD BANKASI - Css design tasarim

Not : Sitenizi css tasarıma dönüştürmek için tasarım ayarlarından "css-design - pek sevilmeyen" tasarımını seçip önce tasarımın üzerine altına ve css kodu bölümlerine ilgili kodları yapıştırın.Daha sonra oluşan tasarımın menülerini kendi menülerinizin isimleri,yazıları ve linkleri ile değiştirerek devam ediniz..(yazılar ve linkler tasarımın üzerindeki ve css kodlarının içindedir)

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:

CSS KODU BÖLÜMÜNE
KOD:

h1#title{display: none;}  h2#title span {display: none;}  div.header{display: none;}  li.nav_element{list-style-type: none;}  body {background-image: none;}  a{color:#ffffff; font-size: 15px; text-decoration: none;}  a:hover {color: #ffffff; font-size: 15px; text-decoration: none;}  a:link {color: #ffffff; font-size: 15px; text-decoration: none;}  a:active {color: #ffffff; font-size: 15px; text-decoration: none;}  a:visited {color: #ffffff; font-size: 15px; text-decoration: none;}  li.nav_element a{  color:#ffffff;  display: block;  margin: 0px;  padding-left: 0px  text-decoration: none;  width: 180px;  height: 23px;  background-image:url(h1#title{display: none;}  h2#title span {display: none;}  div.header{display: none;}  li.nav_element{list-style-type: none;}  body {background-image: none;}  a{color:#ffffff; font-size: 15px; text-decoration: none;}  a:hover {color: #ffffff; font-size: 15px; text-decoration: none;}  a:link {color: #ffffff; font-size: 15px; text-decoration: none;}  a:active {color: #ffffff; font-size: 15px; text-decoration: none;}  a:visited {color: #ffffff; font-size: 15px; text-decoration: none;}  li.nav_element a{  color:#ffffff;  display: block;  margin: 0px;  padding-left: 0px  text-decoration: none;  width: 180px;  height: 23px;  background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg);  background-color:}  li.nav_element a:hover{  color:#ffffff;  display: block;  margin: 0px;  padding-left: 0px  text-decoration: none;  width: 180px;  height: 23px;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  background-color:}  * { padding: 0; margin: 0; }  #Design04 {  margin: 0 auto;  width: 922px;}  #Header_oben {  height: 100px;  width: 920px;  background: ;  background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg );  color: #FFFFFF;  border: 0px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 0px;  float: left;}  #nav_container {  width: 180px;  height: 340px;  background: ;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color: ;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  float: left;overflow:auto;}  #content {  height: 340px;  width: 540px;  background:;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color: #ffffff;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  display: inline;  float: left;  overflow:auto;}  #sidebar_container {  height: 340px;  width: 180px;  background: ;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color:#ffffff ;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  float: left;  overflow:auto;}  #Feld_unten {  width: 895px;  background: #000000;  color: #FFFFFF;  clear: both;  border: 1px solid #6E6E6E;  margin: 0px 0px 10px 0px;  padding: 10px;}  #counter{display: none;} );  background-color:}  li.nav_element a:hover{  color:#ffffff;  display: block;  margin: 0px;  padding-left: 0px  text-decoration: none;  width: 180px;  height: 23px;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  background-color:}  * { padding: 0; margin: 0; }  #Design04 {  margin: 0 auto;  width: 922px;}  #Header_oben {  height: 100px;  width: 910px;  background: ;  background-image:url(http://img136.imageshack.us/img136/807/188tb9.png );  color: #FFFFFF;  border: 0px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 0px;  float: left;}  #nav_container {  width: 190px;  height: 380px;  background: ;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color: ;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  float: left;overflow:auto;}  #content {  height: 380px;  width: 550px;  background:;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color: #ffffff;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  display: inline;  float: left;  overflow:auto;}  #sidebar_container {  height: 380px;  width: 170px;  background: ;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color:#ffffff ;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  float: left;  overflow:auto;}  #Feld_unten {  width: 895px;  background: #000000;  color: #FFFFFF;  clear: both;  border: 1px solid #6E6E6E;  margin: 0px 0px 10px 0px;  padding: 10px;}  #counter{display: none;}

CSS TASARIM-2

GÖRÜNÜM

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:

CSS KODU BÖLÜMÜNE
KOD:

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image: none;} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image: none;} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 922px;} #Header_oben { height: 100px; width: 920px; background: ; background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg ); color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 180px; height: 340px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 340px; width: 540px; background:; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 340px; width: 180px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;} ); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 922px;} #Header_oben { height: 100px; width: 910px; background: ; background-image:url(http://img136.imageshack.us/img136/807/188tb9.png ); color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 190px; height: 380px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 380px; width: 550px; background:; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 380px; width: 170px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;}

CCS TASARIM-3

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:

CSS KODU BÖLÜMÜNE
KOD:

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image: none;} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image: none;} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 922px;} #Header_oben { height: 100px; width: 920px; background: ; background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg ); color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 180px; height: 340px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 340px; width: 540px; background:; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 340px; width: 180px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;} ); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 922px;} #Header_oben { height: 100px; width: 910px; background: ; background-image:url(http://img136.imageshack.us/img136/807/188tb9.png ); color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 190px; height: 380px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 380px; width: 550px; background:; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 380px; width: 170px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;}

4-GÖRÜNÜM

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:
<div id="Design04"> <div id="Header_oben"></div>

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:
<div id="<left><a href="http://www.csstasarim-arsiv.tr.gg"><img border="0" src="http://img356.imageshack.us/img356/7716/kodsstemaltborsd9.png" alt="" /></a></left><strong> </strong></div>

CSS KODU BÖLÜMÜNE
KOD:
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image:url(http://www.ww64.com/uploads/images/2008-07-25/dxy2q8zQAi.png);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 170px; height: 29px; background-image:url(http://img165.imageshack.us/img165/6696/kodsistemibutonjw1.png); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 160px; height: 29px; background-image:url(http://child.tasarim.googlepages.com/grisiyahbody.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 916px;} #Header_oben { height: 100px; width: 916px; background: ; background-image:url(http://img176.imageshack.us/img176/6926/kodsistemibannereo4.png); color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 170px; height: 480px; background: ; background-image:url(http://child.tasarim.googlepages.com/grisiyahbody.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 480px; width: 520px; background:; background-image:url(http://child.tasarim.googlepages.com/grisiyahbody.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 480px; width: 160px; background: ; background-image:url(http://child.tasarim.googlepages.com/grisiyahbody.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #counter{display: none;}

5-GÖRÜNÜM

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:
<div id="Design04"> <div id="Header_oben"></div>

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:
<div id="Feld_unten"><b> </b></div></div>

CSS KODU BÖLÜMÜNE
KOD:
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image:url(http://www.manzararesimleri.net/manzararesimleri.net1/manzara/manzara-resimleri (114).jpg);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color: #ffff00; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 155px; height: 36px; background-image:url(http://img399.imageshack.us/img399/2451/35155kodsistemitrggut1.png ); background-color:} li.nav_element a:hover{ color: #ff6666; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 155px; height: 39px; background-image:url(http://img210.imageshack.us/img210/8282/32935091ii5.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 900px;} #Header_oben { height: 20px; width: 885px; background: ; background-image: none; color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 170px; height: 490px; background: ; background-image:url(http://img61.imageshack.us/img61/1125/29329807ey1.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 490px; width: 480px; background:; background-image:url(http://img413.imageshack.us/img413/2020/470520kodsistemitrggdt0.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 490px; width: 150px; background: ; background-image:url(http://img61.imageshack.us/img61/1125/29329807ey1.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;}

6-görünüm

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:
<div id="Testdesign2"> <div id="Header_oben"><font color="#ffcc00" size="12"><marquee>KODSİSTEMİ</marquee></font> </div> <div id="Streifen_oben">www.csstasarim-arsiv.tr.gg</div>

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:
<div id="Streifen_unten">KODSİSTEMİ</div></div>

CSS KODU BÖLÜMÜNE
KOD:
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-color:#66ff99;} 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;} li.nav_element a{ color: #0066cc ; display: block; margin: 2px; padding-left: 10px; text-decoration: none; width: 120px; height: 20px; background-image: none; background-color: #99ccff ;} li.nav_element a:hover{ color:#FFFFFF; display: block; margin: 2px; padding-left: 10px; text-decoration: none; width: 120px; height: 20px; background-image: none; background-color:#000000;} * { padding: 0; margin: 0; } #Testdesign2 { margin: 0 auto; width: 922px;} #Header_oben { color: #9966cc; width: 900px; height: 60px; float: left; padding: 10px; border: 1px solid #80807F; margin: 10px 0px 0px 0px; background-image: url(http://skins.gmodules.com/ig/skin_fetch?type=2&url=http://hosting.gmodules.com/ig/gadgets/file/108872025019167115640/ig_thumb_lake.jpg); } #Streifen_oben { float: left; width: 900px; color: #9966cc; padding: 10px; border: 1px solid #80807F; margin: 0px 0px 0px 0px; background: #99ffcc;} #sidebar_container { height: 320px; width: 140px; background: #ffffcc ; background-image: none; border: 1px solid #ff66ff ; margin: 5px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #content { color: #3300ff ; border: 1px solid #80807F; margin: 5px 3px 0px 0px; padding: 10px; height: 320px; width: 567px; float: right; background: #ccccff ; overflow:auto;} #nav_container { float: right; color: #ff66ff ; border: 1px solid #ff66ff; margin: 5px 0px 0px 0px; padding: 10px; height: 320px; width: 140px; display: inline; background: #ffffcc ;} #Streifen_unten { width: 900px; clear: both; color: #333; border: 1px solid #80807F; background: #66ffff ; margin: 0px 0px 10px 0px; padding: 10px;} #counter{ position: absolute; left: 230px; top: 572px; width:481px; height:20px; font-family:verdana; font-size:12px; color:#000000; background-color:#; border: 0px solid #000000;} #counter{text-align:left;}

NOT: Bu kodları sayfa içine koymadan önce bu kodu css bölümüne(style tagları olmadan)yazan kutuya koyun.
Menü gizleme kodunu kullanmayın..tasarımların içinde varsa çıkarın...
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}

CSS TASARIM SAYFALARI DEVAMI --> TIKLA