Semantik kodlama yaparken karşılaşılan problemlerden biridir yazıların taşması .
Bunu engellemek için şöyle bir css kodu yeterli gelecektir.
.wrapword {
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
Başlık nekadar düzgün oldu bilemiyorum daha iyisini önerilere açığım 
neyse lafı uzatmadan konumuza gelelim
Bazen yaptığınız css dosyaları her tarayıcıda sorunsuz çalışırken tek bir satır/özellik İE6/İE7 de farklı yorumlanır sıfr tek bir özellik içinde ayrı bir css dosyası yükletmek sıkıntılı olabilir
uzun zamandır kullandığım bir hileden(trick) bahsedeceğim.
2 özel karakterimiz var. Bunlar # ve _ karakterleri. Bu karakterler, önlerine geldiği özelliğin(property) hangi browser için uygulanacağını belirler. Bir örnek üzerinde açıklayalım :
#divDeneme {
padding: 0px 0 20px 40px; /* Tüm browserlar için çalışacaktır */
#padding:0px; /* FireFox görmeyecek ama IE 7 ve IE6'da çalışacaktır */
_margin: 10px 0 0 30px; /* FireFox ve IE7 görmeyecek ama IE 6'da çalışacaktır */
}
Bu tekniğin tek sıkıntılı tarafı CSS W3C doğrulamasından geçmemektedir. Bu doğrulamanında nekadar doğru ve geçerli olduğu halen tartışma konusudur?
Geliştirmekte olduğum bir projede Tema değişikliği yapmam gerekiyordu klasik yöntemlere yaptım ancak hoşuma gitmedi . jquery ile çözüm ararken şöyle basit bir olay buldum
$("link[title=tema]").attr("href",adres)
burada dikkat edilmesi gereken kısım css dosyasını eklerken birde title tagı eklememiz gerekir
<link rel=stylesheet type=text/css href="tema/css.php" title="tema" >
title eklemek zorunda değiliz farklı şekillerdede bu işlem yapılabilir.
“adres” değişkenide yükleyeceğimiz css dosyasının adresi oluyor
Geliştirmekte olduğum bir projede şöyle bir sorunla karşılaştım. fazla css dosyası kullanıyorum buda server’ı yorucu ve siteyi yavaşlatıcı bir etki yapıyordu…
malum 5 tane Css dosyası kullansanız istemci her dosya için ayrıca http isteği yapacak buda sitenin hızını yavaşlatacak.Burada şöyle birşey düşünülebilir tümm css dosyalarını tek bir css dosyasında birleştirmek kulağa hoş geliyor :) ancak burada başka bir sorun ortaya çıkıyor tek css dosyası üzerinde çalışmak programcı açısından zahmetli olur.
İnternette araştırmalar yaparken basit bir kod buldum iki yönlü fayda sağlayan bir kod özetle programcı açısından parça parça farklı css dosyaları ile çalşıyor, kullanıcı açısından tek seferde bütün css dosyaları yüklenmiş oluyor. İşte küçük harika kod gurubu
<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
$buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
$buffer = str_replace(array("r", "n", "t", ' '), '', $buffer);
return $buffer;
}
// include edeceğimiz css dosyaları
include_once('reset.css');
include_once("default.css");
ob_end_flush();
?>
Bu dosyayı css.php olarak kaydediyoruz
<link rel=stylesheet type=text/css href="css.php" media=screen>
Herkese merhaba, bu paylaşımımda sizlerle float kullanımı üzerine bildiklerimi paylaşmak istiyorum. Float kavramı, anlamlı HTML etiketleri kullanarak kodlarını geliştirmeye başlayan arkadaşların çözmekte zorlandığı bir konu. Ama inşallah bu paylaşım sonrası kimsenin, floatlar ile bir sorunu kalmayacak.
Hani arkadaşlar, kışın su birikintilerinde yüzen kağıtlar görürüz, işte o kağıtlar aslında su üzerinde float (yüzüyorlar) yapıyorlar. Ve biz bu kağıda üfleyerek veya elle müdahele ederek, sağa (float:right) ya da sola (float: left) doğru gitmesini sağlayabiliriz.
Web sayfalarınada bakacak olursak bir şekilde bir şeyler ya sağda ya da solda işte biz öğeleri sağa ya da sola atmak için CSS’in float özelliğini kullanıyoruz.
Hayat kurtarır..
Hazırlanan tasarımın tüm tarayıcılarda sorunsuz şekilde görüntülenmesi gerekmektedir.Bu sebeple arayüz hazırlayanlar yaptıkları tasarımın diğer tarayıcılarda nasıl göründüğünü görmek için her birisiyle ayrı ayrı test ederler.Fakat bu testler her zaman olumlu sonuç vermez.
Tarayıcılar aslında birer yorumlayıcıdır, hazırlanan web siteleri kodlardan oluşur ve tarayıcılar da bu kodları yorumlayarak bize gösterirler.Günümüzde kullanılan tarayıcıların hepsinde küçükte olsa yorum farkları var.Örneğin, Firefox’ ta kapatmadığınız bir tablo (</table>) hiç sorun çıkarmazken, aynı kodlar Internet Explorer penceresinde çok karışık bir şekilde gözükebilir, bunlar tarayıcıların yorum farklarından ileri gelmektedir. İşte tarayıcıların yorum farkları kendini stil ifadelerinde de gösteriyor. Her tarayıcı web sitelerini açarken kendi ön tanımlı değerlerine göre yorumluyor.Css reset ise bu ön tanımlı değerleri her tarayıcıda eşit hale getirerek bu farkı ortadan kaldırımaya yarıyor.
“overflow:hidden” kodu ne işe yarar: Bazı durumlarda div elementlerimizin dışarıya taşan kısımlarını göstermek istemeyiz bu kod bunu sağlıyor.
kullanımı şu şeklide
div {overflow:hidden;width:250px}
bu kod uygulanan elementimizde “250px” dışında kalan bölümü gösterilmez. Ancak başımızın belası İE6 ve İE7 tarayıcıda bu kod çalışmaz ! ÇAlışması için ufak bir kod daha eklememiz gerekir. Kodumuzun son hali şu şekilde olur
div {overflow:hidden;width:250px;position:absolute}
Artık İE6 ve İE7 de sorunsuz çalışacaktır.
Öncelikle tipografi kavramına değinelim:
Tipografi bir grafik tasarım kavramıdır ve dilimize Yunanca’dan girmiştir. Yazı tipini bir forma, biçime sokma sanatı olarak tanımlanır. Tasarım kavramının yer aldığı (Web tasarımı da dahil olmak üzere) neredeyse her noktada büyük önem taşıyan bir olgudur.
Tipografi Neden Bu Kadar Önemli
Tipografi, tasarımda metinsel içeriğin ziyaretçi veya izleyici tarafından okunacak öğeler haricinde görsel bütünlüğün bir parçası olarak ele alınmasına dayanır.
Yani eğer hazırladığınız projenin konusuyla alakalı olmayan ya da görsel konsept bütünlüğünü bozacak yazı tipi stillendirmelerine girerseniz, tasarımsal kriterlere göre pek başarılı bir sonuç elde etmemiş olacaksınız.
Peki, Web Tasarımında Tipografinin Getirisi Ne Olacak?
Elbette, öncelikle daha akıcı bir içerik görünümü elde edeceksiniz.
Hazırladığınız Web sitesinin yapısıyla uyumlu ve okunaklı yazı tipi büyüklükleri ve renk tonlamaları, metinsel içeriğin görsel hiyerarşisi, siteyi görüntüleyen ziyaretçinin içeriği sıkıntı çekmeden rahat bir şekilde okumasını ve izlemesini sağlayacaktır.
CSS yardımıyla, Web dokümanlarımızdaki yazı tipi ve metinsel içeriğin görünüm düzenlemesini yaparak göze daha akıcı ve okunaklı bir içerik yapısı hazırlayacağız.
 |
<= | Üsteki resim başkasının mesaj kutusu Alttaki resim ise eburhan’nın mesaj kutusu Üstteki resimde simgenin yazılara uzaklığı 15px Şimdi burada sorun yokmuş gibi görünüyor değil mi? |
| Continue reading ‘“em” ve “px” farkı nedir? neden “em” daha iyidir…’ |
