Programlama | Programlama Dilleri | C Programlama Dili |C++ - Programlama Dilleri C C++ C++ Builder Java .Net Php Javascript Prolog Haskell Visual Basic Delphi Pc Programlama ,C++ Builder,c programlama dili,çeşitli programlama dilleri ve java programlama dili alanında birçok program ve döküman içerir. http://www.pcprogramlama.com/programlama/58.html Tue, 23 May 2017 09:00:57 +0300 Celal Atalar tr-tr Css İle Yapılan Site Örneği http://www.pcprogramlama.com/programlama/58-css/605--css-ile-yapilan-site-ornegi.html
AÇIKLAMA
 
Bu projemizde css ile yapılmış site örneği verilmektedir. Bu kısımda butonlar açılır menüler kutular resim eklemeler gibi işlemler css tekniği ile yapılmıştır.  Ayrıca projede birçok ilgili özelliğide değinilmiştir. Css tekniğinin ilgili birçok özelliğini aşağıdaki örneğimizde bulmanız mümkündür.

 

Kullanılan Dosyaları (css ve html) Ayrıca Resimleri Aşağıdaki Linkten İndirebilirsiniz

{pub}Linki Görebilmeniz İçin Üye Olmanız Gerekmektedir...

Üye Kayıt

{/pub}

{reg}

{/reg}

css Kodu:

{HazirprogramKod dil="html" satirlar="var}
body {
margin:0px;
padding:0px;
}
div#ana{
width:760px;
padding-right:10px;
background:white url('resimler/ana_sag.png') repeat-y right;
}
div#sol {
float:left;
width:200px;
height:500px;
background-color:#E1E1FF;
}
div#orta{
float:left;
width:560px;
height:500px;
background-color:#CCCCFF;
}
div#alt{
clear:both;
background-color:maroon;
height:3px;
}
div#baslik_1{
background-color:#E1E1FF;
height:30px;
text-align:right;
padding-top:5px;
padding-right:5px;
}
#txt_ara,#btn{
border:1px solid navy;
background-color:#E1E1FF;
}
div#bar{
height:2px;
background-color:maroon;
}
div#ust_resim{
height:190px;
position:relative;
background:white url('resimler/alt.jpg') no-repeat left top;
}
div#orta_ust{
position:absolute;
bottom:0px;
right:0px;
width:560px;
height:30px;
background-color:white;
}
#alt_icerik{
padding:10px 20px;
font-size:16px;
font-weight:bold;
}
p img{
float:left;
margin-right:4px;
}
p{
color:black;
font-size:16px;
font-weight:normal;
}
span{
color:#663300;
}
div#kutu{
width:180px;
background:#CCCCFF url('resimler/kutu_alt.png') no-repeat left bottom;
height:200px;
margin:5px auto;
}
#span_kutu{
display:block;
background:url('resimler/kutu_ust.png') no-repeat left top;
padding:15px;
}
div#kutu p{
margin-top:0px;
padding:0px 10px;
}
/* Menü Başlangıç */
ul{
list-style-type:none;
padding:0px 30px;
margin:0px;
}
ul#menu a{
background-color:white;
display:block;
padding:5px 20px;
text-decoration:none;
font-size:16px;
font-weight:bold;
color:navy;
font-family:Calibri;
}
li#css,li#js,li#xhtml{
position:relative;
}
ul#alt_css a,ul#alt_js a,ul#alt_xhtml a{
text-decoration:none;
color:navy;
font-size:medium;
font-weight:normal;
padding:0px 4px;
}
ul#alt_css,ul#alt_js,ul#alt_xhtml{
position:absolute;
visibility:hidden;
width:200px;
padding:0px 3px;
}
ul#menu>li {
display:inline;
float:left;
}
ul#alt_css a:hover,ul#alt_js a:hover,ul#alt_xhtml a:hover{
background-color:#E1E1FF;
}
li#css:hover ul#alt_css{
visibility:visible;
padding:0px;
}
li#js:hover ul#alt_js{
visibility:visible;
padding:0px;
}
li#xhtml:hover ul#alt_xhtml{
visibility:visible;
padding:0px;
}
ul#alt_css,ul#alt_js,ul#alt_xhtml{
left:10px;
top:30px;
}
li#sinir{
height:1px;
background-color:transparent;
}
/*    Menü Bitişi     */
{/HazirProgramKod}
 
