Css öğreniyorum

M
⚪ Konu sahibi son olarak 3346 gün önce görüldü
CSS Float nedir?

CSS float özelliği ile bir öğe sağa veya sola itilebilir ,diğer öğelerin etrafını sarabilir.?

Float sıklıkla imajlar için kullanılır ama düzen oluşturmak içinde faydalıdır.

Float özelliğinin kullanımı

Float özelliği horizontal olarak ayarlandığında öğeler sağa veya sola kaydırılabilir ancak aşağı veya yukarı kaydırılamaz.Kaydırılımış öğe mümkün oluğu adar sağa ve sola kayar.
Diğer öğeler kaydırılmış öğenin etrafında görüntülenir.
Kaydırılmış öğeden önceki elemanlar etkilenmeyecektir.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img 
{
float:right;
}
</style>
</head>

<body>
<p>Aşağıdaki paragrafa <b>float:right</b> özelliği ile bir resim ekledik.Bu şekilde resim sağda görünecek ve paragraf resmin etrafında görüntülenecektir.</p>
<p>
<img src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" />
Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.
</p>
</body>

</html>

Sıra sıra kaydırılmış öğeler

Birbiri ardına kaydırılmış öğe koyarsak yan yana dizilir.
Aşağıdaki örnekte birbiri ardına float kullanarak bir resim galerisi yaptık.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

<body>
<h3>Resim galerisi</h3>

<img class="thumbnail" src="http://www.w3schools.com/css/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis4_small.jpg" width="120" height="90">
</body>
</html>

Float kapatılması clear özelliği

Bu özelliği kullanarak ardı ardına kaydırılmış öğelerin arasına başka öğeler koyabilirsiniz.Ne şe yaradığını görmek için aşağıdaki ve yukarıdaki örneği karşılaştırabilirsiniz.
 
Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:10px;
}
</style>
</head>

<body>
<h3>resim galerisi </h3>

<img class="thumbnail" src="http://www.w3schools.com/css/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">İkinci sıra </h3>
<img class="thumbnail" src="http://www.w3schools.com/css/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="http://www.w3schools.com/css/klematis4_small.jpg" width="120" height="90">
</body>
</html>


Örnek 1

Kaydırılmış bir öğede resme kenarlık ve kenar boşluğu ekleme


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img 
{
float:right;
border:5px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>
Aşağıdaki paragrafta resim sağa kaydırılmıştır. Resme (dotted black border) siyah noktalı kenarlık eklenmiştir.  </br>
Paragrafı resimden uzaklaştırmak içinde üst ve sağ tarafa 0 px alt kenara 15px sol tarafa 20 px kenar boşluğu bıraktık.
</p>
<p>
<img src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" />
Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. vBu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. vBu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. 
</p>
</body>

</html>
 
Örnek 2

Başlıklı sağa kaydırılmış resim

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>

<body>
<div>
CSS eğlencelidir!
<img src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /><br />
CSS eğlencelidir!
</div>
<p>
Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.
</p>

<p>
Yukarıdaki örnekte div öğesi 120 px genişliğindedir ve bir resim içermektedir.</br>
Div öğesi sağa kaydırılmıştır.

</p>
</body>

</html>
 
Örnek 3

Bir paragrafın ilk harfini büyütüp sola kaydırabilirsiniz.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span
{
float:left;
width:1.4em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>

<body>
<p>
<span>Bu</span> örnek bir metindir.
 Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.
</p>



</body>
</html>
 
Örnek 4

Yatay bir menü oluşturma

Kod: 
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:yellow;
background-color:red;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Birinci link</a></li>
<li><a href="#">İkinci link</a></li>
<li><a href="#">Üçüncü link</a></li>
<li><a href="#">Dördüncü link</a></li>
</ul>

<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>

</body>
</html>
 
Örnek 5

Tablolar olmadan anasayfa oluşturma

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:10px solid red;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:black;
background-color:powderblue;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:5px solid red;
padding:1em;
}
</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">W3Schools.com</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>

</body>
</html>
 
CSS Yatay Hizalama

Blok Öğeleri hizalama

Bir blok öğesi uygun olan tüm genişliği kaplayan, öncesi ve sonrasında bir satır sonu bırakan bir öğedir.

Blok öğeleri örnekleri:

<h1>
<p>
<div>

Bu bölümde yatay düzenleme amacıyla blok öğeleri nasıl hizalayacağımızı göreceğiz.

Margin özelliği kullanarak merkezi hizalama

Blok öğeleri sağ ve sol öğeleri auto ayarlanarak merkezi hizalanabilir.

! DOCTYPE bildirimi yapılmadıysa margin:auto kullanımı İE 8 ve öncesi sürümlerinde çalışmaz.

Sağ ve sol margin özelliğinin auto olarak ayarlanması sağ ve sol kenar boşluklarının eşit olması gerektiğini bildirir.Sonuç merkezi ortalama olur.
 
Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="center">
<p>Margin özelliği kullanarak merkezi hizalama</br>

Blok öğeleri sağ ve sol öğeleri auto ayarlanarak merkezi hizalanabilir.</br>

! DOCTYPE bildirimi yapılmadıysa margin:auto kullanımı İE 8 ve öncesi sürümlerinde çalışmaz.</br>

Sağ ve sol margin özelliğinin auto olarak ayarlanması sağ ve sol kenar boşluklarının eşit olması gerektiğini bildirir.Sonuç merkezi ortalama olur.</p>
</div>


<p>Margin özelliği kullanarak merkezi hizalama</br>

Blok öğeleri sağ ve sol öğeleri auto ayarlanarak merkezi hizalanabilir.</br>

! DOCTYPE bildirimi yapılmadıysa margin:auto kullanımı İE 8 ve öncesi sürümlerinde çalışmaz.</br>

Sağ ve sol margin özelliğinin auto olarak ayarlanması sağ ve sol kenar boşluklarının eşit olması gerektiğini bildirir.Sonuç merkezi ortalama olur.</p>

</body>
</html>

Not: width yani genişlik %100 ise hizalamanın herhangi bir anlamı yoktur.

Position özelliği kullanarak sağa ve sola hizalama

Öğeleri hizalama yöntemlerinden biride mutlak konumlamadır.

 
Crossbrowser Compatibility Issues (Crossbrowser Uyumluluk Sorunları)

Öğeleri bu şekilde hizalamak , body öğesi için kenar boşluğu ve dolguları önceden ayarlamak iyi bir fikirdir.Farlı tarayıcılarda görsel farklılıklardan kaçınabilirsiniz.

İE8 ve önceki sürümlerinde hizalama özelliği kullanmak sıkıntılıdır. !DOCTYPE bildirimi kullanılmazsa İE8 ve önceki sürümlerinde sağ kenar boşluğuna 17 px lik bir alan eklenecektir.Bu da kaydırma çubuğu için ayrılmış bir alanmış gibi görünür.Bu nedenle float özelliğini kullanırken !DOCTYPE bildirimini mutlaka kullanın

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>Note: </b>Position özelliğini kullanarak hizalama yaptığınızda mutlaka !DOCTYPE  bildirimini kullanın. Kullanılmazsa İE tarayıcılarda garip sonuçlar üretebilir. </p>
</div>
</div>

</body>
</html>
 
web yazılımı uzmanı olmak isteyenler için şart tabii. aynı zamanda html,xml,java,sql gibi dilleri de öğrenebilceğiniz bilişim eğitim merkezi'nin eğitimi mevcut. eğitim partnerleri bile referans açısından yeterli.
 
Cevap yazmak için giriş yap yada kayıt ol.
Geri