<span>...</span> komutunda sorun var?

  • Konuyu başlatan Konuyu başlatan Zee
  • Başlangıç tarihi Başlangıç tarihi

Zee

Asistan
Katılım
8 Nisan 2010
Mesajlar
446
Reaksiyon puanı
4
Puanları
18
Bir class açtım <p>...</p> ve <span>...</span> komutlarınıda aynı sınıfa aktardım fakat span'da center komutu işlemiyor? Span 'nın ne işe yaraıdğını ve neden text-align:center; komutunun işlemediğini anlatabilir mi?

---------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-*****="Content-Type" **********text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

.baslık {
font-size:24px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
color:#000;
text-align:center;
}



</style>


</head>

<body>


<p class="baslık"> Deneme </p>

<span class="baslık"> denemeolmuyor </span>

</body>
</html>
 

skys

Profesör
Emektar
Müdavim
Katılım
20 Eylül 2008
Mesajlar
1,042
Reaksiyon puanı
11
Puanları
218
Yaş
34
HTML <SPAN> etiketi, isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlar.SPAN, DIV etiketinden farklı olarak bir satır içi (inline) element olduğu için metnin içinde kullanılması durumunda ilgili metni kesmez.

Kod:
<p>denemeolmuyor= <span style="font-style:normal; color:navy; text-align:center;">denemeolmuyor</span></p>

Şu şekilde deniyebilirmisniz.
 

Zee

Asistan
Katılım
8 Nisan 2010
Mesajlar
446
Reaksiyon puanı
4
Puanları
18
Denedim... dreamweawerde yazıyorum. Fakat spanda ortalamayı yapamadım olmuyor yani.. span ne için kullanılıyor?
 

idn

SDN Okuru
Katılım
2 Mayıs 2012
Mesajlar
2
Reaksiyon puanı
0
Puanları
0
Merhaba, <span> </span> tagı tek başına <p> tagı ile kullanımlarda çok fazla işlevi olmamaktadır. Fakat span tagını JavaScript ve Jquery kütüphanesi ile onclick,ondblclick,onmousedown... vb fonksiyonlar ile kullanabilirsiniz. Eğer CSS için kullanacaksanız <p> tagını kullanmak sizin için daha kolay olacaktır.

İyi çalışmalar...
 

greench

Asistan
Katılım
27 Haziran 2009
Mesajlar
152
Reaksiyon puanı
1
Puanları
18
span varsailan olarak inline bir lemettir bu yuzden text align komutu etki etmez. .baslik css kodunun icine display:block seklinde bir kod ekleyin. Bu buyuk ihtimalle cozecektir. Ama gorunumu istediginiz gibi olmayabilir. Spanin ne ise yaradigi konusunda bir cevap gelmis sanirim...
 

goldenlight

Öğrenci
Katılım
6 Eylül 2008
Mesajlar
64
Reaksiyon puanı
0
Puanları
0
boşver spanı <div></div> kullan. Birde css de türkçe karakter kullanmışsın, -» .baslık {
 

zıppırık

Asistan
Katılım
5 Temmuz 2011
Mesajlar
433
Reaksiyon puanı
1
Puanları
0
Merhaba, <span> </span> tagı tek başına <p> tagı ile kullanımlarda çok fazla işlevi olmamaktadır. Fakat span tagını JavaScript ve Jquery kütüphanesi ile onclick,ondblclick,onmousedown... vb fonksiyonlar ile kullanabilirsiniz. Eğer CSS için kullanacaksanız <p> tagını kullanmak sizin için daha kolay olacaktır.

İyi çalışmalar...



Span, arkadaşların dediği gibi inline(satır içi) elementtir. Sadece arasındaki veriyi ortamdan farklı kılmak için kullanılır. Örnek: Uzun yazılarda vurgu yapmak.
"SPAN" yerine "P" tagı kullanırsanız satır başı paragraf yapacaktır (Özelleştirilmediği durumlarda).

Örnek olarak,
"Lorem Ipsum, <span style="color:red;">dizgi</span> ve <span style="color:blue; font-size:16px;">baskı</span> endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı <span style="color:green; font-size:20px; font-weght:bold; background-color:#f00;">1500</span>'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."

Ekran çıktısı,
"Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır." şeklinde olacaktır.

Span sadece içerisindeki veri kadar alan tutar. Bu yüzden ortalayamamaktasınız. Bu elemente "width" verseniz dahi bu özelliği almayacaktır.
Eğer siz "SPAN" tagını özelleştirip(css) ortalamak isterseniz "display" özelliğini "block" veya "inline-block" yapmak zorundasınız.

Örnek olarak,
"Lorem Ipsum, <span style="color:red; ">dizgi</span> ve <span style="color:blue; font-size:16px;">baskı</span> endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı <span style="color:green; font-size:20px; font-weght:bold; background-color:#f00; width:300px; text-align:center;">1500</span>'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."

Ekran çıktısı,
"Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı
1500
'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."

Örnek olarak,
"Lorem Ipsum, <span style="color:red; ">dizgi</span> ve <span style="color:blue; font-size:16px;">baskı</span> endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı <span style="color:green; font-size:20px; font-weght:bold; background-color:#f00; width:300px; display:inline-block; text-align:center;">1500</span>'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."

Ekran çıktısı,
"Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı
1500
'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."


Düzeltme:
Ekran çıktılarını yazarken gerçeği ile özleşteştiremedim. Kodları deneyerek sonuca ulaşabilirsin.
İyi çalışmalar.
 
Üst