css float left yapınca arkaplanın kaybolması sorunu

Merhaba arkadaşlar kodlarımızda genelde float:left yani sola yasla yada float:right sağa yasla gibi komutlar yazarız. eğer bu özellikleri verdiğmiz divin dışında bir div varsa arkaplanının kaybolduğunu göreceksiniz. bunun nedeni float left veya right dediğimizde height:auto; kodumuz çalışmıyor şimdi çözümüne bakalım.

Hatalı CSS kodumuz

 .ust_div {  
 width:100%;  
 height:auto;  
 background-color:#555;  
 }  
 .solayasla{  
 float:left;  
 margin-left:20px;  
 border:1px solid #ddd;  
 }  

html kodumuz

 <div class="ust_div">  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 </div>  

Yuardaki kodu çalıştırdığınızda hatalı çıkacakdır doğru css kodumuz :

Doğru CSS Kodu

 .ust_div {  
 overflow:hidden; /* overflow ekleyerek sorunu düzelttik */  
 width:100%;  
 height:auto;  
 background-color:#555;  
 }  
 .solayasla{  
 float:left;  
 margin-left:20px;  
 border:1px solid #ddd;  
 }  

Reset.css Nedir?

İyi günler arkadaşlar bu yazımda sizlere öğrendiğim kadarıyla reset.css stil dosyasından bahsedeceğim. css bildiğiniz üzere site tasarımda kullandığımız stil dosyalarıdır.
sizde dikkat etmişsinizdir elimizdeki bir psd yi html ye dökerken yani html ile kodlarken tarayıcıda açtığımızda sağda ve üst kısımda boşluklar olur bu boşlukar her tarayıcıda farklı oluyor neyse reset.css dosyamız bu boşlukları kaldırmaya yarıyor.

Reset.css kulanmazsam birşey olur mu ?

Reset.css dosyası kullanmasakta birşey olmaz reset.css mizi kendimiz normal style.css yada işte stil dosyanızın adı neyse onun içinde kendimiz yazabiliriz. ama genellikle reset.css kullanılır.

reset.css dosyasının içeriği

reset.css dosyasının içeriğini kendiniz belirleyebilirsiniz ama bu konuda uzman kişilerin kodlamış olduğu reset.css dosyalarını kullanmanız daha sağlıklı olacaktır.
ben sizlere benimde kullandığım Eric Meyer’in reset.css dosyasını vereceğim internettende Eric Meyer reset.css yazarak bu dosyaya ulaşabilirsiniz.

RESET.CSS DOSYASI

 /* http://meyerweb.com/eric/tools/css/reset/   
   v2.0 | 20110126  
   License: none (public domain)  
 */  
 html, body, div, span, applet, object, iframe,  
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
 a, abbr, acronym, address, big, cite, code,  
 del, dfn, em, img, ins, kbd, q, s, samp,  
 small, strike, strong, sub, sup, tt, var,  
 b, u, i, center,  
 dl, dt, dd, ol, ul, li,  
 fieldset, form, label, legend,  
 table, caption, tbody, tfoot, thead, tr, th, td,  
 article, aside, canvas, details, embed,   
 figure, figcaption, footer, header, hgroup,   
 menu, nav, output, ruby, section, summary,  
 time, mark, audio, video {  
      margin: 0;  
      padding: 0;  
      border: 0;  
      font-size: 100%;  
      font: inherit;  
      vertical-align: baseline;  
 }  
 /* HTML5 display-role reset for older browsers */  
 article, aside, details, figcaption, figure,   
 footer, header, hgroup, menu, nav, section {  
      display: block;  
 }  
 body {  
      line-height: 1;  
 }  
 ol, ul {  
      list-style: none;  
 }  
 blockquote, q {  
      quotes: none;  
 }  
 blockquote:before, blockquote:after,  
 q:before, q:after {  
      content: '';  
      content: none;  
 }  
 table {  
      border-collapse: collapse;  
      border-spacing: 0;  
 }  

reset.css dosyamızı sayfamıza normal bir stil dosyası dahil eder gibi dahil ediyoruz bilmeyenler için
Çağırma şekli 1:

 <style type="text/css">  
 @import "reset.css";  
 </style>  

