HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css yön verme
css float right and left
css float right class
css float right left
css float nedir
css float özelliği
css float div
css float right example
css float right position
css clear nedir
css clear code
css clear kullanımı
css float clear kullanımı
css clear link
css clear özelliği
css float left alternative
css float left example
css float left nedir
css float none clear
css div float none
float none in css
css layout clear
css layout float and clear
css layout float clear
css yan yana açılır menü
css yan yana yazma
css image and text side by side
css float examples
css web layout examples
css website layout examples
css for website layout
css web site layout
css float example div
float example in css
css float layout examples

CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği)

CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği)

Bir web sitesi elemanın ne tarafa doğru yönelip yerleşeceğini belirlersiniz.Kullanılması zor bir özelliktir. Bu özellik ve benzeri özellikte genelde sorun yaşarsınız. Tabi sabır , deneme-yanılma ve alternatif yöntemler ile üstesinden geleceğinize inanıyorum.Bu özellik genelde sayfanın container(içerik) dediğimiz kısmında kullanılır. Özelliğin değerlerini birer birer inceleyelim sözlerle ile hayal etmeniz oldukça güç olur çünkü..

Bir web sitesi elemanın ne tarafa doğru yönelip yerleşeceğini belirlersiniz.Kullanılması zor bir özelliktir. Bu özellik ve benzeri özellikte genelde sorun yaşarsınız. Tabi sabır , deneme-yanılma ve alternatif yöntemler ile üstesinden geleceğinize inanıyorum.Bu özellik genelde sayfanın container(içerik) dediğimiz kısmında kullanılır. Özelliğin değerlerini birer birer inceleyelim sözlerle ile hayal etmeniz oldukça güç olur çünkü..

  • left
  • right
  • none

1-Float Right(Yön Sağ)

Web sitesi eleman veya elemanlarınızın yönünü sağa ayarladığımız bir örnek ile başlayalım..

Kullanımı:

Css
.sagayasla {
float: right;
}
Html
<h2>Ayçiçeği</h2>
<p><img class="sagayasla" src="../../../resimler/aycicegi.jpg" alt="Aycicegi" style="width:170px;height:170px;margin-left:5px;">
Ayçiçeği dünyada ve Türkiye\'de en önemli yağ bitkilerinden biridir. Marmara Bölgesi\'nde daha çok yetiştirilir. Trakya Bölgesi\'nde yoğunluk gösterir.
Ayçiçeğinin üstündeki çekirdekler fabrikalarda işlenerek satılır.
Ayçiçeği dünyada ve Türkiye\'de en önemli yağ bitkilerinden biri olup, Türkiye\'de genelde yağlık olarak yetiştirilir.
Yağlık olarak ekiminin % 70\'inden fazlası Trakya ve Marmara bölgesindedir.Ayçiçeği, yetişme periyodu boyunca (100-150 gün) 2600-2850 °C civarında toplam sıcaklık ister.
Derin ve kazık kök sistemine sahip olması nedeniyle, kuraklığa dayanımı fazladır. Her türlü toprakta yetişmesine rağmen, iyi drenajlı, nötr PH (6,5 - 7,5)\'a sahip ve su tutması yüksek toprakları daha fazla sever.
Taban suyu yüksek, asitli topraklardan hoşlanmaz. Tuzluluğa dayanması ortadır.
Ayçiçeğinin çimlenmesi için en az toprak sıcaklığı 8-10 °C olmalıdır. Bu nedenle genelde Nisan ayı başı-Mayıs ortası arasında ekimi yapılır.
Erken ekim, verimi önemli ölçüde arttırır. Ayçiçeği soğuğa dayanıklı olup, genelde ilk donlardan 4-6 yapraklı devreye kadar zarar görmez.
Ancak ısının -4 °C nin altına düşmesiyle oluşan dondan oldukça fazla etkilenir.</p>
<p><strong>Kaynakça: </strong><a href="https://tr.wikipedia.org/wiki/Ayçiçeği" target="_blank">https://tr.wikipedia.org/wiki/Ayçiçeği</a></p>

2-Float Left(Yön Sol)

Web sitesi eleman veya elemanlarınızın yönünü sola ayarladığımız bir örnek yapalım..

Kullanımı:

