CSS küçük bir soru

[Pluton]

Merhabalar, aradım birazda nasıl bir arama yapacağımı bilmediğim için bulamadım hiç bi sonuç =)

Şimdi hani

isim

olarak taglar oluyor #logo 'da elemanlar 400x500 (salladım) logolarını koyuyorlar mesela, ama bu div'e tıklandıgındada index.php 'ye gidiyor ve ordaki "isim" yazısı text olmasına rağmen görünmüyor. Bunu nasıl yapıyorlar ?

[Brigand]

a'ya arkaplanı koyuyolar, a'nın width ve heightini ona göre ayarlıyolar.

#logo a { background: ...; width: ...; height: ...; }

isimin gözükmeme şeyi hakkıda bir fikir gelmedi ama şu anda aklıma.

[Pluton]

Brigand said:

a'ya arkaplanı koyuyolar, a'nın width ve heightini ona göre ayarlıyolar.

#logo a { background: ...; width: ...; height: ...; }

isimin gözükmeme şeyi hakkıda bir fikir gelmedi ama şu anda aklıma.

#status {width:96px; height:37px; padding:10px 0px 0px 70px; float:left; margin-right:20px; background-image:url('images/status1.png');}

şu şekil yaptım. Oraya kadar tamamda o görünmeme olayını çözemedi işte =)

[Brigand]

sen de yazmayıver a'nın içine bişe aa :D

[toggie]

text-indent: -9999px;

[Queen]

cssle ilgili en çok tartışılan konulardan biri o ya. text indent metodu çok kullanılır ama semantik olarak anlamsız olduğundan hoş olmuyor. ama en mantıklısı o gibi çünkü screenreaderla okuyanlar da okumuş oluyor.

ayrıca onu h1'in içine koyun yoksa resime link vermekten farkı kalmaz bence.

[toggie]

bi de kaydırma hacki var. div'in bg'ye resim koyuyosun. bu resimde yanyana linkin hem normal hali hem de hover hali oluyor. üzerine gelince pırt yana kaydırıyosun resmi hover kısmı gorunuyo.

bu sekilde hover sırasında farklı bir resim yuklenmesi sorunu da kalkmıs oluyor, site yuklendiginde tek resim zaten acılacagı icin.

[Pluton]

toggie said:

text-indent: -9999px;

Yaptım da tıklanmıyor şimdide dingil ya :D

Anasayfa

Şurda tıklanıcak anasayfaya gidicek ama yazı görünmicek :D

[toggie]

a 'ya id vericen div'e değil.


html:

	<a id="status" href="index.html" title="Anasayfa">Anasayfa</a>

	

css:

	#status {

	width: 100px;

	height: 50px;

	text-indent: -9999px;

	background: url(../images/anasayfa.png);

	float: left;

	}

	

[Pluton]

toggie said:

a 'ya id vericen div'e değil.


html:

	<a id="status" href="index.html" title="Anasayfa">Anasayfa</a>

	

css:

	#status {

	width: 100px;

	height: 50px;

	text-indent: -9999px;

	background: url(../images/anasayfa.png);

	float: left;

	}

	

Ama o dediklerim benim dediğim gibi yapıyodu dicem kızcaksın :D Neyse böylede oldu süper fazladan DIV yazmaya ne gerek var

[Kojiroh]

isim yerine koysan nasıl olurdu diye düşünüyorum da, en iyisi bi deniim ben.

[Pluton]

Kojiroh said:

isim yerine koysan nasıl olurdu diye düşünüyorum da, en iyisi bi deniim ben.

İşte o zaman tıklanmıyo sorun o =) onclick="location.href=''" yapılırda nedense inata bağladım toggie sağolsun gösterdiği gibi yptm

[Kojiroh]

Anaa evet çok ilginçmiş :p

[Mum_Chamber]

koysan da tiklanir yahu. padding'ini abartirsin, tiklanir

[di]

text-indent'i - vererek imaj'larin arkasina yazi gizlemek google'in sevmedigi birsey. Dahasi gereksiz birsey. Imaj koyuyorsan gidip alt ve title attribute'lari ile ne oldugunu yazacaksin ve a tagini img taginin disina koyacaksin.

Bu haliyle herkes icin daha anlamli hale geliyor (bot'lar, insanlar, hem bot hem de insan olanlar vs ... ).

[Brigand]

hem bot hem insan :D

[riglous]

toggie said:

bi de kaydırma hacki var. div'in bg'ye resim koyuyosun. bu resimde yanyana linkin hem normal hali hem de hover hali oluyor. üzerine gelince pırt yana kaydırıyosun resmi hover kısmı gorunuyo.

bu sekilde hover sırasında farklı bir resim yuklenmesi sorunu da kalkmıs oluyor, site yuklendiginde tek resim zaten acılacagı icin.

Bunun yerine, sayfasinin en altina div'in icine koyuyorsum hover image'i. Sonra div'i hidden yapiyorsun. Boylece sayfanin yuklenmesini aksatmiyor; tum sayfa yuklendikten sonra geliyor.

[Ractamainus]

toggie'nin dediği tekniğin adı css sprite.. ve özellikle trafiği yüklü olan siteler için çok önemli..

zira 2 resim yerine tek resim olduğu için, sunucuya giden request'i azaltıyor, hem de resmin toplam boyutu da küçüldüğü için (harcanan bandwidthle birlikte) sayfanın yüklenme hızını arttırıyor.

[deggial]

deggial'dan hayatın içinden css püf noktaları.


benzeri satırsal nesnelerin (inline) css'lerine
display:inline-block; eklerseniz, width ve height vermeniz daha kolay olur. Zira, width ve height değerleri, inline nesnelerde aslında geçersizdir.

benzeri block nesnelerinde geçerlidir. Inline nesnelerde, içerikteki yazı ne kadarsa, boyutlar da o kadardır.

Burada belki float:left kullanmak bu durumu gidermiş olabilir, bilmiyorum. Ama float:left kullanmak tehlikelidir, cesaret ister. Çok saçma sapan kaymalara neden olabilir. Float'lu nesnenin içinde bulunduğu ana nesneyi boş gibi gösterebilir. Dikkat etmek gerekir.