Sayfa Kodu:
 
{HazirprogramKod dil="html" satirlar="var}
<html>
<head>
<title>CSS Site Örneği</title>
<link rel="stylesheet" type="text/css" href="http://www.pcprogramlama.com/stil.css">
</head>
<body>
<div id="ana">
<div id="baslik">
<div id="baslik_1">
<form>
<input type="text" id="txt_ara">
<input type="button" id="btn" value="Ara !">
</form>
</div>
<div id="bar"></div>
<div id="ust_resim">
<div id="orta_ust">
<ul id="menu">
<li><a href="http://www.pcprogramlama.com/#" id="ana">Anasayfa</a></li>
<li id="css"><a href="http://www.pcprogramlama.com/#" id="css">CSS</a>
<ul id="alt_css">
<li><a href="http://www.pcprogramlama.com/#">CSS'e Giriş</a></li>
<li><a href="http://www.pcprogramlama.com/#">Yapısı ve Sözdizimi</a></li>
<li><a href="http://www.pcprogramlama.com/#">Seçiciler</a></li>
</ul>
</li>

<li id="js"><a href="http://www.pcprogramlama.com/#" id="js">Javascript</a>
<ul id="alt_js">
<li><a href="http://www.pcprogramlama.com/#">Giriş</a></li>
<li><a href="http://www.pcprogramlama.com/#">Operatörler</a></li>
<li><a href="http://www.pcprogramlama.com/#">Diziler</a></li>
<li id="sinir"></li>
</ul>
</li>

<li id="xhtml"><a href="http://www.pcprogramlama.com/#" id="xhtml">XHTML</a>
<ul id="alt_xhtml">
<li><a href="http://www.pcprogramlama.com/#">Belge Türü</a></li>
<li><a href="http://www.pcprogramlama.com/#">Elemanlar</a></li>
<li><a href="http://www.pcprogramlama.com/#">Etiketler</a></li>
<li id="sinir"></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="sol">
<div id="kutu">
<span id="span_kutu">CSS konumlandırma özellikleri</span>
<p>içerik..</p>
</div>
<div id="kutu">
<span id="span kutu ">CSS float özelligi</span>
<p<içerik..</p>
</div>
</div>
<div id="orta">
<div id= "içerik">
<div=id="alt_içerik">
<span>javaScript kitabı hakkında </span>
<p><img src="http://www.pcprogramlama.com/resimler/kitap.gif" alt="kitap" height="129" width="108" >
web tasarımının olmazsa olmazı.web sayfalarının etkileşimini,canlılıgını ve dinamizligini artırmak için geliştirilmiş script ve proglamlama dili.eb tasarımının olmazsa olmazı.web sayfalarının etkileşimini,canlılıgını ve dinamizligini artırmak için geliştirilmiş script ve proglamlama dili.
eb tasarımının olmazsa olmazı.web sayfalarının etkileşimini,canlılıgını ve dinamizligini artırmak için geliştirilmiş script ve proglamlama dili.
eb tasarımının olmazsa olmazı.web sayfalarının etkileşimini,canlılıgını ve dinamizligini artırmak için geliştirilmiş script ve proglamlama dili.
</p>
<span>XHTML ve CSS kitabı </span>
<p>kitap ocak ayında piyasada</p>
<span>AJAX</span>
<p>Ajax hakkında Bilgi</p>
<span>HTML5 ve CSS3 hakkında bilgi</p>
<span>ASP.NET hakkında Bilgi</span>
<p>ASP.NEt hakkında Bilgi</p>
</div>
</div>

<div id="alt"></div>
</div>



</body>
</html>
{/HazirProgramKod} 
]]>
Css Tue, 18 Sep 2012 19:44:20 +0300
Açılır Menü http://www.pcprogramlama.com/programlama/58-css/604-acilir-menu.html AÇIKLAMA
 