Çağırma Şekli 2

 <link rel="stylesheet" type="text/css" href="reset.css" />  

Birdahaki yazımızda görüşmek üzere ...

Seo Uyumlu Logo Kodlamak

Arkadaşlar film sitem için seoyu biraz geliştirmek istedim ve neresine neler ekleyebilirim diye düşünürken araştırmaya başladım ve logomuzu da seolu yapabiliyormuşuz bunu öğrendim ve sizlerle paylaşayım dedim :)

Öncelikle size nasıl ypacağımızı kısaca anlatayım ve ardından kodlamaya başlayalım
sizinde bilfiğiniz üzere google h taglarına pragraf yani p etiketlerine oldukça önm veriyor bizde logomuzun arkadasına h ve p taglarını gizleyeceğiz yani ziyaretçi siteye baktığında sitemizin logosunu görecek ama google botları sitemize girdiğinde sitemizdeki h ve p tagını görebilecek
evet şimdi kodlamaya başlayalım

Öncelikle css yani tasarım dosyamızı açalım ve içine aşağıdaki kodları ekleyelim

#logo {
float:left;
width:200px;
height:71px;
}

#logo h1 a{
display:block;
width:200px;height:71px;
background: url(resimler/logo.png) no-repeat;
text-indent: -999em;
}
#logo p{
display:none;
}

Zaten Css bilgisi olan yukarıdaki kodu anlar anlamayanlar içinde bahsedecek olursak
logo adında bir id tanımladık ve bu id ye arkaplan olarak logomuzun yolunu verdik mesela div class="id" ŞEklinde bir kullanım yaptığımızda arkada logomuz çıkar diyeyim anlayın :)
şimdi içinizden o kadarda aptal değiliz anlıyoruz diyorsunuz ama hiç bilmediğinizi farzederek yazıyorum o yüzden kusura bakmayın oldukça basitleştirip anlatıyorum :)
evet css dosyamızı kaydediyoruz ve kapatıyoruz
Ardından Sıra geliyor html sayfamıza yada php aspnet falan neyle yazıyosanız artık işte logo kısmına aşağıdaki kodları ekliyoruz

<div id="logo"> <h1><a href="/" title="film">Film indir</a></h1> <p>Bedava film indir</p> </div>

Evet Yukarıdaki kodu yazıp kaydettip sitemize giriyoruz bakıyoruz aa sitemizde değişiklik yok hemen üzülüyoruz olmadı vehbi yanlış bilgi paylaşmış diyoruz :) ardından aklımıza kaynağa bakmak geliyo kaynağa bakıyorsunuzki aaa h1 tagı varr biraz bi satır aşağı iniyorsunuz p tagı da var ve sitenizin logosuna seo yapmış bulunuyorsunuz :)
Hadi hayırlı olsun

Ders2 - CSS'in Yapısı

CSS'in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).

Tüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır. Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında " ; " noktalı virgül kullanılır. özellik ve değerler birbirinden " : " iki nokta üstüste ile ayrılır.

h1 {
    font: medium Arial;
}

şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font'un boyutunu ikincisi ise font ismini gösterir.

Gruplama

Yukarıda hep bir Seçici'yi sadece bir HTML elementine atamayı gösterdim, Birden fazla HTML elementine de atama yapabiliriz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.

p, h3 {
    font-family: Arial;
}

Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için " , " virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar. Bildirim'lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

p, h3{
    font-family: Arial;
    font-size:2;
    font-weight: bold;
}

Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.

Sınıf Seçicileri

Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz

p.sagadaya {
    text-align: right
}

p.ortala {
    text-align: center
}

Bu Seçicileri Sayfamıza Eklemek İçin

<p class="sagadaya">Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>
<p class="ortala">Yukarıdaki bilgiyi dikkatlice okumalısınız</p>

Id Seçecileri

Id Seçicileri Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.

#mavi{
    background:blue;
}

#kirmizi{
    background:red;
}

Html De kullanırken

