İçeriğe geç
ShiftDelete.Net
Haber ara/ SDN'ye SorGiriş
Haber Akışı SDNTV İnceleme Forum Yapay Zeka Akıllı Telefon Elektrikli Otomobil Oyun ShiftDelete.Net Global Teknoloji Haberleri Mobil Otomobil Donanım Savunma Bilim Sosyal Medya İnternet Giyilebilir Teknoloji Rehber Ürünler Son dakika Yazarlar
  1. Ana sayfa
  2. Topluluk
  3. Webmaster Dünyası
  4. Web Tasarımı
Web Tasarımı

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

Zee26.05.20127 cevap7.330 görüntüleme
#1
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>
Cevaplar
#2
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.
<p>denemeolmuyor= <span style="font-style:normal; color:navy; text-align:center;">denemeolmuyor</span></p>


Şu şekilde deniyebilirmisniz.
Zee Konuyu açan
#3
Denedim... dreamweawerde yazıyorum. Fakat spanda ortalamayı yapamadım olmuyor yani.. span ne için kullanılıyor?
#4
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...
#5
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...
#6
boşver spanı <div></div> kullan. Birde css de türkçe karakter kullanmışsın, -» .baslık {
#7
goldenlight dedi: ↑
boşver spanı <div></div> kullan. Birde css de türkçe karakter kullanmışsın, -» .baslık {
CSS seçicilerde Türkçe karakterle ilgili bir kısıtlama bulunmamakta.
#8
idn dedi: ↑
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.

Cevabını yaz

Cevap yazmak için giriş yap ya da üye ol. Eski forum kullanıcı adın ve parolanla girebilirsin.