Burada yapılan sayfada css elemanları kullanarak açılır menü yapılmıştır . Burada bazı html yapıları bazı özellikleri yerine getirmesi amacıyla css ile yeniden dizayn edilmiştir.
 
ol düzenli liste yapısı yeniden tasarlanarak ana başlık (CSS, Javascript, HTML, DHTML, PHP) boylarının 150 piksel olması sağlanmıştır. Aynı şekilde oluşturulan kare veya dikdörtgen etrafındaki çizginin (sadece etrafı) 1px genişliğinde açık mavi olması sağlanmıştır.
 
a link verme yapısı yeniden tasarlanmış ve linklerin etrafındaki 1 px genişliğinde ve açık mavi şekilde bir yapı oluşturulmuştur.
 
ol#alt_menu a ile oluşturulan ol yapısına ek olarak arkaplan rengi eklenmeside sağlanmıştır. (alt menü arkaplanı ol)
 
li#acil>a yapısı ile ana menüdeki linklere 130 piksel sonra merkezi olarak icon2.jpg dosyası eklenmiştir.
 
li#acil linklerin birbirlerine bağlı olarak uygun konumda (position:relative) açılmasını sağlamıştır.
 
li#acil ol#alt_menu ile alt menünün ana yapısı sağlanmış ve left ile 151 piksel değerinden itibaren başlayacağı belirtilmiştir.
 
Position absolute alt menülerin yana doğru açılmasını sağlamıştır aksi takdirde menüler direk linklerden itibaren sayfadan aşağı doğru açılı halde görünecektirler. hidden ile alt menünün gizlenmesi sağlanmış aksi takdirde sayfa açıldığında alt menülerde direk görünecektir.
 
 
Css  Kodu:
 
{HazirProgramKod dil="html" satirlar="var"}ol {
list-style-type:none;
width:150px;
border:1px solid lightblue;
padding:0px;
border-bottom:none;
}
a {
display:block;
border-bottom:1px solid lightblue;
background-color:#E6F2FF;
text-decoration:none;
font-weight:bold;
}
ol#alt_menu a{
background-color:#E6F2FF;
color:black;
font-weight:normal;
}
li#acil>a{
background:#E6F2FF url('icon2.jpg') no-repeat 130px center;
}
li#acil{
position:relative;
}
li#acil ol#alt_menu {
visibility:hidden;
position:absolute;
top:0px;
left:151px;
}
li#acil:hover ol#alt_menu{visibility:visible;}
ol#alt_menu a:hover{
background-color:#004262;
color:white;
font-weight:normal;
}{/HazirProgramKod}
 
 
Sayfa Kodu:

{HazirProgramKod dil="html" satirlar="var"}

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.pcprogramlama.com/menu.css">
</head>
<body>
<ol>
    <li id="acil"><a id="acil_1" href="http://www.pcprogramlama.com//">CSS</a>
        <ol id="alt_menu">
            <li><a href="http://www.pcprogramlama.com//">Seçiciler</a></li>
            <li><a href="http://www.pcprogramlama.com//">Metin Özellikleri</a></li>
            <li><a href="http://www.pcprogramlama.com//">Liste Özellikleri</a></li>
            <li><a href="http://www.pcprogramlama.com//">Kutu Modeli</a></li>
        </ol>
    </li>
    <li id="acil"><a id="acil_1" href="http://www.pcprogramlama.com//">Javascript</a>
        <ol id="alt_menu">
            <li><a href="http://www.pcprogramlama.com//">Giriş</a></li>
            <li><a href="http://www.pcprogramlama.com//">Operatörler</a></li>
            <li><a href="http://www.pcprogramlama.com//">Diziler</a></li>
            <li><a href="http://www.pcprogramlama.com//">Koşul İfadeleri</a></li>
        </ol>
    </li>
    <li id="acil"><a id="acil_1" href="http://www.pcprogramlama.com//">HTML</a>
        <ol id="alt_menu">
            <li><a href="http://www.pcprogramlama.com//">Etiketler</a></li>
            <li><a href="http://www.pcprogramlama.com//">Formlar</a></li>
        </ol>
    </li>
    <li id="acil"><a id="acil_1" href="http://www.pcprogramlama.com//">DHTML</a></li>
    <li id="acil"><a id="acil_1" href="http://www.pcprogramlama.com//">PHP</a></li>    
