CSS İLE WEB SAYFASI OLUŞTURMA II
Elastik Web Sayfaları Oluşturma
Likid Sayfalar yüksek çözünürlüğe sahip geniş ekranlarda satır yüksekliklerinden dolayı pek hoş görünmeyebilir. Bunun aksine, daraltılmış pencerelerde çok kısa ve parçalanmış görüneceklerdir ve metin boyutu arttırıldığında üst üste binmiş satırlarda görüneceklerdir. Bununla ilgili olarak elastik sayfa oluşturma metodu bize yardım edecektir.
Elastik Sayfalar web tarayıcılarına göre font boyutunun ve elementlerin genişliğinin göreceli olarak ayarlandığı sayfalardır. Genişlikleri em, yüzde(%) ve ex gibi göreceli birimler kullanarak tanımladığımızda font boyutu sayfa genişliğine göre değişecektir. Aynı şekilde satır yüksekliği(line-height) değerinde de göreceli birimler kullanarak daha okunaklı sayfalar elde edebilriz.
Elastik sayfa planlama metodununda bazı problemleri vardır, örneğin sabit genişlikteki sayflardaki gibi elastik metodda da boş alanlar yeterince kullanılamaz. Çünkü font boyutu arttırılırsa sayfa genişliği tarayıcının genişliğini geçecektir ve yatay kaydırma çubuğu çıkacaktır. Bu durumdan kurtulmak için body elementine max-width 100% ataması yapabilriz. Ancak bu özelliği IE6 desteklememektedir.
Elastik web sayfası tasarlamak çok kolaydır. Sabit Genişlikte sayfa tasarımı yapılan bir sayfanın birimleri piksel yerine em olarak değiştirilirse sayfa elastik yapıya kavuşacaktır. 1em yaklaşık olarak 10piksele denk gelir.
Çoğu web tarayıcısınnda normal font boyutu 16px’dir. 10 pikselin yüzdesel değeri yaklaşık olarak 62.5% civarındadır. Bu belirtilen değerlere göre kodumuzu yazarsak:
body{
text-align:center;
font-size:62.5%;
font-family:Arial, Helvetica, sans-serif;
}
#sayfa{
width:72em;
margin:0 auto;
text-align:left;
}
#ustAlan
{
width:72em;
}
#anaMenu
{
float: left;
width: 18em;
}
#KapsayiciAlan
{
float: right;
width: 52em;
}
#icerik
{
float: left;
width: 32em;
}
#BannerAlani{
float: right;
width: 20em;
}
#altAlan
{
width:72em;
clear: both;
}
Burada body elementi font boyutunu 1em eşit olan font-size:62.5%; atamasını yaptık. Daha sonra sayfadaki birimleri bu değeri baz alarak hesapladık ve em birimi vererek sayfamızı elastik bir hala getirdik.
Sayfamızın Sabit Genişlikteki sayfalardan farkını anlamak için web tarayıcısının font boyutu değerlerini veya yakınlaştırma(zoom) aracını (Opera, FF-eklentisi var ve IE 7 de var)kullanarak görebilriz. IE ve FF için Görünüm(View) – Metin Boyutu(Text Size) Opera için View – Zoom seçeneklerini kullanarak farkı görebilriz.
/* clear fix metodu basl */
#icerik:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility:hidden;
}
#icerik{display: inline-block;}
/* IE Win için düzeltme \*/
* html #icerik {height: 1%;}
#icerik{display:block;}
/* IE Win icin duzeltme sonu */
Ben içeriğime şu kodu uyguladım aşağıya doğru akması için sayfaya haberler ekliyorum sabit bir ölçü vermek istemiyorum aşağıya doğru uzasın istiyorum
yukarıdaki kodu uyguladığımda şu hataları aldım dreamveawer da
Error parsing styles
Affects: Firefox 1.5
———————–
Unsupported value: ‘inline-block’
Affects: Netscape 8.0
————————-
Unsupported value: ‘inline-block’
Affects: Firefox 1.5, 2.0; Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Opera 8.0, 9.0; Safari 2.0
—————————————————–
css kodlarımda şunlar
body{
text-align:center;
background: url(../images/bodybg.png) repeat fixed;
}
#sayfa{
width: 768px;
margin:0 auto;
background: url(../images/content.png);
text-align: left;
height: 1024px;
}
#ustAlan
{
width: 768px;
height: 162px;
background: url(../images/header.jpg);
}
#sayfa #ustAlan h1 {
font: bold 36px Georgia, “Times New Roman”, Times, serif;
color: #ECFFFF;
padding-top: 0px;
margin-top: 0px;
padding-left: 50px;
}
#sayfa #ustAlan p {
color: #FFCC66;
font: bold 25px Georgia, “Times New Roman”, Times, serif;
padding-left: 347px;
display: none;
}
#KapsayiciAlan
{
float: right;
width: 568px;
}
#icerik
{
float: left;
width: 368px;
font: 14px Arial, Helvetica, sans-serif;
text-align: justify;
}
/* clear fix metodu basl */
#icerik:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility:hidden;
}
#icerik{display: inline-block;}
/* IE Win için düzeltme \*/
* html #icerik {height: 1%;}
#icerik{display:block;}
/* IE Win icin duzeltme sonu */
#icerik h2 {
font: italic 18px Arial, Helvetica, sans-serif;
color: #CC0000;
text-decoration: underline;
margin-top: 30px;
}
#BannerAlani{
width: 180px;
height: 802px;
float: right;
margin-right: 20px;
}
#BannerAlani img {
background: #FFFFFF url(../images/shad_bottom.png) repeat-x left bottom;
padding: 5px 5px 9px;
}
#BannerAlani .shadow {
background: #b4afa3;
border-left: 1px solid #dcd7c8;
border-right: 1px solid #dcd7c8;
margin: 30px 8px 0px;
}
#BannerAlani .topleft {
width: 2px;
height: 4px;
background: url(../images/shad_tlcorner.png) no-repeat left top;
position: absolute;
top: 0px;
left: -1px;
}
#BannerAlani .topright {
width: 2px;
height: 4px;
background: url(../images/shad_ttcorner.png) no-repeat right top;
position: absolute;
top: 0px;
right: -1px;
}
#BannerAlani .bottomright {
width: 5px;
height: 5px;
background: url(../images/shad_brcorner.png) no-repeat right bottom;
position: absolute;
bottom: -1px;
right: 22px;
}
#BannerAlani .bottomleft {
width: 5px;
height: 5px;
background: url(../images/shad_blcorner.png) no-repeat left bottom;
position: absolute;
bottom: 1px;
left: 67px;
}
#anaMenu
{
float: left;
width: 180px;
height: 802px;
margin-left: 20px;
}
div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(../images/bottom.gif) no-repeat right bottom;
color: #fff;
margin-left: 20px;
margin-top: 30px;
}
div.sdmenu div {
background: url(../images/title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(../images/toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(../images/expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background: url(../images/collapsed.gif) no-repeat 9px center;
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(../images/linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
#altAlan
{
width: 768px;
clear: both;
height: 60px;
background: url(../images/footer_b.png) no-repeat 100% 100%;
padding-top: 15px;
margin-bottom: 50px;
}
#sayfa #altAlan .altAlantext {
text-align: center;
font: 12px Georgia, “Times New Roman”, Times, serif;
}
sorun genişlik ve margin tanımı beraber yapmandan kayankalnıyor. Eğer
#icerik
{
width: 515px;
float:left;
}
şeklinde düzelir eğer margin değeride yazacaksan kutu modeli düzeltmesi uygulaman gerekir. http://www.fatihhayrioglu.com/?p=13
#icerik
{
width: 515px;
margin: 5px;
float:left;
voice-family: “\”}\”";
voice-family:inherit;
width:505px;
}
html>body #icerik {
width:505px;
}
Aşağıdaki CSS, şu an yapmaya çalışıp ama beceremediğim siteme ait. Kafayı yemek üzereyim.
anamenumu sağ tarafa içeriği sol tarafa koymak istiyorum. Ama anamenü ya üste gidiyor ya da alta… :(
Yanyana durmuyor içerik ve anamenü.. Sorun ne ??
+ xhtml kodlarını eklerken hangi sırayı uygulamalıyım, verdiğiniz örnekteki gibi yapıyorum…
body {
color: #333;
font-size: 11px;
font-family: verdana;
background-color:#e6e6e8;
text-align:center;
}
#kaplama {
width: 760px;
margin:0 auto;
background-image:url(../images/back.png);
text-align:left;
}
#header
{
width:600px;
height: 95px;
background-image:url(file:../images/header.png);
}
#anaMenu
{
float: right;
width: 240px;
}
#icerik
{
width: 515px;
margin: 5px;
float:left;
}
tavsiyelerinize teşekkür ederim. css i tam olarak öğrenebildiğim zaman tablolardan kurtulmak ilk işim olacak
:)
Aslında benim amacım tablolu yapıdan kurtulup css li yapıya geçmek. Ama yine de daha önceki tecrübelerimden şunu söyleye bilrim.
Eğer bir tasarımı böleceksek(slice) photoshop ile tüm yapıyı bölmek yerine tüm yapının bölümlerini ayrı ayrı bölüp sonra toplamak.
Çünkü photoshop ile karmaşık yapılı tasarımları bölerken araya toparlayıcı boş gifler koyuyor ve buda daha sonra düzenlemek yapmayı zorlaştırıyor
Selamlar,
Ben aslında grafikerim photoshopta tasarımlar yapıp dreamweaver a atıyorum orada düzenlemeye çalışıyorum. Fakat en sinir bozucu olan bi font sığmadığında veya resim büyük geldiğnde toparlanamayacak şekilde dağılan table larla başbaşa kalıyorum.Sil baştan…
dana önce Photoshopta hazırladığım html i komple yeni bir sayfada bir satır bir sütun bir table içine atıp çalışıyordum ama değişk tasarımlarda sorunlar çıkmaya devam etti.
Photoshopta nasıl bir slice metodu izlemeliyim ki editörümde dağılınca veya genişleyince kolayca toparlayabileyim.ya da bunun püf noktası varmı dreamweaverda …yardımlarınız için şimdiden teşekkürler…
Eğer içeirk alanındaki içerik sabit değilse yükseklik değeri verilmemesi gerekir.
#icerik içindeki height:450px; tanımını kaldırın.
Ayrıca #altAlan içindeki position: absolute;
top: 768px; tanımlarını kaldırırsanız sorununuz çözülecektir. Ayrıca içerik lalanına clear fix uygulayın aşağıdaki gibi
#icerik
{
float: right;
width: 800px;
margin:0px;
padding:0px;
border:0;
}
/* clear fix metodu basl */
#icerik:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility:hidden;
}
#icerik{display: inline-block;}
/* IE Win için düzeltme \*/
* html #icerik {height: 1%;}
#icerik{display:block;}
/* IE Win icin duzeltme sonu */
#sayfa
{
width:1000px;
}
#ustAlan
{
width: 1000px;
height:140px;
padding:0px;
margin-bottom: -4px;
}
#icerik
{
float: right;
width: 800px;
margin:0px;
padding:0px;
height:450px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#anaMenu
{
float: left;
width: 180px;
height: 200px;
}
#altAlan
{
font-family:”Times New Roman”, Times, serif;
width: 1000px;
height:75px;
clear: both;
border: 1px solid #009999;
color:#999999;
background-color:#EEEEEE;
margin: 0px;
padding: 0px;
position: absolute;
top: 768px;
}
.y1
{
font-size:10px;
color:#CC0033;
}
.y2
{
font-size:10px;
color:#666666;
}
.y3
{
font-size:9px;
color:#CC6600;
}
.y4
{
font-size:9px;
}
body
{
padding:0px;
margin: 0px;
border:opx;
}
.sf
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #CC0000;
font-size: 18px;
font-weight: bold;
text-align: center;
}
sayfamı yoneten css bu yapısıda sizin birince dersde anlattıgınız css ile site yapımındaki sablon icerik kısmına eger birseyler yazdırırsam yazılar tabanlıgın
üstüne kayıyor.Yardımcı olursanız memnun olurum size isterseniz iste kodunuda yollarım.
Kodu görmeden kesin bir şey söylemek kolay değil.
Eğer bir yükseklik tanımı yapmadı iseniz. Yükseklik otomatik değişmesi lazım. Ayrıca içeriği kapsayan katman ‘a clear fix metodunu uygulamamanızdan kaynaklana bir sorunda olabilir. http://www.dahaiyi.net/yazilar/temiz-bir-clearfix-metodu/
Benim sitenizde ilk web şalonuna göre bir içeriğim var yani üst-alt alan sol ve içerik sorun şu ki içerik alanında veritabanından bilgi eğer çok gelirse
bu bilgiler alt alanın üzerine geliyor ,otomatik olarak içerik alnının boyunu artırma sanşım var mı ? bu şekilde alt alanını aşaya itmiş olucağım.Yada ne tavsiye edersiniz bana ?