Css
.solayasla {
float: left;
}
Html
<h2>Ayçiçeği</h2><p><img class="solayasla" src="../../../resimler/aycicegi.jpg" alt="Aycicegi" style="width:170px;height:170px;margin-right:5px;">Ayçiçeği dünyada ve Türkiye'de en önemli yağ bitkilerinden biridir. Marmara Bölgesi'nde daha çok yetiştirilir. Trakya Bölgesi'nde yoğunluk gösterir.
Ayçiçeğinin üstündeki çekirdekler fabrikalarda işlenerek satılır.
Ayçiçeği dünyada ve Türkiye'de en önemli yağ bitkilerinden biri olup, Türkiye'de genelde yağlık olarak yetiştirilir.
Yağlık olarak ekiminin % 70'inden fazlası Trakya ve Marmara bölgesindedir.Ayçiçeği, yetişme periyodu boyunca (100-150 gün) 2600-2850 °C civarında toplam sıcaklık ister.
Derin ve kazık kök sistemine sahip olması nedeniyle, kuraklığa dayanımı fazladır. Her türlü toprakta yetişmesine rağmen, iyi drenajlı, nötr PH (6,5 - 7,5)'a sahip ve su tutması yüksek toprakları daha fazla sever.
Taban suyu yüksek, asitli topraklardan hoşlanmaz. Tuzluluğa dayanması ortadır.
Ayçiçeğinin çimlenmesi için en az toprak sıcaklığı 8-10 °C olmalıdır. Bu nedenle genelde Nisan ayı başı-Mayıs ortası arasında ekimi yapılır. Erken ekim, verimi önemli ölçüde arttırır. Ayçiçeği soğuğa dayanıklı olup, genelde ilk donlardan 4-6 yapraklı devreye kadar zarar görmez.
Ancak ısının -4 °C nin altına düşmesiyle oluşan dondan oldukça fazla etkilenir.</p>
<p><strong>Kaynakça: </strong><a href="https://tr.wikipedia.org/wiki/Ayçiçeği" target="_blank">https://tr.wikipedia.org/wiki/Ayçiçeği</a></p>

3-Float None(Float İptali)

Bu özelliği iptal de edebilirsiniz.Yada hiç kullanmaya da bilirsiniz. Genelde kullanmayınca ortada hoş bir manzara olmaz. Bir örnekle bunu görelim..

Kullanımı:

Css
.iptalfloat {
float: none;
}
Html
<h2>Ayçiçeği</h2><p><img class="iptalfloat" src="../../../resimler/aycicegi.jpg" alt="Aycicegi" style="width:170px;height:170px;margin-right:5px;">Ayçiçeği dünyada ve Türkiye'de en önemli yağ bitkilerinden biridir. Marmara Bölgesi'nde daha çok yetiştirilir. Trakya Bölgesi'nde yoğunluk gösterir.
Ayçiçeğinin üstündeki çekirdekler fabrikalarda işlenerek satılır.
Ayçiçeği dünyada ve Türkiye'de en önemli yağ bitkilerinden biri olup, Türkiye'de genelde yağlık olarak yetiştirilir.
Yağlık olarak ekiminin % 70'inden fazlası Trakya ve Marmara bölgesindedir.Ayçiçeği, yetişme periyodu boyunca (100-150 gün) 2600-2850 °C civarında toplam sıcaklık ister.
Derin ve kazık kök sistemine sahip olması nedeniyle, kuraklığa dayanımı fazladır. Her türlü toprakta yetişmesine rağmen, iyi drenajlı, nötr PH (6,5 - 7,5)'a sahip ve su tutması yüksek toprakları daha fazla sever.
Taban suyu yüksek, asitli topraklardan hoşlanmaz. Tuzluluğa dayanması ortadır.
Ayçiçeğinin çimlenmesi için en az toprak sıcaklığı 8-10 °C olmalıdır. Bu nedenle genelde Nisan ayı başı-Mayıs ortası arasında ekimi yapılır. Erken ekim, verimi önemli ölçüde arttırır. Ayçiçeği soğuğa dayanıklı olup, genelde ilk donlardan 4-6 yapraklı devreye kadar zarar görmez.
Ancak ısının -4 °C nin altına düşmesiyle oluşan dondan oldukça fazla etkilenir.</p>
<p><strong>Kaynakça: </strong><a href="https://tr.wikipedia.org/wiki/Ayçiçeği" target="_blank">https://tr.wikipedia.org/wiki/Ayçiçeği</a></p>

4-Layout-Clear(Yerleşim Temizliği)