</ol>
</body>
</html>

{/HazirProgramKod}

]]>
Css Fri, 14 Sep 2012 03:45:19 +0300
Sözde Elemanlar ve Sözde Sınıflar http://www.pcprogramlama.com/programlama/58-css/603-sozde-elemanlar-ve-sozde-siniflar.html AÇIKLAMA
 
Burada yapılan sayfada css elemanları kullanarak html sayfa oluşturulmuştur. Buradaki css yapıları html elemanı olmamalarına rağmen bir html elemanı gibi davranabilirler.
 
h3: before yapısı html kodundaki h3 tagını kullanan ifadeden önce sayfa içeriğine "Konu" yazılacağını gösterir. h3 tagı içerisindeki ifade yazıldıktan sonra h3: after yapısı ise h3 tagı içerisindeki yazıdan sonra "Sözde elemanlar" sayfaya yazılacağını belirtir.
 
  h3: before  Konu:     h3 içindeki ifade Pseudo - Elements  h3: after (Sözde elemanlar)
 
oluşturalan içerik ->  Konu:Pseudo - Elements(Sözde elemanlar)
 
p.tanıt:first-letter -> aldığı ifadenin ilk harfini 56 piksele çıkarırken harfide italik ve gri şekilde yazar. 
p.tanıt:first-line    -> aldığı ifadenin ilk satırını kalın ve zeytin yeşili renkte yazdırır.
 
a:link                 ->  içerisindeki koda bakıldığında linki gri yazdırdığı görülür.
a:visited             -> ziyaret edilen linkin rengini bordo yapar. 
a:hover              -> linkin üzerine geldiğinizde linki lacivert yapar.
a:active              -> link tıklandığı anda sarı rengini alır. 
 
Sayfa Kodu:

{HazirProgramKod dil="html" satirlar="var"}

<html>

<head><title>Sözde elemanlar ve Sözde sınıflar</title>

<style type="text/css">

h3:before {

content:"Konu:";

}

h3:after{

content:"(Sözde elemanlar)";

color:green;

}

p.tanıt:first-letter{

color:gray;

font-size:56px;

font-style:italic;

}

p.tanıt:first-line{

font-weight:bold;

color:olive;

}

/******Sözde sınıf örneği******************/

a:link{

text-decoration:none;

color:gray;

}

a:visited {

color:maroon;

}

a:hover{

color:purple;

}

a:active {

color:yellow;

}

/******Sözde sınıf örneği******************/

</style></head><body>

<h3>Pseudo - Elements</h3>

<p class="tanıt">HTML elemanı değillerdir fakat <br>

bir HTML elemanı gibi davranabilirler.</p>

<!-- Sözde sınıf örneği -->

<a href="http://www.pcprogramlama.com/sozde.html">Mevcut sayfa</a>

<a href="http://www.yahoo.com/">Yahoo</a>

<!-- Sözde sınıf örneği -->

</body></html>

 

{/HazirProgramKod}

]]>
Css Wed, 05 Sep 2012 08:56:19 +0300
Liste Yapısı Oluşturma http://www.pcprogramlama.com/programlama/58-css/600-liste-yapisi-olusturma.html AÇIKLAMA
 
Bu kısımda css yapıları li_still3.css dosyasında tanımlanmış ve html sayfada
 
<link rel="stylesheet" type="text/css" href="http://www.pcprogramlama.com/li_stil3.css">
 
 ile sayfaya bağlanmıştır. Böylece css tekniğiyle liste yapısı oluşturulmuştur.
 
li_still3.css Kodu:

{HazirProgramKod dil="html" satirlar="var"}
/* Liste Kullanarak Menü Oluşturma*/
ol {
list-style-type:none;
margin:0px;
padding:0px;
width:130px;
}
ol li {
border-bottom:1px solid white;
}
ol li a {
display:block;
color:darkblue;
text-decoration:none;
text-indent:4px;
backgroud:lightblue;
}
ol li a:hover{
color:white;
background-color:gray;
}

