Archive for CSS
Temmuz 14, 2011 at 23:52 · Kategori: CSS
CSS Media tipleri kısaca mevcut bir dökümanı farklı cihazlarda farklı şekillerde gösterebilme imkanı sunar.
/* bilgisayarlar tarafından kullanılan ekranlarda */
@media screen
{
p.bold{font-weight:bold;}
}
/* yazıcılar tarafından kullanılan ekranlarda */
@media print
{
p.italic {font-style: italic;}
}
/* bilgisayar ekranları ve browser tipi (Chrome veya Safari) olanlar için uygula */
@media screen and (-webkit-animation)
{
a {
text-decoration: none;
}
}
Diğer media tiplerine buradan ulaşabilirsiniz.
Mayıs 14, 2011 at 01:49 · Kategori: CSS
Özellikle son projelerimde, tasarımlarda sıkça sabit footer kullanmaya başladım. Peki sayfa yüksekliği ne olursa olsun footer’ı sayfanın en altına nasıl sabitleyebiliriz, birazdan mantığıyla birlikte bunu anlatmaya çalışacağım.
Aşağıdaki yapıda bir sayfa yapımız olduğu varsayalım.
Sayfa boyunu %100 olarak ayarlayarak,öncelikle kullanıcının o an kullandığı tarayıcının pencere yüksekliğine göre dinamik bir yapı sağlayacağız. Daha sonra #container elementini, kullanacağınız footer yüksekliği kadar yukarı çekeceğiz (margin-bottom:-140px). Örnekte footer yüksekliğini 140px olarak belirledim.
* { margin:0; padding:0;}
html, body {
height: 100%;
}
#container {
height: auto !important; /* IE Düzeltmesi */
height: 100%;
min-height: 100%;
margin: 0 auto -140px; /* footer'un yüksekliği kadar (-)margin-bottom uyguladık */
background:blue;
}
.ek{
height: 140px;
}
#footer {
height: 140px;
background:red;
color:#999999;
}
//ekstra
#header
{
height:150px;
background:powderblue;
}
#content
{
height:400px;
background:blue;
}
Bu yapı tasarımınıza sabit bir footer özelliği kazandıracak. Peki “ek” class ismine ait div’i neden kullanıyoruz ? Bunun nedeni #container idli blok elementinin stilinde margin-bottom:-140px özelliğini kullanmamız. Zira böyle bir durumda hemen altındaki #footer elementi bu boşluğu doldurmaya çalışacaktı. Bu sebeple #container elementinin içerisine ek bir blok yaparak, bu boşluğu footer’ın yerine doldurmasını sağladık.
Önizleme için buraya tıklayınız.
İyi çalışmalar,
Şubat 14, 2011 at 13:17 · Kategori: CSS
Internet explorer’ın başa bela uyumsuzluklarının bir diğeri de yüksekliğe verilen mininum “şu kadar” olsun ifadesini anlayamaması. Bu sorunu düzeltmek için basit bir yöntem ararken karşıma çıkan sitede bu konuyla ilgili güzel bir yöntem buldum.
Minumum yükseklik vermek istediğiniz bir block elementine aşağıdaki kodu yazmanız durumunda internet explorerdaki uyumsuzluğu da ortadan kaldırmış oluyorsunuz.
/* for understanding browsers */
.kapsul{
width:200px;
min-height:100px;
}
/* for Internet Explorer */
* html .kapsul {
height: 8em;
}
Şubat 10, 2011 at 00:03 · Kategori: CSS, XHTML
Web tasarımlarınızda tüm tarayıcılarda aynı görüntüyü alabilmek şüphesiz çok önemli bir husustur. Günümüzde mevcut tarayıcıların kullanım oranlarına bakıldığında hala internet explorer 6 kullanıcılarının azımsanamayacak çoğunlukta olduğunu söylebiliriz. IE6′da sayfanız taşmasa dahi bir dikey bir scroll oluşabilir. Bu durumun üstesinden gelmek için aşağıdaki stil kodunu mevcut css dosyanıza eklemeniz yeterli olacaktır.
<pre class=”brush:css”>
html
{
overflow: auto;
}
</pre>
Mart 6, 2010 at 15:36 · Kategori: CSS, XHTML
Merhabalar,
Bu konuda tablo kullanmayı tercih etmeyenler için yalnızca Html ve CSS kullanarak oluşturduğum, interaktif sitelerin neredeyse tümünde kullanılan giriş yap bölümünden 4 adet bulabileceksiniz. Yeterince zamanım olmadığı için yalnızca iskeletlerini oluşturdum, grafiksel olarak zenginleştirmek sizin elinizde…
Yazının Devamı
Önceki Yazılarım
