Posts Tagged ‘ div

Div i Flash Üzerinde Göstermek

Web sitesi yapmakla uğraşan kişilerin en büyük problemlerinden bir tanesi div lerin flash objelerinin altında çıkmasıdır. z-index i kaç yaparsanız yapın altta kalırlar.

İşte çözümü:

Kodunuzu aşağıdaki şekilde düzenleyin. Normal kodlara 2 ekleme yapmalısınız. <param NAME=“wmode” VALUE=“transparent”></param> satırı ve embed içindeki wmode=“transparent”  kısmı. Tabi üstte çıkacak olan div in z-index ini 1000 gibi bir şey yapmayı da unutmayın. Youtube videosu için kullanılmış halini aşağıda görebilirsiniz.

<object width="336" height="280">
<param NAME="wmode" VALUE="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/LtUhJFti95U&hl=en_GB&fs=1&rel=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/LtUhJFti95U&hl=en_GB&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="336" height="280"></embed>
</object>

CSS İle Ortalanmış DIV

Web 2.0 sunduğu üstün özellikleri sayesinde kısa sürede hızla yayıldı. Web 2.0 denince işin olmazsa olmazları CSS ve Divler tabiki. Bu iki sihirli değnek web sitenizde o kadar inanılmaz hareketler ve efekler oluşturmanızı sağlıyor ki güzel bir web sitesi yapacaksanız bunlar olmadan asla bitiremiyorsunuz.

Div ve CSS bir kez daha sayfanın tam ortasını bulmak istediğimizde yardıma koşuyor.

Bize gereken ve tagleri arasına yerleştirilmesi gereken CSS ve arasına yerleştirilmesi gereken Div.

İşte gereken CSS:

html, body {
height: 100%; /* IE düzeltmesi */
}
#tamorta{
width: 100px;
height: 100px;
text-align: center;
border: 1px solid #000;
background-color: red;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
/* 100 pixel olan div genişliğinin yarısı */
margin-top: -50px;
/* 100 pixel olan div yüksekliğinin yarısı */
}

İhtiyacımız olan Div ise daha kısa:

İşte dikey ve yatay olarak tam ortalanmış metin.

Kaynak: http://www.joe2torials.com/view_tutorial.php?view=37

 

Page optimized by WP Minify WordPress Plugin