ol li ol {
margin-left:10px;
}
{/HazirProgramKod}

 Sayfa Kodu:

 {HazirProgramKod dil="html" satirlar="var"}

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.pcprogramlama.com/li_stil3.css">
</head>
<body>
<ol>
    <li><a href="http://www.pcprogramlama.com//">CSS</a>
        <ol>
            <li><a href="http://www.pcprogramlama.com//">Seçiciler</a></li>
            <li><a href="http://www.pcprogramlama.com//">Metin Özellikleri</a></li>
            <li><a href="http://www.pcprogramlama.com//">Liste Özellikleri</a></li>
            <li><a href="http://www.pcprogramlama.com//">Kutu Modeli</a></li>
        </ol>
    </li>
    <li><a href="http://www.pcprogramlama.com//">Javascript</a>
        <ol>
            <li><a href="http://www.pcprogramlama.com//">Giriş</a></li>
            <li><a href="http://www.pcprogramlama.com//">Operatörler</a></li>
            <li><a href="http://www.pcprogramlama.com//">Diziler</a></li>
            <li><a href="http://www.pcprogramlama.com//">Koşul İfadeleri</a></li>
        </ol>
    </li>
    <li><a href="http://www.pcprogramlama.com//">HTML</a>
        <ol>
            <li><a href="http://www.pcprogramlama.com//">Etiketler</a></li>
            <li><a href="http://www.pcprogramlama.com//">Formlar</a></li>
        </ol>
    </li>
    <li><a href="http://www.pcprogramlama.com//">DHTML</a></li>
    <li><a href="http://www.pcprogramlama.com//">PHP</a></li>   
</ol>
</body>
</html>
{/HazirProgramKod}

]]>
Css Fri, 31 Aug 2012 10:03:00 +0300
Kutu Modeli http://www.pcprogramlama.com/programlama/58-css/599-kutu-modeli.html AÇIKLAMA
 
Bu html sayfasında 3 sınıf tanımlaması yapılmıştır ve bu tanımlamalara uygun kutular oluşturulmuştur. Belirtilen sınıfa uygun kutular içerisine yazılar yazılmış, belirtilmeyen yapılar ise default sınıfa göre ayarlanmıştır.
 
Sayfa Kodu:

{HazirProgramKod dil="html" satirlar="var"}
<html>
<head>
<title>CSS Kutu Modeli</title>
<style type="text/css">
* {
margin:0px 0px 0px 0px;
}
div.s1 {
border:30px #009933 solid;
margin: 10px 20px 30px 40px;
width: 50px;
height:50px;
float:left;
}
div.s2{
border:2px orange dotted;
margin:0px 0px 0px 0px;
width: 50px;
height:50px;
float:left;
}
</style>
</head>
<body>

<div class="s1">içerik</div>
<div class="s2">içerik 2</div><br>
<div>içerik 3</div><br>
<div>içerik 4</div>

</body>
</html>
{/HazirProgramKod}


]]>
Css Fri, 31 Aug 2012 09:48:19 +0300
Kimlik ve Sınıf Seçici http://www.pcprogramlama.com/programlama/58-css/598-kimlik-ve-sinif-secici.html AÇIKLAMA
 
Bu html sayfasında bir sınıf ve bir kimlik yapısı tanımlanmış ve iki farklı yazıda bu tiplerden seçilerek yapılmış birinde sadece sınıf yapısı kullanılırken diğerinde hem sınıf hemde kimlik yapısı kullanılmıştır.
 
Sayfa Kodu:

