Span / Div Farkı (?)

14-06-2009, 13:32:41

w3 için valid yapıyorum siteyi. Ancak bir yerde sorun var. div kullandığım yeri span olarak değiştirdiğimde aynı kodu kullanmama rağmen span da kutular içiçe ve yazının boyutuna göre büyüklükte div kullandığımdaysa kutular üst üste aralıklı ve belirli bir boyutta. Ayrıca div kullandığımda kodların sonuna <br /> kullanmıyorum span daysa kullanmak zorunda kalıyorum.

Css'deki kod;

.postdata {
    border-top: solid 1px #E0E0E0;
    border-left: solid 2px #EAC000;
    border-right: solid 2px #EAC000;
    border-bottom: solid 1px #D7D7D7;
    margin: 3px 5px;
    padding: 2px;
    align: center;
    color: #000000;
    background: #FAFAFA;
    font-size: 10px;
}

14-06-2009, 13:40:01

#2

Aykut

Div ile span'ın display özellikleri farklı olduğu için, biri yanyana, biri alt alta gözükür. Div'e benzer bir span kullanmak için, span'ın css kısmına display: block; eklemen lazım.

Div alanlar için, span ise ufak yazılar için kullanılır genelde. Örneğin bir yazının tarihini, başlıktan daha küçük ve farklı renkte, farklı özelliklerde tanımlamak istersen span kullanırsın ama başlık ve içeriğin olduğu kısmı div içine alırsın.

Bilmem anlatabildim mi

14-06-2009, 13:41:37

#3

RemiX

.postdata {
border-top: solid 1px #E0E0E0;
border-left: solid 2px #EAC000;
border-right: solid 2px #EAC000;
border-bottom: solid 1px #D7D7D7;
margin: 3px 5px;
padding: 2px;
align: center;
color: #000000;
background: #FAFAFA;
font-size: 10px;
}
burdakini <div class="postdata"> <span class="postdata">deneme </span> </div> kullanımımı yapıyorsun? Ozaman yanlış. üsteki css özelliklerini span icinde kullanıyorsun demek. span icin ayrı css kullan.
.postdata span {.............}

alttaki özellikleri bilmiyorsan öğren faydalı olur.
float: right;
overflow: hidden;
margin:10px 1px 10px 1px;
padding: 14px 1px 0 50px;

14-06-2009, 14:02:25

#4

Mr.Function

peki bu aynı kodu span da kullanamabilmem için ne yapmam gerekiyor ? Aynı şekilde görünmesi için. Yapa yapa öğreniyoruz

14-06-2009, 14:08:25

#5

Erturk

span.postdata {
border-top: solid 1px #E0E0E0;
border-left: solid 2px #EAC000;
border-right: solid 2px #EAC000;
border-bottom: solid 1px #D7D7D7;
margin: 3px 5px;
padding: 2px;
align: center;
color: #000000;
background: #FAFAFA;
font-size: 10px;
}

bu sekilde kullanabilirsin dostum. Ayrıca margin degerini her bolum için sabit tutarsan daha iyi olacaktır.

margin:1px 2px 3px 4px;

Bunların sıralamasını bilmediğini varsayarak onuda acıklamıs olayım.

1px: Üst boşluk
2px: Sag bosluk
3px: Alt bosluk
4px: Sol bosluk.

Çift degeri (margin:3px 0px) genelde alanı ortalamak için kullanırız ve buda margin:3px auto; ile yapılıyor.Eger px ile degeri netleştiriyorsan 4 degeride girmeni tavsiye ederim.

14-06-2009, 15:47:51

#6

Mr.Function

Erturk adlı üyeden alıntı: mesajı görüntüle

span.postdata {
border-top: solid 1px #E0E0E0;
border-left: solid 2px #EAC000;
border-right: solid 2px #EAC000;
border-bottom: solid 1px #D7D7D7;
margin: 3px 5px;
padding: 2px;
align: center;
color: #000000;
background: #FAFAFA;
font-size: 10px;
}
bu sekilde kullanabilirsin dostum. Ayrıca margin degerini her bolum için sabit tutarsan daha iyi olacaktır.
margin:1px 2px 3px 4px;
Bunların sıralamasını bilmediğini varsayarak onuda acıklamıs olayım.
1px: Üst boşluk
2px: Sag bosluk
3px: Alt bosluk
4px: Sol bosluk.
Çift degeri (margin:3px 0px) genelde alanı ortalamak için kullanırız ve buda margin:3px auto; ile yapılıyor.Eger px ile degeri netleştiriyorsan 4 degeride girmeni tavsiye ederim.

Tüm arkadaşların yardımı için teşekkürler ancak değişen birşey olmadı yine aynı şekilde. Kutuları yazının boyutuna göre ayarlıyor spanda, divdeyse otomatik belli bir boyutu var düzgün görünüyor, diğer türlü biri büyük biri küçük oluyor.