Şimdi de yaptığımız hizalamaları temizleyelim.Genelde bu özelliği float ile birlikte kullanacaksınız. Yani hizalıyacak sonra da temizleyeceksiniz. Bunu şey gibi düşünebiliriz. Bir iş yaparsınız etraf kirlenir sonrada o kirleri temizlersiniz.Bunu genelde iç içe geçmiş elemanlarınız için kullanırsınız.İlk örnekte hatalı olanı ikinsinde iste doğrusunu görelim..

Kullanımı:

Css
div.yesilkutu {
border: 3px solid #4CAF50;
padding: 5px;
}
.sagayasla {
float: right;
}
.clearfix {
overflow: auto; /*içeriği otomatik olarak */
}
Html
<div class="yesilkutu">
<img class="sagayasla" src="../../../resimler/aycicegi.jpg" alt="Aycicegi" style="width:170px;height:170px;margin-right:5px;">
Ayçiçeği dünyada ve Türkiye\'de en önemli yağ bitkilerinden biridir. Marmara Bölgesi\'nde daha çok yetiştirilir. Trakya Bölgesi\'nde yoğunluk gösterir. Ayçiçeğinin üstündeki çekirdekler fabrikalarda işlenerek satılır...(https://tr.wikipedia.org/wiki/Ayçiçeği)
</div>
<div style="clear:right"><br></div>
<div class="yesilkutu clearfix">
<img class="sagayasla" src="../../../resimler/aycicegi.jpg" alt="Aycicegi" style="width:170px;height:170px;margin-right:5px;">
Ayçiçeği dünyada ve Türkiye\'de en önemli yağ bitkilerinden biridir. Marmara Bölgesi\'nde daha çok yetiştirilir. Trakya Bölgesi\'nde yoğunluk gösterir. Ayçiçeğinin üstündeki çekirdekler fabrikalarda işlenerek satılır...(https://tr.wikipedia.org/wiki/Ayçiçeği)
</div>

5-Images Side By Side(Yan Yana Görüntüleme)

Güzel bir örnek ile devam edelim.Elimizde üç adet aynı konuma ait manzara fotoğrafı olsun. Bu fotoğrafları yanyana dizerek o konumu açıklamaya çalışalım.

Kullanımı:

Css
* {
box-sizing: border-box;
}
img{
border-radius:3px;
}
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
Html
<h2>İğneada Longoz Ormanları</h2>
<div class="clearfix">
<div class="img-container">
<img src="../../../resimler/millipark1.jpg" alt="MilliPark" style="width:100%">
</div>
<div class="img-container">
<img src="../../../resimler/gol.jpg" alt="Gol" style="width:100%">
</div>
<div style="margin-right:0px;" class="img-container">
<img src="../../../resimler/ormanyolu.jpg" alt="Lokanta" style="width:117%">
</div>
</div>
<p>Size Kırklareli iline bağlı güzel cennet köşesi İğneada Longoz Orman\'larından bahsedeceğim.
Her sene gittiğim memleketim olan bu yer, temiz havası insana huzur veren görselliği ile
bütün stres ve sıkıntılarımı unutturuyor.Canım her huzur ve sessizlik istediğinde arabama atlar
soluğu burada alırım...
</p>

6-Web Layout width Float Example(Web Yön ile Beraber Web Yerleşimi Örneği)

Güzel, çok ayrıntılı olmayan bir web sayfası örneği ile bu konumuzu kapatalım. Artık bu konuyu da bitirdikten sonra güzel web sayfaları oluşturmaya başlayacaksınız.

Kullanımı:

Css
* {
box-sizing: border-box;
}
.header, .footer {
background-color: #4695E8;
border-radius: 3px;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu ul a{
text-decoration:none;
}
.menu li:hover {
background-color: #0099cc;
}
.content{
width: 75%;
}
Html
<div class="header">
<h1>Kırklareli</h1>
</div>
<div class="clearfix">
<div class="column menu">
<ul>
<a href ="#"><li>Tarihi</li></a>
<a href ="#"><li>Doğal Güzellikleri</li></a>
<a href ="#"><li>Yemek Kültürü</li></a>
<a href ="#"><li>Harita</li></a>
</ul>
</div>
<div class="column content">
<h1>Kırklareli Hakkında</h1>
<p>
Kırklareli, Türkiye'nin Marmara Bölgesi'nin Trakya yakasında, doğuda Karadeniz, güneyde Tekirdağ,
batıda Edirne ve kuzeyde Bulgaristan'nın Burgaz ili ile çevrili ilidir.
</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>


Paylaş:

Enes KILIÇ
Webmaster