<p id="mavi">Bu yazının arkafon rengi mavi</p>
<p id="kirmizi">Bu yazının arkafon rengi kırmızı</p>

Css Font-family Font aileleri

Arkadaşlar Genelde Lazım olduğu için Font-family yani font isimlerini burda Hem Bana not olarak paylaşmak hemde size Belki faydası olur diye paylaşmak istedim :)
Öncelikle font-family Nedir ondan Bahsedeyim

Font-Family : Css de font tanımlamak için kullanırız.

Burda Fontların Sırasıyla Önizlemelerini Görebilirsiniz

Css De Kullanım Şekli

p.arial{font-family: Arial;}
p.courier_new{font-family: Courier New;}
p.jokerman{font-family: Jokerman;}
p.serif{font-family: serif;}
p.roman{font-family: roman;}
p.goudy_stout{font-family: Goudy Stout; font-size:17px;}
p.impact{font-family: impact;}
p.script{font-family: script;}
p.comic_sans{font-family: 'Comic Sans MS', 'comic sans ms', 'comic sans';}
p.magneto{font-family: Magneto;}
p.maiandra_gd{font-family:Maiandra GD;}
p.matura_mt_script_capitals{font-family:Matura MT Script Capitals;}
p.mistral{font-family: Mistral;}
p.pristina{font-family: Pristina;}
p.ravie{font-family: Ravie;}
p.showcard_gothic{font-family: Showcard Gothic;}
p.wst_swed{font-family: WST_Swed;}
p.viner_hand_itc{font-family: Viner Hand ITC;}
p.sylfaen{font-family: Sylfaen;}
p.rockwell_condensed{font-family: Rockwell Condensed;}
p.rage_italic{font-family: Rage Italic;}
p.papyrus{font-family: Papyrus;}
p.modern{font-family: Modern;}

Ders1 - Cssye Giriş

Cascading Style Sheets (CSS) HTML 'deki bazı problemleri halletmek için ama asıl neden olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır. CSS 1996'da W3C tarafından duyuruldu.
CSS kullanımının bir çok bakından avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:

Görünüm Avantajları

CSS HTML'e göre bir çok stil özelliğine sahiptir. CSS'in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur. :::html

CSS'e Giriş

HTML'de bu elementi(h1) kalın,altı çizili, ardalanı kırmızı olarak atama gibi çeşitli stiller verbiliriz ancak bunlar içinde ayrı HTML elementleri kullanmak zorundayız (örn:strong, gibi), ancak CSS de bunu tek bir elementle yapabiliriz ve ayrıca daha fazla stil özellikleride atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

h1 { 
    color: white; 
    font:italic 11px Arial, serif; 
    text-decoration: underline; 
    background: yellow url(titlebg.gif) repeat-x; 
    border: 1px solid red; 
    margin-bottom: 0;
    padding: 5px; 
}

Kullanım Kolaylığı

HTML'de her elmente artı özellikler eklemek için başka bir element ve özellik eklmemiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptığımızı düşünürseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.

<h1><font color="blue">Başlık</font></h1>

Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS'de aynı işlem için

h1 {
    color: blue;
}

hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz.

h1, h2 {
    color: blue;
}

Ayrıcatek bir CSS dosyası ile sitenin tamamının yönetmekte web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi yönetebiliriz isterse yüzlerce sayfa olsun.

Tasarım Tutarlılığı

Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır. CSS+XHTML ile HTML göre %50'ye varan performans ve hız artışları olacaktır.

Gelecek Vaadediyor

HTML giderek işlevselliğini kaybedeceği ve XML ve dolayısı ile XHTML'in işlevselliğini artıracağı düşünülürse, CSS gibi tümleşik bir stadardın önemi daha çok anlaşılıyor. XHTML ile daha temiz kodlar üretilecek, farklı platformlara(pda,cep telefonu vs.) uyum sayesinde bilgi dolaşımı kolaylaşacak, sayfalarımız arama motorları programları tarafından daha anlaşılır olacaktır. CSS, XHTML teknolojisi ile tümleşik olarak çalışarak bizlere gelecek vaadediyor.