{HazirProgramKod dil="html" satirlar="var"}
<html><head>
<style type="text/css">
.container {
    background-color:lightblue;
    border:thin black solid;
    color:navy;
    width:300px;
}
div#cont_message {
    background-color:green;
    color:yellow;
}
</style></head>
<body>
<div class="container">Tasarımınız gayet geçerli diyelim, ancak şunu unutmamak gerekir ki yazılacak yazıların da tasarıma yük bindireceği, gereksiz kod yığını oluşturabileceği bir gerçektir. Bu amaçlar wordpress üzerinde size sunulan zengin metin editörünün bazı kodları düzenlemesi ya da zengin metin editörü kullanarak yazdığınız yazılarda fazladan kod kullanmak yine size hatalı kodlar ya da tasarımda aksamalara neden olabilir.</div>
<div class="container" id="cont_message">CSS ile birlikte kodlama yaparken bir çok yerde hr etiketi yerine elementlerin üst ve alt kenarlık değeri ataması yapılarak kodlama yapılmaktadır, bunun yerine hr  etiketini kullanabiliriz. hr daha kolay eklenir ve css desteklemeyen araçlarda sayfa görünümünün bozulmasını engeller.</div>

</body>
</html>
{/HazirProgramKod}


]]>
Css Fri, 31 Aug 2012 09:31:13 +0300
Kimlik Seçici http://www.pcprogramlama.com/programlama/58-css/597-kimlik-secici.html AÇIKLAMA
 
Bu html sayfasında iki farklı css yapısı tanımlanmış ve hangisinin nerede kullanacağı isminden (kimlik veya id) yararlanılarak bulunmuştur. Bu sayede istenen ifadeye istenen css yapısı atanmıştır.
 
Sayfa Kodu:

{HazirProgramKod dil="html" satirlar="var"}
<html><head>
<style type="text/css">
#content_title {
    background-color:rgb(202,202,255);
    color:navy;
    border:thin brown dotted;
}
#css_title {
    background-color:#DAFEBC;
    color:green;
}
</style></head>
<body>
<p id="content_title">Kimlik Seçici <b>content_title</b></p>
<p id="css_title">Kimlik Seçici <b>css_title</b></p>
</body>
</html>
{/HazirProgramKod}


]]>
Css Fri, 31 Aug 2012 09:25:01 +0300
Evrensel Seçici http://www.pcprogramlama.com/programlama/58-css/596-evrensel-secici.html AÇIKLAMA
 
Bu html sayfasında genel bir css yapısı tanımlanmış ve bütün sayfada bu yapı kullanılmıştır.
 
Sayfa Kodu:

{HazirProgramKod dil="html" satirlar="var"}
<html><head>
<style type="text/css">
* {
    border:3px orange solid;
    margin:20px;
}
</style></head>
<body>
<div>Tasarımınız gayet geçerli diyelim, ancak şunu unutmamak gerekir ki yazılacak yazıların da tasarıma yük bindireceği, gereksiz kod yığını oluşturabileceği bir gerçektir. Bu amaçlar wordpress üzerinde size sunulan zengin metin editörünün bazı kodları düzenlemesi ya da zengin metin editörü kullanarak yazdığınız yazılarda fazladan kod kullanmak yine size hatalı kodlar ya da tasarımda aksamalara neden olabilir.
</div>
<div>CSS ile birlikte kodlama yaparken bir çok yerde hr etiketi yerine elementlerin üst ve alt kenarlık değeri ataması yapılarak kodlama yapılmaktadır, bunun yerine hr  etiketini kullanabiliriz. hr daha kolay eklenir ve css desteklemeyen araçlarda sayfa görünümünün bozulmasını engeller.
</div>
<p>Paragraf</p>
<b>Kalın yazı</b>

</body>
</html>
{/HazirProgramKod}


]]>
Css Fri, 31 Aug 2012 09:19:56 +0300
Etiket Seçici http://www.pcprogramlama.com/programlama/58-css/595-etiket-secici.html AÇIKLAMA
 
Bu html sayfasında etiket tanımlaması yapılmış ve bu etiketlere uygun olarak yazılan ifadeler html sayfa yapısında biçimlendirilmiştir.
 
Sayfa Kodu:

{HazirProgramKod dil="html" satirlar="var"}
<html><head>
<style type="text/css">
h2 {
    background-color:#CCE6FF;
    text-decoration:underline;
}
p{
    background-color:gray;
    color:navy;
}
</style></head>
<body>
<h2>Stilli Header 2</h2>
<p>Bir paragraf</p>
<p>İkinci paragraf</p>
</body>
</html>
{/HazirProgramKod}


]]>
Css Fri, 31 Aug 2012 09:15:59 +0300