Tablosuz Tasarım

Div ler

Kutular (Div)

• Amacı sayfayı belirli bloklara bölerek içerik girişlerinin daha rahat yapılması, arka planların daha rahat atanması, özelliklerin daha rahat kullanılmasıdır.

Tasarım Süreci

• Tasarımsureci.pps

Div ile kullanılabilecek özellikler• id• class• Position : static, relative, absolute, fixed• Float : top, left, right, bottom• width (35% veya 35px) yüzde veya tam ölçü verilebilir• height (35% veya 35px) yüzde veya tam ölçü verilebilir• z-index• border• background• text-align• Padding : padding-top, padding-bottom, padding-left, padding-right• margin : margin-top, margin-bottom, margin-left, margin-right

http://dorukkaraboncuk.com/html-div-etiketi-nasil-kullanilir/

Div- position• Blok parçanızın nasıl durucağını belirtir.• Static: Hiç bir değer girmezseniz div etiketi “static” özelliğini

kendi atar ve blok parçanız bir bütün olarak durup, pozisyonu belli olmadığını ve varsayılan değerde gözüküceğini belirtir.

• Relative: Relative özelliğini seçerseniz top, bottom, left veya right seçeneklerini kullanabilirsiniz. Blok düzenini gözüktüğü pozisyondan sağa sola yukarıya veya aşağıya kaydırmanıza yarar.

• Absolute: Absolute özelliğini seçtiğinizde blok parçanız sayfaya göre ayarlanır ve relative gibi top, bottom, left veya right özelliklerini alır. İç içe geçmiş bazı divler dışında sayfanızda sabit tutmak istediğiniz parçalar için kullanır. Bir sonraki özellikte başka bir div’in içerisinde nasıl sabit tutulucağını görüceksiniz.

Div- position

• <div style=”position:static;”>İçerik</div>• <div style=”position:relative;”>İçerik</div>• <div style=”position:absolute; left:10px;

right:10px; top:10px; bottom:10px;”>İçerik</div>

Div - position

• Relative + Absolute: Bir blok parçasının içerisinde sabit yeri değişmeyen başka bir blok parçası yaratmak istediğimizde dıştaki blok relative özelliğini alır ve içerideki blok absolute özelliğini alır. Daha sonra absolute özelliğinin aldığı top, bottom, left veya right özellikleri dıştaki blok parçasına göre hizalanır.

• <div style=”position:relative;”><div style=”position:absolute; left:10px; top:5px;”>İçerik</div></div>

Div - position

• Fixed: Fixed özelliği gözümüzün gördüğü yeri baz alarak hizalama yapar. Sayfayı aşağıya yukarıya oynatmanız blok parçasının yerini değiştirmez.

• Ör:

• <div style=”position:fixed; left:10px; top:50%;”>İçerik</div>

Div - float

• Bazen ölçülerin hepsini tam giremeyiz özellikle dinamik dökümanlarda yükseklik sürekli değişebileceğinden dolayı position özelliğini kullanmak sitede sorunlara yol açabilir. Bloklarımızı birbirine dayamaya yarayan float özelliğini kullanabiliriz.

• Float özelliği left ve right olarak iki özellik ile kullanılabilir. Bloklarınızı mümkün olduğu kadar sağa veya sola dayamanıza yarar.

• <div style=”float:left;”>İçerik</div>

Div –width-height

• <div style=”width:450px;”>İçerik</div> • <div style=”width:50%;”>İçerik</div>

• <div style=”height:450px;”>İçerik</div> • <div style=”height:50%;”>İçerik</div>

Div- z-index

• Üst üste gelen bloklarınız varsa bunların sırasını belirtir. En arkada kalmasını istediğiniz bloklar için genellikle -9999 değeri kullanılır. Apartman katları gibi düşünülebilir. Sayı büyüdükçe blok üst kata çıkar. Z-index’i 1 olan blok, Z-index’i 2 olan blok parçasının altında kalacaktır.

• <div style=”z-index:-9999;”>İçerik</div>

Div - border

• Blok parçanıza çerçeve eklemek için kullanılır. Çerçevenin kalınlığını, tipini ve rengini ayarlayabilirsiniz.

• <div style=”border:1px solid #161616;”>İçerik</div>• <div style=”border:1px dotted #000;”>İçerik</div>

Div- background• <div style=”background:url(adres.jpg) repeat-x;”>İçerik</div>• <div style=”background:url(adres.jpg) no-repeat;”>İçerik</div>

Div – text-align

• <div style=”text-align:center;”>İçerik</div>

Div - overflow

• <div style=”overflow:auto;”>İçerik</div>

Kutu Modeli

Örnek: Genişliği kaç px’dir?

div.kutu {width: 300px; padding: 10px; border: 5px solid gray; margin: 10px};320px

Örnek: Genişliği 250 px olan bir kutu ?

div.kutu {width: padding: border: margin: }

Örnek :

• http://chengchenandzhou.com/

• http://www.csswinner.com/winners

Border style

• http://www.w3schools.com/css/css_border.asp

Background

• background:url(img/resim.jpg);• background-size: 100% 100%;

Alt Alta Div’ler<div id="div1">DIV1</div><div id="div2">DIV2</div><div id="div3">DIV3</div>

#div1 {background: red;height: 100px;width: 150px;}#div2 {background: yellow;height: 300px;width: 150px;}#div3 {background: blue;height: 200px;width: 150px;

Yan Yana Div’ler (id ile)<div id="div1">DIV1</div><div id="div2">DIV2</div><div id="div3">DIV3</div>

#div1 {float: left;background: red;height: 100px;width: 150px;}#div2 {float: left;margin:auto;background: yellow;height: 300px;width: 150px;}#div3 {float: left;background: blue;height: 200px;width: 150px;

Soru?

• Bu kutuları sağa yaslayın?

• Kutuları sayfada ortalayın?

#div { border: solid 1px black; height: 100px; margin-left: auto; margin-right: auto; width: 100px; }

Yan Yana Div’ler (class ile )<div id="ana_div"><div class="div“ >1.Div</div><div class="div“ >2.Div</div><div class="div“ >3.Div</div></div>

#ana_div { height: 300px; width: 970px; margin-right: auto; margin-left: auto; background-color: #666666; }

.div { float: left; height: 200px; width: 303px; margin: 10px; color: #FFFFFF; }

Web Sayfası Hazır Taslaklar

• http://blog.html.it/layoutgala/

Ödev

• Div position video: http://www.adobegunlugu.com/adobe-cs5-eseminerleri-38-css-position-ozelliginin-kullanimi-relative-absolute-fixed-static/