CSS ile
tasarımyaparken amacınıza uygun bir çok tekniği bilmeniz ve tasarımınızauygulamak durumunda kalırsınız. Bunlardan bazıları cssin size doğrudansunmadıkları teknikler olabilmektedirler. Benim son olarak tasarımlardaihtiyacım olan bir özellik de bilinen laye riçi hizalamanın dışındamiddle ve bottom hizalamalardı. JS ile hazırlanabileceğini düşündüm,ancak uygulanacak olan tasarım oldukça etkileşimli olduğu için buyavaşlamaya ve yavaşlamadan kaynaklanan hatalara neden olabilirdi.Unutulmaması gerekir ki asıl olan kullanılabilir ve kararlı biruygulama hazırlayabilmektir.
Tekrar csse dönerek bu şekilde çözümler aradım.
Kod:
<style type="text/css" media="screen">
<!--
p {
margin:0;
padding:0;
}
#wrapper {
width:400px;
border:1px solid #666;
background-color: #E7E1D3;
padding:10px;
height:300px;
font-family: Georgia, "Times New Roman", Times, serif;
}
#fixed {
float:right;
width:200px;
height:300px;
background:#666;
display:block;
}
#floating {
width:200px;
height:100%;
background:#EAEAEA;
position:relative;
border:1px solid #666;
}
#right {
position:relative;
float: right;
clear: right;
background-color: #BDD1D9;
border:1px solid #666;
width: 150px;
height: 300px;
padding: 5px;
}
#floating div {
position:absolute;
bottom:0;
left:0;
margin:5px;
}
-->
</style>
<div id="wrapper">
<div id="right">Bu alan da yine göstermelik olarak hazırlanmıştır. İsterseniz #right seçicisini ve bu layerı kaldırabilirsiniz.</div>
<div id="floating">
<div>
<p>Bu alana ne yazarsanız, layer`ın altında çıkacaktır.</p>
</div>
</div>
</div>
Bunu hallettikten sonra madem o kadar uğraşıldı, bir de bunun ortalamalı olanı nasıl olurdu diye düşünmeye başlamalı değil mi?
Kod:
<style type="text/css" media="screen">
<!--
p {
margin:0;
padding:0;
}
#wrapper {
width:400px;
border:1px solid #666;
padding:10px;
height:300px;
}
#fixed {
float:right;
width:100px;
height:300px;
background:#666;
display:block;
padding: 5px;
}
#wrapper>#right { /*display:table for Mozilla & Opera*/
display:table;
position:static;
}
#right { /*for IE*/
width:280px;
height:100%;
background:#EAEAEA;
position:relative;
}
#right div { /*for IE*/
position:absolute;
top:50%;
}
#right>div { /*for Mozilla and Opera*/
display:table-cell;
vertical-align:middle;
position:static;
}
#right div div {
position:relative;
top:-50%;
margin: 5px;
}
-->
</style>
<div id="wrapper">
<div id="fixed">sağ alan</div>
<div id="right"><div>
<div>
<p>yazdıklarınız layerın ortasında yani tablolardan da hatırladığınız özellik olan middle alanında yer alır.</p>
</div>
</div>
</div>
Layer işlemlerimizi de hallettiğimize göre artık tasarımlarımızda kullanabileceğimiz biçimlerde hizalama alanları hazırlayabiliriz.
Yazar: Ceyhun Aksan
